日落20191001002 - Unity組件應用之Camera層級控制與FrameDebugger應用

環境

系統:Windows 10
引擎:Unity 2017.2.1f1

目的

通過實例瞭解Camera層級控制

實例

一、佈局主要分爲三層:模型層、特效層、UI層。

(1-1)以兩個Camera作爲模型層和特效層的根節點。
pic
(1-2)UI層的根節點默認爲Canvas,通過生成UGUI控件(Image_UI)時自動生成Canvas和EventSystem。
pic

(1-3)在模型層(Camera_Model)下創建子控件:文本控件Text_Model、圖片控件Image_Model、3D對象Capsule。
pic

(1-4)在特效層(Camera_Effect)下創建子控件:圖片控件Image_Effect、粒子控件Particle System。
pic

二、調整各控件屬性。

(2-1)調整各控件屬性前,先添加兩個層級(Model和Effect)以供分層管理。
pic

(2-2)Camera_Model的屬性設置如下:
pic

(2-3)Text_Model的屬性設置如下:
pic

(2-4)Image_Model的屬性設置如下:
pic

(2-5)Capsule的屬性設置如下:
pic

(2-6)Camera_Effect的屬性設置如下:
pic

(2-7)Image_Effect的屬性設置如下:
pic

(2-8)Particle System的屬性設置如下:
pic

(2-9)Canvas的屬性設置如下:
pic

(2-10)Image_UI的屬性設置如下:
pic

(2-11)在Game窗口中可見通紅的界面,顯然這並非所想要的結果,而且明顯是層級出了問題。
pic

三、通過Frame Debugger觀察渲染過程。

(3-1)開啓Frame Debugger窗口
pic

(3-2)運行工程後,按下FrameDebugger窗口的Enable按鈕,可見渲染過程。
pic

(3-3)摺疊渲染過程至主節點,此時可見剩下兩個主節點。
pic

(3-4)觀察第一個主節點:
pic

(3-5)觀察第二個主節點:
pic

(3-6)根據兩個節點的情況,可知這是Image_UI的層級問題所導致,而Image_UI是源於Canvas的默認UGUI鏡頭。

四、通過改變畫布的默認渲染層級,以修正層級問題。

(4-1)添加一個用於UI的相機(Camera_UI)
pic

(4-2)調整Canvas的Render Mode(設爲屏幕空間的相機Screen Space - Camera)和Render Camera(設爲新加的相機Camera_UI)的參數值,可以顯示出正確的層級。
pic

(4-3)再調整一下Canvas的其他參數:
pic

(4-4)運行後,可見Frame Debugger窗口的渲染只剩下一個主節點,默認的UGUI渲染節點已被幹掉,從而得到正確展示效果。
pic

以上簡單回顧。

參考資料:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章