理解和使用 Unity UI 系统 Unity 4.6

Babybus-u3d技术交流-理解和使用 Unity UI 系统 Unity 4.6

*原文
http://www.cnblogs.com/whitecat/p/4159815.html

随着 Unity 4.6 发布,新 UI 系统终于与大家见面了。这篇文章将不会介绍如何使用按钮、滚动条之类的UI控件,这些内容可以参考 [Unity Manual
;这篇文章的重点是,如何理解 UI 系统的设计,以便更好的在实际中使用、自定义和扩展。
EventSystem
如果你使用 UI 系统,那么 EventSystem 对象会自动创建。这个对象负责监听用户输入。默认情况下,在电脑上可以使用键盘和鼠标输入,在移动设备上可以使用触摸输入。但是如果你要为surface这样的设备开发,你也可以同时启用两种输入。当需要屏蔽用户输入时,将此对象关闭即可。UnityEngine.EventSystems.EventSystem.current 保存了当前活动的 EventSystem 对象。
Canvas
Canvas 是其他所有 UI 对象的根。在一个场景里 Canvas 数量和层级都没有限制。子 Canvas 使用与父 Canvas 相同的渲染模式。一个 Canvas 有三种渲染模式:
Screen Space - Overlay:UI元素相对于屏幕空间,以2D方式显示在任何相机画面的上面。这是非常标准的 UI 风格。典型例子:大量窗口、文本和按钮的策略游戏。
Screen Space - Camera:UI元素相对于屏幕空间,由指定的相机负责显示,相机的参数影响显示的结果。你可以把 Canvas 理解为相机的子物体。典型例子:射击游戏屏幕上的 3D HUD。
World Space:UI元素相对于世界空间,和其他场景里的物体一样有世界位置、遮挡关系。通常用来做非常创新的 UI 设计。例子:游戏内的手机屏幕、与场景绑定的游戏指导等。
CanvasScaler
这个组件负责屏幕适配。UI 系统使用 RectTransform 来计算 UI 的位置和大小,但这还不够。如何让设计的 UI 可以适配不同的分辨率、宽高比和 DPI?这个组件给出了以下3种适配方法,注意任何一种适配方法都不会改变UI的宽高比和相对定位。
Constant Pixel Size:通过调节 Canvas 像素大小来维持缩放不变。它的意思是不根据屏幕分辨率调整 Canvas 的缩放系数,而是调节 Canvas 的像素大小总是与屏幕保持一致。你可以手动或通过代码调节 Canvas 的缩放系数。这是 UI 系统默认的适配方案。如下图两种分辨率下相同的UI显示的不同之处,虽然不同屏幕下UI元素定位、大小没有发生变化(图中两个白色元素定位分别为屏幕左上角和右下角),但是较小的屏幕上UI元素占用了大部分屏幕空间,显得更拥挤。这就是这种适配方式的缺点,小屏幕太拥挤、大屏幕太空旷,没有考虑到屏幕的分辨率和DPI。但是这种模式的好处是UI元素可以保持设计时的细节(因为没有缩放)。这种模式可能适用于:你希望UI在一定范围内按原始大小显示,这样既可以让UI显示的尽可能清晰、又可以让屏幕较大的玩家拥有更广阔的视野,但是在太小或太大的屏幕上,你可以通过程序来调节缩放系数,不至于小屏幕被UI占满、大屏幕找不到UI。



Scale With Screen Size:根据屏幕分辨率缩放。这可能是大部分游戏最方便的适配方法。在这种模式下,你需要指定一种设计分辨率,然后指定缩放的算法。无论哪种缩放算法,如果实际宽高比与设计宽高比相同,UI 都会被等比缩放。实际上,Canvas 只是保持自己的大小和设计分辨率一致。如果实际宽高比与设计宽高比不同,这时缩放算法才会影响显示结果。缩放算法有三种:扩展、收缩 和 匹配宽高。扩展算法的逻辑是,扩大 Canvas (在宽高比上)较短的一边,使得 Canvas 宽高比与屏幕一致。如下左图,设计分辨率宽高比为1:1(红色线框),实际屏幕更宽所以 Canvas 的 width 增加以匹配屏幕。这样的算法在宽高比不同的屏幕上将始终导致UI更“开阔”。收缩算法的逻辑是,收缩 Canvas (在宽高比上)较长的一边,使得 Canvas 宽高比与屏幕一致。如下中图,设计分辨率宽高比为1:1(红色线框),实际屏幕更窄所以 Canvas 的 height 减小以匹配屏幕。这样的算法在宽高比不同的屏幕上将始终导致UI更“紧凑”。匹配宽高的算法逻辑是,根据指定的权重,同时调节 Canvas 的宽和高,使得 Canvas 宽高比与屏幕一致。如下右图,设计分辨率为红色线框,设定宽度和高度的权重相等(0.5),实际屏幕上 Canvas 的宽和高都被调整以匹配屏幕。这样的算法在宽高比不同的屏幕上根据宽高权重的不同UI布局“保真度”也不同。



Constant Physical Size:通过调节 Canvas 物理大小来维持缩放不变。它的意思是不根据屏幕物理大小调整 Canvas 的 DPI,而是调节 Canvas 的物理大小总是与屏幕保持一致。这种说法可能比 Constant Pixel Size 更难以理解,实际上他们本质是一样的,只不过 Constant Pixel Size 通过逻辑像素大小调节来维持缩放,而 Constant Physical Size 通过物理大小调节来维持缩放。使用这种模式必须指定一个像素转换物理大小的因数(填写96方便在windows上进行开发)。运行时通过具体设备报告的dpi计算最终的 Canvas 像素大小和缩放比例。这种模式从设计的意图来看,是为了适应某些超高dpi的显示设备(比如现在的 mac 高达 5K 的显示器),但是在我看来只不过是让开发人员更加困惑,实际使用价值并不高。因为开发人员更关心设计分辨率,他们需要绘制明确尺寸的图片!除非未来开发人员和玩家都使用了超高dpi的显示器,才会开始忽略像素尺寸而仅专注于物理尺寸。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容