cocos2dx 3.0 简单使用 CocoStudio UI Editor

想一想如今大三快结束了，面试笔试的经验几乎为零点零零好几（等等，为什么不是零），好吧，其实有过那么一两次，不过可气人的是公司竟然打着培训的幌子坑我们这种小年轻，太可恶了，要不是当初接待我们的那个小前台还是蛮不错的，长相甜美温柔可人，我就....（能怎样！）

好吧，昨天菊花（菊花是谁？）说有公司来我们这学校招聘，一听就好激动的样子，做的是c++底层相关的一些东西，不管如何都要先去试试这水深不深啊，哈哈....然后结果你懂的，坑爹公司，竟然是小邓以前入职的公司，没错，就是一个月给你1000来块还要扣几百块钱的公司，然后几个月后一起给你的那种公司！笔试题是c的一些函数的使用，主要都是算法，我一看这不就坑了吗，最不会的就是算法了，哈哈，说多了一下子就暴露了菜鸟的水平，好吧，扯得有点远了......

   ------------------------------------------------------------------------------

回到正题

今天看了一下泰然网的一篇使用cocostudio的文章，好嘛，2.x的，3.0使用方法有点不一样，哈哈，然后无耻把这素材拿来用了

首先，先下载CocoStudio，然后安装，这个就不用说了。

             然后下载图片素材  点这里下载 ，下载后打开 CocoStudio，有四个Editor可以选，打开UI Editor。

新建Test项目，名字当然可以随意取啦，然后把下载后的图片资源直接拖到 资源面板下，像下面这样子

 

恩，然后泡杯牛奶，我们在看下面这张图，一个画布差不多相当于一个Layer，画布下面是对象结构，也就是这个Layer里面有神马东西，可以设定画布的分辨率，然后可以在画布上添加各种控件，神马button啊，复选框啊，左边可以直接拖，比如像下面这样子，看到中间那个button了木有，没错，就是被圈起来带点黄色的那个按钮，对应左边的“T 按钮” 控件，右边分别是按钮的名字（很重要）和图片资源的三种状态（正常，按下，禁用），注意下，如果需要控件能被点击，需要把交互勾上。

像下面这张图，其实就一张背景图 + 一张人物图片 + 上面4个button + 下面4个button，添加比较简单

然现在我们点击第一个按钮 “修改密码 ” ，需要弹出一个密码框，然后再添加一个画布Test_2,这张其实就是 

3个button + 3 张图片 +3个输入框（添加在图片上）

     添加完成后导出，使用大图就是将所有添加到一张png

导出后的东西长这样子

然后把这几个文件拷贝到resource下面

    接下来就是在代码中加载使用了，记得添加cocostudio库和Gui库，还有引入头文件

#pragma once 

#include "cocos2d.h"
#include "cocostudio/CocoStudio.h"
#include "ui/CocosGUI.h"

using namespace cocos2d;
using namespace cocostudio;
using namespace ui;



class CocosStudioTest : public Layer{
public:
	CocosStudioTest(){}
	~CocosStudioTest(){}
	virtual bool init();
	CREATE_FUNC(CocosStudioTest);

	void btnEvent_pwd(Ref *pSender, TouchEventType type);
	void btnEvent_close(Ref *pSender, TouchEventType type);
	void btnEvent_confirm(Ref *pSender, TouchEventType type);
private:
	Widget* UI;
	Widget* UI_2;
	Button* btn_pwd;
	Button* btn_close;
	Button* btn_confirm;
};

cpp文件

#include "CocosStudioTest.h"

bool CocosStudioTest::init(){
	
	if(!Layer::init()){
		return false;
	}

	//ui
	UI = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("cocosUI/Test_1.ExportJson");
	this->addChild(UI);

	//button pwd
	btn_pwd = static_cast<Button*>(ui::Helper::seekWidgetByName(UI,"btn_pwd"));
	btn_pwd->addTouchEventListener(this,toucheventselector(CocosStudioTest::btnEvent_pwd));

	//ui_2
	UI_2 = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("cocosUI/Test_2.ExportJson"); 
	UI_2->retain();

	//button close
	btn_close = static_cast<Button*> (ui::Helper::seekWidgetByName(UI_2,"Button_15"));
	btn_close->addTouchEventListener(this,toucheventselector(CocosStudioTest::btnEvent_close));

	//button confirm
	btn_confirm = static_cast<Button*> (ui::Helper::seekWidgetByName(UI_2,"btn_confirm"));
	btn_confirm->addTouchEventListener(this,toucheventselector(CocosStudioTest::btnEvent_confirm));



}

void CocosStudioTest::btnEvent_pwd(Ref *pSender, TouchEventType type){
	switch (type)
	{
	case TouchEventType::TOUCH_EVENT_ENDED:
		this->addChild(UI_2);
	}
}

void CocosStudioTest::btnEvent_close(Ref *pSender, TouchEventType type){
	switch (type)
	{
	case TouchEventType::TOUCH_EVENT_ENDED:
		this->removeChild(UI_2);
		
	}
}


void CocosStudioTest::btnEvent_confirm(Ref *pSender, TouchEventType type){
	switch (type)
	{
	case TouchEventType::TOUCH_EVENT_ENDED:
		this->removeChild(UI_2);
	}
}

运行一下，哈哈

恩，大概就这样子