【虚幻引擎】UE4初学者系列教程实战篇——Ureal UMG基础与实例

UMG： 虚幻动态图形 UI 设计器。是一款视觉UI创作工具。可用于创作想要呈现给用户的UI元素。

• UMG 的核心是 控件 ，即用于构成界面的一系列预先制作的功能（比如按钮、复选框、滑块、进度条等）。

• 这些控件在专门的控件蓝图中进行编辑，编辑时将用到两个选项卡进行构建： 设计器选项卡 实现界面的 视觉布局 ， 而 图形选项卡 则实现使用控件时提供的 功能 。

制作预览：

目录

制作预览：

实例操作：

一、创建工程文件和UMG

（1）调整格式大小

（2）添加边界铺满画面

（3）将图片置入

 （4）将ui显示在屏幕上并调试屏幕大小

二、裁剪图片

1.导入图片文字进行裁剪

2.导入图片按钮进行裁剪

三、制作界面一：PlayMune

画面预览：

​编辑

1.制作play按钮

（1）调整点击激活状态

（2）演示查看

2.制作shop按钮

（1）制作按钮

（2）演示查看

3.制作Leaders按钮

（1）制作按钮

（2）演示查看

4.制作设置按钮

（1）制作按钮

（2）演示查看

5.固定按钮

​编辑

（1）调整锚点

（2）演示查看不同比例

四、制作界面二：ShopMune

（1）制作界面二背景

（2）制作界面二分页1

（3）制作界面二分页2

（4）显示分页1

（5）制作购买页面

​编辑

（6）编写制作分页1和分页2的蓝图

（7）制作购买页面的蓝图

（8）制作购买成功页面

五、制作界面三：Settingmenu

（1）制作Settingmenu

（2）添加文本块

（3）添加勾选框

（4）添加组合框

（5）制作详情页面

（6）添加返回按钮

六、创建界面四：MainMenu

 七、创建界面链接

八、修改屏幕分辨率

---

实例操作：

一、创建工程文件和UMG

创建文件夹

创建UMG

（1）调整格式大小

将填充屏幕修改为自定义

给自定义一个宽高的数值

画面变成竖版

（2）添加边界铺满画面

 回到ui控件，将边界添加到画面中，修改名字为Background

将锚点范围进行调整，按住ctrl和这个锚点，就会铺满画面

（3）将图片置入

选择图像

如果想要夜晚的感觉可以在着色上面添加紫色的色调（按照大家的个人审美进行调整，演示截图都为白天的效果）

 （4）将ui显示在屏幕上并调试屏幕大小

写一个蓝图让ui显示在屏幕上，并且出现鼠标光标

鼠标光标节点搜索：mouse cursor

调试屏幕大小

现在对画面来进行运行会发现，显示的屏幕大小并不是我们想要的，那么现在再对于屏幕来进行调试

先将屏幕显示单独显示在新窗口中

再修改窗口的尺寸

二、裁剪图片

1.导入图片文字进行裁剪

点击想要的图片，会发现文字都写在一起

打开文件

在右侧选择上编辑源区域，未点击不可将画面进行剪切

方式一：按ctrl+鼠标左键框选自己想要的范围进行裁剪

（方法二在下面第二点）

裁剪出来七个部分

裁剪出来这些内容

（单独打开某一个剪切的内容，查看全部就是点击源纹理进行查看）

2.导入图片按钮进行裁剪

回到ui里面进行制作按钮

创建按钮取名为Button_Play （开始按钮）

选择开始按钮的

选择上元素9

方式二：让UE来进行提取sprite（缺点：有一些小方块也会被提取，需要后期删除）

保存时修改一下名称

将提取后的内容放置到我们的sprites文件夹内，直接拖拽

删除掉多余的内容

回到ui选择上对应的按钮

三、制作界面一：PlayMune

画面预览：

1.制作play按钮

拉入一个图像来放置play按钮，取名为Image_PLAY，选用的时候把右侧外观的绘制为切换为图像（不然会出现图片有裂纹，或者文字变形）