如何使用Cocos Studio场景编辑器制作奇幻主界面
1 cocostudio场景编辑器
2使用cocostudio完成魔卡幻想的场景剪辑
2.1 UI编辑器制作游戏主界面
2.2关键帧动画的建立
2.3场景编辑资源的“整合”
3加载cocos2d-x中的场景资源并运行。
3.1加载场景内容
3.2在场景中播放动画
3.3场景的一些编码说明
1.cocostudio场景编辑器
之前的文章《用cocostudio创建cocos2d-x序列帧和骨架动画》和《如何使用cocostudio UI编辑器实现豆豆馆的设定界面》介绍了如何用动画编辑器创建动画，用UI编辑器创建游戏配置界面。本文将两者结合起来，使用cocostudio场景编辑器创建一个游戏场景，包括游戏UI和动画，自定义一个游戏主界面。
2.使用cocostudio完成魔卡幻想的场景剪辑。
对于环境的搭建和使用，可以参考之前的文章或者实时关注最新正式版的安装和使用。
2.1 UI编辑器制作游戏主界面
A.创建项目(项目名:神秘卡)，导入项目UI资源，添加图片框设置背景图片。注意设置工具栏中“画布”的大小(如果需要的话)，这将决定你的设计分辨率。在操作过程中，还需要注意屏幕的适配，比如放大缩小，位置偏移等。，视具体情况而定。
B.添加UI元素，图片框等。到界面，请根据自己的需求定制。
C.实践中的注意事项
添加控件时，请注意必要的属性设置。
控件，这将有助于我们将来在后台编写代码以获取界面元素。
交互式控件的交互式属性已打开。
2.2关键帧动画的建立
除了主界面中一些必要的UI控件，我们还需要一个“对话框指示”的动画效果。这是一个帧动画。
A.准备工作。
打开CocoStudio，启动动画编辑器。
创建一个新项目，然后导入资源(在资源窗口中，单击“文件”或“文件夹”标签来添加所需的材料资源)。
在“资源窗口”中，单击关键帧动画的持帧图片，并将其拖动到“渲染窗口”。
如下图所示:
B.将第一个关键帧拖到渲染窗口的中心。可以使用工具栏快速定位窗口中心，使图片显示在中间，这样可以使动画更好的定位。
C.添加其他图片框架。请注意，我们需要选择剩余的图片，然后将它们“拖动”到对象结构视图中“第一个关键帧”所在的对象上，如下图所示。
关键帧和骨骼动画的操作区别:使用骨骼动画时，我们直接将骨骼中的所有元素拖拽添加到“渲染窗口”中，以显示每块骨骼的位置关系，而在“对象结构”视图中，则显示为列表，表示每个E-bone对象，不同的帧改变每个骨骼对象的位置，以达到骨骼动画的效果。
但是，在关键帧动画中，只有一个对象结构，并且在每一帧中修改的不是它的位置而是它的显示内容。这就是两者的区别，操作方式也不同。他们输出的资源是一样的，用法也是一样的。
D.添加完剩余帧后，我们可以看到“关键帧”视图中已经有多帧动画了，可以播放动画，检查效果，通过修改“速率”来控制动画的播放速度。
导出动画资源。导出的资源文件可以通过代码直接加载到Cocos2d-x中，然后播放其动画。也可以作为场景编辑器中的元素添加到场景编辑器中，下面的内容就是使用场景编辑器加载动画的方式。
2.3场景编辑资源的“整合”
CocoStudio可以帮助游戏开发过程中的分工合作。动画编辑器和UI编辑器可以多人编辑，最后一个人整合资源，这就是场景编辑器的优势。除了支持CocoStudio本身的动画编辑器和UI编辑器，还可以支持粒子编辑器的Tmx贴图资源、粒子效果资源和声音资源，并且还在不断扩展。
下面将展示如何在场景编辑器中整合我们之前创建的动画和UI资源，实现我们其中一个场景的运行效果。其步骤如下:
A.启动场景编辑器并创建一个新的场景项目。并设置画布大小。画布大小要合适。
B.我们将一个UI控件拖到画布上，画布充当我们之前导出的UI资源的宿主。
C.我们将之前UI编辑器导出的资源导入到当前场景项目中，方式和UI编辑器一样，如下图。
D.给UI控件的“file”属性赋值:我们在资源视图中找到UI编辑器导出的UI资源，其目录中包含json文件资源(如这里的“神秘卡片_ 1.json”)，将其拖动到UI控件的file属性中，如下图所示:
E.UI资源已经在前面的步骤中导入到场景中，现在您需要添加之前创建的动画资源。
我们用同样的方法导入动画编辑器导出的动画资源文件。
拖动骨骼控件到场景界面，如下图所示。
为骨骼控件的“file”属性赋值，其值为动画资源中的ExportJson(或Json文件，取决于动画资源的导出方式)文件。
F.运行效果:我们建立好场景后，可以点击工具栏上的运行按钮，查看效果，也就是说不用在代码中手动将所有的资源文件添加到Cocos2d-x中，就可以看到效果。
在运行效果中，所有的控件都是可操作的，如下图，但是这里只有一个点击效果。如果需要实现它的逻辑，需要将其加载到Cocos2d-x项目中，并编写后台代码来实现。
3.在Cocos2d-x中加载场景资源并运行。
3.1加载场景内容
在前面的步骤中，CocoStudio用于创建UI、动画和场景。在实际项目中运行非常简单方便，只需要几行代码就可以加载到项目中。当然，在此之前，我们需要将场景编辑器的资源(场景项目目录中的“Resources”目录，其中会包含一个json文件)复制到项目资源目录中:
//加载场景资源
cc node * pNode = CCJsonReader::sharedJsonReader()-& gt；createNodeWithJsonFile(" MC scene . JSON ")；
这-& gt；addChild(pNode)；
通过CCJsonReader读取并解析json，从而得到场景中的节点内容，直接添加到当前场景中运行。
3.2在场景中播放动画
不播放默认加载的场景资源动画组件。您需要手动获取动画组件对象，然后调用其播放方法。当然，这一步也很简单:
// pNode是之前获取的场景资源的根节点，通过这个节点获取动画对象，获取方式取决于场景编辑中设置的层次关系。
CCComRender * plo adrender =(CCComRender *)(pNode-& gt；getChildByTag(1)-& gt；getChildByTag(1)-& gt；get component(" ccar mature "))；
ccar mature * arm load =(ccar mature *)(ploarder-& gt；getRender())；
armLoad->；get animation()-& gt；playByIndex(0)；
3.3场景的一些编码说明
CocoStudio是用来帮助我们快速搭建一个UI原型，然后我们可以通过编码得到里面的任意元素对象，修改它的属性值，调用它的方法，就像上面展示的播放一个动画的方法一样。步骤如下:
通过CCJsonReader类读取json文件会自动解析build对象并返回一个节点CCNode。
任何元素都可以通过这个CCNode节点获得，这个节点实际上是一棵树，不同的是层次关系(树节点的位置)
找到所需对象所在的“分支”，然后通过getComponent方法获取CCComRender对象。
通过CCComRender的getRender方法获取最终对象。
在得到我们需要的具体对象后，我们可以对齐草，设置属性，调用方法等等。
转载仅供参考，