UMG: Unreal Motion Graphics
What is umg?
UMG in Unreal is the abbreviation of Unreal Motion Graphics.
The picture above shows the display information of blood volume, energy, ammunition volume and other things about the UI, called UMG.
What can umg be used for?
1. Display some prompt information, such as the amount of ammunition above. When our bullets run out, we may not expect that it is because there is no ammunition and the bullets cannot be fired, but after seeing the above prompts, we can clearly know, oh, There's no ammunition left. It’s time to replenish ammunition. Secondly, the Widget component can be run.
2. Use this UI to handle some automated things, such as rotating objects in batches and replacing material balls in batches. Note that running this Widget does not require running the game.
How to use UMG.
Here is how to use this component for UI display.
1. Set UI layout
Place the information or buttons that need to be displayed where in the viewport. You can imagine that there is a piece of glass. We will put this piece of glass in front of the camera. In this case, we can paste some patterns on the glass and you can see it directly through the camera. These patterns are often referred to as filters, but now those patterns have become buttons or text, and the glass has become a canvas. This is the layout of the UI.
2. The bind function updates UI information
Of course we don't want those prompts to be static, so we need to update some information that will change, such as the current status and the amount of ammunition.
3. Add UI to the viewport
Just put this piece of glass on the camera. That is to say, add this component to the viewport.
It is relatively simple to add UI to the viewport in part of the content, because they are all fixed routines, while designing UI and bind functions are relatively more complicated because their forms are very changeable, but they remain the same. No matter how you change it, it will never break away from the two parts of drawing UI and bind function.
How to draw UI on widget?
UMG is usually composed of Edito Utility Widget components.
This component has a Designer on which we can freely draw the UI we want, and a chart for data updates.
1. Add some buttons and some text
UI analysis:
i.UI elements
First, a VerticalBox is used. The elements inside have one column, but can have many rows.
For the above picture, only look at the first column, because as long as the first column is understood, the rest is just copy and post.
The child of VerticalBox is the HorizontalBox horizontal Box. The elements inside have only one row, but there can be many columns. Here, the horizontalBox has two elements and two VerticalBoxes, so the two VerticalBoxes are arranged horizontally, and then the first VerticalBox is placed in Text , the second button, any box can be placed in the horizontal box, because there is only one element in it, so whether it is a vertical or horizontal box, it can definitely store one element.
ii.UI cloth
There is something with a petal on the left side of the UI, which is called an anchor. As the name suggests, it is to fix something in one place, so it is to fix the UI of the painting at the left position, 122 from the left side of the screen and 471 from the top. If the screen is zoomed, the UI in the picture will be resolved along with the screen. It changes with the change of the rate, but if the screen shrinks very small and the left side is less than 122, then the UI will be blocked because the left side of the screen is already less than 122.
Setting the anchor point is also very simple. You can set the drawing point on each sub-level of the CanvasPanel (canvas). Select its sub-level, and the interface as shown below will appear in the property bar on the right. The position of the anchor point is The square and rectangle positions below. These are some preset positions, which are usually enough. The details panel has many settings, but they are basically about position, color, state, value, style, and events.
Rough types of UI elements (commonly used)
Button class: 1.Button 2. Checkbox 3. Slider
Prompt class: 1. Progress Bar (ProgressBar) 2. Text (text) 3. image (picture)
Input class: 1.SpineBox 2.textbox 3.EditableText
Layout class: 1.verticalBox 2.Horizontal Box
2. The UI can not only be drawn, but also keyframed
Here we use text and buttons to create a UI as shown below.
There is a timeline below the widget editor. Is this the place to animate the UIkey? You may be curious, why do you need to animate uikey? Have you ever played CF? When I press the tab key, a panel will pop up to record the data of both the enemy and ourselves. The process of popping up this panel can be regarded as playing the animation of the panel, quickly and easily from a place you can't see. Move to the center of the screen. This is the ui animation. Next, we can give a ui animation to the heathy and power progress bar keys on the left. The final effect is that they will appear when I press the Tab key and disappear when I press it again.
First, start the Key animation. I will introduce the logic of the key in the information of updating the UI.
1. Add an animation track and give it a good name: InfoOpen, otherwise the corresponding animation will not be found in the end.
2. Move the VerticalBox where Heathy and power are located out of the canvas, key frame
At this time, the UI animation is designed and the UI is drawn. Next we update the UI information.
How to update information in the UI (intra-component updates vs. between-component updates)?
Add a first-person template. When the robot fires a gun, the amount of ammunition is reduced by one. The amount of ammunition is updated in the text box of the amount of ammunition. After jumping, the power is reduced by 0.1. Pressing the F key simulates injury, and Hp is reduced by 0.2.
There are two ways of thinking:
1. Because ammunition, power, and HP are all related to the robot, you can create three variables in the robot's blueprint as the three attribute values of the robot, and then pass the reference of the robot to the component and put the two progress bars Bind a text box to the three variables of the character. This approach is easy to implement but consumes system performance, because in each Tick, it will ask whether the three attributes of the robot have changed. So the performance consumption is very large.
2. Because ammunition, HP, and Power all change under specific events, so bind an event. When the robot wants to do these things, it will notify the widget which attributes have changed. Please update. Doing so will greatly improve the efficiency of the widget. Reduce the loss of performance.
Use method one:
1.1 Create three floating-point variables, danyao, power, and Heathy, and update the three variables respectively after shooting, jumping, and pressing the F key.
power variable
Heathy variable
power variable
1.2 Pass the first-person blueprint class into the widget as a reference
1.3 Bind these variables in the widget.
In this case, we can update the UI information by modifying the variables.
2. Create an event chart, bind events for the first-person blueprint to call, and create custom events to update values.
2.1 We need to access each component and set the value through the component method, so we need to use the two processes and text as variables.
2.2 Create three new event dispatchers, bind three functions for the template blueprint class to call, and create three custom events to update UI information.
2.3 Call the bind event after each action. Notify the widgetcontroller of the action being taken.
How to display ui information output to the viewport?
Fixed routine
The call function in the above node requires a blueprint component as target input.
Then don’t forget to set initial values for Heathy, power, and danyao. The values of proccessbar are all less than 1. In addition, you need to initialize them in the widget’s construction script. Otherwise, when the three variables are not updated numerically, the three ui The display is wrong because there is no value.
Next, let's start playing the animation. The process of playing the animation is the same as the second method of updating the UI above.
1. Create an event dispatcher, bind a custom event, and start playing the animation.
2. Event triggers to call playanim
