【Unity】UGUI架構和基礎

Canvas的渲染

渲染基本層次

基本渲染層次是根據(jù)可視化對象在繼承窗口中的顯示順序來渲染的,在此有兩種方式可以調節(jié)對象的順序,第一種:直接在繼承窗口拖拽。第二種:通過Transform的SetAsFirstSibling, SetAsLastSibling, and SetSiblingIndex函數(shù)來進行調節(jié)。

渲染模式

屏幕覆蓋模式

直接屏幕映射方式顯示,永遠在屏幕的最上面,跟相機無關即使沒有相機也可以顯示

屏幕相機模式

此模式和屏幕模式相似但是受到相機的限制,但是始終都顯示在相機的前面,如果有3D物體在UI的前面也是會擋住UI。

世界模式

把Canvas當成普通的對象在世界坐標系中定位渲染。

Canvas的屏幕適配策略

UGUI中的屏幕適配只需要在Canvas下掛一個CanvasScaler組件就行了。

適配模式分為3種:

-固定像素

忽略屏幕的大小根據(jù)UI元素的實際像素顯示

-根據(jù)屏幕大小進行縮放(也是最常用的一項)

此項會根據(jù)設備真實分辨率與設計分辨率來對Canvas進行縮放。有三種模式:

1.Match Width or Height

根據(jù)寬或者高來對Canvas進行縮放,比如設備分辨率為1920*900,設計分辨率為1280*720,此時,如果采用寬進行匹配那么可以通過公式計算出此時應該縮放多少倍,公式如下:

縮放因子:1920/1280 = 1.5

縮放后的Canvas的寬為:1920(剛好能夠完全顯示)

縮放后的Canvas的高為:720*1.5 = 1080

由于設備的高為900所以會導致高度上的一部分不會被顯示出來

2.Expand

適配的計算公式同上,只是在此模式下會保證設計分辨率下的東西能夠全部顯示出來,及選擇設備分辨率和設計分辨率的寬、高比中選擇最小值作為縮放因子。

3.Shrink

和Expand恰好相反,在此模式下不會留黑邊但是會導致顯示不完全。及選擇設備分辨率和設計分辨率的寬、高比中選擇最大值作為縮放因子。

-固定物理大小

忽略屏幕大小和分辨率根據(jù)UI的實際物理大小來顯示。

可視化對象

Text

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

Image

同NGUI的Sprite

RawImage

同NGUI的Texture

Mask

此可視化組件是不可見的,只是用于定義一個子對象的顯示區(qū)域不能超過父對象的顯示區(qū)域,超出部分將被剪切掉。同NGUI Panel的剪切功能。在Unity5.3里有兩個Mask組件

1.Mask

2.RectMask2D

Effects

1.Shadow

2.Outline

3.PositionAsUI1(未知功能)

布局系統(tǒng)

基礎布局

Rect Tool

選中此工具后,我們就可以在場景視圖中編輯它的大小,位置,縮放,軸心點和錨點。

Toolbar buttons with Rect Tool selected

Rect Transform

功能同Rect Tool只是此組件是需要自己手動輸入?yún)?shù)。

Pivot(軸心點)

旋轉,大小和縮放的修改都依賴于Pivo的位置。當ToolTar設置了Pivot時,Rect Transform的Pivot能夠在場景中被移動。

Toolbar buttons set to Pivot and Local

Anchors

有兩種情況,在每種情況下Rect Transform顯示是不同的如下:

1.四個錨點都在一起的情況

在此種狀態(tài)可視化組件可以根據(jù)屏幕的任意位置來定進行定位,大小不會根據(jù)屏幕的大小的改變而調整。

2.四個錨點分開的情況

在此種狀態(tài)下可視化組件的大小會根據(jù)屏幕的大小改變而調整可視化組件的大小。下圖中Left,Right,Top和Bottom表示與這四個錨點構成的矩形的邊的距離。

更詳細的說明參見官方文檔:http://docs.unity3d.com/Manual/UIBasicLayout.html

自動布局

自動布局系統(tǒng)依賴于基礎布局系統(tǒng)。自動布局系統(tǒng)有兩部分組成:布局元素和布局控制器。

布局元素

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

Minimum width

Minimum height

Preferred width

Preferred height

Flexible width

Flexible height

可以通過ILayoutElement接口查看他們的定義:


