[Unreal 4] Introduction and use of UMG components (Common common components)

Copyright statement: This article is an original article of CSDN blogger "I want to make a game while I have more hair". It follows the CC 4.0 BY-SA copyright agreement. For reprinting, please attach the original source link and this statement.
Original link: https://blog.csdn.net/weixin_37658157/article/details/125386345

Readers, before contacting UMG, it is recommended to consult the official documents:

1. Widget Type Reference https://docs.unrealengine.com/4.27/zh-CN/InteractiveExperiences/UMG/UserGuide/WidgetTypeReference/
2. UMG UI Designer Quick Start https://docs.unrealengine.com/4.27/zh-CN/InteractiveExperiences/UMG/QuickStart/
3. UMG Interface Designer User Guide https://docs.unrealengine.com/4.27/zh-CN/InteractiveExperiences/UMG/UserGuide/

[Introduction and use of UMG components] other article navigation:
Panel panel components: https://blog.csdn.net/weixin_37658157/article/details/125603119

Border border

The Border component can mount at most one sub-component, which can set image and color properties, and can set padding for sub-components.

Button button

Unlike Unity3D's Button, UMG's Button can mount at most one sub-object (I still don't understand why it should be designed like this? I hope you can enlighten me ), to break this limitation, you can mount a CanvasPanel under the Button, which will be introduced later CanvasPanel will be mentioned.
The most important functions of Button are of course the functions of clicking, pressing, lifting, etc. These are similar to Unity3D, so I won’t repeat them here.

CheckBox check box

The check box has only one event, the OnCheckStateChanged event, which is called when the check state changes.
To be honest, UE4's support for check boxes is very weak. There is neither CheckBoxGroup nor check box and radio box switching options. It only provides selected/unselected/undetermined style configurations. In the actual development process , it is better to use Button+Image to write a set of check box logic, so that it can respond to complex business needs more flexibly.

image image

One of the most basic and common components, focus on the following points:

1. Tint dyeing / Color And Opacity Color and transparency
   Image.Tint and Image.Color both add superimposed colors to the image, and I don't understand why there are two places where the color can be set.
2. Draw As Drawing method
   (1) None No drawing
   No image is drawn in this mode.
   
   (2) Box Jiugongge
   In this mode, the image is stretched into Jiugongge. When switching to this mode, Margin will appear below, and Left/Right/Top/Bottom represent the offset degree (0~1) of the four lines in the left picture below. The corners are not stretched.
   
   (3) Border Margin
   in this mode is equivalent to specifying the thickness of the four sides (0~1). As for whether the edge is filled with tiling or stretching, the mechanism is still uncertain. It is found in the experiment that when the thickness is greater than When it is 0.5, it will be stretched or even flipped, and when it is less than 0.5, it will be tiled. I hope people in the know will enlighten me.
   
   (4) Image
   In this mode, you can choose the tiling method of the image, which are horizontal tiling, vertical tiling and horizontal and vertical tiling, which are relatively simple and will not be described again.
   

Named Slot named slot

YouTube Tutorial: https://www.youtube.com/watch?v=IxVfdthJYTs (Science Online)

In fact, this component is to solve the problem that the custom blueprint cannot be attached to subcomponents when it is reused. For example: now there is a custom blueprint called SlotHUD. When we want to attach a Text to the SlotHUD, it will prompt Unable to mount:

Now we make a slight change and add the Named Slot component (located in the upper left corner) in the SlotHUD blueprint:

At this point, you can happily add any component you want to the NamedSlot node:

Note that NamedSlot is only used as an auxiliary node However, it does not have any attributes. When you click on the Details panel, you can only see that the attributes of the NamedSlot are consistent with its parent node (the attributes of the SlotHUD in the above figure are consistent with the attributes of the NamedSlot), so the NamedSlot will not be the same as other in the blueprint. If the component has the same name and is automatically renamed, the name should not be used to directly obtain the NamedSlot in the code to prevent the duplicate name trap.

Progress Bar progress bar

(1) Set the filling value and filling direction
Just set Percent and BarFillType, there are five different filling directions to choose from.

(2) Marquee effect (Marquee, translated as moving subtitles)
After setting the image of MarqueeImage and checking the Is Marquee option, it will take effect. This is a rather interesting function, but in actual game development, revolving doors are often used to display text, and this function seems rather useless. up.

Text text

One of the most basic and common components, it is relatively simple to use, you can set the text font size, typeface, word spacing and color, and you can also set the stroke (Outline Setting) and projection (Shadow Offset - shadow offset, Shadow Color - shadow color ), it is worth mentioning that it also supports strikethrough (Strike Brush) and the operation of converting all English text to lowercase or uppercase (Transform Policy).

Rich Text Block Rich text block

YouTube Tutorial: https://www.youtube.com/watch?v=msy7bRDpKF4 (Science Online)
Official Tutorial: https://docs.unrealengine.com/5.0/zh-CN/umg-rich-text-blocks-in -unreal-engine/

I have to say that the rich text block is one of the few components in UE4 that can be better designed than U3D. It can not only customize the label style, but also support the mixed layout of graphics and text (U3D needs to write a little code to achieve it), as follows How to use it:
(1) Customize the label style
Drag the RichTextBlock directly into the editor, and you will find garbled characters after filling in the text in the Content:

this is because the rich text of UE4 adopts the method of Text Style Set (Text Style Set) To manage the style data of rich text, if the text style set is not specified, garbled characters will appear.
First, let’s create a Data Table:

Of course, you can also right-click to create one in the Content Browser:

Then select a structure of type RichTextStyleRow:

Double-click the newly created Data Table, click Add to add a new style, and rename it to style1 (case is not Sensitive), Font Family must be specified.

If there is no Font Family option in the project, you can turn on the Show Engine Content option to use the engine's built-in Font Family.

After creating the Data Table, go back and set the Data Table for the Text Style Set under Appearance of RichTextBlock, and enter in Content:

<style1>这是一段文字</>

PS: If you change the style name to default, it will be used by default when there is no label. For example, the following two contents are equivalent:

<default>这是一段文字</>
这是一段文字

(2) Mixed graphics and text
Have you noticed that there is a Decorator Classes item under the property Appearance of RichTextBlock? This is the genius of UE4, which supports adding N decorators to an existing Data Table, so that it can support more extended functions. If you want to achieve mixed layout of images and texts, you just need to add a picture decorator blueprint class to Decorator Classes (see RichTextBlockImageDecorator.cpp for details). The process of adding a decorator is as follows: create a new Data Table, the type is RichImageRow
:

follow the above (1 ) is similar, create a new style, but the style configured now is not text, but a picture:

Then, create a new blueprint class that inherits RichTextBlockImageDecorator:

specify the Data Table just created for this blueprint class:

Finally, return to the RichTextBlock component and add the Created decorator blueprint class:

The properties supported by RichTextBlockImageDecorator are (note that there can be no spaces before and after the equal sign):

<img id="样式名" strecth="拉伸值" width="宽度值" height="高度值"></>

In the experiment, it was found that the strecth attribute seems to have no effect, but the source code does have logic for parsing the strecth attribute, and the reason is unknown for now.

Slider

The most important callback of the slider is OnValueChanged. The current value, the maximum value, the sliding direction, and the color of the slider and the slider can be adjusted on the property panel, which is relatively simple.
It is worth mentioning that the length of the slider can be achieved by adjusting the length of the entire component, but the width must be adjusted by Bar Thickness. The length and width of the slider is realized by adjusting the Image Size of the picture to which it belongs. See the picture: the

design of this component is not very scientific. The slider and the slider should be designed in two components, otherwise once the slider It is more troublesome when special handling of some positional relationships is required.