【Cocos2dx工具】Cocostudio界面編輯器一

【Cocos2dx工具】Cocostudio界面編輯器

一

寫在前面——

   如果轉(zhuǎn)載請(qǐng)注明出處，謝謝大家支持

   同步更新51CTO博客

——Forward

我的微博——龍顏碩

今天我們開始Cocostudio中UI（界面）編輯器的學(xué)習(xí)（如還有同學(xué)不知道Cocostudio，請(qǐng)到【Cocos2dx工具——Cocostudio之?dāng)?shù)據(jù)編輯器使用】進(jìn)行初步了解）

這一片博客中，我們主要介紹一下Cocostudio界面編輯器的操作，隨后我們會(huì)對(duì)界面的實(shí)際編碼作進(jìn)一步說(shuō)明。

打開UI編輯器

圖1

為了能夠更方便的使用UI編輯器，首先來(lái)對(duì)這個(gè)編輯器整體做一次了解：

圖2

如圖2所示，紅色區(qū)域是我們可以添加的控件工具欄區(qū)域；藍(lán)色區(qū)域是我們編輯過(guò)程中使用的主區(qū)域，即所有主要的操作結(jié)果都是在這個(gè)區(qū)域中完成的；×××區(qū)域是我們編輯之后物理層級(jí)結(jié)構(gòu)展示區(qū)域；綠色區(qū)域是我們?cè)诰庉嬤^(guò)程中選中控件的屬性顯示區(qū)域；藍(lán)綠色（這個(gè)顏色是這么說(shuō)嗎？^_^）區(qū)域是我們這個(gè)UI使用的所有資源展示區(qū)域；紫紅色區(qū)域是上邊某一資源圖片被選中時(shí)候的預(yù)覽圖顯示區(qū)域。

OK，有了對(duì)編輯器整體認(rèn)識(shí)之后，我們就可以開始使用它了……

如果沒有已經(jīng)編輯好的UI，我們需要新建一個(gè)項(xiàng)目如下圖所示：

圖3

這時(shí)會(huì)彈出項(xiàng)目選項(xiàng)的對(duì)話框，按照具體情況填寫即可：

圖4

這時(shí)我們會(huì)在編輯使用的主區(qū)域出現(xiàn)一個(gè)用黑框表示的編輯區(qū)域如下圖：

圖5

這個(gè)黑色編輯區(qū)域大小是與我們期待的分辨率一致的，那么肯定有人會(huì)問(wèn)——編輯器怎么會(huì)知道我們期望的分辨率是多大呢，如果這個(gè)分辨率與我們期望的分辨率大小不一致怎么辦呢？

大家注意看編輯器左上角有一個(gè)文本標(biāo)志“畫布”后面跟隨一個(gè)下拉列表框選項(xiàng)，我們可以通過(guò)這里來(lái)告知或修改我們正在編輯UI的分辨率大?。?/span>

圖6

設(shè)計(jì)者很周到的為我們提供了多種分辨率（包括：480X320、960X640、1024X768以及以上幾種分辨率的豎屏結(jié)構(gòu)），隨著我們選擇的不同，前面提到的黑色編輯區(qū)域也隨之變化。

好的，這個(gè)時(shí)候我們相當(dāng)于有了自己一張畫布，不過(guò)僅有畫布還是不夠的，我們還需要畫筆——

圖7

是的，如圖7所示這就是我們的空間工具欄。從上往下，設(shè)計(jì)者為我們提供了滾動(dòng)層、文本按鈕、文本區(qū)、輸入框、數(shù)字標(biāo)簽、進(jìn)度條、容器層（一般都要首先在畫布上先添加一個(gè)容器層）、圖片控件、文本框、滑動(dòng)條、復(fù)選框、按鈕等。相信很快設(shè)計(jì)者肯定會(huì)為我們提供出更多的空間來(lái)，期待哦~

相信以上這些控件大家都知道是做什么用的，Forward就不在這贅述了。這里只做簡(jiǎn)單的控件加載說(shuō)明，選中畫布開始添加控件：

圖8

如下圖9所示，這是Forward自己編輯的一套UI，里面使用了容器層、滾動(dòng)層、文本按鈕、文本區(qū)、輸入框、數(shù)字標(biāo)簽、進(jìn)度條等等。

圖9

這些控件具有一定的層級(jí)關(guān)系，我們可以在前面提到的對(duì)象結(jié)構(gòu)這個(gè)View中看到，如下圖10所示：

圖10

好了，保存項(xiàng)目，并打開之前設(shè)定的路徑，我們看到如下圖所示的結(jié)果：

圖11

打開NewProject.xml文件：

圖12

打開xml文件中記錄的Resources目錄，結(jié)果如下：

圖13

在這篇博客中，我們主要了解了UI編輯器的使用，可能更適合策劃同學(xué)們……那么有了編輯好的UI界面之后，我們?nèi)绾伟阉鼈兗虞d到我們的程序中去呢？如何是對(duì)應(yīng)的控件具有其對(duì)應(yīng)的功能呢？這些問(wèn)題Forward會(huì)在《【Cocos2dx工具——Cocostudio界面編輯器二】》中作進(jìn)一步的說(shuō)明。