Unity之新GUI系統介紹(1)


1、畫布(Canvas)

每一個GUI控件必須是畫布的子對象。當選擇菜單欄中GameObject→UI下的命令來創建一個GUI控件時,如果當前不存在畫布系統將會創建一個畫布。

UI元素的繪制順序依賴於它們在Hierarchy面板中的順序。如果兩個UI元素重疊,后添加的UI元素會出現在之前添加的元素的上面。如果要修改UI元素的相對順序,可以通過在Hierarchy視圖中拖動元素進行排序。對UI元素的排序也可以通過在腳本中調用Transform組件上的SetAsFirstSibling、SetAsLastSibling和SetSiblingIndex等方法來實現。

  (1)Render Mode:渲染模式

  • Screen Space-Camera:畫布以特定的距離放置在指定的相機前,UI元素被指定的相機渲染,相機設置會影響到UI的呈現。
  • Screen Space-Overlay:使畫布拉伸以適應全屏大小,並且使GUI控件在場景中渲染與其他物體的前方。如果調整屏幕大小或改變分辨率,畫布將會自動地改變大小以適應屏幕顯示。
  • World Space:該選項使畫布渲染於世界空間。該模式使畫布在場景中像其他游戲對象一樣。可以通過手動調整它的Rect Transform來改變畫布的大小,GUI控件可能會渲染於其他物體的前方或后方。

  (2)使用Canvas Group組件(在Inspector視圖中單擊Add Component按鈕后搜索Canvas Group添加)可以對UI元素進行分組,方便統一管理。

  • Alpha:可調節該組UI元素的透明度
  • Interactable:選項可控制該組件是否接受輸入控制。
  • Blocks Raycasts:選項控制該組件是否作為碰撞器 RayCasts。注意這不適用於Phycics.Raycast,當要處理Canvas上UI元素的Raycast時應調用綁定在Canvas上的Ghaphic Raycaster組件的Raycast方法。
  • Ingore Parent Groups:用於控制是否忽略父對象上的Canvas Group設置。

  在一個Unity工程中,對於所有GUI控件,一個畫布已足夠使用,但是在場景中組合使用多個畫布也是可行的。用戶也可以嵌套使用畫布,即可使一個畫布作為其他畫布的子對象。一個嵌套的畫布使用其父對象的渲染模式,是可以分別控制每一個畫布的透明度。

 

2、Rect Transform(矩形變換)

Rect Transform(矩形變換)是一種新的變換組件,適用於在所有的GUI空間上來代替原有的變換組件。

矩形變換區別於原有變換的地方是在場景中Transform組件表示一個點,而Rect Transform表示一個可容納UI元素的矩形,而且矩形變換還有錨點和軸心點的功能。

 

矩形變換的屬性和功能
屬性 功能
Pos(X,Y and Z) 定義矩形相當於錨的准心點位置
Width/Height 定義矩形的寬度和高度
Left,Top,Right,Bottom 定義矩形的邊緣相對於錨點的位置,錨點分離時會顯示在Pos和Width/Height的位置
Anchors 定義矩形在左下角和右上角的錨點
Min 定義矩形左下角錨點。(0,0)對應父物體的左下角,(1,1)對應父物體右上角
Max 定義矩形右上角錨點。(0,0)對應父物體的左下角,(1,1)對應父物體右上角
Pivot 定義矩形旋轉時圍繞的中心點坐標
Rotation 定義矩形圍繞旋轉中心點的旋轉角度
Scale 定義該對象的縮放系數

 

 

 

 

 

 

 

 

 

 

 

為了布局的目的一般建議調整UI元素的大小,而不是對其進行縮放(Scale)。調整UI元素的大小不會影響字體大小、切片圖像的邊界大小等。縮放(Scale)可用於動畫的效果或其他特殊效果,縮放會作用於整個元素,包括字體和邊框。給UI元素的Width或Height一個負值會讓它們變成透明不可見,而將縮放值(Scale)設為負值則不會,所以縮放(Scale)可用於翻轉對象。

 

3、在場景視圖中編輯(Editing in the Scene View)

在Scene(場景視圖)中使用矩形變換可以平移、縮放和旋轉GUI控件。當用戶選擇了一個GUI控件后,按下T按鍵,用戶可以在控件內任意位置單擊並拖動來改變它的位置,也可以在控件的邊角單擊並拖動來改變它的大小;當鼠標懸浮在拐角附近光標變為一個旋轉符號時,可以單擊並朝任意方向拖動來旋轉該控件。

 

4、錨點(Anchors)

