【翻譯】Unity官方教學- UI Canvas(UGUI)

【翻譯】Unity官方教學- UI Canvas(UGUI)

   凌晨12:51       林子安

---

前言：這個系列是翻譯Unity官網上的UI教學，暫時沒有時間做成中文字幕，翻譯的如果沒有很好請多包涵XD

先簡單介紹一下Unity的UI史

OnGUI時期(Unity4.6以前)

在Untiy4.6以前官方式提供OnGUI函數來提供UI，而且不支援可視化開發，並且始終在3d object上方，也因此後來ArenMook就開發出一套NGUI plug-in讓UI這塊變得更容易開發，也可以顯示3d model跟粒子效果，網路上也有大量的教學，幾乎也被視為Unity的必備插件之一

UGUI時期(Unity4.6以後)

而4.6版本後出現了新版的UGUI，也是NGUI作者ArenMook從2012年11月加入Unity協助開發GUI讓UI的呈現更優化，因此在選擇GUI上通常會選擇UGUI，但NGUI仍然有持續更新也有使用者持續使用，如果已經使用NGUI的專案或是熟悉的開發者通常也會選擇繼續使用

到底要用UGUI還是NGUI：

有用過/正在用NGUI→選擇NGUI

沒用過NGUI的開發者→直接使用原生的UGUI即可

大致上是這樣，網路上也有一些比較專業的分析文，去針對兩者比較與效能表現

例如Drawcall數量，記憶體配置等等，不過大致上都是可用，而不如當初OnGUI可用性極低

所以兩者之中選擇影響並不會太大，而以下則是4.6版本時期的介紹，延用至5.0的今天也是OK的

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

UI CANVAS

版本檢查: 4.6 / 難度: 新手 / 日期: 24 Jul 2015

The Canvas is the root component for rendering all UI objects in Unity.

Canvas(畫布)是渲染所有UI物件的根容器

重點整理：

在UGUI中，只要添加任何UI到場景中就會自動生成Canvas跟Event System

所以的UI都必須位於Canvas底下

翻譯內容：

Canvas(畫布)

1.Canvas是一個控制將被渲染UI元素的組件

2.所有UI都必須是Canvas的子物件

3.同一個場景中是有可能有超過一個以上的canvas出現

4.使用UI元素至少需要一個可用canvas，如果沒有canvas而加入一個UI時會自動生成一個canvas並且讓其UI附在底下

5.每個canvas有不同的渲染模式可以設置

6.每個渲染模式可以在Render Mode pop-up menu(渲染模式彈出選單)中設定

Lza解說：
簡單來說，就是Canvas就是UI的母容器，而沒有canvas就直接new個UI就會生成1個canvas&1個eventsystem，而場景可以有多個canvas來控制或切換所需的UI
(例如一個是遊戲畫面UI，按ESC跳到另一個canvas進入選單畫面)
而渲染模式則是改良原本OnGUI僅有Overlay模式，也就是UI僅在最上層，下面會提到三種渲染模式

Screen Space - Overlay(覆蓋)

是最常見的渲染模式，也是canvas預設的渲染模式

在Overlay中，UI會覆蓋在場景上，而所有的UI都會渲染在所有場景最上層\

在這個模式中，canvas會自動填滿螢幕，並且根據螢幕設定改變自動調整大小

在Overlay模式中，canvas是由Rect Transform組件來驅動的，而canvas會變成不可編輯的

如果對Rect Transform有興趣，可以參考另外一隻教學(本期會翻譯)

這個渲染模式有一個Pixel Perfect(完美像素)選項

當勾選這個選項，UI會被調整到最近的像素

可以在某些情況下銳化UI元素的外觀

Screen Space - Camera(攝影機)

相較於覆蓋模式他是由一個場景特定的攝影機來呈現

他被允許一個特定攝影機設定螢幕場景UI的攝影機

最常使用的是立體攝影機給UI一個深度

在這個模式canvas會自動充滿整個攝影機視角

並且當攝影機的視角設定改變會自動調整

而這個模式一樣有Pixel Perfect的選項
Render Camera則是選取你要把UI渲染上去的目標攝影機，若沒設定攝影機則會回到預設的Overlay模式
Plane Distance為調整攝影機與UI的距離(調整大小會讓場景中UI元件變大或小，不過在預覽畫面是不變的)，如果沒有設置距離的話，渲染出來的UI可能會被裁減掉
還可以根據Depth(深度)來調整UI，如果要詳細研究可以參考Camera教學(之後會翻譯)

World Space

1.這個模式不由RectTransform驅動
2.有可能擁有1個以上的canvas來作為UI渲染
3.屬性欄位中Event Camera是接受事件的攝影機
4.Receives Events為是否受到事件點擊或暫停所影響，如果取消的話，這個UI則會忽略該事件
5.Sorting Layer跟Order Layer則是相對於場景中其他渲染，用來控制canvas的呈現順序

Lza解說：
在這個模式中很適合用於RPG常常需要進入情境動畫或是切換視角來做不同UI的呈現，又或是簡單如本影片最後範例可以當作切換UI前後順序等等，主要是跟事件有緊密的關係。

備註其他欄位：

Blueprint：啟用後，物體不會旋轉和缩放。

Raw Edit：啟用後，調整物體的Pivot和Anchor不會改變物體的位置和尺寸。

Render Mode : 

  Screen Space  - Overlay - 將UI元件在場景中最上面渲染，螢幕縮放自動會改變大小。

  Screen Space  - Camera - 將UI元件指定某個攝影機前一定距離上，螢幕縮放自動會改變大小跟攝影機設定有關。

  World Space   - 將UI元件在空間中，大小由RectTransform調整，善用於3D上不要在2D上。

Pixel Perfect     - 保持實際大小，不會自動調整大小。

Render Camera - 渲染的攝影機

Event Camera   - 接收事件的攝影機

Plane Distance  - 距離

Sorting Layer    - 渲染的層級

Order in Layer   - 渲染的層級

Ui Scaler Mode :

1.   Constant Pixel Size      - 使UI元件保留相同的大小(以像素为单位)無論屏幕大小。
2.   Scale With Screen Size - 使UI元件自動調整屏幕。

Screen Math Mode 

1.     Mathc Width Or Height  依寬度or高度
2.     Reference Resolution X Y  寬高大小
3.     Mathc Width Or Height
4.     Math

每個Canvas都有一個Graphic Raycaster，用於獲取用戶選中的uGUI控件。

多個Canvas之間通過設置Graphic Raycaster的priority來設置事件響應的先後次序。

當Canvas採用World Space或Camera Space時，Graphic Raycaster的Block選項可以用來設置遮擋目標。