UGUI基本使用與佈局(二){Canvas 基本觀念}

本篇以UGUI的基底 Canvas 的設定到 RectTransform 的使用技巧為主要目標來做紀錄。
一般UI要能夠維持固定的大小比例,我們要做那些設定?就是要透過 Canvas 和子物件的 RectTransform 相互配合,來看看如何做。
uguiCanvas 是安排UI位置和顯示的空間無關遊戲世界座標(3D UI除外),所有的UI都必須和Canvas成為父子物件關係才能顯示。
Canvas

  • A.創建 GameObject->UI->Canvas
    ugui-20170925001
    觀察一下Canvas上的4個預設Component組件,RectTransform是無法調整的,這個狀態會受到 Canvas 的 Render Mode影響
  • B.Canvas Componet
    Render Mode 有三種
    ugui-20170925002

    • Screen Space – Overlay:螢幕覆蓋 (無關攝影機直接覆蓋螢幕)
      Pixel Perfect:使圖更清晰
      Sort Order:深度越高顯示越前面
    • Screen Space – Camera:螢幕攝影機 (有攝影機參考,因此遊戲物件有可能會介於UI與CAMERA之間)
      Render Camera:針對的攝影機
      Plane Distance:攝影機和UI的距離
      Sorting Layer:排序圖層,後進的先出,顯示越前面
      Order in Layer:排序圖層中的順序,越高顯示越前面
    • World Space:世界座標 (該模式才可以調整RectTransform,將UI當成3D物件操作)
      Event Camera:處理事件用的攝影機
      Sorting Layer:排序圖層,後進的先出,顯示越前面
      Order in Layer:排序圖層中的順序,越高顯示越前面
  • C.Canvas Scaler Component
    控制整體 UI大小的 Compoent,縮放比例會影響著所有子物件UI。UI Scale Mode 也有三種
    ugui-20170925003

    • Constant Pixel Size
      Scale Factor:調整Canvas 的大小等於Screen Size (2倍 = Canvas Size 1/2),而子物件的UI則乘上該倍率
    • Scale With Screen Size
      Reference Resolution:設定預設螢幕大小
      Screen Match Mode:縮放模式

      • Match Width or Height:根據 Width 或 Height 縮放
      • Expand:最大程度放大
      • Shrink:最小程度收縮
    • Constant Physical Size
      透過 DPI 進行縮放
      Physical Unit:單位設定
      Fallback Screen DPI:當找不到可用設備DPI時使用
      Default Sprite DPI:預設的 Sprite DPIReference Pixels Per Unit:該值和預設單位除出來結果,再和UI相乘重新計算出大小
  • D.Graphic Raycaster Component
    該組件與事件的觸發相關,待 EventSystem 一同說明。

小結:

  1. 要設定UI空間概念的參數在Canvas Componet裡設定,包含存在空間的實體3D UI。
  2. 自適應UI的大小尺寸參數在Canvas Scaler Component裡設定,由於 Reference Pixels Per Unit 預設一單位等於 100 Pixels,Sprite中的預設一單位也是100 Pixels
    ugui-20170925004因此 Reference Pixels Per Unit / Pixels Per Unit 可以得出 一般正常 100*100 大小的圖片在 Canvas中的實際尺寸也是100,相對的縮小放大也將影響實際顯示的尺寸

Leave a Reply