1.cocostudio 场景编辑器
上一篇《使用cocostudio创建cocos2d-x序列帧和骨骼动画》《如何使用cocostudio UI编辑器实现《方豆堂》的设置界面，介绍了如何使用动画编辑器创建动画和使用UI编辑器创建游戏的配置界面，本文将两者结合，使用cocostudio场景编辑器创建游戏场景，包括游戏UI和动画，自定义游戏主界面。
2.使用cocostudio完成《魔幻奇幻》的场景剪辑
环境搭建和使用请参考上一篇文章，或者实时关注最新正式版的安装使用方法。
2.1 UI 编辑器创建游戏主界面
一个。创建项目（项目名称：MysticalCard），导入项目UI资源，添加相框设置背景图片。注意在工具栏中设置“画布”的大小（如果需要），这将决定您设计的分辨率。运行时还需要注意屏幕的适配，比如放大缩小、位置偏移等游戏图片，视具体情况而定。当然。
湾。界面添加UI元素、图片框等，请根据自己的需求定制。
C。实践过程中的注意事项
添加控件时注意必要的属性设置
控件的命名约定，这将有助于我们在后台编写代码以获取将来的界面元素
可交互控件的“可交互属性”已打开
2.2 创建关键帧动画
除了主界面上一些必要的UI控件外，我们还需要一个“对话框指示器”动画效果。这是一个帧动画。
一个。准备。
打开 CocoStudio 并启动动画编辑器
新建项目，然后导入资源（在“资源窗口”中，点击“文件”或“文件夹”图标添加所需的素材资源）
在“资源窗口”中，点击关键帧动画的帧保护图像，将其拖到“渲染窗口”中
湾。将第一个关键帧拖到渲染窗口的中心。可以使用工具栏快速定位窗口的中心，使图片显示在中间，可以让动画更好的定位。
C。添加其他帧图片，注意我们需要选中剩余的图片，然后在“对象结构”视图中“拖”到“第一关键帧”所在的对象
关键帧和骨骼动画操作的区别：在使用骨骼动画的时候，我们直接将骨骼中的各种元素拖拽添加到“渲染窗口”中来放置各个骨骼的位置关系，而在“对象结构”视图中，它显示为一个列表，标记每个 e。块骨架对象，并在不同的帧中改变每个骨架对象的位置，以实现骨骼动画效果。
在关键帧动画中，对象结构只有一个，每一帧修改的不是它的位置，而是它的显示内容。这就是两者之间的区别，这就是它的工作原理。它们导出的资源是一样的，用法也是一样的。
d。添加剩余帧后，我们可以看到在“关键帧”视图中，已经有多帧动画了，可以播放动画，查看效果，可以通过修改“速度”。
导出动画资源。导出的资源文件可以直接在 Cocos2d-x 中通过代码加载，然后播放它们的动画。它们也可以作为场景编辑器中的元素添加到场景编辑器中。以下内容这是您使用场景编辑器加载动画的方式。
2.3 场景编辑器的资产“整合”
使用 CocoStudio 可以帮助游戏开发过程中的分工合作。动画编辑器和UI编辑器可以多人编辑，最后一个人整合资源。这就是场景编辑器的优势。除了支持CocoStudio自带的动画编辑器、UI编辑器外，还可以支持Tmx贴图资源、粒子编辑器的粒子效果资源、声音资源等~并且还在不断的扩展中。
下面将展示如何在场景编辑器中整合我们之前创建的动画和UI界面资源来实现我们场景的运行效果。其步骤如下：
一个。启动场景编辑器并创建一个新的场景项目。并设置“画布”大小。画布大小应该合适。
湾。我们将一个 UI 控件拖到画布上cocos 场景切换动画，它作为我们之前导出的 UI 资源的宿主。
C。我们将之前UI编辑器导出的资源导入到当前场景项目中。导入方式与UI编辑器导入资源的方式相同，如下图所示：
d。给UI控件的“file”属性赋值：我们在资源视图中找到UI编辑器导出的UI资源，其目录包含json文件资源（比如这里的“MysticalCard_1.json”），把它拖到UI控件的文件属性中，如下图：
e. 前面的步骤已经将UI资源导入到场景中cocos 场景切换动画，现在需要添加之前创建的动画资源。
我们用同样的方法导入动画编辑器导出的动画资源文件。
拖动一个骨骼控件到场景界面，如下图所示。
为动画资源中的 ExportJson（或 json 文件，取决于动画资源的导出方式）文件赋值给骨架控件的“文件”属性。
F。运行效果：我们建立好场景后，可以运行工具栏上的按钮，点击查看效果，也就是说不需要手动将所有资源文件通过代码添加到Cocos2d-x中，可以看到它的作用。
在运行效果中，所有的控件都是可操作的，如下图，但是只有点击效果。如果需要实现它的逻辑，需要将其加载到Cocos2d-x项目中，并编写后台代码来实现。
3.在Cocos2d-x中加载场景资源并运行
3.1 加载场景内容
在前面的步骤中，我使用 CocoStudio 创建了 UI、动画和场景。在实际项目中运行起来非常简单方便。只需要几行代码就可以加载到项目资源目录：
1112131415 // 加载场景资源 CCNode *pNode = CCJsonReader::sharedJsonReader()->createNodeWithJsonFile("McScene.json"); this->addChild(pNode);
通过CCJsonReader读取并解析json，从而获取场景中的节点内容，直接添加到当前场景中运行。
3.2 播放场景中的动画
默认加载的场景资源动画组件不播放。需要手动获取动画组件对象，然后调用其播放方法。当然3D场景，这一步也很简单：
622324252627 // pNode是之前获取的场景资源的根节点，通过这个节点获取动画对象。获取方式取决于场景编辑中设置的层级关系 CCComRender *pLoadRender = (CCComRender*)(pNode->getChildByTag(1)->getChildByTag(1)->getComponent("CCArmature")) ; CCArmature* armLoad = (CCArmature*)(pLoadRender->getRender()); // 播放动画 armLoad->getAnimation() ->playByIndex(0);
3.3 场景的一些编码说明
使用 CocoStudio 的目的是帮助我们快速搭建一个 UI 原型，然后我们可以通过编码获取其中的任意元素对象，修改其属性值，调用其方法，就像上图播放动画的方法一样。步骤如下：
通过CCJsonReader类读取json文件会自动解析构建对象并返回一个节点CCNode
任何元素都可以通过这个CCNode节点得到，它其实是一棵树，不同的是层次关系（树节点的位置）
找到所需对象所在的“树枝”，然后通过getComponent方法获取其所在的CCComRender对象
通过CCComRender的getRender方法获取最终对象
得到我们需要的具体对象后，我们就可以进行草地的对齐、设置属性、调用方法等操作了。
