首先我們打開Cocos Studio1.6，選擇UIEditor，進去后我們發現有很多的示例，我們就懸著一個叫demologin的示例

選擇好后我們發現如下圖，簡單介紹了下功能

這里我們選中那個login按鈕，發現這個按鈕的實例名叫login_Button，這個名字我們等會代碼里要用，然后我們保存一下

在保存路徑下找到這個工程文件夾，打開

有這些文件，我們把Json和Resources文件夾下的資源復制到cocos2dx中的資源文件夾中

這個json文件就是記錄了這個widget的各種數據，cocos2dx會解析這些數據然后還原這個界面，感興趣的可以打開研究下

好了到了代碼階段，我就簡單的創建了個hellowZ喎�"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcmxko6y1q8rHztLDx9KqsNHI/bj2zeKyv7XEuaSzzL/itbzI69XiuPa94r72t72wuLKi0v3TwzxpbWcgc3JjPQ=="http://www.2cto.com/uploadfile/Collfiles/20141015/20141015085358140.png" alt="\">并在頭文件中包含

好了，下面就是代碼了

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

//HelloWorldScene.h #ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H__ #include "cocos2d.h" //導入這三個頭文件 //注意在這個工程的屬性->C\C++ ->常規->附加包含目錄 中添加這三個文件的路徑 #include "cocostudio/CocoStudio.h" #include "extensions/cocos-ext.h" #include "ui/CocosGUI.h" class HelloWorld : public cocos2d::Layer { public: ????// there's no 'id' in cpp, so we recommend returning the class instance pointer ????static cocos2d::Scene* createScene(); ????// Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone ????virtual bool init();? ????? ????// a selector callback ????void menuCloseCallback(cocos2d::Ref* pSender,cocos2d::ui::TouchEventType type); ????? ????// implement the "static create()" method manually ????CREATE_FUNC(HelloWorld); }; #endif // __HELLOWORLD_SCENE_H__

?

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

//HelloWorldScene.cpp #include "HelloWorldScene.h" USING_NS_CC; //這個是命名空間 using namespace cocostudio; using namespace ui; Scene* HelloWorld::createScene() { ????// 'scene' is an autorelease object ????auto scene = Scene::create(); ????? ????// 'layer' is an autorelease object ????auto layer = HelloWorld::create(); ????// add layer as a child to scene ????scene->addChild(layer); ????// return the scene ????return scene; } // on "init" you need to initialize your instance bool HelloWorld::init() { ????// ????// 1. super init first ????if ( !Layer::init() ) ????{ ????????return false; ????} ????? ????Size visibleSize = Director::getInstance()->getVisibleSize(); ????Vec2 origin = Director::getInstance()->getVisibleOrigin(); ????//獲取我們的Cocos Studio?? UIdemo ????//這里我們創建了一個widget，這里說明下貌似cocostudio有自己的一套代碼風格和api ????//有些功能能和cocos2dx混合著用 ????//這里的widget有點類似一個layer，反正我是這樣理解的 ????ui::Widget * pNode=cocostudio::GUIReader::getInstance()->widgetFromJsonFile("DemoLogin.json"); ????this->addChild(pNode); ????//我們從widget中找到那個button的名字然后實例出來（跟android有點像） ????ui::Button * button=(ui::Button *)ui::Helper::seekWidgetByName(pNode,"login_Button"); ????//給這個按鈕增加一個touch的偵聽(這邊就和cocos2dx有不同了) ????button->addTouchEventListener(this,toucheventselector(HelloWorld::menuCloseCallback)); ????? ????return true; } //這里是偵聽回調函數 void HelloWorld::menuCloseCallback(cocos2d::Ref* pSender,ui::TouchEventType type) { ????//cocostudio的偵聽，你可以根據type的類型來執行相應的代碼 ????//這里用switch來判斷，非常的簡潔明了 ????switch (type) ????{ ????case ui::TouchEventType::TOUCH_EVENT_BEGAN: ????????{ ????????????log("touch began"); ????????????break; ????????} ????case ui::TouchEventType::TOUCH_EVENT_MOVED: ????????{ ????????????log("touch moved"); ????????????break; ????????} ????case ui::TouchEventType::TOUCH_EVENT_ENDED: ????????{ ????????????log("touch ended"); ????????????break; ????????} ????case ui::TouchEventType::TOUCH_EVENT_CANCELED: ????????{ ????????????log("touch canceled"); ????????????break; ????????} ????default: ????????break; ????} }

