今天先完成一个小的UI界面的设置，通过小项目来了解一下UI到底是什么。

在我自己学的时候发现最重要的一点是英文单词，在这个新的界面中有很多专业的术语，所以一定要懂得这些英文单词的意思才能灵活的应用。

本来想着将整个UI涉及到的比较不常见的单词都摘出来记忆一下，后来想想还是太多太杂不容易记忆。先利用Case来慢慢记忆单词。

首先，什么是UI？UI的英文全拼是Use Interface,用户界面，在Unreal中也有特定编辑UI的功能，有专门的UI的class,例如Font,Slate Brush,Slate Widget Style,Widget Blurprint.这些都是用来编辑UI的工具。

（要想在Unreal中使用UI还必须了解HUD是什么，Head Up Display（平视显示器），我个人理解在Unreal中HUD就相当于一个摄像机的镜头，例如FirstPersonGame中的瞄准星，就像是附着在摄像机的镜头上，这就被称为HUD。）

Case1

在Unreal界面中，点击Content Browser中的Add New,添加User Interface中的Widget Blueprint,(控件蓝图)。创建三个控件蓝图，分别命名为HUD，MainMenu,PauseMenu,

逻辑思路：现在我计划编辑一个有血量，能量值以及弹药的HUD，之前说过HUD是摄像机的镜头，那么Character运动时镜头就会随之运动，那么在HUD中的元素也将会随着摄像头移动，所以我们会在HUD中设置一些一定要跟随摄像机镜头转动的元素。例如：瞄准星，血量值，子弹数量等。

那么接下来就该设置HUD了，刚创建的名为HUD的这个控件蓝图就是用来做这些事情的，控制蓝图的作用是让元素出现在界面中，但是元素中的一些变量的变化还是需要在需要的蓝图中实现的，就像血量，Character受到攻击时才会使血量减少，那么传递信息或者说传递变量的一定是Character，那么逻辑就应该是：Weapon打中Character——Character中的事件触发——导致Variables接收到信息减少——控件蓝图中的Variables减少将信息反映在界面中。

根据这个逻辑可以得出，先要在Character中的触发事件后设置Variable的变化。

打开Charater的蓝图，在其中创建变量，flaot,int类型根据需求进行变化。这里Health,Energy,Ammo,AmmoMax.根据我的需求我分别定义为float，float，int，int类型。

逻辑思路：有了变量就要看看如何变化，变量的减少可以通过在Event后通过计算来做到，（get,set）。之所以要设置AmmoMax,是因为子弹元素左侧要设置现有数量，右侧要设置最大值。那么如此一来就这些Variables就要设置初始值了，在此基础值上进行减少，初始值自己根据情况设定。

由于现在只是想要体现UI的功能所以将Variables接到一些现有的事件上，在此我将Health的变化接到F键上，Energy的变化接到Jump上，Ammo的变化接到发射子弹上。如下，

 同时，在Character的蓝图中还要实现HUD，不过在其他的蓝图中也可以实现，这里为了方便我直接将实现HUD的事件放在了Character蓝图中，因为是已进入Game中就要显示出来所以事件的驱动应该定位Event Bgeign Play.

以上是我们要托拽的节点，这些节点的拖拽逻辑是：Creat Widget（建立一个控件，Class中选择要实现控件蓝图的名字）将这个控件蓝图set一个变量值是为之后考虑，如果这个控件不用了或者需要其他的编辑手法的话，就可以直接对这个Variables编辑了。最后Add to Viewport是将这个控件蓝图上的屏幕或者是内容添加到摄像机的镜头上。这是最基础的实现HUD的逻辑。

下面我就要对这个控件蓝图的内容进行编辑了。

首先我要Health,Energy,Ammo出现在屏幕上的话，就会需要两个水平框，一个放Health和Energy，由于两个类型相同，所以我就放在了一个水平框中，另一个水平框放入Ammo。由于Health与Energy区别，所以我又将水平框中分成了两个垂直框，一个放TEXT，一个放进度条。还有若干个TEXT去放置。当然这是我个人思路，如果可以的话有很多很多中方法去布置这些框框架架。

