UMG全称为Unreal Motion Graphics UI Designer,是UE自带的UI设计系统。
新建控件/Widget
最好在工程中新建Widget文件夹,将所有的空间蓝图都放在此文件夹内,方便管理和查找。
新建控件蓝图的方式是右键——用户界面——控件蓝图。
命名最好为UMG_起头,后面跟不同的内容,比如玩家HUD,就是UMG_PlayerHUD。
控件蓝图编辑器
双击打开控件蓝图,进入编辑器,在屏幕主界面/视口周围,分布着不同的面板。
控制板中有自定义控件和UE提供的预制控件,将其拖到层级的其它控件上(或者直接拖进视口)即可生效。
层级相当于布局/Layout,PlayerHUD相当于根节点。
动画和时间轴后续再详细说明。
右侧是细节面板,显示选中的控件的信息。
右上角可以从设计器切换到图表区域,这相当于传统的蓝图图表。
控件蓝图剖析
控件在层级中有固定的父子节点,细节面板中插槽信息会随着父节点不同而变化。
控件的布局
拖动一个Image到画布上,然后再外观-笔刷中选择图像,会发现大小和图片大小不符,因为图片是作为画布的子节点存在,所以会默认跟随插槽中size大小,这时我们可以通过点选插槽中的大小到内容即可。
控件的核心事件
介绍利用图标中的蓝图让数据变动时可以实时更新UI界面。
蓝图中有三个默认事件:
事件预构造:和事件构造类似,只不过是在编辑器中生效。例如编辑设计器视口中的文本,直接用预构造即可,不必运行游戏就能查看更改效果。通常使用在嵌套控件或高级特性时实时更新内容时。
事件构造:在构造或创建控件时,会触发这个事件。
事件Tick:游戏每次刷新逻辑时,或者说游戏中的每一帧都会调用此事件。通常情况下不用,因为每帧执行消耗很大,赛车游戏中计时器往往使用这个,但是血条并不会每一帧变动,所以有些浪费。
我们都不用默认事件,而是自定义,使用类似数据驱动来更新界面,如果玩家血量/弹药等发生变化,我们才更新界面。
新建自定义事件,选中后添加浮点输入,重命名为New Value,代表屏幕上显示的新数值。
将文本细节右小角的是变量打勾编译,这样就可以在图表中看到对应文本的变量。
同样这样设置Ammo文本框,重命名,然后就都可以在图标界面以变量形式显示。
红框的两