首页 > Unity3D频道 > 【UGUI研究院】 > UGUI研究院之开始学习搭建界面自适应屏幕（一）
2014
10-22

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的例子大多都采用它，但是我觉得目前我还是用不到。

UGUI研究院之开始学习搭建界面自适应屏幕（一） - 雨松MOMO程序研究院 - 1

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

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

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

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

UGUI研究院之开始学习搭建界面自适应屏幕（一） - 雨松MOMO程序研究院 - 2

 

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

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

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

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

UIForward 就是前面我们说的有些东西要在UICamera的前面显示。注意Camera的的size ＝ 3.2 ，也就是960/640=3.2 。

UGUI研究院之开始学习搭建界面自适应屏幕（一） - 雨松MOMO程序研究院 - 3

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

UGUI研究院之开始学习搭建界面自适应屏幕（一） - 雨松MOMO程序研究院 - 4

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

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

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

UGUI研究院之开始学习搭建界面自适应屏幕（一） - 雨松MOMO程序研究院 - 5

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

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

《UGUI研究院之开始学习搭建界面自适应屏幕（一）》有 76 条评论

较新评论 →
  1. 求解 说：
    2015 年 7 月 14 日上午 10:44

    官方汽车的例子里面，如果CarTiltControls这个画布的渲染模式改为camera，Accelerator按钮的响应有点问题，如果是overlay模式就没问题。好奇怪啊

    回复
  2. 逍遥随风翼 说：
    2015 年 6 月 30 日下午 3:34

    为什么我的版本没有canvas scaler…

    回复
  3. 周军 说：
    2015 年 6 月 10 日上午 11:22

    这样设置后Slider用鼠标没法拖动了

    回复
  4. 吴涛 说：
    2015 年 5 月 20 日下午 2:27

    如果特效既要在ui前面 也可以被ui挡住该如何做呢

    回复
  5. 乌云 说：
    2015 年 4 月 17 日下午 5:12

    怎么让ugui的自适应按百分比而不是固定像素,就像NGUI那样。100 * 100: left = 10 top = 10 right = 10 bottom=10换算成 left = 0.1 top = 0.1 right = 0.1 bottom=0.1

    回复
  6. 急 说：
    2015 年 4 月 10 日上午 10:48

    为什么我的MainCamera看不到UICamera上的内容？

    回复
    • 急 说：
      2015 年 4 月 10 日上午 10:56

      我都不知道我做了什么，这次又能看到了，UIForward 摄像机下添加了一个image，都设置了UIForward layer，为什么UIForward 摄像机看不到这个image？

      回复
      • 急 说：
        2015 年 4 月 10 日上午 11:04

        canvas下 UIForward下 image，也就是说image是canvas的子物体，是不是只有UICamera才能看到，那为什么MainCamera也能看到呢，就这个UIForward 看不到，需要设置什么吗

        回复
  7. sqsa 说：
    2015 年 3 月 24 日下午 8:55

    想问一下，MOMO 现在的项目的UI 系统就是根据这套设置来解决UI 特效的问题吗

    回复
  8. 李善伟 说：
    2015 年 1 月 17 日下午 5:10

    注意Camera的的size 为什么是 3.2 ，也就是960/640=1.5 啊？

    回复
  9. zhizunbao 说：
    2015 年 1 月 14 日下午 2:25

    为什么uGUI没有camera也可以显示呢，既然可以显示，你为什么还要加一个UICamera?

    回复
  10. Keyboard_NOW 说：
    2014 年 12 月 29 日下午 4:54

    新版5.0beta 9，创建Cavas没有 Cavas Scaler组件了。奇怪

    回复
  11. 怂花蛋 说：
    2014 年 12 月 25 日上午 11:36

    今天开始学新ui！

    回复
  12. helloWorld 说：
    2014 年 12 月 18 日下午 2:51

    用 Screen Space- Camera 模式的是，如果动态添加 button 控件，位置会错。 Vector3 getPositionByIndex(int i) { int Width = (int)((float)Screen.width / (float)10); int Height = (int)((float)(Screen.height / 2) / (float)10); float x = i * Width Width / 2; return new Vector3(x, Height, 0); }请问动态添加控件要怎么做？ 在Screen Space- Camera模式下。我在Screen Space – overlay下 是正常的

    回复
  13. helloWorld 说：
    2014 年 12 月 18 日下午 2:51

    用 Screen Space- Camera 模式的是，如果动态添加 button 控件，位置会错。 Vector3 getPositionByIndex(int i) { int Width = (int)((float)Screen.width / (float)10); int Height = (int)((float)(Screen.height / 2) / (float)10); float x = i * Width + Width / 2; return new Vector3(x, Height, 0); }请问动态添加控件要怎么做？ 在Screen Space- Camera模式下。我在Screen Space – overlay下 是正常的

    回复
  14. yksalun 说：
    2014 年 12 月 15 日下午 5:13

    UIForwardCamera的Depth应该要比UICamera大吧 但是我这里的显示是只要加了比UICamera大的camera UI就不显示了。请问momo你那边没问题的么

    回复
  15. MONO粉 说：
    2014 年 11 月 27 日下午 3:48

    4.6想把UI控件定位在4个角上，要怎么设置？效果就是要实现NGUI的Anchor那样。

    回复
  16. flyingfether 说：
    2014 年 11 月 1 日下午 4:24

    5.0beta9好像没有Canvas Scaler，那要怎么做适配呢？

    回复
  17. c6u2 说：
    2014 年 10 月 23 日上午 9:26

    这么做是不是在CANVAS节点下的所有LABEL,SPRITE都会按照屏幕比例缩放？如果有个方案需求是背景随屏幕比例缩放，而里面的按钮，文本，滑动框按照原始比例不变，是不是应该建2个CANVAS？做第一个CANVAS根据屏幕缩放，第二个CANVAS节点下的物体用锚点对齐的方式做位置自适应？

    回复
    • 雨松MOMO 说：
      2014 年 10 月 23 日上午 10:12

      锚点做对齐方式只有内种简单的界面可以 ，比如战斗界面可以挂在四个角上。。 真正的UI界面比较复杂的 已经布置好的界面 就不能随意拉伸了，只能整体像一个方向对齐。。

      回复
  18. 源代码 说：
    2014 年 10 月 22 日下午 8:34

    Canvas对象上加Reference Resolution组件实现自适应缩放，不是更好吗？雨松前辈您说呢？请指点file:///Applications/Unity 11.28.40/Unity.app/Contents/Documentation/html/en/Manual/script-ReferenceResolution.html

    回复
  20. 源代码 说：
    2014 年 10 月 22 日下午 8:34

    Canvas对象上加Reference Resolution组件实现自适应缩放，不是更好吗？雨松前辈您说呢？请指点file:///Applications/Unity%2011.28.40/Unity.app/Contents/Documentation/html/en/Manual/script-ReferenceResolution.html

    回复
较新评论 →

留下一个回复

你的email不会被公开。