UE4 uses UMG

01 Overview

purpose:

• UI layout division ideas
• UI production structure

Company workflow:

• UI layout construction
• UI function (blueprint)
• Add animation effects to the UI

This operation:

• Learn about UMG editor
• Make the first UI
• Run UI

02 Realization

• New control
  Drag and drop a picture control, and then load the background image resource
  
  Lock: the picture will not be selected
• The following is the setting of the progress bar
  
• Create a new level, open the switch card blueprint,
  create a new control, and add it to the viewport
  
• The running result graph
  is just to implement the interface, without adding any functions, (just add the text control directly, so I won’t go into details)
  

03 The role of anchors

When designing the interface, if you want the interface to be more adaptable to zoom, you can set anchor points for the controls, as shown in the figure below, each control has an anchor point (big white flower), which can be dragged and positioned at will.