Unity2d 移动设备的横竖屏适配及UGUI画布调整使Editor与真实设备的UI显示保持一致

Unity2d默认的相机适配方法是将相机的宽高比按照手机屏幕宽高比例进行调整，保持相机高度不变并通过相机高度与屏幕实际高度比例对游戏内容进行缩放。所以不同分辨率屏幕的手机所显示的游戏内容在两边要么有裁剪，要么有黑边。实际上就是一种等高度的适配方法。

网上看到一篇文章提供了一种进行屏幕适配的方式，原文章地址为  http://www.cnblogs.com/flyFreeZn/p/4073655.html。这篇文章提供的方式是一种宽度适配，即根据手机屏幕分辨率，调整camera的正交投影下的Size属性（Projection属性设置为Orthographic，Size属性就会出现），使相机的宽度与屏幕相等，而宽高比保持与手机屏幕一致，从而达到等宽适配的目的。

camera的正交投影下的Size属性，即相机实际高度值的一半，单位不是像素而是untiy引擎的单位Unit。

举个例子：unity2d默认情况下像素Pixels与引擎单位Unit对应比例为100（当创建Canvas的同时Canvas Scaler里有Reference Pixels Per Unit显示了该值），相机默认的Orthographic下Size为5，即实际相机的高度为5 * 2 * 100 = 1000像素。

实际游戏中unity会根据手机屏幕大小对相机内的内容进行缩放。例如在640x960的手机屏幕下，相机的Size为5，则相机的宽度为5 * 2 * 100 / 960 * 640 = 666.67像素，即显示了设计时宽度为666.67像素即（6.6667Unit）的内容，多于此部分的内容将被裁减掉，少于此部分则会显示黑边。同时游戏内容会缩小到原来1000 / 960的比例。

我们现在只能调节相机的Orthographic下的Size属性，即高度，那么怎么样调整相机宽度使其成为设计尺寸呢？一般可以通过调整camera的Viewport Rect属性来满足要求，但是我不建议这样做，因为这样会令适配计算变得复杂（出现小于1的小数）。

我们可以在场景编辑器的上方标签栏中选中Scene右方的Game，然后下面有个下拉栏，如图，图中下拉栏现实的是16:10 Portrait（10:16），表示竖屏下的宽高比为10:16的分辨率，这里宽高比以括号里的为准，这里我们可以预览unity自适配在不同屏幕比例下的效果。（但并不是完全如此，在UI方面会有其他问题，也许是个bug，导致在编辑器里显示的UI内容和真机上比例不同）我们可以在这里找到我们需要的设计尺寸并选择，如果没有可以自己创建一个，步骤如下：

1、在下拉栏最下面点＋号

2、新建的尺寸中有个type属性，选择Fixed Resolution表示宽高为实际像素尺寸，选择Aspect Ratio表示宽高为比例关系。这里可以看到下拉栏里默认的选项有“:”和"x"，“:”表示为宽高比，"x"表示为实际像素尺寸。

3、选择好设计尺寸之后，再返回Scene界面，相机就会变成我们选择的设计尺寸宽高比例

4、然后调整Size的值与设计尺寸高度对应。例如设计尺寸是640x960，则Size 为 960 / 100 / 2 = 4.8。

调整相机为设计尺寸之后，就可以添加Canvas到场景中进行UI设计了。但是这时候Canvas默认大小和相机并不重合，导致设计很难下手。这里有两种方法：

第一种方法：调整Canvas的Render Mode属性为Screen Space - Camera：

1、将映射游戏内容的Camera拖入Render Camera中，下一个属性Plane Distance表示UI与Camera的在Z轴距离（其实就是变相反映了UI的Z轴位置）。

2、接着在Canvas Scaler属性里将Ui Scale Mode属性设置为Scale With Screen Size，表示Canvas会根据屏幕比例缩放。

3、下面的Reference Resolution，表示UI宽和高一半的大小。例如设计尺寸为640x960，则x应为640 / 2 = 320，宽应为960 / 2 = 480。

4、下面的Screen Match Mode属性选中Match Width Or Height，表示采用宽度（上文有提到过）或高度（Unity自带适配方式）适配。然后Match调整为0或1，0表示完全宽度适配，1表示完全高度适配，其他值表示介于两者之间采用比例适配。

第二种方法：调整Canvas的Render Mode属性为World Space

1、将Event Camera设置为映射游戏内容的Camera。

2、然后调整Rect Transform组件中的Width和Height为设计尺寸的宽和高，同时将Scale属性的X和Y都调整为0.01（对应unity2d默认情况下像素Pixels与引擎单位Unit对应比例100）。这时，Canvas的宽高正好与摄像机相同。

这两种方法都可以将UI调整为与设计尺寸一致，并且在编辑器中运行与真机中运行效果保持一致。

最后贴出改进后的相机自适配的脚本代码，这个代码可以保证游戏的设计尺寸宽高比不变动，同时不用改变原来的设计尺寸数值（即不用修改Camera的Size值和Canvas的相关属性，例如脚本中设计尺寸为640x960，但可以在320x480的尺寸下设计游戏，最终的游戏尺寸将根据脚本中的尺寸进行适配）：

using UnityEngine;
using System.Collections;

public class CameraControl : MonoBehaviour {

	// portrait 640 x 960 ; landscape 1136 x 640
	public const float DesignWidth = 6.4f;<span style="white-space:pre">			</span>//设计尺寸宽度
	public const float DesignHeigt = 9.6f;<span style="white-space:pre">			</span>//设计尺寸高度

	public bool fitWidth = true;<span style="white-space:pre">	</span>//是否采用宽度适配

	// Use this for initialization
	void Start () {
		if (fitWidth) {
			Camera camera = GetComponent<Camera>();
			float cameraWidth = camera.orthographicSize * 2.0f / Screen.height * Screen.width;

			if(cameraWidth < DesignWidth){
				float cameraHeight = DesignWidth / Screen.width * Screen.height;
				camera.orthographicSize = cameraHeight * 0.5f * (camera.orthographicSize / (DesignHeigt * 0.5f));
			}
		}
	}
}