欢迎光临散文网 会员登陆 & 注册

简单的背包拖拽

2019-08-21 19:59 作者:果子加煎蛋  | 我要投稿

    背包系统一直是比较头疼的部分,这两天搞来两个工程研究了下下面记录一下背包的拖拽。

一丶准备工作:

1.导入一些图标资源

2.创建空的Actor存放物品图标,在构造函数里随机添加图标

 

3.在角色控件里添加函数Create Inventory

Inventory Size大小自定

 

二丶创建4个UMG

1.首先打开UMG_Inventory设计背包外观样式,之后我们将背包物品的内容填充到WidgetSwitch(记得变成变量)

UI设计1

将UMG_GridInventory填充到WidgetSwitcher_0

UI图表1_1

下面还写了标签页切换,但这里只做了一个标签页

UI图表1_2

2.打开UMG_GridInventory设置背包物品排列样式,只添加了Scroll Box和WrapBox组件。

UI设计2

这里主要把物品元素插槽UI:UMG_InventorySlot添加进来,数量是获取的角色控件里的Inventory数组

UI图表2

3.打开UMG_DragImage是设置点击鼠标拖拽物品元素后生成的图标,所以只需要一个Image控件就可以了。

UI设计3
UI图表3

4.打开UMG_InventorySlot,这里主要是把每个物品图标传递到Border_1里面,上层的控件SizeBox用来设置大小,Border用来做一个边框。

UI设计4

这里覆盖三个函数分别是OnMouseButtonDown,OnDrop,OnDragDetected

函数与变量

OnMouseButtonDown主要设置使用鼠标左键点击物品元素插槽触发拖拽

OnMouseButtonDown

OnDrop主要传递角色中物品信息和设置调换物品

OnDrop

OnDragDetected主要是触发拖拽之后生成UI:UMG_DragImage,而UMG_DragImage的图片信息来自Item

OnDragDetected

最后打开角色控制蓝图设置Tab键(随意)打开和关闭UI菜单


打开关闭UI


最终结果:

稍后上传演示视频:

最终结果


简单的背包拖拽的评论 (共 条)

分享到微博请遵守国家法律