虚幻4初级 简单的仿绝地求生背包系统(网络,UMG,蓝图接口)

本案例涉及到UMG,蓝图通讯,蓝图接口,蓝图结构体及网络的初级使用。

1. 分析吃鸡的背包UI

虚幻4初级 简单的仿绝地求生背包系统(网络,UMG,蓝图接口)_第1张图片
图片源自网络

我们能够显而易见的分成三部分(背包与附近装备列表[左],角色的实时显示[中],武器装备[右])
这篇教程就先实现左边的。

我们再把左边给拆开分析


虚幻4初级 简单的仿绝地求生背包系统(网络,UMG,蓝图接口)_第2张图片

绿框中的是显示背包容积的进度条[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


    虚幻4初级 简单的仿绝地求生背包系统(网络,UMG,蓝图接口)_第3张图片
虚幻4初级 简单的仿绝地求生背包系统(网络,UMG,蓝图接口)_第4张图片
蓝图结构体

用于创建Item控件所需的数据

  • 图标
  • 名字
  • 是否可以合并
  • 如果可以合并,数量


    虚幻4初级 简单的仿绝地求生背包系统(网络,UMG,蓝图接口)_第5张图片

转到[ActionItem]蓝图,新建一个我们刚刚创建的结构体并启用(可编辑实例,在生成是显示)

虚幻4初级 简单的仿绝地求生背包系统(网络,UMG,蓝图接口)_第6张图片

事件 Pre Construce 与 Construct的区别

第一个是在编辑阶段便执行的方便直观的调试,无其他区别


虚幻4初级 简单的仿绝地求生背包系统(网络,UMG,蓝图接口)_第7张图片

为什么把数量的设置单独出来是因为数量是可以动态变化的,单独出来方便调用

虚幻4初级 简单的仿绝地求生背包系统(网络,UMG,蓝图接口)_第8张图片

背包列表的封装制作 [ActionListWidget]

子控件我们将由代码动态创建


虚幻4初级 简单的仿绝地求生背包系统(网络,UMG,蓝图接口)_第9张图片

你可能感兴趣的:(虚幻4初级 简单的仿绝地求生背包系统(网络,UMG,蓝图接口))