ue4之UMG_ue4 umg

UMG：虚幻运动图形

什么是umg？

虚幻中的UMG就是虚幻运动图形的简称。

再上图中就是血量、能量、弹药量的这些显示信息等等一些关于UI的东西，叫做UMG。

umg可以干嘛？

1.显示一些提示信息，比如上面的弹药量，当我们的子弹打光了，我们可能没想到是因为没有弹药了，不能发射子弹了，但是看到上面的提示就可以清楚的知道，哦，是没有弹药了。要赶紧补充弹药了，其次Widget这个组件是可以运行的。

2.使用这个UI处理一些自动化的东西，比如批量旋转物体，批量替换材质球，注意运行此Widget是不需要运行游戏的。

如何使用UMG。

在这里介绍的如何使用这个组件进行UI显示。

1，设置UI布局

将需要展示的信息或者按钮放在视口的哪些地方，可以这样想象一下，有一块玻璃，我们会把这块玻璃放在摄像机前面，这样的话在玻璃上面贴一些图案，就可以直接通过摄像机看到这些图案，就是常说的滤镜，只不过现在那些图案变成了一个个按钮或者文字，玻璃变成了画布，这就是UI的布局。

2，bind函数更新UI信息

我们当然不希望那些提示信息是一成不变的，所以我们需要更新一些会发生变化的信息，比如现在所处的状态，弹药量

3.将UI加入视口

就是把这块玻璃放在摄像机上。也就是说把这个组件添加至视口上。

在一部分内容中将UI加入视口是比较简单的，因为都是固定的套路，而设计UI和bind函数相对来说会比较复杂，因为他们的形式非常多变，但是万变不离其宗，再怎么变都不会脱离画UI和bind函数这两块的。

如何在widget画出UI？

UMG通常由Edito Utility Widget组件构成的。

这个组件拥有一个Designer，可以在上面自由的画出我们想要的UI，还有一个图表用来进行数据更新。

1.添加一些按钮和一些文本

UI分析：

i.UI元素

首先使用了一个VerticalBox垂直Box，里面的元素有一列，但是可以有很多行。

对于上图只看第一列，因为只要第一列理解了，剩下的就是复制张贴就可以完成了，

VerticalBox的子级是HorizontalBox横向Box，里面的元素只有一行，但是可以有很多列，在这里horizontalBox里面由2个元素两个VerticalBox，所以这两个VerticalBox为水平排列，然后第一个VerticalBox放入Text，第二个按钮，horizontalbox里面放的box是什么都是可以，因为里面只有1个元素，所以无论是垂直还是水平Box可定可以存放1个元素的。

ii.UI布局

在ui的左边有一个花瓣的东西，称之为锚。顾名思义就是将一个东西固定在一个地方，所以他就是为了将画的UI固定在左侧位置，距离画面左侧122，距离顶部471，如果当画面进行缩放，那么图中的UI会随着画面分辨率的变化而变化，但是如果画面缩的非常小，左侧小于122，那么这个ui就会被挡住，因为画面左侧已经小于122了。

设置的锚点也非常简单，在CanvasPanel（画布）的每一个子级都可以设置描点，选中他的子级，在右侧属性栏中就会出现如下图所示的界面，锚点的位置就是下面的正方形和长方形的位置。这是一些预设的位置，通常已经够用了，细节面板有许多设置，但是基本都是关于位置、颜色、状态、value、样式、事件。

UI元素的大致种类（常用）

按钮类：1.Button 2，复选框（checkbox）3.滑条（slider）

提示类：1.进度条（ProgressBar）2.Text（文本） 3.image（图片）

输入类：1.SpineBox 2.textbox 3.EditableText

布局类： 1.verticalBox 2.Horizontal Box

2.UI不仅可以画，还可以key帧

在这里我们使用text和按钮，创建了如下所示的UI。

在widget编辑器下方有一个时间线，这是为了给UIkey动画的地方？你可能会好奇，为什么要给uikey动画呢？都玩过cf吧，当我按下tab键的时候，会弹出一个面板记录着敌我双方的数据，这个面板弹出的过程就可以当成是在播放面板的的动画，从你看不到的地方快速移动到画面中央。这就是ui的动画，接下来我们就可以给左边heathy和power进度条key一个ui的动画，最后的效果就是当我按下Tab键他们会出现，再按一次就消失的效果，

首先开始Key动画，按键的逻辑我放在更新UI的信息中介绍。

1.添加一条动画轨迹，命好名字：InfoOpen，不然到最后找不到对应的动画

2.将Heathy和power所在的VerticalBox移出画布，key关键帧

这个时候ui的动画就设计好了，ui也就画好了。接下来我们来更新UI的信息。

如何更新UI中的信息（组件内更新与组件之间更新）？

添加第一人称模板，当机器人开枪后，弹药量减一，在弹药量的文本框上更新此时弹药的数量，跳跃后power减少0.1，按F键模拟受伤，Hp减少0.2。

有两种思路：

1.因为弹药，power、Hp都是和机器人有关的，所以可以在机器人的蓝图中创建三个变量，作为机器人的三个属性值，然后在把机器人的引用传递给组件，把两个进度条和一个文本框bind至人物的三个变量上，这种做法易于实现但是耗费系统性能，因为在每个Tick中，都会询问机器人的三个属性有没有发生变化。所以性能耗费特别大。

2.因为弹药、Hp、Power都是在特定的事件下发生变化的，所以bind一个事件，当机器人要做这些事情的时候，就通知widget哪些属性发生了变化，请更新，这样做的话会大大降低对性能的损耗。
采用方法一：

1.1创建danyao、power、Heathy三个浮点型变量，分别在开枪、跳跃、按下F键后更新三个变量

power变量

Heathy变量

power变量

1.2 将第一人称蓝图类作为引用传入widget

1.3 将这些变量绑定在widget中。

这样的话我们就可以通过变量的修改来更新UI的信息了

2.创建事件图表，bind事件供第一人称蓝图调用，并创建自定义事件，更新数值。

2.1我们需要访问到各个组件然后通过组件的方法来设置value，所以要把两个process、text作为变量使用

2.2 新建三个事件分发器，bind三个函数供模板蓝图类调用，创建三个自定义事件来进行UI信息更新。

2.3在每个动作后调用bind的事件。通知widgetcontroller正在做的动作。

如何将ui信息输出显示至视口？

固定的套路

上面节点中call function需要一个蓝图组件作为target输入。

然后不要忘记给Heathy、power、danyao设置初始值，proccessbar的值都是小于1的，此外还需要再widget的构造脚本中初始化一下，不然在三个变量没有进行数值更新的时候，三个ui的显示是错误的，因为没有任何值。

接下来我们开始播放动画吧，播放动画的过程与上面第二种更新UI的方法相同。

1.创建一个事件分发器，bind一个自定义事件，开始播放动画。

2.事件触发来调用playanim