UGUI基本使用與佈局(一){使用PS輔助UI規劃}

在UNITY終於推出官方UI工具後,開發者終於可以脫離使用外掛和OnGUI的魔咒啦,因此透過本系列紀錄一些UGUI的使用方法與心得。
ugui
使用UI的基本元素
1.新增Canvas 畫布
unity_ugui_20161004_001

2.系統會產生一塊畫布和一個自動生成的EventSystem
unity_ugui_20161004_003

3.做UI前螢幕的比例設定(非常重要)
unity_ugui_20161004_002
GAME視窗左上角的解析度與比例設定

4.接下來回到Canvas上,在Component做攝影機的設定
unity_ugui_20161004_004
不論什麼情況這個Canvas底下的UI物件永遠都會在畫面的最上層。
預設是使用Overlay,這裡先選擇第二個以攝影機為主,下方Canvas Scaler裡的UI Scale Mode,預設的是constant pixel Size,也就是不論畫面解析度、尺寸,UI物件都會是固定的pixel 大小。另外還有隨著螢幕寬高縮放(Scale With Screen Size)和實際物理尺寸(Constant Physical Size)的功能。

5.這裡使用一張遊戲的介面突來做模仿
打開PS做一下合成與規劃,開啟表尺切換到百分比模式(方便我們做計算)
unity_ugui_20161004_005

先以下方的人物狀態列來看高度大約是畫面的14%
頭像左緣大約在25%位置,技能欄大約從33%開始到63%的位置,最右的區塊大約到73%,接下來做些去背處理以及影像的合成如下
A.主介面背景
unity_ugui_20161004_006

B.要用來做遮罩的色塊(左邊的形狀較特別分開切割以免互相影響,分為下圖三張)
unity_ugui_20161004_007 unity_ugui_20161004_008-png

6.到Canvas新增背景image
unity_ugui_20161004_009

其預設值如下,畫面上應該是一個在正中央的白色方塊
unity_ugui_20161004_010

匯進切好的圖片後,找到要使用的圖檔做設定(給UI使用)
unity_ugui_20161004_011
把背景圖放進Image Component裡的Scource Image裡面
unity_ugui_20161004_012

接下來依照規劃設置Anchors裡面X和Y的min還有max

unity_ugui_20161004_013
值的範圍是0 – 1以百分比來算所以填入以下數據(這裡特別重要,要能自動適應就靠這個)
並且將上下左右的內距歸零,讓UI填滿我們設置的範圍得到下圖
unity_ugui_20161004_014

Leave a Reply