【cocos2d-x】如何使用CocoStudio场景编辑器制做魔卡幻想

时间 2020-01-27

标签 cocos2d-x 如何使用 cocostudio 场景编辑器制做幻想栏目 Cocos2d-x 繁體版

原文原文链接

1 CocoStudio 场景编辑器

使用 CocoStudio 场景编辑器来建立游戏场景，其中包含游戏 UI 与动画，来定制一个游戏主界面。php

2 使用 CocoStudio 完成《魔卡幻想》场景编辑

对于环境的搭建使用，请参考以前的文章，或者实时关注官方最新版本的安装使用方法。html

2.1 UI 编辑器制做游戏主界面

建立项目(项目名称：MysticalCard)，并导入项目 UI 资源，添加一图片框设定背景图片。注意在工具拦设置 “画布” 的大小（若是须要），这将决定着你的设计分辨率，在运行时还须要注意屏幕的适配问题，如放大缩小，位置偏移等，视具体状况而定。json
为界面添加 UI 元素，图片框等，请根据本身的须要定制编辑器
实践过程当中的注意事项ide

添加控件时注意必要的属性设置工具
控件的命名规范，这有助于咱们从此在后台编写代码获取界面元素动画
可交互的控件的 “可交互属性” 开启this

2.2 创建关键帧动画

除了主界面一些必要的 UI 控件，咱们还须要一个 “对话框指示” 的动画效果。这是一个帧动画。编码

准备工做。spa
以下图所示：

打开 CocoStudio ,启动动画编辑器
建立一个新的项目，后导入资源（在 “资源窗口” 中，点击 “文件” 或者 “文件夹” 标示，添加须要的素材资源）
在 “资源窗口中” 点击关键帧动画的守帧图片，拖动至 “渲染窗口”

将第一关键帧拖动至 “渲染窗口” 中心。可使用工具栏，快速定位至窗口中心，使图片显示在正中间，可让动画更好的定位。添加其它帧图片，注意，咱们须要选中剩余图片，而后 “拖动” 到 “对象结构” 视图中的 “第一关键帧” 所在的对象，以下图所示。关键帧与骨骼动画操做区别：在使用骨骼动画的时候，咱们将骨骼中的各部分元素，直接拖动添加到 “渲染窗口”，以摆放各骨骼的位置关系，而在 “对象结构” 视图中则表现为，一个列表，标示着每一块骨骼对象，不一样帧所改变的是各个骨骼对象的位置，以达到骨骼动画效果。而在关键帧动画中，它的对象结构只有一个，而在每一帧修改的不是其位置，而是其显示内容。这是二者之间的区别，那操做方式也有所不一样。而对于它们所导出的资源则是相同，用法也是一样。剩余帧添加以后，咱们看见在 “关键帧” 视图中，已经有了多帧动画，能够播放动画，查看效果，并能够经过修改 “速率” 来控制动画的播放速度。导出动画资源，导出的资源文件能够被咱们在 Cocos2d-x 中以代码的方式直接加载，而后播放其动画，也能够做为场景编辑器中的一个元素，被添加在场景编辑器里，后面的内容就是使用场景编辑器来加载一个动画的方式。

2.3 场景编辑器的资源“整合”

使用 CocoStudio 能够很好的帮助游戏开发过程当中分工合做。动画编辑器和 UI 编辑器能够由多我的进行编辑，最后再由一我的统合资源，这也就是场景编辑器的优势了，它除了能支持 CocoStudio 自己所自带的动画编辑器，UI 编辑器，它还能支持，Tmx 地图资源，粒子编辑器的粒子效果资源，声音资源等～而且不断扩展中。如下将给出如何在场景编辑器整合咱们以前所建立的动画与 UI 界面的资源，来实现咱们一个场景的运行效果。它的步骤以下：

1.启动场景编辑器，新建一个场景项目。并设置 “画布” 大小。画布大小要适量。
2.咱们拖动一个 UI 控到画布之上，它做为咱们以前导出的 UI 资源的承载。

3.咱们将以前的 UI 编辑器所导出的资源，导入到当前场景项目中来，导入方式与 UI 编辑器导入资源方式一样，以下图：

4.为 UI 控件的 “文件” 属性赋值：咱们在资源视图中找到 UI 编辑器所导出的 UI 资源，其目录下包含 json 文件资源（如这里的 “MysticalCard_1.json”）,将其拖动到

UI 控件的文件属性中去，以下图所示：

前面的步骤已经将 UI 资源导入场景以内，如今须要添加以前所建立的动画资源。

咱们以相同的方式导入动画编辑器所导出的动画资源文件。
拖动一个骨骼控件至场景界面，以下图所示。
为骨骼控件的 “文件” 属性赋值，其值为动画资源中的 ExportJson（或者 json 文件，这取决于动画资源的导出方式）文件。

运行效果：当咱们创建好场景以后，能够经过工具栏运行按钮，点击查看效果，这意味着你不用将全部的资源文件，手动以代码的方式添加到 Cocos2d-x 中，便能看到效果。在运行效果中，全部的控件都是可操做的，以下图，但这里只有点击效果，若是须要实现其逻辑，那么如今须要将其加载到 Cocos2d-x 项目中，编写后台代码实现。

3 在 Cocos2d-x 中加载场景资源并运行之

3.1 加载场景内容

前面那么多步骤，使用 CocoStudio 来建立了 UI，动画，还有一个场景，而要将其运行在实际的项目中，就很是的简单与方便了，只需几行代码，就可以将其加载到项目中去，固然在这以前咱们须要将场景编辑器的资源（场景项目目录中 “Resources” 目录，其中将包含一个 json 文件）复制到项目资源目录中去：

// 加载场景资源

CCNode *pNode = CCJsonReader::sharedJsonReader()->createNodeWithJsonFile( "McScene.json" );

this ->addChild(pNode);

经过 CCJsonReader 来读取解析 json，从而得到场景中的节点内容，直接添加到当前的场景就能运行。

3.2 在场景中播放动画

默认加载的场景资源动画组件是没有播放的，须要手动获取动画组件对象，而后调用其播放方法，固然这个步骤也是很是简单的：

// 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 方法获取最终对象
获得咱们所须要的具体对象以后，咱们就可以对齐进行草，设置属性，调用方法等，诸如此类

来自：泰然

http://cocos2d.9tech.cn/news/2013/0925/29092.html