Let's Build the RPG! - 32 – UE5 Ability UI Tutorial Part 1 – UMG Hotbar Action Bar

In this episode we set up a UI hotbar (action bar) for gameplay abilities.

By the end of this series of 4 episodes (plus a bonus fifth episode), you will have a fully functional UI hotbar capable of activating any gameplay ability (based on the gameplay ability system we started in episode 26), as well as an ability inventory where it's possible to drag and drop abilities from one slot of the hotbar to another, or into the ability inventory.

Unreal Engine 5 Ability UI Tutorial Part 1 – Ability Hotbar Action Bar
Unreal Engine 5 Ability UI Tutorial Part 2 – Ability Pickup Actors
Unreal Engine 5 Ability UI Tutorial Part 3 – Ability Activation and Deactivation
Unreal Engine 5 Ability UI Tutorial Part 4 – Drag and Drop with Ability Inventory
Unreal Engine 5 Ability UI Tutorial Part 5 – How to Create Simple Ability Icons

00:00 Intro
00:31 Today's Goals and Key Concepts
02:24 Creating UI widgets
03:21 Creating new Player Controller
05:29 Creating the heirarchy of the Hotbar Slot widget
10:48 Variables and button styles of the Hotbar Slot
16:50 Hotbar slot event graph setup
21:27 Ability Hotbar setup to contain each hotbar slot
25:51 HUD setup
27:04 Integrating the HUD with ThirdPersonCharacter
30:58 ISSUE FIXES: Color of Buttons, labeling of buttons
32:40 Conclusion and preview of next episode

New episode released every Saturday morning!

Direct References

UMG (Unreal Motion Graphics) Designer:

[markbay]

Great stuff. I like how fast yet thoroughly you present the information.

[Arch_Mage]

I came across this when trying to figure out a hotbar system, and it has been incredibly informative! I'll probably be seeing your videos more in the near and far future.

[holdon]

I have a character blueprint called BasePlayer_BP. I cant do the cast at 4:34 and 17:11. I'm trying to bind BasePlayer_BP to the Get Player Character node, but BasePlayer_BP doesn't appear in the options. Can you help me?

[Sympho]

Little tip for achors - if you select the element, go to anchors selections. Press and hold ctrl + shift and than click where you want to place that element. It will set anchor+position to that place

[cyberblackbears]

Thanks for breaking down this challenging topic!

[Yggdrasil]

Very nice tutorial. One thing to keep in mind, Binding a UI component runs on tick. You may wish to set up some kind of event dispatcher for when the UI needs to update.

It is not very important for a small project like this, but something to keep in mind when you get to the health and magic systems.

[rchavz]

Wow. Pretty cool. Thank you for this awesome content 😁

[paulshelkov]

UI can be an exciting part, too... I used to spend hours optimizing and beautifying my UI in World of Warcraft. I've heard other people say they dread it... and maybe they haven't considered the creative element that can make it exciting.

I suppose a lot of that comes down to pure 2D art, but there's a lot that can be done with giving dynamic feedback and communicating the feel of the game.

[unsolvedbc]

Thank you! The way you explain things is perfect.

[TheGeezaz]

at minute 10 I recommend not to bind but to use custom event.

[FBS-Shaggy]

What do I have to do to make it work keyboard input and mouse input at the same time?

[MaxStudioCG]

il use this series to learn i like skills on a character :D :X

[manuelgarcia]

4:34 I tried to cast to the third person character but it does not populate. Just before this video I converted my mannequin to a meta human so I don't know if that is the issue. I would really love to follow your tutorial if you have the answer.

[jamielu]

Could I add Weapons, knifes or Something in the Inventory?

[tomraitener]

Using an overlay component instead uniform grid panel in the slot ?

[MaxStudioCG]

hey man im back at this episode over and over again (i dont know even i set the buttons stiles and all that correctly i still get kinda black buttons and the image when i pickup is darker i barely see it under that black ...rechecked over and over all the buttons are corectly setup ... i dont understand why

[dont_smoke_here]

im new at Unreal at this tutorial is good, all working, only thing is that when i changed player controller to my player controller, my player stopped walking, did i miss something ?

[GrabbyBuns]

Anyone else have the issue where you can't find the reference between the HUD reference and the AbilityHotBar reference?? Im sure I've just made a tiny mistake somewhere but i cant find it lol

[kyneqt]

Hi man, thanks for the tutorial, i keep getting this error, BP Third Person Character does not inherit from 'Anim Instance' ( Cast To BP_ThirdPersonCharacter would always fail). u know how to fix it?

[MaxStudioCG]

hey man ..any chance to make a bonus video for this GAS system with a timer for each button when using a skill to take some time untill recharge ? :D that will be nice for player not be able to spam continuosly the skills because that kinda OP D: