Unity-UI(UGUI详解)03 UI How Tos

UI的常用解决方案:

针对不同分辨率的解决方案

现代游戏应用需要支持不同的屏幕和分辨率,UI布局需要去适应这些。Unity中的UI系统包括丰富的工具针对这个问题。

1.锚点
第一种解决方案,使用锚点设置图片相对屏幕的角落的相对位置。当当前分辨率是游戏设计的布局的时候使用这种方式是正确的。
当屏幕分辨率变得更大或者更小的时候,按钮保持被锚在他们之前设定的角落。然而,他们还保持着他们的原始大小,这可能使这些元素看起来很大或者很小,这样他们就不能被正确的绘制出来。
为了解决屏幕分辨率变大或者变小的时候图片不能跟随变大变小的情况,使用Canvas Scaler来解决问题。

2.缩放屏幕大小
Canvas Scaler组件被添加在Canvas的根节点
可以将UI Scale Mode设置为 Scale With Screen Size,在这个模式下可以如果分辨率增多大或者减小,Canvas Scaler将自动进行调整。

需要注意:
从竖屏变到横屏的时候,如果使用上面的方式会出现一些问题,这是由于Canvas Scaler的原理引起的问题,Canvas Scaler对比宽度通过宽度的变化得到Canvas Scaler

有一个属性叫Match从0(Width)到1(Height),默认情况下设置为0,表示完全通过宽度比较作为Canvas Scaler的值。
如果Match 的值被设置为0.5,那么将同时比较宽度和高度,在两个值之间进行选择。

UI element与他们内容的大小适配

通常情况下我们通过Rect Transform对UI元素的位置大小进行设置,然而我们希望自动进行适配UI元素,这个问题可以通过添加Content Size Fitter解决

Fit to size of Text
为了使Text组件与文本内容大小进行适配,使用Content Size Fitter组件进行控制
原理:
text组件作为layout element提供信息它minimum的大小和preferred的大小。Content Size Fitter是一个Layout Controller,使用Layout element的信息对Rect Transform的大小进行控制
注意中心:
当文本框进行大小重新布局的时候,中心的位置将影响layout element的缩放扩大的方向,需要额外注意pivot的位置

Fit to size of UI element with child Text
Button一般是由Image和Text组成,我们希望让Image中的大小通过Text的大小来决定。
在Image组件下添加Horizontal Layout Group组件,都选Child Controls Size下的Width和Height。添加Content Size Fitter,将Horizontal Fit 和 Vertical Fit进行设置。
原理:
Horizontal Layout Group同时提供了LayoutController和LayoutElement,它将接收children的layout information,之后它通过全部的children来决定group的大小,之后它作为Layout Element提供了它的minimum和preferred size
Content Size Fitter通过同一个物体上的LayoutElement信息,控制Rectangle Transform。
在Rect Transform被设置后,Horizontal Layout Group确定位置并根据一些设置的属性设置大小。

Make children of a Layout Group fit their respective sizes
如果Layout Group想控制子物体的位置等,就不能直接在子物体上添加Content Size Fitter来解决这种问题。Layout Group可以让子物体适应其自己的内容,只需要将child force expand的toggle取消勾选。
一旦子物体不再随着宽度随意拓展,可以在Child Alignment setting中设置他们的对齐方式。
如果想让Layout Group中一部分的子物体随着宽度变化而进行变化,而一部分不进行变化,那么在需要变化的子物体上添加组件Layout Element,勾选Flexible width或者Flexible Height属性。Layout Group仍然信用Child Force Expand toggles。
原理:
如果游戏物体上有多个可以提供layout information的组件,可以使用layout element组件对其他组件进行覆盖。
Layout Group接收来自子元素提供的信息,这将重写可变大小。之后当控制子物体大小时,layout group不会使他们超过preferred大小。如果Layout Group中Child Force Expand选项被选中,那么子物体的可变大小将至少是1

世界空间UI的创建

设置Canvas到世界空间
选择Canvas的渲染模式为世界空间,这时全部的摄像机都可以看见他们
决定Canvas的分辨率
输入Rect Transform的width和height的值控制分辨率。
确定Canvas在世界中的大小
如果想确定宽度到米,可以计算meter_size / canvas_width
eg:For example, if you want it to be 2 meters wide and the Canvas width is 800, you would have 2 / 800 = 0.0025.
Canvas的位置
世界空间下的Canvas可以被放置在人任何位置。

通过脚本创建UI元素

创建一个UI元素的预制体
动态的创建UI元素的第一步就是创建一个要实例化的UI元素的预制体
实例化UI元素
实例化UI元素与实例化其他游戏物体一样,使用Transform.SetParent方法设置父物体,并且worldPositionStays参数为false
定位UI元素
UI元素通常通过Rect Transform进行位置设定,如果父物体由LayoutGroup,那么位置的设定将跳过。
定位Rect Transform的时候,第一件事时判断是否有拉伸行为。anchorMin和anchorMax不同的时候,将发生拉伸行为。
没有拉伸行为的Rect Transform,它的位置将简单的通过anchoredPosition和sizeDelta属性进行设置。
对于拉伸了的Rect Transform 来说,通过offsetMin和offsetMax对位置进行设定,offsetMin设定左下角到做下锚点的距离,offsetMax设定右上角到右上锚点的距离。

UI Screens 转换

不同的UI界面转换时很常见的,下面解释了一种简单的屏幕转换的方式使用Animation和状态机实现和控制没有屏幕

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,284评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,115评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,614评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,671评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,699评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,562评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,309评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,223评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,668评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,859评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,981评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,705评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,310评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,904评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,023评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,146评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,933评论 2 355

推荐阅读更多精彩内容