UE5.1.1实现鼠标点击地面产生颜色描边和UI

• 2023-07-31 18:19:26 来源：哔哩哔哩

以下面这个火星地形场景为例，要实现运行后用户通过鼠标点击地形的任何一个地方，都可以将地形进行颜色描边并在点击的地方生成一个简单的介绍火星的UI，当鼠标再点击地形的另一处地方时，又可以在点击出生成同样的UI，而上次点击出现的那个UI则会伴随着下一次的点击消失，同时还可以通过按键来控制UI的显示与隐藏。

一、创建控件蓝图

1、可以在内容浏览器下新建文件夹，用户存放我们创建的资产，这里创建一个文件夹，命名为BluePrints。进入到BluePrints文件夹中，右键单击内容浏览器空白处，选择用户界面--控件蓝图，在弹出的窗口中选择用户控件来创建一个新的控件蓝图；

2、将新创建的控件蓝图命名为WB_Mars。

【资料图】

3、双击WB_Mars，进入控件设计器，搭建一个简单的UI，如下图所示，搭完后编译保存即可。

二、将控件放入蓝图类中

1、右键单击空白处，选择蓝图类；

2、在弹出的窗口中选择Actor，创建一个新的蓝图类，如下图；

3、随便命个名，为BP_WB_Mars；

4、双击进入BP_WB_mars，在组件树中添加控件组件（直接搜索widget，然后选择点击“控件组件”即可）；

5、为控件组件指定控件类，选择我们之前创建好的WB_Mars即可。

三、摄像机漫游角色设置

1、可以自己先构建一个摄像机漫游角色，具体怎么构建上一期专栏有详细步骤，构建完成后，双击进入摄像机漫游角色的蓝图，进入到事件图表，编写如下蓝图，用户显示鼠标并使用鼠标的点击功能：（我这里的摄像机漫游角色是Pawn_Zhouye）

如果节点不够用可以添加一个Sequence序列

2、在Pawn_Zhouye中，新建一个函数，用于实现在鼠标点击处生成UI的功能；

3、在函数里写内容，首先需要进行射线检测，设置好检测的初始点和结束点；这里首先将玩家的鼠标位置转换到世界空间，也就是将鼠标的位置与方向都转换成场景中的，鼠标在场景中的位置为射线检测的初始点的位置，而结束点的位置则是初始点的位置在加上射线的方向向量，这个方向向量可以尽量乘的大一些，以免射线太短从而检测不到与射线碰撞的物体；

4、然后紧接着添加branch(分支)节点，表示判断，如果检测到物体（真）就执行后面的步骤，没有（False）就不执行任何操作，同时将命中结果（Out Hit）进行中断处理（因为它是一个结构体），进而可以获得我们想要的参数，也就是Location，这个Location表示从鼠标的位置发射出一条直线，这个直线与场景中的物体相交的交点位置；

5、如果检测到物体（真）则可以在Location处生成Actor，其中在Class出我们选择之前创建好的BP_WB_Mars，也就是那个里面包含了WB_Mars控件的蓝图类，也可以将其提升为一个变量，然后为这个变量指定类型；如果觉得显示的控件位置不太合适，可以自行处理一下，如下图所示，加一个向量，自己调参数：

6、然后将“生成Actor”节点的返回值作一个类型转换，转换成BP_WB_Mars，并将其提升为变量，作为函数的返回值，如下图所示：

四、关卡设置

1、进入到关卡中，以这个火星场景为例，将摄像机漫游角色蓝图拖入场景中，并设置“自动控制玩家”为“玩家0”；

2、我们希望点击火星地形时可以蹦出UI，首先，在场景中选择上所有的火星地形块，这里有16块；

3、打开关卡蓝图，鼠标右键单击，添加On Clicked事件；

添加后会出现这些节点，如下图所示：

4、回到场景中，选择摄像机漫游角色（Pawn_Zhouye），再打开关卡蓝图，右键选择创建引用；

5、调用之前在摄像机漫游角色中写好的函数，每个On Clicked都要练一下flipflop节点，如下：

6、运行后会发现点击可以在位置处生成UI，但还会保留上一次点击生成的UI,如下图：

7、先进入到BP_WB_Mars蓝图类中，添加自定义事件，销毁Actor，如下图所示：

8、然后进入到关卡蓝图中，调用该自定义事件（销毁Actor）,然后编译保存运行；

9、此时我们发现上一次点击时生成的UI的确消失了，但运行结束后会提示蓝图运行时错误，这是一个小Bug,让我们来修复它；

10、回到关卡蓝图中，我们将函数“显示火星地表UI”的返回值提升为一个变量（这里变量的名称为New Param，懒得改了），然后蓝图变为如下图所示的样子:

其中GET的那个有效无效节点的调出方法为：先从左侧把New Param拖出来，选择获取New Param，然后右击该变量，选择“转换为有效的Get”即可

完事之后，便不会提示“蓝图运行时错误”了。

五、鼠标点击地形块时产生描边效果

1、首先准备好描边材质，资源在评论区

2、打开项目设置，将“自定义深度-模板通道”设置为启用模板；

3、选择地形块，勾选渲染自定义深度通道，并设置模板值，这里就设置为1，这个材质一共有6个模板值，每个地形块都是如此处理；设置完之后，地形块会出现miao

设置完之后，地形块会出现描边效果，如下图所示：

4、但我们想要的效果是鼠标点击时会产生描边，这是就需要对材质进行处理，打开材质蓝图，材质的名称为M_SurvivorVision_DemoMaterial，进入Depth Group 1，如下图所示：

5、首先新建一个材质参数集，命名为Constant（随便取的），

6、双击进入Constant材质参数集，添加标量参数，默认值为0，命名就用默认的；

7、将该材质参数集直接拖入材质蓝图中，并选择参数名，我们就选择Scalar，就是之前创建的标量参数，命名用的默认的“Scalar”；

8、添加Lerp节点，这个Lerp节点表示当参数Alpha从0变到1是，其返回值会从A变到B；同时我们把Outline Color [Group 1]的输入节点的线都移动到Lerp的输出节点，操作方式是暗处Ctrl键将原来的点往目标点上拖即可；

9、然后A点我们连一个RGBA值均为0，0，0，0的颜色值即可，B点就连这个Outline Color [Group 1]的输入节点，Alpha连上Scalar，如下图所示：

10、回到关卡蓝图，鼠标点击地形块时设置标量参数值，将Constant参数集中的Scalar设置为1，如下图所示：

11、再进行测试，鼠标点击地形任意一点时会产生地形描边并在位置处显示UI：

12、进入到BP_WB_Mars蓝图类中，编写按键控制UI显示与隐藏以及显示与取消地形描边的功能，如下图所示；

13、再进行测试，就可以实现鼠标点击出现地形描边与UI显示，然后按下G键可以关闭/显示UI以及显示/取消地形描边。

标签：