1.1    UI編輯器簡介:

UI編輯器：是一款用于編輯游戲中的UI界面的工具。支持豐富的UI控件，包括按鈕，列表，復選框，進度條，列表，滑動框等等，達到省時、省力、高效的目的。

1.2      安裝環境

操作系統：Windows7/WindowsXP

程序擴展包：

l  NetFramework 4.0

l  VC2010(vcredist_x64/ vcredist_x86)

     安裝SPII游戲開發工具集

l  CocoStudio.exe

1.3     界面介紹

結構樹：展示渲染區域節點的層次結構并且支持拖拽移動節點。結構樹的根節點是一個Layer。

渲染區：UI布局的主編輯區，在該區域可以對精靈進行移動，縮放，旋轉的操作。

控件庫：可用于在渲染區域編輯的各種控件包括Node，Sprite，LabelTFF，Layer，Menu，MenuItemImage等，還可以擴充。

屬性窗口：當選中一個節點，屬性窗口會顯示出該節點的所有屬性。修改任意屬性可以立即改變該節點在渲染區域的狀態。

日志窗口：日志窗口用來記錄所有操作的明細和歷史。

#p#

2.1 新建工程

點擊菜單欄的文件菜單，下拉列表中的新建按鈕，會彈出一個新建工程的信息面板，大家可以給工程命名，并選擇工程的保存路徑，最好在命名和路徑中不要有中文字符。

2.2 導入資源

1.點擊菜單欄的文件菜單，下拉列表中的導入資源菜單，可以導入單個文件，也可以導入整個文件夾；

2.也可以點擊資源窗口的圖標按鈕，分辨導入單個文件，和整個文件夾；

2.3資源編輯

右鍵點擊資源窗口的資源，可以進行刪除，重命名的操作；

可以再資源窗口下方的預覽窗口，查看選中的資源預覽效果圖；

#p#

3.1 創建控件

1.右鍵點擊渲染區畫布，在右鍵菜單中選擇添加控件，選中容器控件的情況下，會直接添加控件到容器控件下；

2.也可以直接在控件列表區，選中需要的控件，直接拖動到渲染區；

3.還可以從結構樹上，選擇一個容器控件，右鍵菜單，給容器控件添加子控件；

3.2編輯控件

單個控件編輯方式：

（1）鼠標點擊控件，選中控件，移動鼠標進行控件的拖動；

（2）在結構樹上選擇相應的控件，該控件會全局被選中；

多個控件編輯方式：

（1）渲染區：Ctrl + 鼠標左鍵可以進行控件的多選；

（2）結構樹：Ctrl + 鼠標左鍵可以進行控件的多選；

（3）渲染區：點擊鼠標左鍵并進行拖動，可以進行控件的框選；

刪除控件：渲染區右鍵菜單，結構樹右鍵菜單，delete建；

復制控件：渲染區右鍵菜單，結構樹右鍵菜單，Ctrl+C；

粘貼控件：渲染區右鍵菜單，結構樹右鍵菜單，Ctrl+V；

顯示編輯：

1.控件被選中的時候，會顯示白色的編輯框，編輯框的四個角點可以進行縮放編輯，編輯框的右邊中心點可以進行旋轉編輯；

2.控件被選中的時候，可以通過編輯器上方的工具欄，進行透明度的編輯，顏色混合的編輯，順時針的旋轉（Ctrl+R），逆時針的旋轉(Ctrl +T)；

3.多選控件的時候，可以進行中心點對齊，左邊線對齊(Ctrl + shit +L)，右邊線對齊(Ctrl + shit +R)，上邊線對齊(Ctrl + shit +T)，下邊線對齊(Ctrl + shit +B)；

3.3畫布操作

1.縮放畫布：Ctrl+鼠標滾輪，可以放大縮小畫布；

2.移動畫布：space（空格鍵） + 鼠標左鍵，可以拖動畫布；

3.4屬性編輯

常規屬性：

交互：使用在輸出數據中啟動控件的鼠標事件響應；

顯示/隱藏：顯示或隱藏選中的控件；

垂直翻轉：

水平翻轉：

名字：輸出到數據文件的字符串，用于代碼查找控件的標識（不可重復定義）；

標志：輸出到數據文件的整數，用于代碼查找控件的標識（不可重復定義）；

