(搬運自我在SegmentFault的博客)
最近在學習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模式。
以top-left模式為例,此時錨點位於父元素的左上角。如果拉動父元素矩形的左邊框和上邊框,則子元素的位置也隨之變化。而拉動另外兩條邊則不發生變化。
在middle或center模式下,拉動軸兩側的邊子元素均會隨之移動。
此外還有stretch模式,在拉動時會拉伸或壓縮子元素。
新的組件
- Text:也就是Label。
- Image
- RawImage:與Image不同之處在於,Image的參數是Sprite,而RawImage的參數是Texture。
交互
交互組件都有一個transition屬性,用於實現組件在不同狀態下產生不同的變化。有三個選項:
- Color Tint:改變顏色。有一個Fade Duration的參數控制變化的時長。
- SpriteSwap:不同狀態下展示不同的Sprite。
- Animation:由一個動畫控制器來決定顯示。不同狀態下觸發不同的事件。
- None:沒有變化。
Button提供了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);