Canvas簡介目錄什么是CanvasCanvas的三種渲染模式Canvas中UI元素的顯示順序什么是Canvas什么是CanvasCanvas是畫布的意思，在Unity3D的UI系統(tǒng)中，所有UI元素都必須作為Canvas的子對象存在。場景中的Canvas對象都關聯(lián)著一個Canvas組件，是所有UI元素的容器。不過一個場景中并不是只能存在一個Canvas，所以可以根據(jù)應用的設計需求在場景中使用多個Canvas，而不用把所有的UI元素放置于同一個Canvas下。什么是Canvas在Unity3D的場景視圖中，Canvas對象以矩形的形態(tài)呈現(xiàn)。通過使用Canvas，我們可以在需要的時候才呈現(xiàn)出UI界面。而在不需要的時候，則可以將其隱藏起來。當我們創(chuàng)建任何一個UI元素的時候，如果場景中沒有Canvas對象，Unity3D將自動幫我們創(chuàng)建一個Canvas對象，并將新創(chuàng)建的UI元素添加為Canvas的子對象。什么是CanvasCanvas的三種渲染模式Canvas的三種渲染模式ScreenSpace-Overlay1.ScreenSpace–Overlay（屏幕空間-覆蓋）Canvas的默認RenderMode為ScreenSpace-Overlay，此時Canvas下的所有UI元素會直接繪制在游戲窗口的平面上。也就是說，此時Canvas中的UI元素會優(yōu)先顯示在游戲場景中，不會被其他任何對象所遮擋。在該模式下我們無法手動修改Canvas的尺寸等信息，因為Canvas的大小由Game視圖的大小決定，而Canvas是覆蓋在整個Game視圖之上的。ScreenSpace-Camera2.在此模式下，Canvas的顯示效果和前者基本一致，只是在Scene視圖中有較大區(qū)別。將Canvas的RenderMode切換為ScreenSpace-Camera后，需要手動指定RenderCamera（渲染用相機）。ScreenSpace-Camera在ScreenSpaceOverlay/Camera兩種模式下，Canvas的尺寸和Game視圖的尺寸一致，Canvas會將所有UI元素渲染在屏幕最頂端，不會受到場景中其他任何物體的影響。如果屏幕尺寸改變，Canvas會自動重新適應屏幕尺寸。WorldSpace需要注意的是，在VR項目的開發(fā)中，所有Canvas必須設置為WorldSpace。在此模式下，整個Canvas將和其他對象一樣作為3D對象存在于場景中。Canvas中UI元素的顯示順序UI元素的顯示順序Canvas中UI元素的顯示順序和它們在Hierarchy層級視圖中的顯示順序是一致的。第一個子對象將被首先繪制，然后是第二個子對象，以此類推。當兩個UI元素重疊的時候，后繪制的對象將顯示在之前繪制的對象之上。UI元素的顯示順序當我們需要調整UI元素的顯示順序時，只需要在Hierarchy視圖中通過拖曳的方式來調整順序即可。UI界面的布局王寒目錄矩形工具(RectTool）矩形坐標（RectTransform）軸點（Pivot）錨點（Anchors）矩形工具（RectTool）矩形工具使用矩形工具，我們可以拖動、縮放和旋轉各種UI元素當我們選中某個UI元素后，就可以使用鼠標將其移動到畫布的合適位置。通過點擊和拖曳UI元素的邊緣，可以調整它的大小。最后，把鼠標光標放到UI元素的周邊，可以看到一個旋轉的標記，使用鼠標移動，就可以把UI元素旋轉到所需的角度。和其它工具類似，矩形工具的使用也受到錨點和空間的限制。通常情況下，我們可以將其設置為Pivot和Local矩形坐標（RectTransform）矩形坐標在Unity3D中，普通的游戲對象（GameObject）都有一個對應的Transform組件。而對于UI元素，則使用RectTransform組件來代替。RectTransform組件同樣有多重屬性，如位置、旋轉、縮放等。除此之外，它還提供了寬度和高度屬性，以便調整矩形的大小。軸點（Pivot）軸點所謂的軸點也就是UI元素的參考坐標系原點。對UI元素的旋轉和縮放等操作都是基于軸點的位置來進行的。當我們在工具欄中將Pivot按鈕設置為Pivot模式時，RectTransform的軸點可以在Scene場景視圖中進行移動錨點（Anchors）錨點在RectTransforms中還包含了另外一個布局概念，也就是錨點。錨點在場景視圖中以四個小的圓形手柄來顯示，在Inspector視圖中顯示了錨點的信息。錨點雖然錨點的設置比較復雜，但是Unity3D通過錨點預設（AnchorPreset）按鈕讓這一操作大大簡化。點擊錨點預設按鈕，就可以從彈出的子菜單中選擇所需的錨點預設。UI工具中的視覺元素王寒目錄文本（Text）圖像（Image）面板（Panel）文本（Text）文本Text文本在UI中通常被稱為Label（標簽），它有一個文本區(qū)域，可以在其中輸入我們想要顯示的文本。我們可以在Inspector視圖中可視化的更改其字體和其它顯示屬性等。除了基本的Text控件，Unity3D還提供了更為實用的TextMeshPro。TextMeshPro除了可以作為UI控件來添加，還可以直接作為3D對象添加到場景之中。在VR等純3D場景中，通常我們會傾向于選擇TextMeshPro。圖像（Image）圖像Image控件對象有一個RectTransform組件和一個Image組件。我們可以通過RectTransform組件來設置Image對象在場景中的位置，尺寸大小和其它坐標信息。我們可以通過Image組件來指定圖像對象的源圖片，色彩，材質等屬性。圖像需要注意的是，當我們將制作好的美術資源導入到Unity3D后，如果要在用戶界面的Image控件對象中使用，必須將其TextureType設置為Sprite(2DandUI)。面板（Panel）面板Panel是一種特殊的UI元素，可以把它看做UI元素的容器，我們可以在上面放置各種UI元素。Panel對象有一個Image組件，可以用來設置背景圖片。當Canvas上面有比較多的UI元素時，我們可以考慮使用Panel來組織，從而達到更好的視覺呈現(xiàn)效果。UI工具中的交互元素王寒目錄什么是UI交互元素按鈕（Button）勾選按鈕（Toggle）滑動條（Slider）其它什么是UI交互元素UI交互元素顧名思義就是和用戶進行交流互動的界面，在Unity中具有許多的交互元素，例如Button（按鈕）；Toggle（切換）；按鈕（Button）按鈕是各類軟件、APP和網(wǎng)站中最常用的交互控件。在Unity3D的UI元素中，按鈕同樣非常重要。Button元素默認有一個Text元素作為子對象。Button的Inspector視圖中能看到，Button由RectTransform組件、Image組件、Button組件構成。其中RectTransform組件和其他UI元素相同，用于控制Button的位置等。Image組件用于顯示按鈕的背景圖，默認為圖中的黑色矩形框，而Button組件則用于接收鼠標點擊事件等互動。在Button組件的最下方，是一個OnClick()事件，點擊右下角的加號可以添加新的按鈕事件。我們可以使用它來定義按鈕和用戶之間的交互時間。勾選按鈕（Toggle）Toggle元素的作用就是一個開關，它的視覺呈現(xiàn)是一個勾選框，允許用戶開啟或關閉某個選項。Toggle元素有兩個子對象Background和Label，二者用于控制Toggle的外形，此處就不再贅述。Toggle組件中的參數(shù)大部分和Button相同，主要區(qū)別在于下方的IsOn屬性和事件的改變。當IsOn為勾選狀態(tài)時，表明此Toggle為開啟狀態(tài)，否則為關閉狀態(tài)。而最下方的事件不是OnClick()，而是OnValueChanged狀態(tài)，參數(shù)為Boolean。當場景中的Toggle每次被點擊時，IsOn的狀態(tài)都會發(fā)生改變，我們可以利用IsOn參數(shù)來決定場景中某些組件是否可用。滑動條（Slider）Slider也就是滑動條，可用于控制音量等，比如手機音樂APP的播放進度條就可以用Slider來實現(xiàn)。Slider元素也是由數(shù)個Image元素組成的，可拖動的圓環(huán)和背景進度條都是一個Image，可通過更換Image中的圖片來更改Slider樣式。其它交互控件除了以上提到的交互控件，Unity3D中還提供了其它豐富的交互控件，比如Scrollbar（滾動條），Dropdown（下拉列表），InputFiled（文本輸入框），ScrollRect（滾動區(qū)）等1. 滾動條（Scrollbar）和滾動視圖（ScrollView）2.下拉列表3.文本輸入框創(chuàng)建項目的UI界面王寒目錄案例描述案例實施案例描述在幾乎所有的AR/VR應用中，都會有一個UI界面。通過這個UI界面，我們可以跳轉到其它界面，輸入一些基本信息，或是進行一些基礎的設置。在本案例中，我們將一起學習創(chuàng)建一個簡單的項目UI界面。完成的界面分別是一個主菜單界面和應用的主界面在主菜單界面點擊START按鈕，會切換到應用的主場景。在應用主場景點擊BACK按鈕，會返回菜單界面。最后，在菜單界面中點擊QUIT按鈕，將退出當前應用返回切換案例實施Step1.創(chuàng)建新項目，命名為MyMenuStep2.安裝TextMeshProStep3.導入所需的資源（bg.png,1920x1080）開始前的準備開始前的準備使用快捷鍵Ctrl+N，創(chuàng)建一個新的場景，使用快捷鍵Ctrl+S保存，并重命名為GameScene創(chuàng)建主場景在Hierarchy視圖中右鍵單擊，選擇UI-Image，此時就會在場景中添加一個Image圖片元素，同時還會自動添加一個Canvas畫布，還有一個EventSystem對象。選中Canvas對象，在Inspector視圖中將CanvasScale組件的UIScaleMode設置為ScaleWithScreenSize，這樣Canvas對象就會自動覆蓋整個界面。然后把ReferenceResolution設置為X:1920,Y:1080，因為這也是圖片的大小。選中Image，在Inspector視圖中選擇SourceImage，將其設置為剛剛添加的bg圖片。此外，在RectTransform中將Width和Height屬性分別設置為1920和1080。如圖5-30所示。添加Image和Canvas對象在Hierarchy視圖中右鍵單擊Canvas對象，選擇UI-Text-TextMeshPro。此時在Canvas中增加了一個新的子對象Text(TMP)。選中該對象，在Insepctor視圖中更改其屬性。將RectTransform組件的Width和Height分別設置為600和50.將TextMeshPro-Text(UI)組件中的Text內容更改為“Welcometothisworld!”，將FontSize更改為50。添加文本在Hierarchy視圖中選中Canvas對象，右鍵單擊，選擇UI-Button-TextMeshPro。此時在場景視圖中出現(xiàn)了一個按鈕。將其更名為Button_Back使用工具欄上的移動工具調整按鈕的位置，然后使用矩形工具調整其大小。然后選中Button對象，在Inspector視圖中設置其屬性。在Button組件部分設置HighlightedColor（高亮顏色），PressedColor（按下顏色）等，從而讓用戶可以感受到按鈕的作用。添加返回按鈕點擊Button對象的下三角，選中Text(TMP)，然后在Inspector視圖中更改文本為“BACK”,并調整FontSize為50更改按鈕上的文本右鍵單擊Hierarchy視圖中的Canvas對象，然后選擇CreateEmpty，創(chuàng)建一個空白對象，將其更名為Menu。然后將返回按鈕拖動為Menu的子對象創(chuàng)建名為Menu的父對象在Unity3D編輯器中使用快捷鍵Ctrl+N創(chuàng)建一個新的界面，然后使用快捷鍵Ctrl+S保存，并將其更名為MenuScene創(chuàng)建菜單界面在Hierarchy視圖中右鍵單擊，選擇UI-Panel，從而添加一個面板。此外，Unity3D還會自動添加一個Canvas對象和EventSystem對象。選中Panel對象，將其更名為Background,然后將其Image組件中的SourceImage設置為此前導入的bg。將color的alpha透明度設置為255。添加和設置Panel右鍵單擊Canvas對象，選擇UI-Button-TextMeshPro，創(chuàng)建一個新的按鈕，將其命名為Button_Start。使用矩形工具調整按鈕的大小，然后點擊Button_Start的子對象Text(TMP)，在Inspector視圖中更改按鈕的文本內容為“START”，并設置各種屬性。添加“開始”按鈕右鍵單擊Hirarchy視圖中的Button_Start，選擇Duplicate，從而復制出另一個按鈕，將其更名為Button_Quit。使用移動工具將其調整到合適的位置。然后更改按鈕的文本內容為QUIT。添加“退出”按鈕右鍵單擊Hierarchy視圖中的Canvas對象，然后選擇CreateEmpty，創(chuàng)建一個空白對象，將其更名為Menu。然后將Button_Start和Button_Quit都拖動為Menu的子對象創(chuàng)建名為Menu的父對象當我們在菜單場景中點擊START按鈕時，會自動切換到主場景。如果點擊QUIT按鈕，則退出當前應用。此外，在主場景中點擊BACK按鈕時，會返回菜單場景。設置按鈕的交互操作-交互邏輯 在Unity3D編輯器的Project視圖的空白處右鍵單擊，選擇Create-C#Script，從而創(chuàng)建了一個C#腳本，將其命名為MenuControl。雙擊在VisualStudio中將其打開。更改其中的代碼創(chuàng)建MenuControl.cs在Hierarchy視圖中選中Canvas的子對象Menu，然后點擊Inspector視圖中的AddComponent，選擇Scripts-MenuControl，將剛才所創(chuàng)建