每個可視化對象都繼承了ILayoutElement來控制自己的大小。當然也可以通過LayoutElement組件去重寫這些屬性。

布局控制器

布局控制器是根據(jù)布局元素定義的大小屬性來確定自己或子對象的大小和位置的。

布局控制器有兩種類型的控制器:控制自己和控制子對象

控制自己

ContentSizeFitter:內容填充

Aspect Ratio Fitter:比例控制

控制子對象

Horizontal Layout Group:讓子對象水平排布

Vertical Layout Group:讓子對象垂直排布

Grid Layout Group:讓子對象按網(wǎng)格排布

局控計算順序

1.計算自己的寬(子在父之前計算),通過調用ILayoutElement的CalculateLayoutInputHorizontal

2.控制器計算寬,通過調用ILayoutController的SetLayoutHorizontal

3.計算自己的高(子在父之前計算), 通過調用ILayoutElement 的CalculateLayoutInputVertical

4.控制器計算高,通過調用ILayoutController的SetLayoutVertical

布局控重建觸發(fā)時機

通過調用LayoutRebuilder.MarkLayoutForRebuild后在下一幀進行重建。

在設置了能夠改變布局屬性的時候

在一下回調被調用的時候

OnEnable

OnDisable

OnRectTransformDimensionsChange

OnValidate (僅在編輯器有效)

OnDidApplyAnimationProperties


交互式組件

交互式組件是用于處理鼠標,鍵盤,Touches和控制器的交互的組件,此組件是不可見的必須與一個或多個可視化組件一起使用。

交互式組件的公共功能能被放在了Selectable中,其中包括了交互組件的狀態(tài)(normal, highlighted, pressed, disabled)切換,以及交換式組件的導航。

Button

按鈕組件,通過OnClick來相應單擊事件。

Toggle

Toggle是一個復選框,OnValueChanged監(jiān)聽它的值改變。

Toggle Group

Toggle Group是一個單選框

Slider

滑動器控件

Scrollbar

滾動條控件,通常聯(lián)合Scroll Rect 和 Mask制作滾動視圖。

Input Field

輸入字段控件

Scroll Rect

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

注意:一般在一個對象上不會掛兩個交互式組件。

事件系統(tǒng)

事件系統(tǒng)是一中發(fā)送輸入信息(比如像鼠標,鍵盤和Touches等的事件)到對象上的一種方法。

在事件系統(tǒng)中包括了兩個主要模塊:

輸入模塊

輸入模塊決定了事件系統(tǒng)的將有怎么樣的行為。主要作用如下:

處理輸入

管理事件狀態(tài)

發(fā)送事件到場景對象

同一時刻只有一個輸入模塊作用于事件系統(tǒng),輸入模塊必須和EventSystem組件在同一個對象上。

Raycasters(射線器)

Raycasters主要被用于檢查發(fā)送指針進入,離開和懸浮在對象。它通常用于輸入模塊去計算設備指針的進入,離開和懸浮等

Unity提供了3種類型的Raycasters:

Graphic Raycaster 用于UI

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

Physics Raycaster 用于3D物理元素

擴展自定義消息

從IEventSystemHandler借口派生一個接口出來就定義了一個消息



通過ExecuteEvents類可以發(fā)送一個消息,此類是消息的的幫助類,可以查看,驗證一個對象上的消息接口。

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官網(wǎng)-UIhttp://docs.unity3d.com/Manual/EventSystem.html

Unity官網(wǎng)-EventSystemhttp://docs.unity3d.com/Manual/EventSystem.html

附錄-組成結構圖

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 本篇文章是基于谷歌有關Graphic的一篇概覽文章的翻譯:http://source.android.com/de...
    lee_3do閱讀 7,196評論 2 21
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,466評論 25 708
  • 前言 項目中有功能需要在代碼中動態(tài)創(chuàng)建UGUI對象,但是在網(wǎng)上搜索了很久都沒有找到類似的教程,最后終于在官方文檔中...
    Zui閱讀 31,129評論 11 63
  • 寒假漫漫,春節(jié)沒新意,何不跟著十位巨星一起記單詞,我?guī)湍阊埩巳缦率缓萌R塢巨星陪你。 ?????????????...
    玩英語閱讀 915評論 0 5
  • 愁思總費神 神盡何求真 快把失魂聚 莫要再沉淪
    緣渡閱讀 166評論 2 1