【Unity3d遊戲開發】淺談UGUI中的Canvas以及三種畫布渲染模式

1、Canvas簡介

　　Canvas畫布是承載全部UI元素的區域。Canvas其實是一個遊戲對象上綁定了Canvas組件。全部的UI元素都必須是Canvas的自對象。若是場景中沒有畫布，那麼咱們建立任何一個UI元素，都會自動建立畫布，而且將新元素置於其下。

2、Canvas畫布參數與應用

1.建立畫布

　　當你建立任何一個UI元素的時候，都會自動建立畫布。也能夠主動建立一張畫布：點擊GameObject->UI->Canvas便可在Hierarchy面板建立一張畫布。

2.畫布參數

　　下面介紹一下Canvas畫布的參數：

　　第一個參數RenderMode的渲染模式有三種：Screen Space-Overlay、Screen Space-Camera以及World Space。

　　1.Screen Space-Overlay模式

　　Screen Space-Overlay（屏幕控件-覆蓋模式）的畫布會填滿整個屏幕空間，並將畫布下面的全部的UI元素置於屏幕的最上層，或者說畫布的畫面永遠「覆蓋」其餘普通的3D畫面，若是屏幕尺寸被改變，畫布將自動改變尺寸來匹配屏幕，以下圖效果：

　                                                                    

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（在此模式下，雖然在Canvas前放置了3D人物，可是在Game窗口中並不能觀察到3D人物）

　　Screen Space-Overlay模式的畫布有Pixel Perfect和Sort Layer兩個參數：

　　（1）Pixel Perfect：只有RenderMode爲Screen類型時纔有的選項。使UI元素像素對應，效果就是邊緣清晰不模糊。

　　（2）Sort Layer: Sort Layer是UGUI專用的設置，用來指示畫布的深度。

　　2.Screen Space-Camera模式

　　Screen Space-Camera（屏幕空間-攝影機模式）和Screen Space-Overlay模式相似，畫布也是填滿整個屏幕空間，若是屏幕尺寸改變，畫布也會自動改變尺寸來匹配屏幕。所不一樣的是，在該模式下，畫布會被放置到攝影機前方。在這種渲染模式下，畫布看起來 繪製在一個與攝影機固定距離的平面上。全部的UI元素都由該攝影機渲染，所以攝影機的設置會影響到UI畫面。在此模式下，UI元素是由perspective也就是視角設定的，視角廣度由Filed of View設置。

　　這種模式能夠用來實如今UI上顯示3D模型的需求，好比不少MMO遊戲中的查看人物裝備的界面，可能屏幕的左側有一個運動的3D人物，左側是一些UI元素。經過設置Screen Space-Camera模式就能夠實現上述的需求，效果以下圖所示：

　　                                                                                     

　　它比Screen Space-Overlay模式的畫布多了下面幾個參數：

　　（1）Render Camera:渲染攝像機

　　（2）Plane Distance:畫布距離攝像機的距離

　　（3）Sorting Layer: Sorting Layer是UGUI專用的設置，用來指示畫布的深度。能夠經過點擊該欄的選項，在下拉菜單中點擊「Add Sorting Layer」按鈕進入標籤和層的設置界面，或者點擊導航菜單->edit->Project Settings->Tags and Layers進入該頁面。

　　　　能夠點擊「+」添加Layer，或者點擊「-」刪除Layer。畫布所使用的Sorting Layer越排在下面，顯示的優先級也就越高。

　　（4）Order in Layer:在相同的Sort Layer下的畫布顯示前後順序。數字越高，顯示的優先級也就越高。

　　3.World Space

　　World Space即世界控件模式。在此模式下，畫布被視爲與場景中其餘普通遊戲對象性質相同的相似於一張面片（Plane）的遊戲物體。畫布的尺寸能夠經過RectTransform設置，全部的UI元素可能位於普通3D物體的前面或者後面顯示。當UI爲場景的一部分時， 　　可使用這個模式。

　　它有一個單獨的參數Event Camera，用來指定接受事件的攝像機，能夠經過畫布上的GraphicRaycaster組件發射射線產生事件。

　　這種模式能夠用來實現跟隨人物移動的血條或者名稱，以下圖所示：

　                                                                         　

　　咱們經過下面的表格能夠對比一下三種渲染模式的區別：

渲染模式	畫布對應屏幕	攝像機	像素對應	適合類型
Screen Space-Overlay	是	不須要	可選	2D UI
Screen Space-Camera	是	須要	可選	2D UI
World Space	否	須要	不可選	3D UI

 

 

做者：馬三小夥兒
出處：http://www.cnblogs.com/msxh/p/6337338.html 請尊重別人的勞動成果，讓分享成爲一種美德，歡迎轉載。另外，文章在表述和代碼方面若有不妥之處，歡迎批評指正。留下你的腳印，歡迎評論！