首页 > 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. Bruin 说：
    2020 年 4 月 28 日下午 2:37

    雨松大大，问下在uicamera下新建了个ScorllView组件无法拖动是什么原因呢？解决办法是什么呢？

    回复
  2. 杨辉 说：
    2018 年 6 月 26 日上午 10:45

    雨松大大，你好！本人菜鸟一枚，对大神仰慕已久！关于此贴（UGUI自适配屏幕），我想请教两个问题（不懂）：
    问题一：为什么 “注意Camera的的size ＝ 3.2 ，也就是960/640=3.2 。” 这里的size一定要设置特定值（3.2），大小不能任意？
    问题二：既然存在UICamera, 为什么还要在Main Camera上边挂3DCamera的自适配脚本（自适配屏幕不是针对UI做的吗）？
    希望大神看到给一下解答，拜托了。

    回复
  3. PtrPA 说：
    2016 年 11 月 22 日下午 2:56

    雨松，原工程项目是否可以发下连接，有些地方不是很明白，十分感谢。

    回复
  4. Momo 说：
    2016 年 10 月 25 日上午 10:45

    这种适配以后，不用再设置锚点，不用改变他的大小了吗？不改变UI的大小，边上会空出很多，怎么办，只需要这样适配下就可以了吗

    回复
  5. xiej 说：
    2016 年 10 月 7 日下午 3:52

    这个 960/640 = 3.2确实有点误导人，如果是 1280/740 = ？？http://www.cnblogs.com/zhaoqingqing/p/3556249.html这个博客貌似是正解

    回复
  6. xiej 说：
    2016 年 10 月 7 日下午 3:52

    这个 960/640 = 3.2确实有点误导人，如果是 1280/740 = ？？http://www.cnblogs.com/zhaoqingqing/p/3556249.html这个博客貌似是正解

    回复
  7. ccc 说：
    2016 年 7 月 15 日下午 6:03

    注意Camera的的size ＝ 3.2 ，也就是960/640=3.2———————————————————————————960/640=3.2？你是骗我的吧…

    回复
  8. 简一 说：
    2016 年 5 月 26 日下午 3:41

    有两点要说的是，UICamera的ClearFlags要设置成Depthonly，ClippingPlanes的距离也要调一下，不然会渲染不到

    回复
  9. 难因快乐 说：
    2016 年 3 月 31 日下午 4:57

    问下，Screen Match Mode不用Expand，有什么bug么，如果采用高度适配的话，在宽高比1.3的ipad 上会有紧凑和重叠问题。

    回复
  10. 坚定的蜗牛 说：
    2016 年 3 月 24 日上午 11:49

    雨松大神，Ngui UI前面显示特效，为什么和在UGUI下 效果不同 ，咋办

    回复
  11. CHYME 说：
    2016 年 2 月 2 日下午 12:32

    松哥，我想请教个问题，不使用九宫格模式，我要所有控件跟着背景整体放大缩小，所有控件在背景图的所在位置也跟着背景图变化，该怎么实现？

    回复
  12. TrustTJM 说：
    2015 年 10 月 25 日下午 7:50

    雨松大神，真心求教个问题咧，小弟按照这种篇文章中的方法来做，发现针对一种比例下的分辨率咧，比如3:2,只能在这比例下放大的分辨率才能能起作用（如：960:640，300:200），但是如果是16:9，4:3的设备就不对了，特别是想让某个icon角落对其在不同比例下也会出现奇怪的情况。当然，也可能是我操作错误造成只能适应分辨率，不能适应比例的情况，所以特来求教，请大神你来看看是咋回事咧，我的疑问是对还是错？如果是对的，大神你有啥好的解决思路吗？能否说出来交流一二！[呵呵]

    回复
  13. 一直都想起一个特别文艺的名字丶 说：
    2015 年 10 月 15 日上午 11:06

    请问，选择 Scale With Screen Size 一般就是使用 960*640 来做吗？

    回复
  14. 任胜强 说：
    2015 年 10 月 5 日下午 10:02

    真正的项目中不是这样子进行适配的，因为这样子对 stretch 模式的 UI 不够友好，一半选择是根据高度进行适配，这样子制作UI的时候高度上是可以固定的，然后宽度上需要进行自适应，和屏幕的两边进行对齐。因此真正的使用规则如下：1. Canvas 选择 Screen Space-Camera 模式；2. Camera 设置成正交模式；3. Canvas Scaler 选择 Scale With Screen Size, Screen Match Mode 选择 Match Width Or Height，比例设为1，即只和高度进行适配；4. Camera 的 Clear Flags 选择 Depth Only。

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

      hi 我有跟进了一下，你说的这个方法确实更好一些。因为我遗传了NGUI时代的制作方式。 所以项目中就没有用stretch这个东西。UGUI的这个stretch 确实很强大。 以后项目就用它了Match Width Or Height， 再次感谢你的补充。thanks

      回复
  15. 工口卡咩 说：
    2015 年 9 月 24 日下午 11:54

    “Canvas就是画布了，下面挂的UICamera 和 UIForward摄像机。UICamera 下面挂着所有的uGUI的UI控件，它的深度大于MainCamera。”关于这两句，如果选择了screen space – camera模式的话，这么做并没有任何实际意义。因为此时画布应该跟着相机的位置移动。但如果相机是画布的子物体，按照逻辑相机又会跟着画布移动。这样就造成一个死循环。unity为了处理这个死循环，还特意加了逻辑，让此时相机的子物体的rectTransform部分功能不可用。这一点还望在文中修正一下~打扰啦

    回复
  16. coder 说：
    2015 年 9 月 11 日下午 4:01

    UGUI研究院之开始学习搭建界面自适应屏幕（一） - 雨松MOMO程序研究院 - 1 把UI控件挂到UICamera无法设置控件的锚点，怎么做到适配呢？

    回复
  17. 绿水之远 说：
    2015 年 8 月 17 日下午 8:57

    Assets/CameraScale.cs(5,1): error CS1041: Identifier expected: `public’ is a keyword粘贴了代码，报这个错是什么原因呀？

    回复
  18. 紫雪 说：
    2015 年 7 月 24 日下午 4:44

    雨松，您好！我想问一个问题，假如我的Canvas选择了Screen Space – Camera后，我需要把一个3D物体转化成屏幕坐标，把UI上的某个控件坐标转化成3D世界坐标，这个怎么办？

    回复
  19. 王敏 说：
    2015 年 7 月 23 日下午 5:23

    你好雨松 mac 版本的unity5.0 没有canvas scaler…怎么解决呢

    回复
  20. lojne 说：
    2015 年 7 月 17 日上午 10:13

    雨松哥 新手真的很不明白为什么还要加最后的那个脚本 它的意义是啥啊 不加也可以实现啊？~

    回复
← 早期评论

留下一个回复

你的email不会被公开。