虚幻引擎UE4背包系统（如何制作可拖动（Drag and Drop）的背包（Scrollbox））

本教程适合初学者（学习经历已有30天的UE4初学者）。

最终效果

由于隐私保护，不想截实际的效果图，下面给出了示意图，左边是背包A，右边是背包B，将其中的子项目从左侧拖往右侧的背包，然后在插入位置放置。

第一步：

制作一个user widget（在内容浏览器中右键-ui widget-user widget），命名为subwidget_singleitem，这个用作单个物品项目

制作两个user widget，分别作为A和B背包，命名随意。都要向其中声明一个Scrollbox，关于Scrollbox的基本样式设计，可以查看UE4官网，这里不是重点。你可以往Scrollbox里面添加上面的subwidget_singleitem（只需要在palette中键入subwidget_singleitem就可以看到自定义的userwidget），但是这里不这样做。注意是两个背包都这样建立。

第二步：初始化一些物品，这些物品（就是上面建立的singleitem）需要有相互辨识度，不然你看不清楚最终的效果是不是合理的。

比如我这里的是生成编号为10到40的物品（注意这里的编号的使用需要自己定义，你应该去了解一下expose-on-spawn的概念，就会知道是怎么做的了）。

这里有一个Scrollbox的语法：Scrollbox->addchild()表示添加单个项目。

背包A和B都这样做，就会有这个效果：

就是没有拖动的静态背包。

第三步【关键】：

在单个项目（subwidget_singleitem）中重载onmousebuttondown事件（下面的截图中由于我已经重载了，所以在列表中看不到）：

这个函数表示当鼠标按下（subwidget_singleitem）时触发的事情，内容如下：

Detectdragifpressed表示监测是否有拖动现象（针对鼠标左键），将事件监测结果返回出去。

第四步：

在内容浏览器中右键创建蓝图（选择DragAndDrop）：

双击打开，什么都不用改，只需要改动其中的pivot为centercenter即可：

这里表示拖拽时显示的样式将会以centercenter（水平居中和垂直居中于鼠标位置）呈现，效果类似于：

可以看到图标中心位于鼠标处。

当然，我们Windows的拖拽风格不是centercenter，而是mousedown（在鼠标点击处）：

其它样式你可以自己探索一下，在完成了本教程之后。

第五步：

【警告：不要只看图不看字，理解概念很重要！】

在singleitem中重载另一个事件ondragdetected，表示当有拖拽被检测到时，执行如下过程：

红色标记处选择你刚刚新建的DragAndDrop。Payload表示过路费，也就是拖拽后拖拽源（也就是A背包，在本例中）将会损失这一个物件（自动得就消逝了，不用做removefromparent的处理）。Defaultdragvisual表示拖动时拖动显示物的样式，也就是黏着在鼠标上的那个图标，这里也是用self（也就是此singleitem本身）。

其它参数先不管，然后返回一个DragAndDropOperation操作出去。

第六步：

在背包B中重载ondrop事件（如果不记得怎么找重载函数头请翻到前文看看）：

这个事件表示当B背包被drop（拖拽的最后一个瞬间，翻译为释放）时调用，这里看到从operation接受到的拖拽操作中，取出payload，然后添加到本地的Scrollbox中（这里的addnewitemat和getfocusindexnow是我自己写的函数）。

难点：由于UE4本身没有实现将物品按照鼠标位置所在处插入，所以需要自己实现！

获得当前屏幕位置-》用“my geometry我的几何”翻译这个物理屏幕位置，得到本地位置（本地位置是指游戏窗口里的本地位置，是一个和窗体大小、和窗体所处物理屏幕的位置无关的一个位置值，是代码内友好的Position）-》用这个本地位置获得鼠标所在处的排列序号（就是我应该插入到哪个序号上），最后四舍五入后添加物品到这个位置上即可（addnewitemat）。

第七步（解释getfocusindexnow）：

理论解释：

上图中的箭头处就是鼠标最终落脚处。

以下列出一个方程组计算排序序列号和当前鼠标位置的关系表达式：

当前鼠标本地位置（Local Position） = 当前鼠标的绝对位置经过窗体几何的absolute_local转化，即前面提到的：

当前鼠标本地位置 - Scrollbox在帆布上的偏移位置（下图中的红色箭头的长度） = 鼠标相对Scrollbox顶的位置（这个应该很好理解吧！）

