cocos2dx 3.0 alpha1 + cocostudio UI Editor编辑器

首先搭建一下环境，如果不会

请看：http://blog.csdn.net/tutuboke/article/details/17319837

运行结果：截图：

helloworld.h代码：

#ifndef __HELLOWORLD_SCENE_H__#define __HELLOWORLD_SCENE_H__#include "cocos2d.h"#include "cocos2d.h"   #include "extensions\cocos-ext.h"   #include "cocostudio\CocoStudio.h"   #include "GUI\CocosGUI.h"   class HelloWorld : public cocos2d::Layer{public:cocos2d::LabelTTF * label;    // 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::Object* pSender);//普通按钮void buttonEvent( cocos2d::Object* obj,gui::TouchEventType eventType);    //文字按钮void textButtonEvent(cocos2d::Object * obj, gui::TouchEventType eventType);//scheduleupdate()调用方法void update(float delta);//滑动条void percentChangeEvent(Object *pSender, gui::SliderEventType type);//多选框void checkSelectEvent1(Object *pSender, gui::CheckBoxEventType eventtype);void checkSelectEvent2(Object *pSender, gui::CheckBoxEventType eventtype);//输入框void textFiledEvent(Object *pSender, gui::TextFiledEventType eventtype);//翻页void pageViewEvent(Object *pSender, gui::PageViewEventType eventtype);    // implement the "static create()" method manually    CREATE_FUNC(HelloWorld);private:int m_count;gui::UILayer* uiLayer;gui::UIPageView *uiPageView;};#endif // __HELLOWORLD_SCENE_H__

hellpworld.cpp 代码：

