This is part 2 of making the great action bar in Unreal Engine, the first part can be found here.
In this post, we will be extending the widgets we created, for the skill tree and the action bar. We will allow player to drag a skill from the skill tree and onto the action bar.
To achieve this, we will be using functionality covered in this UE documentation.
Adding drag and drop to skill book
We’ll first add the drag and drop functionality to the Skill Book widget that we created in the previous post.
First, let’s create a new DragDropOperation blueprint, mine was called SkillDragWidget.
You can leave this blueprint completely blank, simply having this class is enough for us for now.
In reality, you could use the default Drag Drop Operation class, but it will be useful for us to distinguish the type using the class itself, which is why we create it.
Now let’s go to the Skill Definition from the skill tree.
From there, I want to be able to drag the icon, so I will add the event On Mouse Button Down.
So as you can see, when the mouse button is down, the function requests to detect drag.
Next, you will want to click on override function and override the OnDragDetected function.
There’s many ways to implement what we want, this is perhaps one of the simplest ways.
We create the skill drag widget by right clicking and create drag & drop operation.
Then specify the class to what you created.
For the payload, we will use the reference to self, i.e. the current skill item widget. Potentially we will have it be something else in the future – I am considering creating a full Skill class hierarchy in the future.
The Skill Icon class will be used as the default visual – this can be something else of your choice.
Remember how we set the icon dimensions?
These default dimensions will be applied in the default drag visual as its not bound to any other overrides.
Add On Drop effect to action bar
We previously created 2 widgets, the Action Bar Skill Widget and the Action Bar Widget itself.
We will provide the On Drop effect to the Skill widget as that’s where the skill will be dropped to.
So we will be dragging the skill from the skill window into this widget/icon essentially.
So first thing you want to do, is click the override button and override the OnDrop function.
First thing you want to do is cast the operation to Skill Drag Widget. This ensures that the dragged item is of a Skill payload type. In future, we may have items and other things dragged into the action bar.
Next, I grab the payload – the payload was set to the Skill Book Item Widget reference, so I cast to it.
From that widget, I am able to see the Skill structure, so all I need to do is assign that skill to this component and have the widget refresh itself.
That’s actually all that we need to do! We simply transfer the Skill data from one widget and add it to another.
Drag and drop skills from Action Bar
Now we can add skills to the action bar from the skill tree window. We want to allow players move skills from the action bar and place them in different position or remove them entirely from the action bar.
So, let’s go back to our Action Bar Skill Widget and we want to add a On Mouse Button Down event.
In a similar fashion to before, all we want to do when we press our button down is start detecting drag.
Now, click ‘Override‘ and select ‘OnDragDetected‘ in your functions.
As you can see, we will re-use the Skill Drag Widget class here. Remember to create this, right click in the event and type ‘Create drag & drop operation‘ then select the Skill Drag Widget for class.
The payload here will be the Action Bar Skill Widget – not the skill book item widget from before. We may want to consider wrapping payload differently, but this works for now.
The skill image is used for default drag visual – again, remember you can modify the dimensions on the Set Skill Image function call, when defining that icon.
This handles the drag, we now need to handle the drop operation.
Action Bar Skill Widget – Handle Drop Skill
We saw a part of this function earlier, let’s now complete the flow.
Let’s go in order what we’re doing here:
- Grab the operation and cast it to Skill Drag Widget, making sure this is a Skill related drop event
- Cast to Skill Book Item widget – this handles dropping of skill when adding from Skill Tree
- If the previous cast failed, we try cast to Action Bar Skill Widget
- We want to grab the reference from the previous Skill (null or otherwise) and promote it to local variable
- Clear the skill on old widget/action bar
- Set the skill on this action bar to the previous skill
The reason to promote it to local variable is in case we drop into same spot again it allows us to handle that in a simple way.
Drop skill to remove it
We can move skills from the action bar onto another action bar slot (covered above) and we can also move it onto the screen to remove it from the slot.
The way to achieve it is from the canvas widget that you should setup.
This canvas widget is essentially the HUD (Heads Up Display) for the player.
You will want to make sure that the canvas panel component has ‘Visibility’ set to visible, for it to detect the drop events.
Now, inside the graph view, you will want to override the ‘OnDrop‘ functionality.
You can ignore the ‘Handle Window Drag’ part as that’s allowing me to move my widgets around in the canvas. If you’re interested in that part too, you can find the details in this post ‘How to make draggable widgets in UE5‘.
The key part is:
So, we cast the operation to SkillDragWidget which confirms we’re dragging the skill out. I refactored the function to make it cleaner.
This function casts to ActionBarSkillWidget – note, if I drag skill from skill tree, I can ignore it, because its a different class.
If the cast is successful, that means we dragged and dropped a skill from action bar and we want to clear that action bar slot – so that’s what we do.
We set the Skill param to an empty skill and we reset its icon.
Other useful notes
How to add the player canvas widget to players view?
There’s multiple ways but I think the ideal way is to create a new Blueprint of HUD parent class.
Then create a Game Mode and link the HUD class to the one created.
You may also need to enable mouse cursor and events in your Player Controller.
You can link your game mode in your map via world settings -> Game Mode Override
