Cocos2d-x使用Cocos Studio制作界面并应用---之游戏开发《赵云要格斗》（11）

这里是Evankaka的博客，欢迎大家前来讨论与交流～～～～～～

转载请注明出处http://blog.youkuaiyun.com/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;
    
   

   
    
   
   
    
     	}
    
   

   
    
   
   
    
     }