#include "HelloWorldScene.h"  USING_NS_CC;   USING_NS_CC_EXT;   using namespace cocostudio;   using namespace gui;  const int UI_BUTTON_START = 2;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 instancebool HelloWorld::init(){    //////////////////////////////    // 1. super init first    if ( !Layer::init() )    {        return false;    }        Size visibleSize = Director::getInstance()->getVisibleSize();    Point origin = Director::getInstance()->getVisibleOrigin();    /////////////////////////////    // 2. add a menu item with "X" image, which is clicked to quit the program    //    you may modify it.    // add a "close" icon to exit the progress. it's an autorelease object    auto closeItem = MenuItemImage::create(                                           "CloseNormal.png",                                           "CloseSelected.png",                                           CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));    closeItem->setPosition(Point(origin.x + visibleSize.width - closeItem->getContentSize().width/2 ,                                origin.y + closeItem->getContentSize().height/2));    // create menu, it's an autorelease object    auto menu = Menu::create(closeItem, NULL);    menu->setPosition(Point::ZERO);    this->addChild(menu, 1);    /////////////////////////////    // 3. add your codes below...    // add a label shows "Hello World"    // create and initialize a label        label = LabelTTF::create("Hello World", "Arial", 24);        // position the label on the center of the screen    label->setPosition(Point(origin.x + visibleSize.width/2,                            origin.y + visibleSize.height - label->getContentSize().height));    // add the label as a child to this layer    this->addChild(label, 1);    // add "HelloWorld" splash screen"    auto sprite = Sprite::create("HelloWorld.png");    // position the sprite on the center of the screen    sprite->setPosition(Point(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));    // add the sprite as a child to this layer    this->addChild(sprite, 0);m_count = 0;uiLayer = UILayer::create();  auto myLayout = GUIReader::shareReader()->widgetFromJsonFile("testUI2_2/testUI2.ExportJson");//testUI2  uiLayer->addWidget(myLayout);  uiLayer->setPosition(ccp(0,0));  this->addChild(uiLayer,5);      //UIButton* startBtn = dynamic_cast<UIButton*>(uiLayer->getWidgetByTag(3));UIButton* startBtn = dynamic_cast<UIButton*>(uiLayer->getWidgetByName("Button_22"));if (startBtn == nullptr)CCLog("----------%s", startBtn);startBtn->addTouchEventListener(this, toucheventselector(HelloWorld::buttonEvent));gui::UISlider * pSlider = dynamic_cast<UISlider*>(uiLayer->getWidgetByTag(7));pSlider->setTouchEnabled(true);pSlider->addEventListenerSlider(this, sliderpercentchangedselector(HelloWorld::percentChangeEvent));//时间条gui::UILoadingBar *pLoadingBar = dynamic_cast<UILoadingBar*>(uiLayer->getWidgetByName("LoadingBar_26"));pLoadingBar->setPercent(0);gui::UILoadingBar *pScale9LoadingBar = dynamic_cast<UILoadingBar*>(uiLayer->getWidgetByName("LoadingBar_91"));pScale9LoadingBar->setScale9Enabled(true);//setCapInsets   CCScale9Sprite* 创建的第二个参数 为9宫格 中间缩放的东西pScale9LoadingBar->setCapInsets(cocos2d::Rect(2,5,10,2));pScale9LoadingBar->setPercent(0);scheduleUpdate();//文字按钮gui::UIButton * pButton = dynamic_cast<UIButton*>(uiLayer->getWidgetByName("TextButton_34"));pButton->setTouchEnabled(true);//如果没有在cocostdio 点击交互 这里就要设置为truepButton->addTouchEventListener(this, toucheventselector(HelloWorld::textButtonEvent));//多选框1gui::UICheckBox * pCheckBox1 = dynamic_cast<UICheckBox*>(uiLayer->getWidgetByName("CheckBox_35"));pCheckBox1->setTouchEnabled(true);pCheckBox1->addEventListenerCheckBox(this, checkboxselectedeventselector(HelloWorld::checkSelectEvent1));//多选框2gui::UICheckBox * pCheckBox2 = dynamic_cast<UICheckBox*>(uiLayer->getWidgetByName("CheckBox_36"));pCheckBox2->setTouchEnabled(true);pCheckBox2->addEventListenerCheckBox(this, checkboxselectedeventselector(HelloWorld::checkSelectEvent2));//输入框gui::UITextField * pTextField = dynamic_cast<UITextField*>(uiLayer->getWidgetByName("TextField_41"));pTextField->setTouchEnabled(true);//pTextField->setMaxLengthEnabled(true);//pTextField->setMaxLength(10);pTextField->setPasswordEnabled(true);pTextField->addEventListenerTextField(this, textfieldeventselector(HelloWorld::textFiledEvent));//拖动场景 scroll view gui::UIScrollView *pScrollView = dynamic_cast<UIScrollView*>(uiLayer->getWidgetByName("ScrollView_45"));//pScrollView->setTouchEnabled(true);float fwidth = pScrollView->getSize().width;float fhight = pScrollView->getSize().height;//pScrollView->setSize(Size(300,200));//设置滚动区域的大小 要想这个控件好用 必须大于 scrollView层的size 在cocostudio也可设置pScrollView->setInnerContainerSize(Size(400, 400));pScrollView->setDirection(SCROLLVIEW_DIR_BOTH);//拖拽层 gui::UIScrollView *pDragView = dynamic_cast<UIScrollView*>(uiLayer->getWidgetByName("DragPanel_80"));pDragView->setBackGroundColor(cocos2d::Color3B::GREEN);pDragView->setTouchEnabled(true);pDragView->setInnerContainerSize(Size(250,250));pDragView->scrollToPercentBothDirection(Point(50, 50), 1, true);pDragView->setBackGroundColorType(LAYOUT_COLOR_SOLID);//获取层容器Size widgetSize = CCDirector::getInstance()->getWinSize();gui::UILayout * background = dynamic_cast<UILayout*>(uiLayer->getWidgetByName("Panel_53"));background->setSize(Size(300,300));background->setPosition(ccp(visibleSize.width/2, visibleSize.height/2));//翻页UIPageView* pageView = UIPageView::create();pageView->setTouchEnabled(true);pageView->setSize(Size(240, 130));Size backgroundSize = background->getContentSize();pageView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2 +(backgroundSize.width - pageView->getSize().width) / 2,(widgetSize.height - backgroundSize.height) / 2 +(backgroundSize.height - pageView->getSize().height) / 2));for (int i = 0; i < 3; ++i){UILayout* layout = UILayout::create();layout->setSize(Size(240, 130));//    layout->setBackGroundColor(Color3B::RED);UIImageView* imageView = UIImageView::create();imageView->setTouchEnabled(true);imageView->setScale9Enabled(true);imageView->loadTexture("cocosgui/scrollviewbg.png");imageView->setSize(Size(240, 130));imageView->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));layout->addChild(imageView);UILabel* label = UILabel::create();label->setText(CCString::createWithFormat("page %d", (i + 1))->getCString());//label->setFontName(font_UIPageViewTest);label->setFontSize(30);label->setColor(Color3B(192, 192, 192));label->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));layout->addChild(label);pageView->addPage(layout);}pageView->addEventListenerPageView(this, pagevieweventselector(HelloWorld::pageViewEvent));uiLayer->addWidget(pageView);//background->addChild(uiPageView);    return true;}void HelloWorld::buttonEvent( Object* obj,TouchEventType eventType){switch (eventType){case TouchEventType::TOUCH_EVENT_BEGAN:label->setString("button down");break;case TouchEventType::TOUCH_EVENT_MOVED:label->setString("button move");break;case TouchEventType::TOUCH_EVENT_ENDED:label->setString("button release");break;case TouchEventType::TOUCH_EVENT_CANCELED:label->setString("button cancel");break;default:break;}}void HelloWorld::percentChangeEvent(Object *pSender, gui::SliderEventType type){if (type == SLIDER_PERCENTCHANGED){UISlider * pSlider = dynamic_cast<UISlider*>(pSender);int percent = pSlider->getPercent();label->setString(CCString::createWithFormat("Percent %d", percent)->getCString());}}void HelloWorld::update(float delta){//CCLog("-----%d", delta);++m_count;if (m_count > 100){m_count = 0;}UILoadingBar* pLoadingBar = dynamic_cast<UILoadingBar*>(uiLayer->getWidgetByName("LoadingBar_26"));pLoadingBar->setPercent(m_count);gui::UILoadingBar *pScale9LoadingBar = dynamic_cast<UILoadingBar*>(uiLayer->getWidgetByName("LoadingBar_91"));pScale9LoadingBar->setPercent(m_count);}void HelloWorld::textButtonEvent(cocos2d::Object * obj, gui::TouchEventType eventType){gui::UILabelBMFont * pLabelIBMFont = dynamic_cast<UILabelBMFont*>(uiLayer->getWidgetByName("LabelBMFont_23"));gui::UILabel * PTextArea = dynamic_cast<UILabel*>(uiLayer->getWidgetByName("TextArea_40"));gui::UITextField *pTextField = dynamic_cast<UITextField*>(uiLayer->getWidgetByName("TextField_41"));auto str = pTextField->getStringValue();switch (eventType){case TouchEventType::TOUCH_EVENT_BEGAN:pLabelIBMFont->setText("began");break;case TouchEventType::TOUCH_EVENT_MOVED:pLabelIBMFont->setText("moved");break;case TouchEventType::TOUCH_EVENT_ENDED:pLabelIBMFont->setText("ended");PTextArea->setText(str);break;case TouchEventType::TOUCH_EVENT_CANCELED:pLabelIBMFont->setText("canceled");break;default:break;}}void HelloWorld::checkSelectEvent1(Object *pSender, gui::CheckBoxEventType eventtype){gui::UILabelAtlas * pLabelAtlas = dynamic_cast<UILabelAtlas *>(uiLayer->getWidgetByName("LabelAtlas_38"));gui::UILabelBMFont * pLabelIBMFont = dynamic_cast<UILabelBMFont*>(uiLayer->getWidgetByName("LabelBMFont_23"));auto str = pLabelAtlas->getStringValue();switch (eventtype){case gui::CheckBoxEventType::CHECKBOX_STATE_EVENT_SELECTED:pLabelIBMFont->setText("checkbox1 selectd");pLabelAtlas->setStringValue("11");break;case gui::CheckBoxEventType::CHECKBOX_STATE_EVENT_UNSELECTED:pLabelIBMFont->setText("checkbox1 unselect");pLabelAtlas->setStringValue("10");break;default:break;}}void HelloWorld::checkSelectEvent2(Object *pSender, gui::CheckBoxEventType eventtype){gui::UILabelAtlas * plabelAtlas = dynamic_cast<UILabelAtlas *>(uiLayer->getWidgetByName("LabelAtlas_38"));gui::UILabelBMFont * plabelIBMFont = dynamic_cast<UILabelBMFont*>(uiLayer->getWidgetByName("LabelBMFont_23"));auto str = plabelAtlas->getStringValue();switch (eventtype){case gui::CheckBoxEventType::CHECKBOX_STATE_EVENT_SELECTED:plabelIBMFont->setText("checkbox2 selected");plabelAtlas->setStringValue("21");break;case gui::CheckBoxEventType::CHECKBOX_STATE_EVENT_UNSELECTED:plabelIBMFont->setText("checkbox2 selected");plabelAtlas->setStringValue("20");break;default:break;}}void HelloWorld::textFiledEvent(Object *pSender, gui::TextFiledEventType eventtype){gui::UILabel * plabel = dynamic_cast<UILabel*>(uiLayer->getWidgetByName("Label_42"));switch (eventtype){case TextFiledEventType::TEXTFIELD_EVENT_ATTACH_WITH_IME:plabel->setText("attach with_ime");break;case TextFiledEventType::TEXTFIELD_EVENT_INSERT_TEXT:plabel->setText("insert text");break;case TextFiledEventType::TEXTFIELD_EVENT_DETACH_WITH_IME:plabel->setText("detach with_ime");break;case TextFiledEventType::TEXTFIELD_EVENT_DELETE_BACKWARD:plabel->setText("delete backward");break;default:break;}}void HelloWorld::pageViewEvent(Object *pSender, gui::PageViewEventType eventtype){auto plabelIBMFont = dynamic_cast<UILabelBMFont*>(uiLayer->getWidgetByName("LabelBMFont_23"));switch(eventtype){case PageViewEventType::PAGEVIEW_EVENT_TURNING:UIPageView * pPageView = dynamic_cast<UIPageView*>(pSender);plabelIBMFont->setText(CCString::createWithFormat("page %d", pPageView->getCurPageIndex()+1)->getCString());}}void HelloWorld::menuCloseCallback(Object* pSender){    Director::getInstance()->end();#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)    exit(0);#endif}

main.cpp 修改屏幕显示分辨率：

eglView.init("TestCPP",1024,768 );

关于编辑器九宫格缩放：

pScale9LoadingBar->setCapInsets(cocos2d::Rect(2,5,10,2));