需求：实现这个效果。

 为UI创建一个文件夹。

 创建UI蓝图，命名为RuntimeUI

拖入一个border

 设置border的锚点位于左下角，并将border移动到左下角。

 

调整border到一个合适的大小

 我们可以采用表格的形式划分。

修改 border的颜色，将其变成黑色，同时修改透明度为0.2

效果

 将这个组件推进border

拖入两个大小不等的panel，一个改名为left，一个改名为right

 

 点击left，设置填充规则。

添加两个列

 两个列长度大概是1：3

所以我们这样设置参数

这样我们就可以向left添加元素了。

添加四个行

我们先用文字去替代图片。

点击文本，设置文本块的行

点击文本块，将文本改成对应图片的内容

点击文本块，设置字体大小

 拖入四个进度条

 点击进度条，设置进度条位置

 效果

点击left选择填充

 现在弄一下right，右边可以看作是四个部分。

将right设置为两行两列，参数设置为1：1

 将spacer拖入right。

 

 再向right里拖入进度条和文字块

将spacer占两列，点击spacer设置这个参数为2

文本块代替书包，将其设置到第2行一列。

 

进度条设置为第2行两列 。

将进度条由横向变为纵向，我们选择进度条方向是从底到顶。

 

随便为进度条设置比值，来彰显一下效果。

 

 效果

 将进度条纵向居中

 将right也设为填充

效果

 right与left各占一半，因为他们占的权重都是1。

将left的权重设置为1.5

 现在有个问题是，left的元素与right的元素靠得太紧了。

 解决的思路是：在right和left中间加一个spacer

 将spacer设置为填充，并将权重改为0.1

 

在ui文件夹下新建images，将图片导入到工程里面。 

 删掉文本块，把image设置上去。

 在这里替换相应的图片

这里调整图片大小

 

最终效果

 将进度条改成绿色

 

把ui蓝图最好放在gameinstance里面，因为像gamemode之类的都是有网络复制存在的，像gameinstance是唯一一个绝对是在本机的。你看不到别人的ui，别人也看不到你的ui。

创建蓝图类

 

重命名为SurvivalGameInstance 

进入蓝图，添加自定义事件，CreateRuntimeUI。

 

 将当前的控制器赋值给ui控件

将ui设置成变量，并添加到窗口

  打开项目设置，我们设置game instance

 此时，一直都是none

 我的办法是点击+号，选择文件夹位置，会自动创建一个instance蓝图类，重新将内容复制一份给他。

修改成功。

打开关卡蓝图。

 

得到通用的instance，然后转化为我们创建的instance。

 

 

用游戏开始事件激活得到ui

测试。

测试失败，UI不显示 

 经过一系列的print string 我断定是代码没有执行我们的SurvivalGameInstance。因为项目设置里面，再选一次这个

 依然显示none

只能另辟蹊径

 在关卡蓝图的游戏开始事件，激活UI

 测试，成功显示。

哎，没有办法，还是等大佬带我的时候在请教这个问题吧。