CocoStudio sample——DemoGameScene讲解
本教程所使用Samples下载地址：https://github.com/chukong/CocoStudioSamples
一、 目标
本节讲解的主要目标是学习使用场景编辑器制作一个游戏场景、并在游戏中显示。
效果如下图：
二、 创建项目
打开CocoStudio，进入启动器页面，选择第三个——“场景编辑器”。
在菜单栏中选择“文件”—》“创建新项目”（快捷键：Ctrl+N）
输入项目的名称并设置项目的存放路径
三、 导入资源文件
开始制作之前，第一步是添加所需要用的资源。
添加资源有两种主要方式，一种是直接将资源拖放到资源版本内，另一种是使用导入。
四、 场景的组件
下图中是场景编辑器所有的组件类型：
精灵主要用来显示静态图片，骨骼组件用来显示动画（动画编辑器导出文件）。UI组件用来展示ＵＩ界面（UI编辑器导出文件），地图用来显示瓦片地图（.tmx格式），粒子组件是用于挂载粒子的（.Plist格式），音效用户播放声音。
本节所做的内容较为简单，一共用到了两种组件：精灵和粒子。整个节目中除了太阳是用粒子做出来的特效外，其余内容都是用精灵来制作的。
<img title = '5.png' src='http://cdn.cocimg.com/bbs/attachment/Fid_48/48_183396_fba03f58d03dccd.png' >
五、 组合场景
制作开始之前，要先调整画布大小。这里设置为1024*768。
制作场景时，按照由下到上的顺序制作。首先我们从左侧组件列表拉一个精灵到渲染区，保持改精灵的选中状态。从“资源”面板选择envir文件夹下的Background.png，并拖拽至属性面板中的“文件”属性栏中。此时，可以看到整个画布已被背景所覆盖。
接下来是画布中的一些修饰物品，包括石头、水晶等。这些物品的下方还都有一个阴影图、或者草地。如下图中，一个石头堆下还有一块草地。
通常为了保持层级关系，会先托放底部的草地层，然后再 拖动草地上的物品。
由于背景中草地部分用的是45度菱形小格，所以所有作为阴影或者草地的图层都制作为菱形。
接下来将剩余的一些物品使用相同方法放到渲染区内。
接下来还有一个粒子特效，这里需要中组件列表里选择一个粒子组件拖动到渲染区，并在资源面板中找到粒子文件拖动到“粒子”属性里。点击播放查看粒子的效果。
Pis：粒子文件是一种.Plist格式的文件，通常由专业的粒子编辑器制作而成，导出后分为两种，一种是plist+png文件，另一种只有一个plist。由于plist的格式并非粒子专用格式，所以在添加粒子文件的时候一定要确保该plist是粒子特效文件而非其他数据。
六、 导出项目
在菜单栏中选择“文件”—》“导出项目”—》“导出资源”
场景编辑器里的导出设置较为简单，名称使用默认即可，导出位置可以选择当前项目内或游戏工程的目录。“格式化输出”这个是为了优化导出数据的。
七、 引入游戏
本节的代码部分也较为简单,主要的内容为将场景导出的json数据解析成场景界面。
我们使用python脚本创建一个新的cocos2d-x项目，项目默认会提供一个HelloWorldScene场景类，我们将下面的代码段替换bool HelloWorld：：init（）方法
bool HelloWorld::init(){ ////////////////////////////// //1. super init first if( !CCLayer::init() ) { return false; } //从导出文件中解析出场景节点 CCNode *pGameScene = SceneReader::sharedSceneReader()->createNodeWithSceneFile(“RPGGame.json”); //将场景添加到当前场景 this->addChild(pGameScene); //添加一个菜单项，作为关闭按钮。 CCMenuItemFont *itemBack = CCMenuItemFont::create(“End”, this, menu_selector(HelloWorld::menuCloseCallback)); itemBack->setColor(ccc3(255, 255, 255)); //设置坐标为右下角,VisibleRect类是一个辅助类，用于获取和屏幕大小相关的属性 itemBack->setPosition(ccp(VisibleRect::rightBottom().x- 50, VisibleRect::rightBottom().y + 25)); //创建菜单，用于存放菜单项 CCMenu *menuBack = CCMenu::create(itemBack,NULL); menuBack->setPosition(CCPointZero); menuBack->setZOrder(4); this->addChild(menuBack); return true;}
以上代码即可将编辑器中的内容展示到游戏中了。
不过注意，使用场景解析出来的内容还是需要自己手动释放了，这里修改menuCloseCallback关闭按钮的回调函数，在程序退出前清理掉所有的单例数据。
方法实现如下：
void HelloWorld::menuCloseCallback(CCObject* pSender){ //清理动画解析内容缓存 CCArmatureDataManager::purge(); //清理场景解析内容缓存 SceneReader::sharedSceneReader()->purge(); //清理动作缓存 cocos2d::extension::ActionManager::shareManager()->purge(); //清理UI解析内容缓存 GUIReader::shareReader()->purge(); //通知导演结束游戏 CCDirector::sharedDirector()->end();//判断当当前平台为ios平台时，退出程序（ios平台较为特殊，程序只有使用exit(0);方法才能控制程序的结束）#if (CC_TARGET_PLATFORM== CC_PLATFORM_IOS) exit(0);#endif}