運行

點擊按鈕測試下

好的，完成

環境配置

?

給新建的Cocos2d-x 3.0rc0 的Win32工程添加CocoStudio庫???

管理提醒: 本帖被 young40 執行壓帖操作(2014-03-18) 引用 [attachment=79619] ?
注：針對3.2及以前版本，3.3以后不需要引入CocosStudio庫?

?
?
?
前 天, 在CocoaChina 2014春季大會上, 激動人心的Cocos2d-x 3.0和CocoStudio 1.3發布了. Cocos2d-x 3.0做出令人興奮的性能, 易用性等一系列改進, CocoStudio 1.3帶來了穩定性和新特性. 今天讓我們看下如何在新建Cocos 3.0rc0的Win32的工程中添加CocoStudio的支持. ?
一 軟件及其下載 ?
1. Cocos2d-x 3.0rc ?
????http://cdn.cocos2d-x.org/cocos2d-x-3.0rc0.zip ?
2. CocoStudio 1.3 ?
????在CocoStudio 1.3中可以直接創建Cocos2d-x項目, 所以這次的安裝包有3個. ?
????僅含CocoStudio 1.3 ?
????http://126.am/YDrVk1 ?
????CocoStudio 1.3包含了Cocos2d-x 3.0rc0 ?
????http://126.am/lorYp2 ?
????CocoStudio 1.3 包含了Cocos2d-x 2.2.3 ?
????http://126.am/eGo4f4 ?
3. Python 2.7.6 ?
????Cocos2d-x的腳本用到了Python, Win下沒有自帶Python, 大家還需要下載Python. ?
????Python的版本我這里推薦大家用最新的2.7.6. 因為Python的2.x和3.x不兼容, 所以一定不能用3.x的版本 ?
????大家可以根據自己的系統下載對應的版本. ?
????https://www.python.org/download/releases/2.7.6/ ?
4. Visual Studio ?
????地球人都知道啦. 我今天演示采用的版本是Visual Studio 2013. ?
????VS2010, VS2012, 下面提到的需要設置的地方, 都是相同的. 請大家自行下載安裝. ?
?
二 Python的安裝和設置 ?

?
安裝基本上就是下一步, 下一步就好了. 中間安裝路徑, 我選擇的是"C:\Python27\", 等下要用到這個路徑. ?
右鍵單擊“計算機”，選擇“屬性”----》“高級系統設置”，在“高級”選項卡下選擇“環境變量”! ?
在“系統變量”下選中“Path”，并點擊下方的編輯按鈕： ?
在彈出的“編輯系統變量”對話框中編輯“變量值”，在“變量值”的后面添加Python的安裝路徑(C:\Python27\)，用英文分號(;)將其與后面的其他內容隔開。 ?

?
同樣地，在“PATHEXT“的變量值中添加 .PY;.PYM . ?
打開cmd控制臺，輸入 python，如果出現如下提示，則說明python安裝成功. ?
如果你設置環境變量前已經打開了cmd, 需要重新打開cmd. ?
三 創建Cocos2d-x 3.0rc0項目 ?
在Cocos2d-x 3.0rc0中, 引入cocos2d-console這一新的Cocos2d-x工具. ?
在console中你可以完成2d-x的新建項目, 編譯甚至在模擬器里面運行項目. ?
我們先來看下如何使用cocos2d-console創建新的項目. ?
我們將下載好的2d-x 3.0rc0解壓到C:\cocos2d-x-3.0rc0. ?
我們打開cmd, 切換到C:\cocos2d-x-3.0rc0 目錄 ?
運行python setup.py. ?
中間會詢問幾個Android開發需要的地址, 我們今天不涉及Android開發, 直接回車跳過即可. ?

