UMG HotBar / SpellBar system - Drag N Drop

Hi Guys,

I’m fairly new to the engine maybe a week or so, and have been struggling with the hotbar/spellbar system via UMG.

Maybe there is a better way to implement this vs UMG but atm I can only click the button with my mouse for it to work.

Under MyCharacterController I have an action input which is [1] → cast to gamehudwidget → call HotBarButtonClicked.

Essentially what I want is a drag and drop system with spells, tooltip, and be able to use keybinds to make them work.

My UMG Buttons consist of a Button, Image, and a ProjectileStruct (Spell Class, Tooltip, and Image), any guidance would be appreciated as I have been stuck on this for over 10hours.

Hey Venros,

Welcome to UE4!

I would greatly suggest you go to the learn tab in the launcher and have a look at “Inventory UI with UMG”. This resource will get you started on the right path.

Hope it helps :slight_smile:

Hi, I have went over the docs for the hotbar but the thing is all it does is enable/disable the button it self. The way I have it set up is I would call the widget’s → projectile → castProjectileFunction (Each button is a bucket of button, image, and projectile object).

This way even if I drag and drop that specific widget, it will hold its unique spell. But currently I cant call a widgets function via keypress, and the only thing that works is clicking it with a mouse click.

I’ve created a quick little demonstration of how to implement this.

First step, I created a spell widget which triggers a print screen on click.

Then I created some slots on the hud to put the spells into

I use borders because I will be checking the child widget once hotkey is triggered. Border slots can only have one child at any time. Since they consume input I just set their visibility to self hit test invisible, so the child can still get input. Then I made some functions in the hud to take care of the input action sent by the player controller.

And this is my player controller setting up the actions to cast the spells.

With this setup, I can click the spells to cast them, as well as hitting 1 or 2 on the keyboard.

I appreciate the time you took to write this up, i tried implementing the same thing and still nothing from keyboard going through to cast spell. I even tried going under Spell->button-> interaction-> focusable (tried both on and off).

You have Get Child At : 1 (what is 1? I simply used the spell): here are a few screenshots:

Am i missing something here?

Keep an eye on what each element is. for me 1 is a border that contains a spell widget.
So,

1->child at index[0] returns a spell widget.

For you you have 1 as a border that contains a spellBarSlot widget. From here you call:

SpellBarSlot_C_1->Button_1235

then cast the button as a spell bar sot widget. (I imagine that fails) Then you call cast spell on the button. Which would fail if the button does not have that function. For that reason you don’t need a button in the widget at all. You can just have a image and implement on mouse down (note the function in the first image)

Does your pressing hotkey 1 print out at all? if not, what does the player controller look like since this is what should be sending the input to the HUD

Hey,

How did you target the border though? i renamed mine 1 but under event graph I dont see it. Also the reason why i added a button was that it wouldn’t let me add an image to root.

As for the input , regardless of how badly I screwed up the bp, clicking on the actual button with mouse click prints out the appropriate string, but pressing 1 on keyboard does nothing (i even tested pressing 1, and see if it actually works via print string and it does in fact trigger, if used on anything but UMG).

here is a screenie:

HUD is of type GAMEHUD which contains the hotkey1 function.

In order to target anything you create in UMG that you can’t already access by default, you need to set the “is Variable” check.

If you take a look at my “hud.png” image I linked above, you will notice my currently selected widget (Spell_C_63) has the “is Variable” flag already checked (the little checkbox that is next to the name).

You can do that on widget components that do not have that value enabled by default (such as text and border) and use those variables in the event graph or functions.

In order to add the image to root, I simply deleted the canvas that was below it, then just dragged the image widget onto it. That’s how I made the Spell widget, the only thing it contains is an image (and a text variable, but mainly the image).

=/ I changed it to variable and still nothing working, I even created a new project and it is still not working. I’m using 4.7.3 maybe its a bug but I have been stuck on this issue for over a week, with multiple iterations. maybe you can send me your BPs?

Here, I made a project for you with updated blueprints ( just to make it prettier because the 1 and the 2 were not lined up on the HUD and it was bothersome ).

You can click the spell on the left for Pew Pew and the spell on the right for Wep Wep. You can also hit 1 for Pew Pew and hit 2 for Wep Wep.

Project

It is exactly like mine lol, ill assume its just a bug on my end. I will build on your BP and see if it works in my other projects. ty again.