由于要選擇Unity UI技術(shù)路線，年前分別試了Unity自帶的UI（即后面所說的UGUI）和FairyGUI兩種UI的制作方式，從流程上制作了一個簡單的UI面板來摸索兩種方式的套路。 這一篇主要記錄制作UGUI的過程。

在記錄UGUI制作過程之前需要上一篇文章http://blog.csdn.net/andyqingliu/article/details/54602673的鋪墊，Canvas是UGUI最重要的組件之一。

目標(biāo)：需要有一個按鈕入口（假想為背包按鈕），點擊按鈕彈出一個UI面板，這個面板的界面需要如下幾個方面的元素（靜態(tài)圖片忽略不提）。

1. 背包里面裝備與道具列表

2. 背包里功能切換

3. 背包的關(guān)閉

接下來就開始行動了：

1. 設(shè)置Canvas為項目做準備

廢話不多說，設(shè)置Canvas的Render Mode為Overlay,Pixel Perfect勾選，設(shè)置Canvas Scaler的UI Scale Mode為Scale With Screen Size,分辨率為1280*720,選擇Screen Match Mode為Match Width Or Height,Graphic Raycaster不變。如下圖：

如上圖，Canvas下面有個Button是入口。

2. 開始制作背包面板

這個就不截圖了，只說過程如下：

把需要的圖片拷貝到單獨的文件夾下面并設(shè)置為SPRite(2D and UI),以后如果需要更新某個圖片直接覆蓋即可。

在背包板子下面建立兩個Toggle并給這兩個GO一個父節(jié)點，給父節(jié)點添加Toggle Group組件，這樣就能一次選中一個。Toggle本身掛Toggle組件。

建立帶Scroll Rect組件的GO，然后把放背包列表的Content拖入Scroll Rect的Content屬性中，并給Content GO掛Grid Layout Group組件和Content Size Fitter組件，前者是為了設(shè)置列表的滾動方式和大小，后者是為了適配列表大小，這里要注意，如果不掛后者，這里要自己手動去適配Content大小，曾經(jīng)以為Unity沒有提供這個組件，為了測試只好自己寫適配列表大小，沒想到Unity已經(jīng)有了這樣的組件，還以為Unity這個組件怎么這么不智能呢

UI界面制作好了之后就是寫代碼了，給入口按鈕掛腳本，給背包面板掛背包的控制腳本，主要是Find對應(yīng)的物體或者拖對應(yīng)的物體，然后實例化對應(yīng)物體，添加響應(yīng)事件等。

UGUI這邊的流程就到這里，明天寫FairyGUI的流程。