UGUI开始学习搭建界面自适应屏幕实现详解

UGUI目前已经到beat21版本了，直觉告诉我正式版马上就要发布。刚好今天有空，我便抽空学习一下UGUI。此前我一直使用NGUI，真心希望UGUI的诞生能彻底取代NGUI（虽然目前不太现实）。今天我主要研究的是界面搭建以及屏幕自适应相关内容，在此记录下我的学习笔记，欢迎大家一起讨论。

Canvas的Render Mode

如下图所示，我们先来了解Canvas的Render Mode，它一共有三种模式：

1. Screen Space – Overlay

此模式不需要UI摄像机，UI将始终显示在所有摄像机画面的最前面。不过，我认为这种模式存在局限性。例如，如果我们想在UI前面放置一些元素，如特效或其他UI，就无法实现。

2. Screen Space - Camera

这是我打算采用的模式。在这种模式下，需要提供一个UICamera。它的原理与NGUI很相似，如果我们想在UI前面添加特效，只需创建一个深度大于这个UICamera的摄像机即可。

3. World Space

这种模式下的UI是完全3D的，UGUI的很多示例都采用了这种模式。但就目前而言，我暂时用不到。

Canvas Scaler

如下图所示，接下来看看Canvas Scaler。在处理屏幕自适应方面，UGUI无需我们自己编写算法。

• UI Scale Mode: Scale With Screen Size：表示以宽度为标准进行缩放。由于我搭建界面时的尺寸是960X640，所以这里我设置为960X640。
• Screen Match Mode：选择Expand，这是UGUI实现屏幕自适应的选项。

层次视图分析

如下图所示，下面来分析一下我的层次视图：

• Main Camera：即主摄像机，也是透视摄像机，它的深度最小，会最先绘制。
• Canvas：相当于画布，下面挂载了UICamera和UIForward摄像机。
• UICamera：下面挂载着所有uGUI的UI控件，它的深度大于MainCamera。
• UIForward：用于显示需要在UICamera前面显示的元素。注意，Camera的size = 3.2，这是通过960 / 640计算得出的。

挂载UI控件

接下来，在UICamera下面挂载UI控件。这个操作比较简单，就不详细说明了。

3DCamera的自适应

由于UGUI已经帮我们实现了UI的自适应，所以我们只需处理3DCamera的自适应。将下面的脚本挂载在Main Camera上即可：

using System.Collections;
using UnityEngine.UI;

public class CameraScale : MonoBehaviour {
void Start () {
int ManualWidth = 960;
int ManualHeight = 640;
int manualHeight;
if ((float)Screen.height / Screen.width > (float)ManualHeight / ManualWidth)
manualHeight = Mathf.RoundToInt((float)ManualWidth / Screen.width * Screen.height);
else
manualHeight = ManualHeight;
Camera camera = GetComponent<Camera>();
float scale = (float)manualHeight / 640f;
camera.fieldOfView *= scale;
}
}

特效层设置

记得增加一个UIForward层，这样如果想在UI前面添加特效，只需将特效的Layer设置为UIForward即可。