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

【Cocos2dx工具】Cocostudio界面編輯器

一

寫在前面——

   如果轉載請注明出處，謝謝大家支持

   同步更新51CTO博客

——Forward

我的微博——龍顏碩

今天我們開始Cocostudio中UI（界面）編輯器的學習（如還有同學不知道Cocostudio，請到【Cocos2dx工具——Cocostudio之數據編輯器使用】進行初步了解）

這一片博客中，我們主要介紹一下Cocostudio界面編輯器的操作，隨后我們會對界面的實際編碼作進一步說明。

打開UI編輯器

圖1

為了能夠更方便的使用UI編輯器，首先來對這個編輯器整體做一次了解：

圖2

如圖2所示，紅色區域是我們可以添加的控件工具欄區域；藍色區域是我們編輯過程中使用的主區域，即所有主要的操作結果都是在這個區域中完成的；×××區域是我們編輯之后物理層級結構展示區域；綠色區域是我們在編輯過程中選中控件的屬性顯示區域；藍綠色（這個顏色是這么說嗎？^_^）區域是我們這個UI使用的所有資源展示區域；紫紅色區域是上邊某一資源圖片被選中時候的預覽圖顯示區域。

OK，有了對編輯器整體認識之后，我們就可以開始使用它了……

如果沒有已經編輯好的UI，我們需要新建一個項目如下圖所示：

圖3

這時會彈出項目選項的對話框，按照具體情況填寫即可：

圖4

這時我們會在編輯使用的主區域出現一個用黑框表示的編輯區域如下圖：

圖5

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

大家注意看編輯器左上角有一個文本標志“畫布”后面跟隨一個下拉列表框選項，我們可以通過這里來告知或修改我們正在編輯UI的分辨率大小：

圖6

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

好的，這個時候我們相當于有了自己一張畫布，不過僅有畫布還是不夠的，我們還需要畫筆——

圖7

是的，如圖7所示這就是我們的空間工具欄。從上往下，設計者為我們提供了滾動層、文本按鈕、文本區、輸入框、數字標簽、進度條、容器層（一般都要首先在畫布上先添加一個容器層）、圖片控件、文本框、滑動條、復選框、按鈕等。相信很快設計者肯定會為我們提供出更多的空間來，期待哦~

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

圖8

如下圖9所示，這是Forward自己編輯的一套UI，里面使用了容器層、滾動層、文本按鈕、文本區、輸入框、數字標簽、進度條等等。

圖9

這些控件具有一定的層級關系，我們可以在前面提到的對象結構這個View中看到，如下圖10所示：

圖10

好了，保存項目，并打開之前設定的路徑，我們看到如下圖所示的結果：

圖11

打開NewProject.xml文件：

圖12

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

圖13

在這篇博客中，我們主要了解了UI編輯器的使用，可能更適合策劃同學們……那么有了編輯好的UI界面之后，我們如何把它們加載到我們的程序中去呢？如何是對應的控件具有其對應的功能呢？這些問題Forward會在《【Cocos2dx工具——Cocostudio界面編輯器二】》中作進一步的說明。