?
最后會提示我們重啟電腦, 我們重啟電腦. ?
接下來我們在C:\Work目錄中創建新項目HelloCocos. ?
打開終端, 切換到C:\Work目錄中.運行cocos new命令. ?
這里我們可以看到cocos new的用法. ?

?
我們接著輸入命令 cocos new -p com.young40.hellococos -l cpp HelloCocos ?
其中-p是包名, -l 選擇了cpp即C++開發, HelloCocos是項目名稱.你可以替換為自己喜歡的名稱. ?
我們打開C:\Work\HelloCocos\proj.win32\HelloCocos.sln, 如果提示升級項目, 選擇確定即可. ?
點擊F5, 運行項目. 稍等編譯完成后, 我們就可以看到我們熟悉的HellWorld了. ?
四 在項目中添加CocoStudio支持 ?
我們在VS中找到"解決方案資源管理器", 在解決方案"HelloCocos"上點擊右鍵, 選擇添加現有項目. ?

?
在彈出的對話框中選擇C:\Work\HelloCocos\cocos2d\cocos\editor-support\cocostudio\proj.win32\libCocosStudio.vcxproj ?
然后繼續添加C:\Work\HelloCocos\cocos2d\extensions\proj.win32\libExtensions.vcxproj ?
然后繼續添加C:\Work\HelloCocos\cocos2d\cocos\ui\proj.win32\libGUI.vcxproj ?
然后我們在HelloCocos項目上點擊右鍵選擇添加引用 ?

?
在彈出的對話框中選擇添加引用, 并勾選libCocosStudio, libGUI和libExtensions后點擊確定. ?

?
如果大家使用的是VS2012或者VS2013, 可能會看到項目被標記為VS2010, 這里我們升級下項目設置, 否則可能無法編譯. ?

?
然后, 我們HelloCocos項目屬性(點擊右鍵選擇屬性)中選擇 "配置屬性" => "C/C++" => "附加包含目錄" 并編輯. ?
添加下面幾行 ?
$(EngineRoot)cocos ?
$(EngineRoot)extensions ?
$(EngineRoot)cocos\editor-support\ ?
$(EngineRoot)cocos\editor-support\cocostudio ?

?
編譯一下工程, 還是能運行吧. 如果遇到問題, 不妨來CocoaChina論壇的CocoStudio專區來繼續交流. ?
五 添加代碼 ?
我們打開CocoStudio 1.3的動畫編輯器, 打開一個HeroAnimation的示例, 并直接導出, 將導出的文件放C:\Work\HelloCocos\Resources下面. ?
我們打開HelloWorld.cpp給其添加引用以及命名空間??
?
?
?
?
?
?

#include?"CocoStudio.h" using?namespace?cocostudio;

?
?
?
然后修改下HelloWorld::init函數, 在return前加入??

ArmatureDataManager::getInstance()->addArmatureFileInfo("Hero0.png"?,?"Hero0.plist"?,?"Hero.ExportJson"); ?Armature?*armature =?Armature::create(?"Hero"); ????????????armature->setPosition(ccp(visibleSize.width * 0.5, visibleSize.height * 0.5)); ????????????armature->getAnimation()->playWithIndex(0); ?this->addChild(armature); ?return?true;

?
?
?
好了, 趕快運行下吧. ?
?
?

?
?

?

轉載于:https://www.cnblogs.com/dudu580231/p/5102589.html

總結

以上是生活随笔為你收集整理的Cocos2d-x V3.2+Cocos Studio1.6 实现一个简单的uibutton点击功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。