开始学习搭建界面自适应屏幕(一)

发表于2015-07-20
评论0 1k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594

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 表示以宽度为标准缩放。。 因为我搭建界面的时候是960X640所以这里我写960X640。

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


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

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

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

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

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


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


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

[C#] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<font face="Verdana,">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;
        }
}</font>

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

5.png (51.04 KB, 下载次数: 2)

下载附件  保存到相册

2015-6-10 16:58 上传


待续

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台