简单的背包拖拽

背包系统一直是比较头疼的部分,这两天搞来两个工程研究了下下面记录一下背包的拖拽。
一丶准备工作:
1.导入一些图标资源

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

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

Inventory Size大小自定
二丶创建4个UMG

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

将UMG_GridInventory填充到WidgetSwitcher_0

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

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

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

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


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

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

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

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

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

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

最终结果:
稍后上传演示视频:
