UE4鼠标悬停到按钮上的效果实现
参考视频:https://v.youku.com/v_show/id_XMjcxMzk2NTE0OA==.html?spm=a2hzp.8253869.0.0 谢谢小猿人老师
一、本文章实现的效果如下:整个过程中鼠标并没有点击,只是悬停到三个按钮处然后离开
(1.当鼠标悬停到三个按钮上面时播放声音,移开时不播放(因是gif格式所以下面图片听不到但实际运行是有声音的)
2.字体内颜色:由黄色->红色; 3.字体外边颜色:由蓝色->绿色;
4.字体变大:由50号字体变为65号字体; 5.字体格式:由正体Light变为斜体Italic)
二、实现过程:
1. 找到用户界面->控件蓝图,新建一个控件蓝图,命名为MenuUI。打开MenuUI。
2.打开MenuUI设计师界面新建一个按钮命名为:But_StartGame 和一个Text命名为:TextBlock_StartGame。Text放到按钮下面,让TextBlock_StartGame成为But_StartGame的子物体,后面编写蓝图时会用到这一特点。
对But_StartGame的设置如下:(1)锚点设为中间靠右(2)Size To Content勾打上。(3)Stytle下面:1.Normal下面的Tint下面的透明度A设置为0; 2.Hovered下面的Tint下面的透明度A设置为0; 3.Pressed下面的Tint下面的透明度A设置为0。But_StartGame设置完毕。
对TextBlock_StartGame的设置如下:(1)锚点设为中间靠右 (2)Color and Opacity设置为黄色 (0.9,0.7,0,1) (3)找到Font属性:1.Typeface设置为Light;2.Size设置为50 (4)找到Outline Settings属性:1.Outline Size设置为2 2.Outline Color属性设置为蓝色(0,0,1,1)。TextBlock_StartGame设置完毕。
另外两个按钮设置如上。
对MenuUI设计师界面的设置如上完毕,设置完如上后,效果是这样的
3.打开MenuUI图表界面进行蓝图编写:
(1):新建一个函数,命名为Function_OnHovered,编写代码如下:
(2):新建另一个函数,命名为Function_UnHovered,编写代码如下:
(3)找到设计师界面,设置如下:
(4)找到图表界面->事件图表界面:编写代码如下:
4. 将MenuUI控件显示在屏幕上,并让鼠标指针显示在屏幕上,打开关卡蓝图,编写如下:
5. 保存,运行,可看到文章开头展示的效果了。
注:因为有多个按钮,都实现同一个功能,所以新建了两个函数,把这三个按钮想要实现的功能封装在这两个函数里,这样节省了很多代码,不必每一个按钮都重写一遍功能,也利用后续添加按钮实现相同的效果。如果不写函数,那么每一个按钮都要重写一遍要实现的功能代码。