这是我放置后的结果，但是这其中最需要注意的地方是这些英文单词，这里我就将我不认识的一一罗列出来，方便记忆。

Horizontal:水平的；Vertical:垂直的；

接下来就要调整一下这些框框的属性了，先调整进度条的大小：选择Detail面板中Slot(Vertical Box Slot)(Slot:槽）中的Size将Auto改为Fill就可以编辑打大小了，Fill：填充。含义是将ProgressBar的大小相对于Veritical的大小的填充度设置为1.0，值可以根据需求更改，这里我就设置为1.0.同时将Vertical也设为Fill:1.0,这样就可以很好地调整进图条了，同理其他的也是，可以根据需求更改Size.合理即可。

下面接着调整TEXT的内容，选中TEXT在Slot的下一个就是Content,在Content中只有一个可编辑，就是TEXT对其内容的修改可以在这里进行，如改成Health/Energy/Ammo；后面跟的Bind意思是绑定，含义就是可以选择已经现有的文字或者变量进行绑定。设置完之后开始设置进度条的颜色，在Detail面板中Apperance（外表）中的Fill Color and Opacity（填充颜色和不透明度 opacity:不透明度）这里比较疑惑的是为什么还有个不透明度。以下就用逻辑解释一下：

如果要实现触发事件就会导致血量的减少，那么对于进度条来说如何做到呢，这里Unreal提出的解决办法就是利用百分比的不透明度，如果实现游戏中血量减少的情况通俗的来讲就是进度条本身在没有任何命令的情况下为100%，整个进度条都是满的，触发事件就要降低不透明度。就时让部分血量条变得透明，那样在视觉上就会表现的是血量减少了。而这种不透明度的变化可以通过数值来改变，选中Progress Bar在Detail面板上有Progress的部分，其中的Percent就是控制不透明度的百分比的，Bar Fill Type是设置不透明度的变换方向的，从各个方向都可以变化，这里我使用LeftToRight,百分比的控制要是变量才行，而且变量是被事件的触发控制的，这就是为什么我们之前在Character中设置了变量，而且在使用进度条的两个变量中都设置成了1.0，这样如果将Character中的变量传递过来就会达到我们想要的效果。那么我们就要利用Bind这个选择了，这时点击Bind似乎没什么东西可以选择。我们此时所在的界面是控件蓝图的Designer界面，还有一个Graph的界面供我们编辑蓝图程序，在右上角点击Graph。

在Graph中编辑以上节点，这样做的目的是将FirtPersonCharacter提升为一个变量，使得可以利用这个变量来调用其中的其他的变量，CastTo含义是转化成。。。因为我们的变量是在FPC中写的所以我们要保证PlayerCharacter是FPC。节点程序完成后返回Designer编译完后点击Percent后的bind会发现刚刚被提升的变量在其中了，鼠标放置到变量上，会发现在FPC中的所有变量都可以调用了，只是后就对号入座就好了，需要什么选择什么。当然自己可以随意设置自己喜欢的Color,也可以Bind。之后设置Ammo大部分逻辑是一样的，不同的地方就是这次需要与Character的蓝图向连接的Variable是TEXT，这是就会用到Bind了，但是由于我们在Character中设置的变量是int类型的，所以不能直接转化，所以我们要自己创建一个Bindding了。点击CreatBindding，在这里实际上就是一个转化的作用，将int类型转化成TEXT类型，从刚刚提升的FPC的变量中引出Get Ammo节点，就获得了我们在Character中设置的变量了，节点如下：

AmmoMax如法炮制，这就是为什么我们在Character中不去改变AmmoMax的值。

 至此，这个小项目就要结束了，但是还有一点需要注意的是Anchors（锚）的问题，锚的问题暂时不做深的探究，大概理解一下就是可以认为是基点，就是相对坐标，例如Horizonal Box的位置是在右上角，而他的锚在左上角，如果屏幕与canvas不一致就会导致可能看到的H的位置和Game中不同，所以每一个主框架的锚要定在离自己最近的Canvas的锚点上。以此保证框架位置的准确性。

Unreal中UI界面初学入门