首页 > 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上即可。

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

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

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

雨松MOMO提醒您:亲,如果您觉得本文不错,快快将这篇文章分享出去吧 。另外请点击网站顶部彩色广告或者捐赠支持本站发展,谢谢!

--

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠如果您愿意花10块钱请我喝一杯咖啡的话,请用手机扫描二维码即可通过支付宝直接向我捐款哦。

UGUI研究院之开始学习搭建界面自适应屏幕(一)》有 70 条评论

  1. PtrPA 说:

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

  2. Momo 说:

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

  3. xiej 说:

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

  4. xiej 说:

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

  5. ccc 说:

    注意Camera的的size = 3.2 ,也就是960/640=3.2———————————————————————————960/640=3.2?你是骗我的吧…

  6. 简一 说:

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

  7. 难因快乐 说:

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

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

  9. CHYME 说:

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

  10. 任胜强 说:

    真正的项目中不是这样子进行适配的,因为这样子对 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 说:

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

  11. 工口卡咩 说:

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

  12. coder 说:

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

  13. 绿水之远 说:

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

  14. 紫雪 说:

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

  15. 王敏 说:

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

  16. lojne 说:

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

  17. 求解 说:

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

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

  19. 周军 说:

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

  20. 吴涛 说:

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

  21. 乌云 说:

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

  22. 说:

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

    • 说:

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

      • 说:

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

  23. sqsa 说:

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

  24. 李善伟 说:

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

  25. zhizunbao 说:

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

  26. Keyboard_NOW 说:

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

  27. 怂花蛋 说:

    今天开始学新ui!

  28. helloWorld 说:

    用 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下 是正常的

  29. helloWorld 说:

    用 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下 是正常的

  30. yksalun 说:

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

  31. MONO粉 说:

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

  32. flyingfether 说:

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

  33. c6u2 说:

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

    • 雨松MOMO 说:

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

  34. 源代码 说:

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

  35. 源代码 说:

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

留下一个回复

你的email不会被公开。