【Cocos2dx工具】Cocostudio界面編輯器

一

寫(xiě)在前面——

在網(wǎng)站制作、做網(wǎng)站過(guò)程中，需要針對(duì)客戶(hù)的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。創(chuàng)新互聯(lián)建站還需要根據(jù)客戶(hù)的需求進(jìn)行功能模塊的開(kāi)發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺(tái)展示、用戶(hù)權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。

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

  同步更新51CTO博客

——Forward

我的微博——龍顏碩

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

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

打開(kāi)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í)之后，我們就可以開(kāi)始使用它了……

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

圖3

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

圖4

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

圖5

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

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

圖6

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

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

圖7

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

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

圖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)目，并打開(kāi)之前設(shè)定的路徑，我們看到如下圖所示的結(jié)果：

圖11

打開(kāi)NewProject.xml文件：

圖12

打開(kāi)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ō)明。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前文章：【Cocos2dx工具】Cocostudio界面編輯器一-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://weahome.cn/article/gssgi.html