Fork me on Gitee

UGUI研究院之开始学习搭建界面自适应屏幕（一）

UGUI已经beat21了。。直觉已经告诉我正式版马上就要来了。刚好今天有时间，我就抽空学习一下UGUI。以前都是搞NGUI，衷心希望UGUI的诞生可以彻底干掉NGUI（目前还不太现实）。今天主要研究的是搭建界面还有自适应屏幕相关的，这里记录下我的学习笔记欢迎大家一起讨论嘿嘿。

如下图所示，我们先看Canvas，Render Mode一共有三种模式。

1.Screen Space – overlay  此模式不需要UI摄像机，UI将永远出现在所有摄像机的最前面。我觉得overlay有问题，如果我想在UI前面放个东西就不行了，因为可能在UI前面放一个特效或者UI啥的。。

2.Screen Space- Camera 此模式是我决定采取的，它需要提供一个UICamera 。这样就和NGUI的原理很像了，如果我想在UI前面加特效我可以在创建一个摄像机深度大于这个UICamera就行了。

3.World Space 这个就是完全3D的UI，UGUI的例子大多都采用它，但是我觉得目前我还是用不到。

如下图所示，在看Canvas Scaler。UGUI在处理自适应这块不需要我们自己在写算法了。

UI Scale Mode :Scale With Screen Size 表示以宽度为标准缩放。。 因为我搭建界面的时候是1024X768所以这里我写1024X768。

Screen Match Mode 选择 Expand 这个就是UGUI自己自适应屏幕的选项了。

补充： Canvas Scaler 选择 Scale With Screen Size, Screen Match Mode 选择 Match Width Or Height，比例设为1，即只和高度进行适配；

如下图所示，看看我的层次视图

Main Camera 就是主摄像机，也就是透视摄像机，它的深度最小最先绘制。

Canvas就是画布了，下面挂的UICamera 和 UIForward摄像机。

UICamera 下面挂着所有的uGUI的UI控件，它的深度大于MainCamera。

UIForward 就是前面我们说的有些东西要在UICamera的前面显示。

接着在UICamera下面挂UI控件吧。。这个比较简单就不细说了。。

因为UI的自适应UGUI已经帮我们做了，那么我们要做的就是3DCamera的自适应。把下面这个脚本挂在Main Camera上即可。

 1 using UnityEngine;
 2 using System.Collections;
 3 using UnityEngine.UI;
 4 public class CameraScale : MonoBehaviour {
 5  
 6     void Start () {
 7         int ManualWidth = 960;
 8         int ManualHeight = 640;
 9         int manualHeight;
10         if (System.Convert.ToSingle(Screen.height) / Screen.width > System.Convert.ToSingle(ManualHeight) / ManualWidth)
11             manualHeight = Mathf.RoundToInt(System.Convert.ToSingle(ManualWidth) / Screen.width * Screen.height);
12         else
13             manualHeight = ManualHeight;
14         Camera camera = GetComponent<Camera>();
15         float scale =System.Convert.ToSingle(manualHeight / 640f);
16         camera.fieldOfView*= scale;
17     }
18 }

记得增加一个UIForward 的层， 这样如果想在UI的前面添加特效 直接把它的特效的Layer设置成UIForward即可。

最后，由于我也正在学习，如果有不对的地方欢迎大家在下面给我留言。谢谢啦，呼呼～～～

posted @ 2017-02-13 16:12  AdvancePikachu  阅读(187)  评论(0)  编辑  收藏  举报