Unity UGUI
簡介：
Unity UI創建新項目的時候建議把主攝像機，背景，粒子系統等，用一個空對象裝在一起拖到Projectd的Prefabs里,方便復用。UI界面需要各種與背景不同步的效果時，需要一個GUI攝像機。
UI所有的內容都需要放置到canvas上面，可以創建多個canvas，不過一般情況下，一個就夠了。如果只是需要不受canvas設置影響的新UI界面，可以把需要特殊Cavans設置的內容放入windows（空對象創建），來裝載動畫腳本等內容。這裡的所有案例來自商店 Unity Samples: UI（由於Unity版本更新,案例裡面有的寫法不對,尤其是4個狀態的按鍵動畫,仿照不能完成的內容,文檔均有提及）1. Canvas（畫布）
Canvas group可以調節canvas所有元素的這三個值，避免每個組件勾選。
Canvas Scale用於調節UI組件對於屏幕的響應。
UI Scale Mode上表三個屬性，第一個使UI組件像素大小固定，第二個響應屏幕尺寸，第三個是固定物理尺寸。這裡面只講下響應屏幕尺寸的具體設置，如下圖。- 第一個是UI設計時的解析度
- 第二個是如何測量屏幕大小
- 第三個是匹配屏幕寬高比例
2. Rect Transform（矩形變換）
Scale定義對象的縮放係數，一般不要使用，因為會縮放包括字體子元素在內所有元素。
個人理解：GUI裡面的位置和前端裡面絕對相對位置類似。如果把四個錨點放在父元素的四個角上，就可以通過Left right top bottom來控制元素的位置和大小，父元素變換的時候子元素大小與位置跟隨父元素一同變換。如果把錨點放在父元素的一個角，父元素變換時相對於這個角的距離百分比不改變，子元素大小並不跟隨父元素變換。錨固定為兩個點的時候，子元素只有一個方向的大小是跟隨變換的，位置相當於橫縱軸等百分比變化。此外建議吧元素中心點（pivot）調節到錨點的同一個角，這樣寫位置的時候更清晰。如圖，錨點和中心點都在左下角，就可以看到距離屏幕左下的距離。右圖是不調節。
3. Button（按鍵）
Interactable一般選中，代表該組件接受輸入。Transtiton就是划過選中的變化，可以改變你顏色，也可以加入動畫，Color Multiplier可以調節所有顏色的亮度，Fade Duration就是顏色改變的事件（過渡時間）。
Button這裡介紹兩個關閉的綁定事件，GameObject.SetActive(關閉按鈕），ActiveStateToggler.ToggleActive(開關控制）4. Event Trigger/Event System（事件觸發器/事件系統）
大多數object都可以綁定事件，和DOM事件一樣，可以選擇包括滑鼠鍵盤監聽等一系列的事件直接操作。前面Runtime Only下面對應的是要觸發的對象而不是綁定事件的對象，選擇改變的具體時間後可以輸入值。
Event System在創建UI元素事的時候會自動創建，是GUI系統自帶的事件管理系統，如果不小心刪除或者項目沒有帶，可以自己在Hterarchy創建。5. Mask / Scroll Rect（遮罩/滾動區域）
遮罩要寫在父級元素裡面，用於遮罩子元素。除了要添加mask組件外，還要添加image，作為遮罩材料。Image不需要選擇，就會根據父元素形狀裁剪，如果選擇了就會裁剪成image遮罩的形狀。
Scroll Rect同樣放在父級元素上，添加後可以自由拖動查看子元素圖片。Content就是你要觀看的內容背景。H/V還是橫列縱列的意思。Movement type是選擇移動方式，默認的elastic可以移動出背景圖漏出主背景圖，並有一個動畫的彈性返回。Unrestricted拖到哪就是哪，clamped限制在子元素圖片內拖動。 加上inertia之後選擇默認移動方式，拉出子元素圖片彈回的時候有個動畫的延遲，比較自然，下面可以調節速度。Scroll就是針對滑鼠滾輪的敏感度了。下面可以添加scrollbar組件用來拉動。6. Slider（滑動條）
Slider的值在min value和max value之間變動，下面的value是初始的值，勾選whole value將只能在整數區間變換。
Transition選擇 color int上面所有顏色改變都是對於滑塊(你拖動的那個圓圈)的各個狀態,也可以選擇沒有變化或者動畫效果。沒有划過的區域顏色在Backgroud裡面改變，划過的在fill裡面，handle（滑塊）的改變在Handle Slide Area裡面。Direction允許你選擇自己喜歡的滑動方向。
可以給滑動條添加事件監聽（值變換），綁定事件攝像機視野的話，可以通過滑動滑塊改變背景圖片距離（注意最大值調整，太小了看不到全景）。也可以綁定光線，調節亮度或者顏色，如：ChangeColor.SetRed，或者顯示百分比，綁定標籤lable：ShowSliderValue.UpdateLabel。
注意：如果使用C#控制滑動,把Interactable關上，避免衝突。7. Scroll bar（封裝好的滑動工具）
Scroll Bar和上面的slider相似的內容這裡不再贅述。
滾動內容可以通過mask和scroll rect來實現
如果播放的時候滾動條消失或者出現在奇怪的位置上，基本上由於調整位置的時候出錯，刪掉了重新更改位置就可以解決問題。{一般使用Unity新帶的自動布局（包括vertical group /horizontal group）容易出現，很簡單的UI盡量自己去調整吧，官網對這個自動布局系統介紹的很簡潔，出了問題也不知道是什麼}
8. Drop Down（下拉菜單）
第一個選項放在label裡面，第二個放在Item下面的Item Label裡面，都拉入上圖的Text裡面，Options改成對應的文字。增加選項只需要添加Option就可以了，菜單過長的時候使用搭配的scroll bar組件。
9. Raw Image/Image（原始圖片/圖片）
圖片組件傳入圖片在source image上，材料在Material添加。圖片組件可以作為拖拽區域覆蓋在原來的UI上，需要透明只需要把Material換成天空盒子。
未加工的圖片，只為我們提供了修改UV的方法，除此之外都是繼承自MaskableGraphic的方法。一般情況下使用image而不是使用它。這裡舉例一個用法：當需要使用RenderTexture透視背景的時候，使用Raw Image組件
如圖，rawimage綁定了渲染貼圖（rendertexture),可以通過額外的攝像機完成對背景圖的透視。
渲染貼圖可以在Project創建，貼圖內容為綁定攝像機的場景。
10.UI動畫系統（官網案例狀態機錯誤）
實現如圖所示的動畫：滑鼠滑過每個字母塊的時候字母塊浮動，點擊時固定浮動效果。（動畫效果片段是導入的）
首先在Project創建Animatior Controller控制項，雙擊打開，在Animator進行動畫狀態機編寫。
如圖所示，不需要修改默認的layers,只需要在Parameters(參數)裡面增加四個狀態的Trigger，拉入動畫片段，繪製如圖狀態機。然後點擊Anystate,分別編輯每個狀態。
如圖，在每個Condition加入自己的觸發器，再調整動畫時間等具體的參數就可了。
這裡Preview Source state恆定指向entry進入後的默認狀態，無法更改。
註：這個鍵盤，使用Grid寫的，只需要打開一個空對象，加入Grid Layout Group & Layout Element組件，他的按鍵子元素會自動排版在設定區域。記住寫完一個帶好動畫的子元素後拖到Prefabs保存，就可以批量製造了。11.UI攝像機/光源
- 圖片上最左側的攝像機是GUI攝像機，中間的是主攝像機（Main Camera），右側的是RTCamera，這個順序和位置不重要，保證視圖效果就可以了。相機重要的順序參數是Depth，主攝像機一般設置為-1,UI層是0,依次疊加渲染順序。圖片左右側圖片是背景圖，UI層背景圖來自透視紋理與RT攝像機的共同作用。
- 其中主攝像機渲染的是背景圖，GUI攝像機只渲染UI層，RT相機渲染綁定了透視紋理的UIraw image以及飛行器模型。在Unity裡面最終成像是各個攝像機共同渲染的結果，每個攝像機只渲染culling musk（選擇遮罩）選定的層，沒背渲染的層就是空白。一般UI場景都有兩個攝像機，主攝像機渲染背景，GUI攝像機渲染UI層。這樣UI層可以獨立於背景移動，有很好的立體效果（比如示例效果，使UI層跟隨滑鼠傾斜交互，就是通過腳本控制canvas--windows的local rotation來實現的，這樣複雜的場景就無法通過單一攝像機實現）。
- 相機選項Projection（投射）有兩個選項，Perspective表示遠景，是攝像頭開始向畫面擴散渲染，和美術的透視圖近大遠小是一個原理，投射出來的場景就是立體的。Orthographic是平行投射，從無線遠處平行投射渲染，得到的是立體圖形在平面上的投射，是2D的渲染效果。
- 這個場景的RT攝像機是為了渲染UI層上面的飛行器模型以及綁定透視紋理。他不渲染UI層，因此視圖只有背景和機器人，投射到透視紋理區域顯示就是最終的頁面效果。
- 圖片下方光源是藍色點光源，上方是白色點光源，都是通過設置選擇遮罩，只照射UI層來創造漂亮的打光效果。小太陽是Directional light（定向光源），用來點亮飛行器模型，因為這個場景沒有其他定向光源。注意，場景背景圖是不需要光線來渲染的，其他物體都是需要的。
MichelleGuan/UnityLearningNotes
推薦閱讀：