鼠标相对Scrollbox顶的位置 + Scrollbox的拉动偏移（拉动偏移是指这个Scrollbox被拉拽了多少） = 鼠标相对Scrollbox的首个物件的理论位置的距离H，即下图中的红色箭头的长度：

上述的H值 ÷ 单个singleitem的高度 = 当前鼠标位置的序列号（类型为小数，将其四舍五入即可）

最终的getfocusindexnow的表达式为：

其中涉及的节点也都在里面可以看到了。

第八步（解释）：

Addnewitemat在Scrollbox中也没有现成的函数，下图是我的实现，大致的意思是：

这个序列号大于当前的物品数吗，是的话，就直接添加一个child即可。

否的话，就取出Scrollbox中所有的物品，然后insert这个物品（以数组insert的形式实现），清空Scrollbox然后再放置到Scrollbox中。

以上就是完成从A背包拖拽物品到B背包的所有步骤。如果你对其中的操作和函数节点寻找有问题，可以多查查UE4官网上的文档。

——2017年7月8日10:58:01 小江村儿的文杰

虚幻引擎UE4背包系统（如何制作可拖动（Drag and Drop）的背包（Scrollbox））相关推荐

UE4虚幻引擎UI界面动画制作！
UE4虚幻引擎UI界面动画制作! 创建一个动画然后选择某个控件! 找到某些属性!然后key帧! 关于怎么播放动画呢! 这样子呢!当你开始可以自定义函数,外部MainUI调用!
虚幻引擎UE4中的Tick事件
虚幻引擎UE4中的Tick事件是程序运行中每一帧刷新一次,例如在通常每秒60帧的游戏运行中,Tick事件就每秒执行了60次.这个事件相当于Unity中的Update和LateUpdate函数一样的性质 ...
虚幻引擎UE4.25版本使用Android打包出错提示：ERROR: cmd.exe failed with args /c 和 :app:assembleDebug的解决方法
虚幻引擎 UE4.25版本使用Android打包出错提示:ERROR: cmd.exe failed with args /c 和 :app:assembleDebug的解决方法: 在虚幻引擎的jdk ...
虚幻引擎/UE4离线安装
虚幻引擎官网:https://www.unrealengine.com/zh-CN/ 虚幻引擎4官方文档:https://docs.unrealengine.com/zh-CN/index.html ...
虚幻引擎之方向轴制作总结
目的:本文章欲记录制作类似绝地求生游戏中上方的方向轴的步骤. 目录一.创建文件二. 编辑方向轴三.编辑UI界面四.编辑关卡蓝图五.后续优化一.创建文件先在Content文件下创建一个文件 ...
Online Subsystem Steam 在线子系统Steam （虚幻引擎UE4 联网）
在本页: 满足阀门的要求正在下载Steamworks 设置Steamworks SDK Steam App ID 配置您的应用程序的设置补充笔记该在线子系统蒸汽API使您能够出货虚幻引擎4(UE ...
虚幻引擎(UE4) 日志、打印运行时信息
概述日志用于引擎及时反馈给我们运行时刻数据和信息.强大的用途不限于如下: 函数是否被调用算法使用的什么数据上报错误给开发组或者用户特定时刻强制运行致命错误(如断言错误)以停止执行程序. 本章将 ...
[UE4]虚幻引擎UE4如何制作可拖动（Drag and Drop）的背包（Scrollbox）（转载）
最终效果由于隐私保护,不想截实际的效果图,下面给出了示意图,左边是背包A,右边是背包B,将其中的子项目从左侧拖往右侧的背包,然后在插入位置放置. 第一步: 制作一个user widget(在内容浏览 ...
[虚幻引擎] UE4/5数字孪生制作城市光束效果
一.模型导入二.创建材质创建材质曲线,为了能够更好的实现颜色的渐变过程,这里用了RGB三种颜色三.创建蓝图BP_LightBeam 在构造函数中实现逻辑首先我们的思路是要制作数量不同的光束那么 ...

虚幻引擎UE4背包系统（如何制作可拖动（Drag and Drop）的背包（Scrollbox））

虚幻引擎UE4背包系统（如何制作可拖动（Drag and Drop）的背包（Scrollbox））相关推荐

最新文章

热门文章