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)

UE4鼠标悬停到按钮上的效果实现

二、实现过程:

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设计师界面的设置如上完毕,设置完如上后,效果是这样的UE4鼠标悬停到按钮上的效果实现

 

3.打开MenuUI图表界面进行蓝图编写:

(1):新建一个函数,命名为Function_OnHovered,编写代码如下:

UE4鼠标悬停到按钮上的效果实现

(2):新建另一个函数,命名为Function_UnHovered,编写代码如下:

UE4鼠标悬停到按钮上的效果实现

 

(3)找到设计师界面,设置如下:

UE4鼠标悬停到按钮上的效果实现

(4)找到图表界面->事件图表界面:编写代码如下:

UE4鼠标悬停到按钮上的效果实现

UE4鼠标悬停到按钮上的效果实现

4. 将MenuUI控件显示在屏幕上,并让鼠标指针显示在屏幕上,打开关卡蓝图,编写如下:

UE4鼠标悬停到按钮上的效果实现

5. 保存,运行,可看到文章开头展示的效果了。

注:因为有多个按钮,都实现同一个功能,所以新建了两个函数,把这三个按钮想要实现的功能封装在这两个函数里,这样节省了很多代码,不必每一个按钮都重写一遍功能,也利用后续添加按钮实现相同的效果。如果不写函数,那么每一个按钮都要重写一遍要实现的功能代码。