【Unity】UGUI架构和基础

Canvas的渲染

渲染基本层次

基本渲染层次是根据可视化对象在继承窗口中的显示顺序来渲染的,在此有两种方式可以调节对象的顺序,第一种:直接在继承窗口拖拽。第二种:通过Transform的SetAsFirstSibling, SetAsLastSibling, and SetSiblingIndex函数来进行调节。

渲染模式

屏幕覆盖模式

直接屏幕映射方式显示,永远在屏幕的最上面,跟相机无关即使没有相机也可以显示

屏幕相机模式

此模式和屏幕模式相似但是受到相机的限制,但是始终都显示在相机的前面,如果有3D物体在UI的前面也是会挡住UI。

世界模式

把Canvas当成普通的对象在世界坐标系中定位渲染。

Canvas的屏幕适配策略

UGUI中的屏幕适配只需要在Canvas下挂一个CanvasScaler组件就行了。

适配模式分为3种:

-固定像素

忽略屏幕的大小根据UI元素的实际像素显示

-根据屏幕大小进行缩放(也是最常用的一项)

此项会根据设备真实分辨率与设计分辨率来对Canvas进行缩放。有三种模式:

1.Match Width or Height

根据宽或者高来对Canvas进行缩放,比如设备分辨率为1920*900,设计分辨率为1280*720,此时,如果采用宽进行匹配那么可以通过公式计算出此时应该缩放多少倍,公式如下:

缩放因子:1920/1280 = 1.5

缩放后的Canvas的宽为:1920(刚好能够完全显示)

缩放后的Canvas的高为:720*1.5 = 1080

由于设备的高为900所以会导致高度上的一部分不会被显示出来

2.Expand

适配的计算公式同上,只是在此模式下会保证设计分辨率下的东西能够全部显示出来,及选择设备分辨率和设计分辨率的宽、高比中选择最小值作为缩放因子。

3.Shrink

和Expand恰好相反,在此模式下不会留黑边但是会导致显示不完全。及选择设备分辨率和设计分辨率的宽、高比中选择最大值作为缩放因子。

-固定物理大小

忽略屏幕大小和分辨率根据UI的实际物理大小来显示。

可视化对象

Text

同NGUI的Label.富文本格式参见:http://docs.unity3d.com/Manual/StyledText.html

Image

同NGUI的Sprite

RawImage

同NGUI的Texture

Mask

此可视化组件是不可见的,只是用于定义一个子对象的显示区域不能超过父对象的显示区域,超出部分将被剪切掉。同NGUI Panel的剪切功能。在Unity5.3里有两个Mask组件

1.Mask

2.RectMask2D

Effects

1.Shadow

2.Outline

3.PositionAsUI1(未知功能)

布局系统

基础布局

Rect Tool

选中此工具后,我们就可以在场景视图中编辑它的大小,位置,缩放,轴心点和锚点。

Toolbar buttons with Rect Tool selected

Rect Transform

功能同Rect Tool只是此组件是需要自己手动输入参数。

Pivot(轴心点)

旋转,大小和缩放的修改都依赖于Pivo的位置。当ToolTar设置了Pivot时,Rect Transform的Pivot能够在场景中被移动。

Toolbar buttons set to Pivot and Local

Anchors

有两种情况,在每种情况下Rect Transform显示是不同的如下:

1.四个锚点都在一起的情况

在此种状态可视化组件可以根据屏幕的任意位置来定进行定位,大小不会根据屏幕的大小的改变而调整。

2.四个锚点分开的情况

在此种状态下可视化组件的大小会根据屏幕的大小改变而调整可视化组件的大小。下图中Left,Right,Top和Bottom表示与这四个锚点构成的矩形的边的距离。

更详细的说明参见官方文档:http://docs.unity3d.com/Manual/UIBasicLayout.html

自动布局

自动布局系统依赖于基础布局系统。自动布局系统有两部分组成:布局元素和布局控制器。

布局元素

布局元素定义了如下尺寸:

Minimum width

Minimum height

Preferred width

Preferred height

Flexible width

Flexible height

可以通过ILayoutElement接口查看他们的定义:


每个可视化对象都继承了ILayoutElement来控制自己的大小。当然也可以通过LayoutElement组件去重写这些属性。

布局控制器

布局控制器是根据布局元素定义的大小属性来确定自己或子对象的大小和位置的。

布局控制器有两种类型的控制器:控制自己和控制子对象

控制自己

ContentSizeFitter:内容填充

Aspect Ratio Fitter:比例控制

控制子对象

Horizontal Layout Group:让子对象水平排布

Vertical Layout Group:让子对象垂直排布

Grid Layout Group:让子对象按网格排布

局控计算顺序

1.计算自己的宽(子在父之前计算),通过调用ILayoutElement的CalculateLayoutInputHorizontal

2.控制器计算宽,通过调用ILayoutController的SetLayoutHorizontal