旋轉：調整控件的旋轉角度；

縮放：調整控件的橫向縮放和縱向縮放；

位置：調整控件的坐標；

渲染層級：調整控件的渲染順序，上下的遮擋關系；

特殊屬性：

圖片：

文件：圖片控件用到的美術資源圖，可以從資源渲染區拖動圖片資源到此屬性上，進行資源替換；

復選框：

選中/取消：設置復選框的初始狀態；

常態底圖：復選框的正常狀態下的底圖圖片資源；

按下底圖：復選框的按下狀態下的底圖圖片資源；

禁用狀態：復選框的禁用狀態下的底圖圖片資源；

標示圖默認狀態：復選框的按下狀態下的底圖圖片資源（選擇使用）；

標示圖選中狀態：復選框的選中狀態下的高亮圖片資源（選擇使用）；

進度條：

進度：進度條的初始進度（0-100）；

類型：進度條的加載方向（左->右，右->左）;

圖片資源：進度條的圖片資源文件；

文本區:

寬度：文本區的寬（影響文本區的點擊測試區域）；

高度：文本區的高（影響文本區的點擊測試區域）；

字號：文本區的文字字體的大小；

字體：文本區的文字的字體；

對平對齊：文本區的文字的水平對齊方式（左對齊，中心對齊，右對齊）；

垂直對齊：文本區的文字的垂直對齊方式（頂對齊，中心對齊，底對齊）；

文本：文本區的初始顯示的文字文本；

滾動層:

寬度：滾動層的寬（影響滾動層的點擊測試區域）；

高度：滾動層的高（影響滾動層的點擊測試區域）；

文件：滾動層的初始背景圖片資源；

滾動層的子控件，需要選中滾動層，右鍵進行添加；

層容器:

寬度：層容器的寬（影響層容器的點擊測試區域）；

高度：層容器的高（影響層容器的點擊測試區域）；

文件：層容器的初始背景圖片資源；

層容器的子控件，需要選中層容器，右鍵進行添加；

按鈕：

正常狀態：按鈕的正常狀態下的圖片資源；

按下狀態：按鈕的按下狀態下的圖片資源；

禁用狀態：按鈕的禁用狀態下的圖片資源；

文本按鈕：

正常狀態：按鈕的正常狀態下的圖片資源；

按下狀態：按鈕的按下狀態下的圖片資源；

禁用狀態：按鈕的禁用狀態下的圖片資源；

字體：文本按鈕顯示文字的字體；

字號：文本按鈕顯示文字的字體大小；

文本：文本按鈕顯示的文字字符串；

數字標簽：

標簽圖片：數字標簽使用的圖片資源；

標簽首字符：數字標簽使用的圖片資源中的第一個字符；

標簽首字寬：數字標簽使用的圖片資源中的第一個字符的寬（像素）；

標簽首字高：數字標簽使用的圖片資源中的第一個字符的高（像素）；

文本：數字標簽顯示的文本字符串（圖片資源中存在的字符集合）；

滑動條：

滑動進度：滑動條的初始進度，滑動節點的顯示位置；

底圖資源：滑動條的背景圖片資源；

節點正常狀態：滑動節點的正常狀態顯示的圖片資源；

節點按下狀態：滑動節點的按下狀態顯示的圖片資源；

節點禁用狀態：滑動節點的禁用狀態顯示的圖片資源；

輸入框：

寬度：輸入框的寬（影響輸入框的點擊測試區域）；

高度：輸入框的高（影響輸入框的點擊測試區域）；

字號：輸入框的文字字體的大小；

字體：輸入框的文字的字體；

文本：輸入框的初始顯示的文字文本；

文本框：文本框

交互動畫：是否啟動文本框的點擊動畫；

字號：文本框的文字字體的大小；

字體：文本框的文字的字體；

文本：文本框的初始顯示的文字文本；

3.5導出資源

導出資源面板：

圖片最大寬度：合成圖片的最大寬度；

圖片最大高度：合成圖片的最大高度；

碎圖縫隙：合成大圖中的小圖之間的縫隙像素；、

導出路徑：用戶自定義導出路徑；

導出文件包括.png和.plist文件；

當工程中使用的圖片合并后的尺寸大于設定的圖片尺寸，程序將自動分割合并后的圖片成多組合并圖片，并添加序列下標。