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

在处理屏幕自适应方面，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计算得出的。

之后，我们可以在UICamera下面挂载UI控件，这个操作相对简单，在此就不详细说明了。

3DCamera的自适应

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

using UnityEngine;
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即可。

最后，由于我也正在学习UGUI，若文中存在错误，欢迎大家在下方留言指正。谢谢！