3.计算自己的高(子在父之前计算), 通过调用ILayoutElement 的CalculateLayoutInputVertical

4.控制器计算高,通过调用ILayoutController的SetLayoutVertical

布局控重建触发时机

通过调用LayoutRebuilder.MarkLayoutForRebuild后在下一帧进行重建。

在设置了能够改变布局属性的时候

在一下回调被调用的时候

OnEnable

OnDisable

OnRectTransformDimensionsChange

OnValidate (仅在编辑器有效)

OnDidApplyAnimationProperties


交互式组件

交互式组件是用于处理鼠标,键盘,Touches和控制器的交互的组件,此组件是不可见的必须与一个或多个可视化组件一起使用。

交互式组件的公共功能能被放在了Selectable中,其中包括了交互组件的状态(normal, highlighted, pressed, disabled)切换,以及交换式组件的导航。

Button

按钮组件,通过OnClick来相应单击事件。

Toggle

Toggle是一个复选框,OnValueChanged监听它的值改变。

Toggle Group

Toggle Group是一个单选框

Slider

滑动器控件

Scrollbar

滚动条控件,通常联合Scroll Rect 和 Mask制作滚动视图。

Input Field

输入字段控件

Scroll Rect

同NGUI的ScrollView.需要配合Mask一起制作。

注意:一般在一个对象上不会挂两个交互式组件。

事件系统

事件系统是一中发送输入信息(比如像鼠标,键盘和Touches等的事件)到对象上的一种方法。

在事件系统中包括了两个主要模块:

输入模块

输入模块决定了事件系统的将有怎么样的行为。主要作用如下:

处理输入

管理事件状态

发送事件到场景对象

同一时刻只有一个输入模块作用于事件系统,输入模块必须和EventSystem组件在同一个对象上。

Raycasters(射线器)

Raycasters主要被用于检查发送指针进入,离开和悬浮在对象。它通常用于输入模块去计算设备指针的进入,离开和悬浮等

Unity提供了3种类型的Raycasters:

Graphic Raycaster 用于UI

Physics 2D Raycaster 用于2D 物理元素

Physics Raycaster 用于3D物理元素

扩展自定义消息

从IEventSystemHandler借口派生一个接口出来就定义了一个消息



通过ExecuteEvents类可以发送一个消息,此类是消息的的帮助类,可以查看,验证一个对象上的消息接口。

ExecuteEvents.Execute(target,null, (x,y)=>x.Message1());


支持的事件

IPointerEnterHandler - OnPointerEnter - Called when a pointer enters the object

IPointerExitHandler - OnPointerExit - Called when a pointer exits the object

IPointerDownHandler - OnPointerDown - Called when a pointer is pressed on the object

IPointerUpHandler - OnPointerUp - Called when a pointer is released (called on the original the pressed object)

IPointerClickHandler - OnPointerClick - Called when a pointer is pressed and released on the same object

IInitializePotentialDragHandler - OnInitializePotentialDrag - Called when a drag target is found, can be used to initialise values

IBeginDragHandler - OnBeginDrag - Called on the drag object when dragging is about to begin

IDragHandler - OnDrag - Called on the drag object when a drag is happening

IEndDragHandler - OnEndDrag - Called on the drag object when a drag finishes

IDropHandler - OnDrop - Called on the object where a drag finishes

IScrollHandler - OnScroll - Called when a mouse wheel scrolls

IUpdateSelectedHandler - OnUpdateSelected - Called on the selected object each tick

ISelectHandler - OnSelect - Called when the object becomes the selected object

IDeselectHandler - OnDeselect - Called on the selected object becomes deselected

IMoveHandler - OnMove - Called when a move event occurs (left, right, up, down, ect)

ISubmitHandler - OnSubmit - Called when the submit button is pressed

ICancelHandler - OnCancel - Called when the cancel button is pressed

参考文献

Unity官网-UIhttp://docs.unity3d.com/Manual/EventSystem.html

Unity官网-EventSystemhttp://docs.unity3d.com/Manual/EventSystem.html

附录-组成结构图

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

推荐阅读更多精彩内容

  • 本篇文章是基于谷歌有关Graphic的一篇概览文章的翻译:http://source.android.com/de...
    lee_3do阅读 7,097评论 2 21
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,504评论 25 707
  • 前言 项目中有功能需要在代码中动态创建UGUI对象,但是在网上搜索了很久都没有找到类似的教程,最后终于在官方文档中...
    Zui阅读 30,784评论 11 63
  • 寒假漫漫,春节没新意,何不跟着十位巨星一起记单词,我帮你邀请了如下十位好莱坞巨星陪你。 ☃☃☃☃☃☃☃☃☃☃☃☃☃...
    玩英语阅读 883评论 0 5
  • 愁思总费神 神尽何求真 快把失魂聚 莫要再沉沦
    缘渡阅读 155评论 2 1