【UE5】环形菜单教程

效果

步骤

1. 下载图片资源：百度网盘 请输入提取码 提取码:fjjx

2. 将图片资源导入工程，如下

3. 新建3个控件蓝图，这里分别命名为“WBP_CircularMenu”、“WBP_Highlight”、“WBP_Icon”

4. 打开“WBP_Icon”，设置“所需”

添加“尺寸框”，设置宽度和高度重载为70

添加一个图像控件，这里命名为“Image_Icon”

添加一个动画，让图像控件“Image_Icon”在0.2s后扩大为1.2倍

添加一个自定义事件“InitUI”，该事件添加一个输入“Icon”，类型为“Texture2D”的对象引用

该事件用于设置图像控件图像

再添加一个自定义事件，这里命名为“SetHighlight”，该事件添加一个布尔类型变量“bHighlight” ，表示是否高亮

该事件执行后，如果“bHighlight”为True，就通过动画让图像控件扩大为1.2倍，否则图像还原

5. 打开控件蓝图“WBP_Highlight”，添加一个图像控件，这里命名为“Image_Highlight”

设置“所需”

在图表添加一个自定义事件“InitUI”，该事件添加一个输入“HighlightImg”，变量类型为“Texture2D”的对象引用

6. 新建一个材质，这里命名为“M_CircularBase”，该材质用于实现渐变

打开“M_CircularBase”，设置“材质域”为“用户界面”，混合模式为“半透明”

添加如下节点，在预览效果中可以看到已经出现了渐变效果

7. 回到“WBP_Highlight”，添加两个线性颜色变量

设置颜色默认值

当自定义事件“InitUI”执行后，创建一个材质“M_CircularBase”的材质实例，然后设置材质的图片和颜色后赋给图像控件

添加两个线性颜色变量“StartColor”、“TargetColor”

 添加一个自定义事件“SetHighlight”，如果是高亮就设置“StartColor”为默认颜色，“TargetColor”为高亮颜色

每帧判断“CurrentTime”是否小于1，如果小于1就让材质实例的颜色逐渐由“StartColor”向“TargetColor”过渡。由于在自定义事件“SetHighlight”中会重置“CurrentTime”，那么每次调用“SetHighlight”时就会让材质实例的颜色逐渐变化。

设置变量“CurrentTime”的默认值为1

8. 打开控件蓝图“WBP_CircularMenu”，添加一个画布面板和尺寸框控件，尺寸框大小为512*512并居中

继续添加覆层和图像控件，这里图像控件命名为“Image_Inner”并填充覆层控件

图像控件设置图像，并设置着色为黑色，不透明度为0.8

添加一个覆层控件，这里命名为“Overlay_Highlight”，勾选“是变量”，然后设置填充

再添加一个画布面板控件，这里命名为“CanvasPanel_Icon”，勾选“是变量”，然后设置填充

在图表中创建一个宏，这里命名为“CosValToAngle180”，用于将弧度制的余弦值转为角度

再创建一个宏，这里命名为“Angle360ToDir”

创建两个“纹理2D”数组类型的变量，这里命名为“IconArr”、“T_HighlightArr”，分别用于表示8个图标和8个贴图

回到“设计器”，选中“WBP_CircularMenu”，给“T_HighlightArr”添加8个元素

给“IconArr”也添加8个元素

在事件图表中添加如下节点，用于创建环形菜单的图标

此时效果如下

继续添加如下节点，用于创建高亮显示槽

此时界面效果如下

选中“Image_Inner”控件，填充设置为20

 选中画布面板，这里命名为“CanvasPanel_Menu”，勾选变量

在图表中新添加一个函数，这里命名为“GetMouseAngle360”，用于计算鼠标与中心点连线的角度

给该函数添加两个输出，分别表示鼠标与中心点连线的角度的距离

函数“GetMouseAngle360”逻辑如下

在事件图表中添加自定义事件“SetHighlight”如下

添加自定义事件“CancelLastHighlight”，用于恢复高亮前的效果

添加一个整数类型的变量“LastIndex”用于记录上次高亮的索引，默认值设置为-1

自定义事件“CancelLastHighlight”的完整逻辑如下

添加自定义事件“SwitchIndex”如下，该事件通过设置索引来控制哪个按钮高亮

在Tick中，每帧判断当前环形菜单是否已经打开（可见），如果打开了菜单就根据当前鼠标的位置来决定环形菜单中哪个按钮高亮显示

9. 打开玩家控制器，勾选“显示鼠标光标”

10. 在HUD中创建菜单并通过Tab键控制菜单显隐

最终效果如文章开头所示。

参考视频：

https://www.bilibili.com/video/BV17JLyzGEUX/?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click&vd_source=1279114347cba25192f0e30b8cf0e95f