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

关注

原创最新推荐文章于 2026-03-11 17:20:11 发布 295 阅读 AI 写同款· GEO 优化 ›

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 }