Creating Drag and Drop UI【UE4】【Blueprint】
一、项目设置1、创建三个Widget Blueprints,命名为DragWidget,HealthBar, 和 HUD。2、创建一个继承自DragDropOperation名为WidgetDrag的蓝图。3、在WidgetDrag中创建一个名为WidgetReference的User Widget类型变量并进行如下设置。4、创建一个名为DragOffset的Vecto...
一、项目设置
1、创建三个Widget Blueprints,命名为DragWidget,HealthBar, 和 HUD。

2、创建一个继承自DragDropOperation名为WidgetDrag的蓝图。

3、在WidgetDrag中创建一个名为WidgetReference的User Widget类型变量并进行如下设置。

4、创建一个名为DragOffset的Vector2D类型变量并进行如下设置。

5、编译并保存。
6、打开Drag Widget创建一个名为WidgetReference的User Widget类型变量并进行如下设置。

7、保存并编译。
二、设置HealthBar
1、打开HealthBar蓝图,并将Canvas Panel删除掉。
2、添加一个SizeBox和一个Progress Bar,在SizeBox的Details面板中设置WidthOverride和Height Override为500X50。

3、对ProgressBar进行如下设置。

创建并重载函数
1、在HealthBar的Graph中添加重载OnMouseButtonDown和OnDragDetected两个函数。



2、编辑OnMouseButtonDown函数。

3、编辑OnDragDetected函数。

4、编译并保存HealthBar蓝图。
三、设置HUD
1、打开HUD蓝图,点击Canvas Panel在Details设置Visibility为Visible。

2、添加一个Health Bar到Canvas Panel中。

3、在Graph中添加OnDrop重载函数。

4、编辑OnDrop函数。

四、设置Drag Widget蓝图
1、打开DragWidget,给CanvasPanel添加一个SizeBox并给SizeBox添加一个Border。
2、将SizeBox的名字重命名为WidgetBox,勾选isVariable,勾选Width Override和Height Override。

3、选择Border,将BrushColor颜色设置为灰色透明度设置为0.5。

4、编辑蓝图

五、
1、新建一个名为TestGameMode继承自GameModeBase的蓝图。
2、编写蓝图

3、设置WorldSetting

六、效果

更多推荐

所有评论(0)