UMG入门（一）

你会学到什么？

    一个简单的UI界面

    游戏的暂停、继续与退出

    游戏分辨率的设置等

所需素材（模版：第三人称射击，这个随意）

    一个UI框框（可有可无）

    一张背景图片（可有可无）

最终效果演示：https://www.bilibili.com/video/av55498313

1. 创建主界面
1.1  创建一个控件蓝图，并重命名为“GameLogin”

1.2 在Canvas Panel 下新建一个Vertical Box，调整为适当的尺寸，然后设置锚点为正中心。

更多精彩图片 请登录

更多精彩图片 请登录

1.3 在Vertical Box 下新建一个Button，然后在Button下添加一个Text文本。

更多精彩图片 请登录

（点击Button ，在细节面板设置正常显示时的属性，可以以此设置Hovered悬停，pressed点击时的框框）

文本的设置可以根据自己的需要设置（记得编译保存）

参考如下：

更多精彩图片 请登录

更多精彩图片 请登录

1.4 在关卡蓝图中调用该蓝图

更多精彩图片 请登录

思路：绑定Tab键à让游戏暂停à显示鼠标光标à调用控件蓝图à添加到视图

参考如下：

更多精彩图片 请登录

1.5 设置按钮功能

点击Continue按钮，重命名为OnContinue，在细节面板添加一个点击事件（OnClicked）

更多精彩图片 请登录

更多精彩图片 请登录

点击ExitGame按钮，重命名为OnExitGame，在细节面板添加一个点击事件（同上）

更多精彩图片 请登录

2. 改变游戏分辨率
2.1 创建一个新的控件蓝图，重命名为Settings

编辑该蓝图，添加一个image，在细节面板添加图片

更多精彩图片 请登录

添加一个Vertical Box (锚点同样设置为正中心)作为分辨率的主体备用，再添加一个Button和Text，让游戏在设置完分辨率后可以返回UI面板。（确定后面的小眼睛是否打开）

参考如下：

更多精彩图片 请登录

更多精彩图片 请登录

2.2 现在新建一个控件蓝图，重命名为BTN，用来显示多种自定义的分辨率

打开这个蓝图，添加一个Horizontal Box，在下面添加一个button和text

Button的属性如下：

更多精彩图片 请登录

整个蓝图的参考：

更多精彩图片 请登录

更多精彩图片 请登录

点击右上角的Graph，进入图表面板

更多精彩图片 请登录

在Variables标签下，添加一个文本变量，重命名为textContent，并将它公开（可编辑状态）

更多精彩图片 请登录

2.3 现在回到Settings控件蓝图

点击右上角的Graph，进入图表面板

在Variables下新建一个变量，重命名为ScreenSize，具体属性设置如下：

更多精彩图片 请登录

Graph的参考如下：

更多精彩图片 请登录

更多精彩图片 请登录

2.4 打开BTN蓝图，实现分辨率的改变

打开BTN蓝图，点击添加的Text，在Content上创建一个绑定事件

更多精彩图片 请登录

将创建的text content变量与返回值连接

更多精彩图片 请登录

点击创建的Button，在Events面板添加一个点击事件

更多精彩图片 请登录

（分辨率设置的控制台命令例子为：r.setRes 800 x 600）

现在编译运行看看。

2.5 最后一个功能，分辨率设置完成后可以退出分辨率的设置

打开Settings蓝图，点击添加的Button（内容为back），添加一个点击事件

更多精彩图片 请登录