學習Unity 4.6新GUI系統

(原帖:http://www.cnblogs.com/CodeCabin/p/unity_new_gui.html)

最近在學習Unity的過程中,自己做一款小遊戲自娛自樂。自然需要用到GUI。但4.5中的GUI很難用,一個選擇是傳說中的NGUI插件。但對於4.6中的新GUI,我也有所耳聞。想了想還是選擇官方的技術較好,於是就有了這篇。

Canvas

在新GUI中,所有的UI組件都位於Canvas上。Canvas有三種渲染模式:

  • Screen Space - Overlay:將UI放置在場景的上面,調節場景大小或調整分辨率,則Canvas也會隨之調整。
  • Screen Space - Camera:Canvas由一個特定的相機渲染,相機的設置會影響UI。
  • World Space:使Canvas像場景中的其他對象一樣渲染。

Rect Transform

所有的UI元素都使用矩形來表示。
Rect Transform是爲UI設計的新transform組件。除了普通transform組件的position、rotation、scale之外, 還增加了width和height。

Update:兩種編輯模式:

  • Blueprint:在此模式下,物體不會旋轉和縮放。
  • Raw Edit:在此模式下,調整物體的Pivot和Anchor不會改變物體的位置和尺寸。

Rect Tool

4.6的工具欄中加入了新的小工具Rect Tool,用於調整UI和2D對象。使用這個小工具,就可以完成移動、調整大小、旋轉等工作。
當使用Rect Tool調整對象的尺寸時,如果是2D或3D對象,他會調整其scale;而對於有Rect Transform的對象,則會調整其width和height。

Update:Resize和Scale的區別:前者不影響字體大小;後者可以設置負值,相當於將物體反過來,前者不允許負值。

當切換至Pivot模式,可以調整其pivot。再次點擊切換回Center模式。

Anchors

Rect Transform中增加了Anchors屬性,其中包括Anchor Min和Anchor Max。Anchors用於指定在父UI元素調整時,子UI元素如何調整。具體行爲由Anchor Min(左下)和Anchor Max(右上)兩個錨點決定。座標以矩形左下爲(0, 0),右上爲(1, 1)。
但實際上,Unity已經提供了預定義的模式。在Rect Transform的左上角點擊,出現如下的常用Anchor模式。

Anchor Preset

以top-left模式爲例,此時錨點位於父元素的左上角。如果拉動父元素矩形的左邊框和上邊框,則子元素的位置也隨之變化。而拉動另外兩條邊則不發生變化。
在middle或center模式下,拉動軸兩側的邊子元素均會隨之移動。
此外還有stretch模式,在拉動時會拉伸或壓縮子元素。

新的組件

  • Text:也就是Label。

Text

  • Image

Image

  • RawImage:與Image不同之處在於,Image的參數是Sprite,而RawImage的參數是Texture。

交互

交互組件都有一個transition屬性,用於實現組件在不同狀態下產生不同的變化。有三個選項:

  • Color Tint:改變顏色。有一個Fade Duration的參數控制變化的時長。
  • SpriteSwap:不同狀態下展示不同的Sprite。
  • Animation:由一個動畫控制器來決定顯示。不同狀態下觸發不同的事件。
  • None:沒有變化。

Button提供了OnClick屬性,可以爲按鈕添加響應。點擊加號,可以添加一個委託。

OnClick

其中有三個空,第一個表示目標對象,第二個表示要選用的函數,第三個是對應的參數列表,由前兩項決定。
以點擊按鈕改變按鈕的文字爲例。第一個就是Button下的Text對象,第二個是Text.text,第三個則是你要改變爲的內容。

此外還有其他的控件,如Toggle、Slider、ScrollBar、Selection List。

自動佈局

一些更加複雜的佈局技術,暫時沒有這個需求,就不看了。

富文本

Rich Text在新的GUI系統中默認是禁用的,但是可以通過GUIStyle來使用:

GUIStyle style = new GUIStyle ();
style.richText = true;
GUILayout.Label("<size=30>Some <color=yellow>RICH</color> text</size>",style);

發佈了61 篇原創文章 · 獲贊 34 · 訪問量 35萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章