Raywenderlich UI搭建（一）

Unity 版本

Unity2019.4

代码下载地址

Introduction to Unity UI – Part 1

创建 MenuScene

Project 窗口右键创建新的场景，名字为 MenuScene：

导入图像和字体

RW下新建 UI 目录， 解压下载资源 UI Assets, 拖入到 Unity 中：

注意检查下导入图片的格式设置，必须为 Sprite。
图片格式处理脚本 AssetImport， 放到 Editor（需要在 Assets 中新建一个）。

添加第一个UI

打开 MenuScene 场景，Hierarchy 右键 - UI - Image，设置 Image 的 PosX 和 PosY 为 0。

Canvas： 所有的 UI 都需要放在画布上。
EventSystem：处理输入事件、光线、投影等。

设置菜单背景

1.重命名上一步添加的 Image 为 Background。
2.选中 Background，Inspector 面板添加背景图片：

3.点击 Background 的 Image 组件的 Set Native Size，调整大小 width = 1136 和 Height = 640。

Canvas Scalar 的使用

1.由于摄像机的位置和图片的尺寸等因素，图片并没有完全的显示，这时候需要 Canvas Scalar 来处理。
2.选择 Canvas ，Inspector 面板显示该组件：

3.UI Scale Mode：UI 元素的缩放方式：

• Constant Pixel Size：无论屏幕大小如何，UI 元素都保持相同的像素大小。默认值。
• Scale With Screen Size：屏幕越大，UI 元素越大。
• Constant Physical Size：无论屏幕大小和分辨率如何，UI 元素都保持相同的物理大小。

4.设置
Mode 改为 Scale With Screen Size：

5.切换到IOS平台
File - Building Settings... ：

6.切换到 IPone X 系列，直到会出现下列的图片（两边蓝色）：

7.Hierarchy 面板选择 Background ，添加 Aspect Ratio Fitter 组件，Aspect Mode 选择 Envelope Parent。

添加页面标题

在 Canvas 中新添加一个 Image图像，重命名为 Header，设置 Source Image，点击 Set Native Size。

设置 Rect Transform

1.设置 Header 的相对布局为 Top-Center，PosX=0，PosY=-100。

2.注意到上面的 floor 部分没有显示，修复进行下面设置：

• 选择 Background
• 禁用 Aspect Ratio Filter。
  
• 修改 Pivot 的 Y 为 0。
• 启用 Aspect Ratio Filter。

添加开始按钮

选中 Canvas，右键添加 UI - Button

• 重命名 StartButton。
• 设置 Rect Transform 的 Anchors 为bottom-stretch。
• 设置 X 为 (Min: 0.2， MAX：0.8) 。
• 设置 Left 和 Right 为 123。
• 设置 Pivot 为 (X: 0.5，Y：0)。
• 设置高为 80。
• 设置 Pos Y 为 300。
• 设置 StartGame 按钮的子组件 Text：
  

按钮的样子

安装 Sprite 编辑器

右键 Package - View In Package Manager：

编辑按钮的背景图片

1.分别编辑图片 btn_9slice_highlighted、btn_9slice_pressed 、btn_9slice_normal image（Sprite Editor 进行编辑 ）：

2.修改下面4个参数， 点击 Apply 保存：

3.选择 StartButton 按钮，设置下面选项：

4.设置字体

5. 字体颜色选择白色。

设置按钮

1.复制 StartButton 按钮，重命名为 SettingButton。

2.修改位置信息
Anchors 修改为 Bottom-stretch。

3.设置按钮文本

添加 Scene到 Build

如果有多个场景，需要把场景添加到构建列表

File - Building Setting... - Add Open Scene。

创建 UIManager

1.新建 GameObject，重命名为 UIManager。
2.RW 目录创建 Scripts - UIManager 脚本。

	using UnityEngine;
	using UnityEngine.SceneManagement;
	
	public class UIManager : MonoBehaviour
	{
	    public void StartGame()
	    {
	        SceneManager.LoadScene("RocketMouse");
	    }
	}

3.挂载脚本到 UIManager 对象。

4.绑定 StartButton 事件

5.将 RW/Scenes/RocketMouse 场景添加到构建列表。
6.保存，启动游戏。

文献

[1] 资源下载
[2] 画布缩放器 (Canvas Scaler)
[3] 宽高比适配器 (Aspect Ratio Fitter)
[4] Introduction to Unity UI – Part 1
[5] Introduction to Unity UI – Part 2