Unreal5(虚幻五) 实现UI与C++代码逻辑的交互 保姆级教程

本人有Unity基础，刚学UE几天，把这一套处理流程记录一下备用。
文章很长，强烈建议点目录跳着看。

0.目标效果

用户输入两个字符串，点击等号，在右侧的文本框中输出拼接在一起的字符串

1.创建一个空关卡

2.新建UI蓝图

双击打开，然后拖一个画布面板到场景中

拖动右下角光标到1920*1080

然后拖入一个水平框，调整锚点到中间

调整大小尺寸
依次拖入文本框（用户可以输入内容），文本（显示文字），文本框，按钮，文本。然后再按钮下再拖入一个文本。

现在层级面板是这个样子

把水平框的五个部件都改成尺寸：填充，1.0

设置居中和调整字号
其中对于文本框，调整字号

调整颜色为黑色（记得把四个“继承”的勾都取消掉，才能生效）

给两个文本框改名为输入1，输入2。把文本改名为输出。同时给输出打钩：是变量改名后的层级是这个样子依次点击（从左到右）编译，保存。

3.在游戏场景中展示UI蓝图

最小化UI蓝图，在一片黑的空白关卡。打开关卡蓝图。
右键，添加“获取玩家控制器”节点
从获取玩家控制的返回后面拉出，设置show mouse cursor。UE会自动隐藏鼠标，设置后鼠标就会一直显示，方便我们操作UI。

从事件开始运行节点拉出来接上，鼠标一直显示就设置完成了。

在SET后拖一个创建控件

然后选择我们刚做的UI蓝图，然后拉一个添加到视口功能。

完成连接

编译保存蓝图，最小化。然后主关卡界面点运行。

可以看到我们做的UI了

4.连接UI事件到关卡

回到UI的蓝图，点击图表

在左侧变量选中按钮

在右侧添加点击时事件

拖入输入1，输入2，输出。都选择获取。

点击加号添加一个事件分发器，我改名叫提交输入。添加两个字符串参数，叫输入1，输入2。
对蓝图编译，保存。

拖入事件分发器，选择调用。

输入1，输入2后拉出获取文本

获取文本后再拉出转换为字符串

然后连接到事件调用，看到下面这个样子，对UI蓝图编译保存。

按住蓝图的标签拖动可以分出窗口和合并窗口。

将关卡蓝图与UI蓝图分为两个窗口

按住UI蓝图里的事件分发器，拖入关卡蓝图。选择分配

将创建视窗的Retrun Value连到绑定时间的目标上

将绑定事件连接到添加视口后，这样就可以在关卡开始时完成绑定。

然后我在提交输入后接了两个打印字符串，验证这步做的是否正确。

编译保存蓝图，运行程序，输入提交可以看到这样的效果：
左上角成功输出文本框的内容。

5.连接关卡事件到Actor

在资源文件夹中右键新建一个蓝图类
父类选择Actor

我命名为拼接字符串Actor

双击进入Actor的蓝图，在左侧添加组件。

选新建C++组件

父类选Actor组件

我叫它JoinStringComponent。
VisualStudio全部重新加载，然后UE得living code自动编译成功

在.h文件 pulic 构造函数下面添加代码：

	UFUNCTION(BlueprintCallable)//可以显示在蓝图中
		FString EnableFunc(FString s1, FString s2);

在.cpp文件下面写函数：

FString UJoinStringComponent::EnableFunc(FString s1, FString s2) {
	FString s3 = s1 + s2;
	return s3;
}

最小化visual studio
点击右下角编译，保存


这时就可以给Actor添加我们写的C++组件了

将Actor编译保存

然后点击事件图表

从左侧拖入JoinString组件

然后就可以拉入我们写的C++函数。

新建一个事件处理器，拼接字符串Actor接收输入，参数也是两个字符串输入1输入2。拖入事件选择分配。然后按照下面的样子完成蓝图。编译，保存。

拖入完成的Actor到场景

层级是这样的

细节是这样的

打开关卡蓝图，脱出一个新的窗口。然后把大纲面板中的拼接字符串Actor拖入关卡蓝图中成为一个节点。

把Actor蓝图创建的事件分发器拖入关卡蓝图，选择绑定

之前拖入的Actor节点作为事件调用的目标，然后完成下面的连接。编译保存。

运行结果

6.连接Actor事件到UI

打开拼接字符串Actor的蓝图，新建一个事件分发器，只有一个字符串参数叫输出。拖入蓝图，选择调用。替换掉之前的输出字符串并连接。

打开UI的蓝图，添加一个变量，类型选择拼接字符串Actor

设置这个变量为可编辑实例√和生成时公开√
编译保存，重新打开关卡蓝图。下面就多出了这个端口。

连接上，编译保存。

把新创建的事件分发器拖入UI的蓝图，选择分配。
从输入（就是UI的那个输出标签）拉出设置文本。

将UI蓝图中的拼接字符串Actor与事件的对象连接。在把事件绑定等等都按照下图连接好。

编译保存，运行项目，完成了目标效果。

7.完成后的三个蓝图，仅作参考

关卡蓝图

UI蓝图

拼接字符串Actor蓝图