Creating Drag and Drop UI【UE4】【Blueprint】

一、项目设置

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

 

六、效果