矩形變換由一個錨點的布局概念。如果一個矩形變換的幅度向也是一個矩形變換,作為子物體的矩形變換可以通過多種固定在父物體的舉行變換上。例如:子物體可以固定在父物體的中心點或某一拐角處;在固定錨點時也允許基於父對象的寬或高按指定的百分比拉伸。

在Scene(場景視圖)中,錨點以四個三角形手柄的形式呈現。每個手柄都對應固定於相應的父物體的矩形的角。用戶可以單獨拖動每一個錨點,當它們在一起的時候,也可以單擊它們的中心一起拖動它們。當按下【Shift】鍵拖動錨點的時候,矩形相應的角會跟隨錨點一起移動。

在Inspector視圖中,錨點預置按鈕(Anchor Presets)在矩形變換組件的左上角。單擊該按鈕按打開預制錨點的下拉列表,在這里用戶可以便捷地選擇常用的錨點選項。用戶可以將GUI空間固定在父物體的某一邊或中心,或拉伸到與父對象相同的大小。水平方向和豎直方向的錨點時獨立的。

當選擇了錨點選項以后錨點預制按鈕處將顯示當前選中的選項。當錨點位置不在預制選項當中時,錨點預制按鈕將在custom中。

用戶可以單擊錨點預制按鈕下方的Anchor擴展箭頭來設置錨點的位置。錨點的最小值與場景視圖中左下角錨點的位置一致,最大值與右上角錨點的位置一致。

每一個錨點手柄都有一個相對於游戲對象固定的偏移量,也就是說左上角錨點手柄對應於GUI游戲物體的左上角有一個固定偏移量。軸心點規定了游戲物體的位置和錨點的對應關系。基於錨點在矩形變換組件的位置將顯示不同的區域。當所有的錨點手柄在一起的時候,該區域顯示Pos X、Pos Y、Width和Height,而當錨點分開的時候,該區域將部分或全部顯示為Top、Buttom、Left和Right。一個錨點手柄的特點是它們能夠自動精確定位對齊於其他游戲對象的錨點。

 

5、軸心點(Pivot)

旋轉和縮放都圍繞軸心點發生變化,所以軸心點的位置影響旋轉和縮放的結果。

 

6、文本(Text)

文本控件顯示非交互文本。可以作為其他GUI控件的標題或者標簽,也可用於顯示指令或者其他文本。

 

文本控件的屬性和功能
屬性 功能
Text 控制顯示的文本
Font 用於顯示文本的字體
Font Style 文本樣式,可選擇正常、粗體、斜體、粗斜
Font Szie 文本的字體大小
Line Spacing 文本行之間的垂直間距
Rich Text 是否為富文本樣式
Alignment 文本的水平和垂直對齊方式
Horizontal Overflow 用於處理文字太寬而無法適應文本框的方法,選項包含自動換行和溢出
Vertical Overflow 用於處理文本太高而無法適應文本框的方法,選項包含截斷和溢出
Best Fit 忽略大小屬性使文本適應控件的大小
Color 文本顏色
Material 渲染文本的材質

 

 

 

 

 

 

 

 

 

 

 

 

 

7、圖像(Image)

圖像(Image)控件用來顯示非交互式圖像。可用於作為裝飾、圖標等。在其他控件中也可通過腳本控制來改變圖像。該控件類似於原始圖像(Raw Image)控件,但是提供了更多選項的動畫控制和准確填充控件的功能。圖像控件需要Sprite類型的紋理,原始圖像可以接受任何類型的紋理。

 

圖像控件的屬性和功能
屬性 功能
Source Image 表示要顯示的圖像紋理(類型必須為Sprite)
Color 應用於圖像的顏色
Material 圖像着色所需的材質
Image Type 顯示圖像的類型,選項包括Simple、Sliced、Tilled和Filled
Preserve Aspect(僅適用於Simple和Filled模式) 圖像的原始比例的高度和寬度是否保持相同比例
Fill Center(僅適用於Sliced和Tilled模式) 是否填補圖像的中心部分
Fill Method(僅適用於Filled模式) 用於指定動畫中圖像的填充方式,選項有Horizontal、Vertical、Radial90、Radial180和Radial360
Fill Origin(僅適用於Filled模式) 填充圖像的起始位置,選項包括Bottom、Right、Top和Left
Fill Amount(僅適用於Filled模式) 當前填充圖像的比例(范圍從0.0到1.0)
Clockwise(僅適用於Filled模式) 填充方向是否為順時針(僅適用於Radial填充模式)
Set Native Size 設置圖像框尺寸為原始圖像紋理的大小

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

文章摘自《Unity官方案例精講》


免責聲明!

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



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