本案例涉及到UMG，蓝图通讯，蓝图接口，蓝图结构体及网络的初级使用。
1. 分析吃鸡的背包UI
图片源自网络
我们能够显而易见的分成三部分(背包与附近装备列表[左]，角色的实时显示[中]，武器装备[右])
这篇教程就先实现左边的。
我们再把左边给拆开分析
绿框中的是显示背包容积的进度条[Progress Bar]
红框中的是两个能够滑动的控件[Scroll Box]
我们可以把红框中显示装备列表给封装起来，封装的目的是可复用性，其使用方法就跟我们使用普通的小控件如滑动条，还可以在游戏中动态的创建控件。
列表中都是由一个个这个封装起来的
item
而item又分为三部分，分别是左边的图片，中间的名字，右边的数量，如果为不可以合并的装备则会隐藏掉。
最小控件Item的制作 [ActionItem]
item
由上图分析出控件的排列为左右结构，我们可以使用[Horizontal Box] (Panel Widget:不会渲染出来，用于对 Child Widget 进行布局)。左右空间还有不同的不透明度，使用[Border]。具体的文字图片为[Text][Image]
关于细节：
- 窗口尺寸变成长条形，其目的仅仅是方便显示我们能够直观看出效果
- 中间用于显示名字的控件将使用填充作为父控件的计算方式
- 启用[Text]AutoWrapText自动换行，垂直居中
- 子控件的Padding默认为(4,2)，如有必要请归零
-
打开子控件的Is Varible
蓝图结构体
用于创建Item控件所需的数据
- 图标
- 名字
- 是否可以合并
-
如果可以合并，数量
转到[ActionItem]蓝图,新建一个我们刚刚创建的结构体并启用(可编辑实例，在生成是显示)
事件 Pre Construce 与 Construct的区别
第一个是在编辑阶段便执行的方便直观的调试，无其他区别
为什么把数量的设置单独出来是因为数量是可以动态变化的，单独出来方便调用
背包列表的封装制作 [ActionListWidget]
子控件我们将由代码动态创建
网友评论