Creating Widget Templates

Every Widget Blueprint that you create with UMG is considered a User Widget that can be reused and placed within other Widget Blueprints. This allows you to essentially create templates for pieces of your UI that can be used within other Widget Blueprints. Not only will the visual aspects of the widget be carried over to the Widget Blueprint you place it in, but scripted functionality will also be carried over.

With some Blueprint Scripting, you could create variables for how your UI widget functions or looks that can be overwritten on a per instance basis. For example, in this How-to we will create a Button Widget Blueprint that we can use within other Widget Blueprints. We will create and stylize the Button but set it up in such a way that we can override the style when we place it in other Widget Blueprints. Lastly, we will customize what happens when the Button is clicked on a per instance basis (this is useful if you have a series of Buttons in a menu that you want to look and act the same but produce different results when pressed).

Steps

For this how-to, we are using the Blueprint Third Person Template with Starter Content enabled.

  1. Right-click in the Content Browser and create two Widget Blueprints, one called CustomButton and another called HUD. The CustomButton is a UserWidget that we create and use within our main HUD Widget Blueprint.

    UserWidget01.png

  2. Inside the CustomButton Widget Blueprint, delete the Canvas Panel, add a Button and Right-click on it and Wrap With a Size Box.

    UserWidget02.png

  3. For the Size Box, in the Details panel, change the Width Override to 300 and Height Override to 100. Optionally, you can also change the graph layout to Desired on Screen to get an idea of the actual size of the button.

    UserWidget03.png

  4. On the Graph tab, hold Ctrl and drag Button_0 from the My Blueprint panel, then drag off it and add a Set Style node.Select the option under the Variables > Apperance category, as the other deals with the color multiplier for the button background.

    UserWidget04.png

  5. Connect the Event Construct node to the Set Widget Style node, then Right-click on Widget Style and Promote to Variable.

    UserWidget05.png

  6. Name the new variable ButtonStyle and Compile, then set the Normal style Image to any texture.

    UserWidget06.png

  7. Right-click on the Normal section and select Copy, then Right-click and Paste to the Hovered and Pressed states.

    UserWidget07.png

  8. Expand Hovered and change the Tint color to any color (such as yellow).

    UserWidget08.png

  9. Also for ButtonStyle, check the Editable and Expose on Spawn checkboxes. This will allow us to modify the values of this variable from other Widget Blueprints when we use this Widget Blueprint elsewhere.

    UserWidget08b.png

  10. Select the Button_0 variable, then click the + sign for OnClicked.

    UserWidget09.png

  11. In the MyBlueprint panel, click the + Event Dispatcher button to create a new Event Dispatcher and call it ButtonClicked.

    UserWidget10.png

  12. Drag ButtonClicked into the graph and select Call, then hook it up to the OnClicked event. What this allows us to do is create unique scripted functionality whenever the button is clicked. If we had multiple instances of this button and only used the OnClicked event, each instance would respond and execute the same functionality. However, by creating an Event Dispatcher, we can then implement events on a per instance basis and have only the button that was actually clicked on fire off additional script.

    UserWidget11.png

  13. Open the HUD Widget Blueprint, then add a Vertical Box to the Canvas Panel and resize similar to below.

    UserWidget12.png

  14. From the Palette under User Created, add three Custom Buttons to the Vertical Box.

    UserWidget13.png

  15. On the Graph, select CustomButton then click + for the Event Button Clicked. This is the Event Dispatcher that we created inside our CustomButton Widget Blueprint and will respond whenever this particular button is clicked.

    UserWidget15.png

  16. Click the + for Button Clicked for the other buttons and connect Print String nodes up to each, printing different text. In our example, we are printing to the screen each time one of the buttons are clicked, however, depending on the button that is clicked, different text will be printed to the screen. In a real-world example, you could have each button open up a different menu, change different game settings, or make modifications to a player character.

    UserWidget16.png

  17. From the Level Editor Main Toolbar, click Blueprints and Open Level Blueprint.

    UserWidget17.png

  18. Right-click and add an Event BeginPlay then connect it to a Create Widget node, with the Class set to HUD.

    UserWidget18.png

  19. Create and connect an Add to Viewport node, then Get Player Controller to Set Show Mouse Cursor (set to True).

    UserWidget19.png

  20. Compile and close the Level Blueprint, then click Play to play in the editor.

End Result

When playing in the editor, each Button is automatically styled based on the defined ButtonStyle variable. When clicking on each of the buttons they execute a different portion of the script, as the Event Dispatcher is called and the corresponding ButtonClicked Event is called. Optionally, since our ButtonStyle variable is exposed and editable on spawn, we can override the style of the button in whatever other Widget Blueprints we place it in. This is useful if you have some kind of animation or other complex scripted logic that you didn't want to re-create each time, by creating it as a UserWidget, you can reuse it in any other Widget Blueprints without additional work.