1.1    UI編輯器簡(jiǎn)介:

UI編輯器：是一款用于編輯游戲中的UI界面的工具。支持豐富的UI控件，包括按鈕，列表，復(fù)選框，進(jìn)度條，列表，滑動(dòng)框等等，達(dá)到省時(shí)、省力、高效的目的。

1.2      安裝環(huán)境

操作系統(tǒng)：Windows7/WindowsXP

程序擴(kuò)展包：

l  NetFramework 4.0

l  VC2010(vcredist_x64/ vcredist_x86)

     安裝SPII游戲開(kāi)發(fā)工具集

l  CocoStudio.exe

1.3     界面介紹

結(jié)構(gòu)樹(shù)：展示渲染區(qū)域節(jié)點(diǎn)的層次結(jié)構(gòu)并且支持拖拽移動(dòng)節(jié)點(diǎn)。結(jié)構(gòu)樹(shù)的根節(jié)點(diǎn)是一個(gè)Layer。

渲染區(qū)：UI布局的主編輯區(qū)，在該區(qū)域可以對(duì)精靈進(jìn)行移動(dòng)，縮放，旋轉(zhuǎn)的操作。

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

屬性窗口：當(dāng)選中一個(gè)節(jié)點(diǎn)，屬性窗口會(huì)顯示出該節(jié)點(diǎn)的所有屬性。修改任意屬性可以立即改變?cè)摴?jié)點(diǎn)在渲染區(qū)域的狀態(tài)。

日志窗口：日志窗口用來(lái)記錄所有操作的明細(xì)和歷史。

#p#

2.1 新建工程

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

2.2 導(dǎo)入資源

1.點(diǎn)擊菜單欄的文件菜單，下拉列表中的導(dǎo)入資源菜單，可以導(dǎo)入單個(gè)文件，也可以導(dǎo)入整個(gè)文件夾；

2.也可以點(diǎn)擊資源窗口的圖標(biāo)按鈕，分辨導(dǎo)入單個(gè)文件，和整個(gè)文件夾；

2.3資源編輯

右鍵點(diǎn)擊資源窗口的資源，可以進(jìn)行刪除，重命名的操作；

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

#p#

3.1 創(chuàng)建控件

1.右鍵點(diǎn)擊渲染區(qū)畫布，在右鍵菜單中選擇添加控件，選中容器控件的情況下，會(huì)直接添加控件到容器控件下；

2.也可以直接在控件列表區(qū)，選中需要的控件，直接拖動(dòng)到渲染區(qū)；

3.還可以從結(jié)構(gòu)樹(shù)上，選擇一個(gè)容器控件，右鍵菜單，給容器控件添加子控件；

3.2編輯控件

單個(gè)控件編輯方式：

（1）鼠標(biāo)點(diǎn)擊控件，選中控件，移動(dòng)鼠標(biāo)進(jìn)行控件的拖動(dòng)；

（2）在結(jié)構(gòu)樹(shù)上選擇相應(yīng)的控件，該控件會(huì)全局被選中；

多個(gè)控件編輯方式：

（1）渲染區(qū)：Ctrl + 鼠標(biāo)左鍵可以進(jìn)行控件的多選；

（2）結(jié)構(gòu)樹(shù)：Ctrl + 鼠標(biāo)左鍵可以進(jìn)行控件的多選；

（3）渲染區(qū)：點(diǎn)擊鼠標(biāo)左鍵并進(jìn)行拖動(dòng)，可以進(jìn)行控件的框選；

刪除控件：渲染區(qū)右鍵菜單，結(jié)構(gòu)樹(shù)右鍵菜單，delete建；

復(fù)制控件：渲染區(qū)右鍵菜單，結(jié)構(gòu)樹(shù)右鍵菜單，Ctrl+C；

粘貼控件：渲染區(qū)右鍵菜單，結(jié)構(gòu)樹(shù)右鍵菜單，Ctrl+V；

顯示編輯：

1.控件被選中的時(shí)候，會(huì)顯示白色的編輯框，編輯框的四個(gè)角點(diǎn)可以進(jìn)行縮放編輯，編輯框的右邊中心點(diǎn)可以進(jìn)行旋轉(zhuǎn)編輯；

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

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

3.3畫布操作

1.縮放畫布：Ctrl+鼠標(biāo)滾輪，可以放大縮小畫布；

2.移動(dòng)畫布：space（空格鍵） + 鼠標(biāo)左鍵，可以拖動(dòng)畫布；

3.4屬性編輯

常規(guī)屬性：

交互：使用在輸出數(shù)據(jù)中啟動(dòng)控件的鼠標(biāo)事件響應(yīng)；

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

垂直翻轉(zhuǎn)：

水平翻轉(zhuǎn)：

名字：輸出到數(shù)據(jù)文件的字符串，用于代碼查找控件的標(biāo)識(shí)（不可重復(fù)定義）；

標(biāo)志：輸出到數(shù)據(jù)文件的整數(shù)，用于代碼查找控件的標(biāo)識(shí)（不可重復(fù)定義）；

旋轉(zhuǎn)：調(diào)整控件的旋轉(zhuǎn)角度；

縮放：調(diào)整控件的橫向縮放和縱向縮放；

位置：調(diào)整控件的坐標(biāo)；

渲染層級(jí)：調(diào)整控件的渲染順序，上下的遮擋關(guān)系；

特殊屬性：

圖片：

文件：圖片控件用到的美術(shù)資源圖，可以從資源渲染區(qū)拖動(dòng)圖片資源到此屬性上，進(jìn)行資源替換；

