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

【Cocos2dx工具】Cocostudio界面編輯器

二

寫在前面——

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

   同步更新51CTO博客

——Forward

我的微博——龍顏碩

在《【Cocos2dx工具——Cocostudio界面編輯器】一》博客結(jié)束的時候，Forward提出兩個問題——1、有了編輯好的UI界面之后，我們?nèi)绾伟阉鼈兗虞d到程序中去呢？2、如何使對應(yīng)的控件具有對應(yīng)的功能呢？

帶著上面這兩個問題，我們開始今天的博客之旅——《【Cocos2dx工具——Cocostudio界面編輯器】二》

一、UI界面的加載

OK，在上一篇博客結(jié)束的時候，我們已經(jīng)用編輯器完成了一個自己的UI，如下圖所示：

圖1

首先我們創(chuàng)建一個新的工程——UIEditorDemo。

從上一節(jié)的說明中我們看到，通過Cocostudio的界面編輯器編輯導(dǎo)出我們得出了一個如下圖所示的文件結(jié)構(gòu)：

圖2

好的，下面我們需要的正式這個些資源，將他們拷貝到資源目錄下。

問題來了，有了這些資源與UI界面文件，難道要我們自己去實(shí)現(xiàn)解析、UI層級管理、事件響應(yīng)實(shí)現(xiàn)？Cocostudio開發(fā)者怎么會這樣對我們呢（^_^）？他們已經(jīng)為我們完成了上述提到問題的解決方案，在Cocostudio官網(wǎng)上，可以找到對應(yīng)代碼下載（CocoGUILIB.zip）

將對應(yīng)該的UI層級相關(guān)的代碼導(dǎo)入我們上面創(chuàng)建的UIEditorDemo工程中，（并按照編譯報告添加對應(yīng)的頭文件路徑即可）

完成上面的工作之后，在我們的源文件中添加如下代碼：

包含對應(yīng)頭文件即可。

下面就是見證奇跡的時刻——

圖3

運(yùn)行程序，我們看到如上圖3的運(yùn)行結(jié)果，這不就是我們前天編輯的UI界面嗎。不錯，加載就是這么簡單。

二、UI事件的響應(yīng)：

加載出我們編輯好的UI界面只是第一步，一個不能響應(yīng)事件的界面是毫無意義的，接下來我們就需要知道如何讓這個界面能夠響應(yīng)我們的操作，來完成玩家的交互。

好的，我們這就進(jìn)入主題

首先我們需要理解UI層面控件的操作流程——只需要獲取UI層面這個控件，給它綁定一個事件的回調(diào)，然后在回調(diào)函數(shù)中實(shí)現(xiàn)我們的功能即可

這里我們拿ImageView的點(diǎn)擊放大與還原效果來做一次演示，其他類似。

操作ImageView（上面的頭像就是使用了ImageView）很簡單，代碼如下：

好的，現(xiàn)在我們就需要再添加兩個函數(shù)ScaleTo2Size和ScaleResume即可，然后這兩個函數(shù)中分別對這個控件做擴(kuò)大和還原處理——

如上所示，頭像控件的名稱Forward已經(jīng)在UI編輯器中修改為“ImageView_Header”，否會找不到的。

看看效果吧~~

原始頭像大小如下：

圖4

圖5

確實(shí)按照我們的預(yù)期進(jìn)行了……

在這篇博客中，我們已經(jīng)解決了在《【Cocos2dx工具——Cocostudio界面編輯器】一》博客末尾提出的兩個問題。至此我么可以說是已經(jīng)做到了“知其然”，但是到底整個CocoGUILIB是如何工作的呢？從文件解析到控件創(chuàng)建，其中的Touch事件又是如何接收與處理呢？CocoGUILIB的結(jié)構(gòu)是什么樣子呢？我們現(xiàn)在只是管中窺豹，見其一角，未盡全貌，要是解決了以上提及的問題，或許才可以說“知其所以然”。

對于以上問題，Forward會在《【Cocos2dx工具——Cocostudio界面編輯器】三》中做進(jìn)一步深入學(xué)習(xí)與分享~~