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

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

2024-11-13 15:36:02   202人阅读

         这里是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;
	}
}

然后我们来看看效果：

技术分享

 这就是一个简单的例子，界面制作很简单，而且以后要更换图片什么的也很方便，开发的效果大大提高。这一讲就到这里了，下一讲我们将把这个应用到我们的游戏中去。

 


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


联系
我们