Creating a Simple Reusable Button Widget with Unreal Engine Blueprints
Creating reusable widgets is good practice for two main reasons: efficiency and consistency. Rather than styling every button individually, using a method like this allows you to style once and maintain consistency through any changes.
If you don’t already have a project set up, we’re going to do that first. If you have a project set up with menus already and just want the button widget, skip ahead to the second section.
Note: I’m using the Third Person Game base project in Unreal Engine 5.2.0. Yours may look slightly different if not starting from the same project, but the same principles will apply. Some basic understanding of the editor is assumed.
Project Setup
- First set up a UI folder for widgets and create an empty widget for the menu. Mine will be called “BaseMenu”.
- Open up the level blueprint and add the following to the BeginPlay event. The “Create Base Menu Widget” action is created using the Create Widget action, and selecting the BaseMenu widget class we created in the previous step. Make sure Show Mouse Cursor is checked.
This will add our BaseMenu widget to the viewport, freeze the player controls, and show the mouse cursor, allowing the player to use the menu.
Test that it works by opening the playable preview editor. You should be able to see the cursor and move it around without anything else happening.
Setting Button Text
- Create a new widget — mine will be called “TextButton_Widget” — and open it up in the editor.
- From the palette menu, drag in a Button widget and add a Text widget. Rename the Text widget something like “ButtonLabel” and make sure that IsVariable is checked.
- Next we’re going to create the blueprints that will set the button text from the BaseMenu widget. Open up TextButton_Widget’s graph editor, and create a variable for the text (mine is “Label_Text”) with a type of Text.
- In the details panel, check Instance Editable and Expose on Spawn. This is what will allow us to set the text later.
- Drag the ButtonLabel and LabelText variable getters onto the graph.
- From the ButtonLabel getter, drag out the SetText function and connect the two variables. Connect the SetText function to the Pre Construct event.
- Back in the BaseMenu widget, add a Vertical Box panel. To this newly created panel, add as many of your own TextButton_Widgets as you’d like — they can be found by searching the palette or under the User Created heading.
- Select any of the TextButton_Widgets and check out the Details panel. Under Default, you should now be able to set the LabelText variable we set up earlier — if you don’t, go back and make sure that both Instance Editable and Expose on Spawn are checked.
These buttons can be styled and have OnHovered/OnUnhovered events like any other buttons. See below for an example. This blueprint plays a sound effect and changes the colour of the text when the user hovers over the button, and changes the text back to the original colour when it’s unhovered.
Setting Events
Wait — but how are we going to set up click events for our custom buttons?? By creating an event dispatcher, of course.
- Go back to TextButton_Widget, and in the Details panel add an OnClicked event.
- Back in the graph editor, from the main blueprint menu, add an Event Dispatcher. I’m naming mine “ClickDispatcher”.
- Drag it from the side menu onto the graph, select the Call option, then connect it to the OnClicked event.
- Back in the BaseMenu, select one of your TextButton_Widgets. Under Events in the Details panel, you should now see “Click Dispatcher” as an option. Click the + to add the event.
- Now you can set custom click events from the menu — to test it out, you can attach something simple like the Print Text function.
Congrats! 🎉 You now have a basic button that can be used in different types of menus. In the next few tutorials, we’ll go over some more complicated styling strategies, and then use our widgets to build a crafting menu. I’ll also be posting a tutorial on how I use Midjourney to rapidly prototype UI designs. See you then!
