Skip to main content

Unity UGUI 原理篇(一):Canvas 渲染模式

目標

  • 了解各種不同 UI Render Mode

 

本系列其他文章

 

使用環境 與 版本

  • Window 7
  • Unity 5.2.4

 

Canvas

Canvas Component 是UI布局和渲染的抽象空間,所有的UI都必須在此元素之下(子物件),簡單來說 Canvas 就是渲染 UI 的組件

 

Render Mode

UI渲染的方式,有以下三種

  • Screen Space – Overlay:螢幕空間 – 覆蓋
  • Screen Space – Camera:螢幕空間 – 攝影機
  • World Space:世界座標空間

 

Screen Space – Overlay

Screen Space - Overlay

在此模式下不會參照到Camera,UI直接顯示在任何圖形之上

  • Pixel Perfect:可以使圖像更清晰,但是有額外的性能開銷,如果在有大量UI動畫時,動畫可能會不平順
  • Sort Order:深度值,該值越高顯示越前面

 

Screen Space – Camera

Screen Space - Camera

使用一個Camera作為參照,將UI平面放置在Camera前的一定距離,因為是參照Camera,如果螢幕大小、分辨率、Camera視錐改變時UI平面會自動調整大小。如果Scene中的物件(GameObject)比UI平面更靠近攝影機,就會遮擋到UI平面。

  • Render Camera:用於渲染的攝影機
  • Plane Distance:與Camera的距離
  • Sorting Layer:Canvas屬於的排序層,在 Edit->Project Setting->Tags and Layers->Sorting Layers 進行新增,越下方的層顯示越前面
  • Order in Layer:Canvas屬於的排序層下的順序,該值越高顯示越前面

 

World Space

World Space

把物體當作世界座標中的平面(GameObject),也就是當作3D物件,顯示3D UI

  • Event Camera:處理UI事件(Click、Drag)的Camera,所設定的Camera才能觸發事件

 

參考資料

 

歡迎轉載,並註明出處 !

 

Arkai

獨立遊戲開發、技術分享。 Indie Game development and technology sharing.

什麼?不懂! 那就提問吧!

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料