这里是Evankaka的博客，欢迎大家前来讨论与交流～～～～～～
转载请注明出处http://blog.csdn.net/evankaka/article/details/42883881
本文主要讲了怎么用Cocos Studio制做登陆界面，并导出成Json文件，直接在coco2d-x中来调用。这样做的好处就是界面和代码是分离的，你如果想改界面的话，就可以直接在外面用Cocos
Studio来修改，只要不修改按钮之类的名称，你的功能代码完全不用修改，只要将导出的Json文件和图片资源替换下就OK了，这样子的开发效率将会大大提高！
cocos2d-x版本：2.2.5
工程环境：windows7+VS2010
打开方式：将工程放在cocos2d-x安装目录下的project文件夹下用VS打开
本文效果：
一、Cocos Studio制做登陆界面
首先，这里一定要注意Cocos2d-x和CocosStudio对应的版本，要不Cocos2d-x可能会用不了你制作的界面或动画等。
版本对应列表：
Studio2.x
CocosStudio版本 对应Cocos2d-x版本
JS版本 备注
v2.1beta v3.4beta0 None 已分离出reader，可以将reader拉取到其他版本cocos2d-x，以支持新版本的CocosStudio
v2.0.6 v3.3final None
v2.0.5 v3.3rc2 None
v2.0.2 v3.3rc2 None
v2.0beta0 v3.3rc0 v3.1
Studio1.x
|
CocosStudio版本 |
2d-x版本 |
2d-x版本 |
|
1.6.0.0 |
3.2 |
2.2.5 |
|
1.5.0.1 |
3.2 |
2.2.5 |
|
1.5.0.0 |
3.0 |
2.2.4 |
|
1.4.0.1 |
3.0 |
2.2.3 |
|
1.4.0.0 |
3.0 |
2.2.3 |
|
1.3.0.1 |
3.0rc1 |
2.2.3 |
|
1.3.0.0 |
3.0rc0 |
2.2.3 |
|
1.2.0.1 |
3.0beta |
2.2.2 |
|
1.1.0.0 |
2.2.1 |
|
|
1.0.0.2 |
2.2.0 |
|
|
1.0.0.1 |
||
|
1.0.0.0 |
||
|
PS：一般来说高版本2dx能加载低版本的Studio1.x数据，高版本的Studio1.x数据不一定能够被低版本的2d-x加载 |
这里要注意，你是什么版本的就下什么版本的，要不可能无法调用。。Cocos Studio自己去找下资源然后安好。基本没啥问题。
下面我们来开始一个简单的教程吧，
1.首先，打开Cocos Studio，然后选择界面编辑器，这里还可以选择其它的，比如动画、场景
2.然后这是UI Editor的界面，里面有一些范例，你也可以直接拿去用，或者自己把图片改下
3.点击文件，新建
4.点击画布，更改界面大小为你的游戏的界面的大小
5.然后直接将要用到的图片，背景图片和按钮图片，拖到右上角的Resources。如下：
6.然后我们来看下如何更改界面的背景，其实就是直接拖图片，记得要先选好panel_14：
7.然后是效果，同时要在上面放按钮，并加图片，这里要记得图片的名字：命名为Begin：
效果
8.按照上面的流程，把图片都放上去好了之后，依次添加其它按钮，并将它们对齐
9.最后一步，文件-》导出项目
10.导出的东西就在你这个项目Export文件夹下：
这是导出选择大图的情况：
这是导出时选择小图的情况：
看到了吧。图片少的时候，这就是导出的区别了，图片多的时候还是推荐用导出大图的，要不会有一大堆的图片。
这样子，界面就做好了，我们可以直接在cocos2dx中来调用了。
二、Cocos2dx使用Json文件
1.在这里，我们随便新建一个工程,先把上面的资源Json、图片所有都放到工程的Resource文件夹下：
2.在新建工程HelloWorldScene.h中添加头文件
<span style="font-size:18px;color:#333333;">#include "cocos2d.h" #include "cocos-ext.h" USING_NS_CC; USING_NS_CC_EXT; using namespace gui;//重点要记得，要不会出现error C2065: “SEL_TouchEvent”: 未声明的标识符</span>
并且添加按钮的回调事件
<span style="font-size:18px;color:#333333;">void touchButton(cocos2d::CCObject* obj,gui::TouchEventType type);</span>
3.然后在Init（）函数中增加：
//加载cocos studio制作的界面
gui::TouchGroup* ul = gui::TouchGroup::create();
gui::Layout* equipe_root =dynamic_cast<gui::Layout*>(GUIReader::shareReader()->widgetFromJsonFile("MyLogin_1.ExportJson"));
ul->addWidget(equipe_root);
this->addChild(ul, 2);
//给开始按钮添加事件监听
gui::Button *Btn_Begin = dynamic_cast<gui::Button*>(equipe_root->getChildByName("Begin_Game")); //Begin_Game为在Cocos Studio中定义的按钮的名称
Btn_Begin->addTouchEventListener(this,toucheventselector(HelloWorld::touchButton));
4.回调函数的实现
void HelloWorld::touchButton(cocos2d::CCObject* obj,gui::TouchEventType type)
{
switch (type)
{
case gui::TouchEventType::TOUCH_EVENT_BEGAN:
CCLOG("Button Down");//按钮按下
break;
case gui::TouchEventType::TOUCH_EVENT_MOVED:
CCLOG("Button Down and Mouse move");//按钮按下移动
break;
case gui::TouchEventType::TOUCH_EVENT_ENDED:
CCLOG("Button Up");//放开按钮
break;
case gui::TouchEventType::TOUCH_EVENT_CANCELED:
CCLOG("Button Cancel");//取消按钮
break;
default:
break;
}
}
然后我们来看看效果：
这就是一个简单的例子，界面制作很简单，而且以后要更换图片什么的也很方便，开发的效果大大提高。这一讲就到这里了，下一讲我们将把这个应用到我们的游戏中去。