The Unreal Motion Graphics

• This is the newest graphical user interface engine for Unreal.
  • Used to generate the Heads Up Display.
  • And the menu system.
• Sources
  • UMG UI Designer
  • The video lesson Your First Hour with UMG
• There is a primitive HUD in the game
  • I think this is older.
  • And you really should master the UMG system
• This is a very typical GUI system
  • The objects in this system are called Widgets
  • They are designed for the event driven environment.
    • So widgets like Button widgets are created with a callback event automatically.
  • They are also designed for a graphical environment
    • So container widgets like the Horizontal Box widget will handle the layout of the widgtes they contain.
  • There are Text widgets to display text
  • And Progress Bar widgets to graphically display values.
  • And Slider widgets to allow input.
  • There are Image widgets
  • There is even a Web Browser widget, so you can browse in game.
  • This is just a subset.
  • A full list of Widgets
• There is a special editor for designing the UI.
  • A designer area, for laying out the GUI
  • A Graph area for creating callbacks.
• Widget blueprints are different from Actor blueprints.
  • Right click in the Content Browser
  • Select User Interface
  • Select Widget Blueprint
  • 
• You can then layout your interface.
  • I have added
    • A frame (vertical box) to hold everything
    • A label at the top
    • A red, green and blue Progress bar
    • 
  • The vertical box handles
    • the geometry of everything inside
    • Each item is settable with respect to the box.
      • The text
        • Fills vertically (take up the entire slot provided for it)
        • And fills horizontally.
        • 
    • The placement on the screen.
      • Here the vertical box is anchored to the top left hand corner of the screen.
      • Located at an offset of (100,100).
      • And told to fit the items it contains.
      • 
  • I switched over to the Graph area
    • I added a custom Event: UpdateLightUI
    • You can add inputs to your event by the Details Panel
    • 
    • In this case, I added a vector
    • This will be for the light color in the cone.
    • Notice that there are variables for all of the elements.
    • 
    • So I am just going to set the percent of each element based on the input.
    • 
    • Note the use of Reroute Nodes to clean up the graph.
• I need to activate this menu, so I am going to Add a new Input Binding
  • Edit the Project settings
  • On the Input menu
  • 
  • Select Action Mappings, Add
    • Give it a name
    • Select a key
    • 
  • This will actually create a new event ResetMenu
• He discusses where to add this controls for something like this.
  • He was building a pause system.
  • Pause is not part of the player, or the level.
  • So he adds a Player Controler
    • This is documented here
    • It is the tie in between the pawn and the human player.
  • You an create a new player controller through the blueprint creation menu
  • 
  • You will need to activate the new player controller in the game mode.
  • 
• Inside of the new Player controller blueprint
  • I added the event ResetMenu, which showed up from the previous action.
  • 
  • We will use Q to toggle this menu up and down.
  • We need two different things
    • Has the menu been created in the game?
    • Is the menu up?
  • He does this with one variable, but I will use two.
  • First create the widget
    • This is done with Create Widget and fill in the class
    • 
    • We will store a reference to this widget in the controller, so
    • Drag off the return variable tab and select Promote To Variable
    • 
    • Rename this to ResetMenuRef
    • This stores a reference to the menu for future use.
    • The nice part is we can check to see if this is null so we don't recreate it after the first time.
    • 
    • Note that there are two instances of IsValid
      • A decision
      • A decision with control
    • So If I don't have an instance of the menu
      • Create one, save it and add it to the viewport.
      • Also mark my second variable, ResetMenuDisplayed as true.
      • 
  • Finally to use this
    • In my light cone object
    • Get a reference to the generic player controller
    • Cast that to the proper player controller
    • Get the ResetMenuReference
    • Call the UpdateLightUI function
    • 
  • I noticed two problems
    • If I change the light color before I pop up the HUD element, I get reference errors.
      • 
      • This makes sense, as I am attempting to reference something that was not created.
      • This is an easy fix, just make sure the reference is valid.
      • 
    • The second is that if I have hit the light when the item is down, it is not accurate until the light is hit again.
      • Change the pupup script to get the light and update it.
      • 
      • 
  • If I were to do this over again
    • I would add this element to the cone, where it belongs, not to the controler.