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

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

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

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

2. 背包里功能切換

3. 背包的關閉

接下來就開始行動了：

1. 設置Canvas為項目做準備

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

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

2. 開始制作背包面板

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

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

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

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

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

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