【UE5 多人联机教程】02-开始游戏菜单控件

目录

步骤

一、完善开始游戏菜单控件

二、控件功能实现

2.1 “开始游戏”按钮切换界面

2.2 “创建房间”、“加入房间”按钮切换界面

2.3 “创建房间”按钮


步骤

一、完善开始游戏菜单控件

打开“UMG_Main”

【UE5 多人联机教程】02-开始游戏菜单控件_第1张图片

 首先在控件切换器外层包裹一个画布面板

【UE5 多人联机教程】02-开始游戏菜单控件_第2张图片

 然后调整控件切换器全屏显示

【UE5 多人联机教程】02-开始游戏菜单控件_第3张图片

 将作为背景的图像控件移至和控件切换器同一层级

【UE5 多人联机教程】02-开始游戏菜单控件_第4张图片

 在控件切换器中再添加一个画布面板

【UE5 多人联机教程】02-开始游戏菜单控件_第5张图片

在该画布面板中添加一个垂直框

【UE5 多人联机教程】02-开始游戏菜单控件_第6张图片

再添加一个尺寸框作为垂直框的子级

【UE5 多人联机教程】02-开始游戏菜单控件_第7张图片

 尺寸框中添加一个按钮,用于返回另一个画布面板

【UE5 多人联机教程】02-开始游戏菜单控件_第8张图片

尺寸框下面再添加一个尺寸框,作为空白行

【UE5 多人联机教程】02-开始游戏菜单控件_第9张图片

 再添加一个尺寸框里面添加两个按钮

【UE5 多人联机教程】02-开始游戏菜单控件_第10张图片

继续添加一个尺寸框

【UE5 多人联机教程】02-开始游戏菜单控件_第11张图片

水平框中的尺寸框均为填充,填充比例为4:1:4

【UE5 多人联机教程】02-开始游戏菜单控件_第12张图片

 向这三个尺寸框中的第一个添加一个控件切换器和垂直框

【UE5 多人联机教程】02-开始游戏菜单控件_第13张图片

 垂直框中添加“Switch Text”控件,用于切换人数,需要在“Switch Texts”数组中设置切换选项。

【UE5 多人联机教程】02-开始游戏菜单控件_第14张图片

同样的,再添加“Switch Text”控件,用于切换网络

【UE5 多人联机教程】02-开始游戏菜单控件_第15张图片

 添加一个按钮

【UE5 多人联机教程】02-开始游戏菜单控件_第16张图片

添加一个文本控件

【UE5 多人联机教程】02-开始游戏菜单控件_第17张图片 创建完创建游戏的面板后,下面开始创建加入游戏的面板

【UE5 多人联机教程】02-开始游戏菜单控件_第18张图片

 添加如下两个控件

【UE5 多人联机教程】02-开始游戏菜单控件_第19张图片

 再添加一个滚动框和一个垂直框用于显示房间列表

【UE5 多人联机教程】02-开始游戏菜单控件_第20张图片

 第三个尺寸框加入两个文本控件用于显示提示信息

【UE5 多人联机教程】02-开始游戏菜单控件_第21张图片

二、控件功能实现

2.1 “开始游戏”按钮切换界面

我们希望点击开始游戏,界面切换到两一个画布面板

【UE5 多人联机教程】02-开始游戏菜单控件_第22张图片

 在图表中添加如下节点,实现点击“开始游戏”按钮 让控件切换器切换到索引为1的画布面板

【UE5 多人联机教程】02-开始游戏菜单控件_第23张图片

 当点击返回按钮时,控件切换器切换到索引为0的画布面板

【UE5 多人联机教程】02-开始游戏菜单控件_第24张图片

【UE5 多人联机教程】02-开始游戏菜单控件_第25张图片

 此时运行游戏已经能够实现切换:

【UE5 多人联机教程】02-开始游戏菜单控件_第26张图片

2.2 “创建房间”、“加入房间”按钮切换界面

下面添加“创建房间”和“加入房间”按钮的点击事件,这两个按钮只是用于显示创建房间或加入房间的画布面板

【UE5 多人联机教程】02-开始游戏菜单控件_第27张图片

【UE5 多人联机教程】02-开始游戏菜单控件_第28张图片

 设置按钮背景色在不激活时全透明

【UE5 多人联机教程】02-开始游戏菜单控件_第29张图片

激活时也是全透明

【UE5 多人联机教程】02-开始游戏菜单控件_第30张图片

 点击后修改按钮的激活状态

【UE5 多人联机教程】02-开始游戏菜单控件_第31张图片

2.3 “创建房间”按钮

增加创建房间按钮的点击事件

【UE5 多人联机教程】02-开始游戏菜单控件_第32张图片

(未完待续。。)

你可能感兴趣的:(虚幻5,ue5)