Widget Blueprints

In order to start working with Unreal Motion Graphics, you will first need to create a Widget Blueprint as seen below.

  1. Click the Add New button inside the Content Browser, then under User Interface, select the Widget Blueprint option.

    NewWidgetBlueprint.png

    You can also Right-Click in the Content Browser instead of clicking the Create Button.

  2. A Widget Blueprint asset will be created in the Content Browser which you can rename or use the default name for the asset.

    RenameWidgetBlueprint.png

  3. Double-Click on the Widget Blueprint asset to open it up in the Widget Blueprint Editor.

    Click for full view.

Widget Blueprint Editor

By default, the Widget Blueprint Editor opens up on the Designer tab when a Widget Blueprint is opened. The Designer tab is the visual representation of the layout and will give you an idea of how the screen will appear in-game.

Click for full view.

Number Window Description
1 Menu Bar The common Menu bar.
2 Tool Bar This contains a number of commonly used functions for the Blueprint Editor, such as Compile, Save, and Play.
3 Editor Mode Switches the UMG Widget Blueprint Editor between Designer and Graph modes.
4 Palette The list of Widgets that you can drag-and-drop into the Visual Designer. Displays any class inheriting from UWidget.
5 Hierarchy Displays the parenting structure of the User Widget. You can also drag Widgets into this window.
6 Visual Designer This is the visual representation of the layout. Widgets dragged into the Visual Designer can be manipulated in the window.
7 Details Displays the properties of the currently selected Widget.
8 Animations This is the animation track for UMG which allows you to keyframe animations for your Widgets.

The Visual Designer window by default is 1:1 scale however you can hold Control and Mouse-Wheel up to zoom in further.

The Graph tab of the Widget Blueprint Editor is pictured below.

Click for full view.

The Graph tab functions just like the default Blueprint Editor. For more information on the basic functionality of the Graph tab, refer to the Graph Editor Tab documentation.