Unity3D之UGUI學習筆記(二):Rect Transform與Anchor


Rect Transform

我們都知道,Unity3D中所有的GameObject都必須要攜帶一個Transform組件,且該組件無法移除,那么作為UI顯示的GameObject則不是攜帶Transform而是使用Unity3D專門為UI組件設計的Rect Transform組件,如下:

另外說一下,Canvas Renderer也是UI組件必須攜帶的組件。

我們來看一下其為我們提供的功能:

位置

位置是以像素為單位,其具體的值則以錨點為准,表示和錨點距離,其中x軸從左到右的數值越來越大,y軸從下到上的數值越來越大,其中的Pos Z和Transform中的position.z效果一致,但不是使用該值來表示UI的深度。保留該值估計是為了在3D UI的一些效果實現上的考慮。

尺寸

不同於縮放,這兩個值設置了UI的尺寸,為負並不會翻轉UI而是直接不顯示。

上面的兩個按鈕,上方的按鈕是設置width為320,下方則是將width為160的按鈕的scale x設置為2。

旋轉

效果同Transform,一般配合Tween使用。

縮放

效果同Transform,一般配合Tween使用。

深度

不通過NGUI的深度,在UGUI中的深度完全使用樹形結構來表示,同一層級里位於下方的節點會覆蓋掉位於上方的節點,如下:

修改一下樹形顯示列表后如下:

Anchor

Rect Transform除了上面提到的功能外,還提供了描點功能,該功能主要實現相對布局的功能。

同時我們還可以非常直觀的配置描點:

錨點描述的是當前UI的父對象的位置信息。而錨點則表示當前對象坐標的(0, 0)點。

非stretch

我們可以發現有Left、Center、Right、Top、Middle及Bottom六個設置項,這6個項目可以組合出9種形式的錨點,分別對應了當前UI父對象的9個方向的位置,這樣方便我們的UI做相對位置的調整,比如當UI的坐標為(0, 0),選擇CenterMiddle則當前UI為居中狀態,而選擇TopLeft則UI會位於父對象的左上角。

CenterMiddle:

TopLeft:

stretch

除了上面說到的還有一種stretch狀態,該狀態則表示當前UI距離父級UI邊緣的距離,當設定了之后則是使用一種類似相對位置的方式來定義UI的位置及尺寸,我們看下:

當我們選擇水平和垂直都為stretch時,Pos X、Pos Y、Width和Height都改變為Left、Top、Right及Bottom,即使用了相對位置來排列,我們調整一下看看。

我們發現按鈕始終和父級保持10個像素的距離,調整父級的尺寸會修改子級的尺寸,如下:

我們發現按鈕始終為一種相對的位置呈現。

自定義Anchor

我們之前定義錨點都是直接在下拉菜單中選擇,那么錨點是否可以自定義,答案是肯定的,比如當我們需要下面的效果時就需要自定義Anchor了。

我們希望子UI的尺寸始終和父UI的尺寸保持一定的比例,比如無論父UI多大,子UI都占其10%的空間。

我們只需要將子UI的錨點設置為一個合適的值即可,比如設置為子UI的尺寸,如下:

我們復制幾個改變大小看看效果:

Pivot

注冊點或者叫做中心點,如果說Anchor表示的是UI的父級的位置,那么Pivot則表示UI本身的(0, 0)點的位置。

我們首先開啟Pivot:

然后就可以在場景中修改UI的Pivot了,如下:

這個小藍圈就是Button組件的中心點,表示Button組件的(0, 0)點。

下面我們看一個實例:

我希望在屏幕的右上方顯示一個按鈕且按鈕和屏幕的間距為10,只需要將按鈕的中心點也設置到右上方即可,如下:

補充

藍圖模式

表示是否忽略掉物體的旋轉。點開不能對物體進行旋轉。

RawEdit模式

表示當修改Anchor時UI的位置及尺寸是否會根據Anchor進行匹配,點開可以進行匹配。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM