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 instance
bool 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 点击交互 这里就要设置为true
	pButton->addTouchEventListener(this, toucheventselector(HelloWorld::textButtonEvent));

	//多选框1
	gui::UICheckBox * pCheckBox1 = dynamic_cast<UICheckBox*>(uiLayer->getWidgetByName("CheckBox_35"));
	pCheckBox1->setTouchEnabled(true);
	pCheckBox1->addEventListenerCheckBox(this, checkboxselectedeventselector(HelloWorld::checkSelectEvent1));

	//多选框2
	gui::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));