復(fù)選框：

選中/取消：設(shè)置復(fù)選框的初始狀態(tài)；

常態(tài)底圖：復(fù)選框的正常狀態(tài)下的底圖圖片資源；

按下底圖：復(fù)選框的按下?tīng)顟B(tài)下的底圖圖片資源；

禁用狀態(tài)：復(fù)選框的禁用狀態(tài)下的底圖圖片資源；

標(biāo)示圖默認(rèn)狀態(tài)：復(fù)選框的按下?tīng)顟B(tài)下的底圖圖片資源（選擇使用）；

標(biāo)示圖選中狀態(tài)：復(fù)選框的選中狀態(tài)下的高亮圖片資源（選擇使用）；

進(jìn)度條：

進(jìn)度：進(jìn)度條的初始進(jìn)度（0-100）；

類型：進(jìn)度條的加載方向（左->右，右->左）;

圖片資源：進(jìn)度條的圖片資源文件；

文本區(qū):

寬度：文本區(qū)的寬（影響文本區(qū)的點(diǎn)擊測(cè)試區(qū)域）；

高度：文本區(qū)的高（影響文本區(qū)的點(diǎn)擊測(cè)試區(qū)域）；

字號(hào)：文本區(qū)的文字字體的大小；

字體：文本區(qū)的文字的字體；

對(duì)平對(duì)齊：文本區(qū)的文字的水平對(duì)齊方式（左對(duì)齊，中心對(duì)齊，右對(duì)齊）；

垂直對(duì)齊：文本區(qū)的文字的垂直對(duì)齊方式（頂對(duì)齊，中心對(duì)齊，底對(duì)齊）；

文本：文本區(qū)的初始顯示的文字文本；

滾動(dòng)層:

寬度：滾動(dòng)層的寬（影響滾動(dòng)層的點(diǎn)擊測(cè)試區(qū)域）；

高度：滾動(dòng)層的高（影響滾動(dòng)層的點(diǎn)擊測(cè)試區(qū)域）；

文件：滾動(dòng)層的初始背景圖片資源；

滾動(dòng)層的子控件，需要選中滾動(dòng)層，右鍵進(jìn)行添加；

層容器:

寬度：層容器的寬（影響層容器的點(diǎn)擊測(cè)試區(qū)域）；

高度：層容器的高（影響層容器的點(diǎn)擊測(cè)試區(qū)域）；

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

層容器的子控件，需要選中層容器，右鍵進(jìn)行添加；

按鈕：

正常狀態(tài)：按鈕的正常狀態(tài)下的圖片資源；

按下?tīng)顟B(tài)：按鈕的按下?tīng)顟B(tài)下的圖片資源；

禁用狀態(tài)：按鈕的禁用狀態(tài)下的圖片資源；

文本按鈕：

正常狀態(tài)：按鈕的正常狀態(tài)下的圖片資源；

按下?tīng)顟B(tài)：按鈕的按下?tīng)顟B(tài)下的圖片資源；

禁用狀態(tài)：按鈕的禁用狀態(tài)下的圖片資源；

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

字號(hào)：文本按鈕顯示文字的字體大??；

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

數(shù)字標(biāo)簽：

標(biāo)簽圖片：數(shù)字標(biāo)簽使用的圖片資源；

標(biāo)簽首字符：數(shù)字標(biāo)簽使用的圖片資源中的第一個(gè)字符；

標(biāo)簽首字寬：數(shù)字標(biāo)簽使用的圖片資源中的第一個(gè)字符的寬（像素）；

標(biāo)簽首字高：數(shù)字標(biāo)簽使用的圖片資源中的第一個(gè)字符的高（像素）；

文本：數(shù)字標(biāo)簽顯示的文本字符串（圖片資源中存在的字符集合）；

滑動(dòng)條：

滑動(dòng)進(jìn)度：滑動(dòng)條的初始進(jìn)度，滑動(dòng)節(jié)點(diǎn)的顯示位置；

底圖資源：滑動(dòng)條的背景圖片資源；

節(jié)點(diǎn)正常狀態(tài)：滑動(dòng)節(jié)點(diǎn)的正常狀態(tài)顯示的圖片資源；

節(jié)點(diǎn)按下?tīng)顟B(tài)：滑動(dòng)節(jié)點(diǎn)的按下?tīng)顟B(tài)顯示的圖片資源；

節(jié)點(diǎn)禁用狀態(tài)：滑動(dòng)節(jié)點(diǎn)的禁用狀態(tài)顯示的圖片資源；

輸入框：

寬度：輸入框的寬（影響輸入框的點(diǎn)擊測(cè)試區(qū)域）；

高度：輸入框的高（影響輸入框的點(diǎn)擊測(cè)試區(qū)域）；

字號(hào)：輸入框的文字字體的大?。?/p>

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

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

文本框：文本框

交互動(dòng)畫：是否啟動(dòng)文本框的點(diǎn)擊動(dòng)畫；

字號(hào)：文本框的文字字體的大??；

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

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

3.5導(dǎo)出資源

導(dǎo)出資源面板：

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

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

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

導(dǎo)出路徑：用戶自定義導(dǎo)出路徑；

導(dǎo)出文件包括.png和.plist文件；

當(dāng)工程中使用的圖片合并后的尺寸大于設(shè)定的圖片尺寸，程序?qū)⒆詣?dòng)分割合并后的圖片成多組合并圖片，并添加序列下標(biāo)。