1CocoStudio 场景编辑器
使用 CocoStudio 场景编辑器来创建游戏场景,其中包含游戏 UI 与动画,来定制一个游戏主界面。
2使用 CocoStudio 完成《魔卡幻想》场景编辑
对于环境的搭建使用,请参考之前的文章,或者实时关注官方最新版本的安装使用方法。
2.1UI 编辑器制作游戏主界面
创建项目(项目名称:MysticalCard),并导入项目 UI 资源,添加 一图片框设定背景图片。注意在工具拦设置 “画布” 的大小(如果需要),这将决定着你的设计分辨率,在运行时还需要注意屏幕的适配问题,如放大缩小,位置偏移等,视具体情况而定。
实践过程中的注意事项
2.2建立关键帧动画
除了主界面一些必要的 UI 控件,我们还需要一个 “对话框指示” 的动画效果。这是一个帧动画。
准备工作。
如下图所示:
2.3场景编辑器的 资源“整合”
使用 CocoStudio 可以很好的帮助游戏开发过程中 分工合作。动画编辑器 和 UI 编辑器可以由多个人进行编辑,最后再由一个人统合资源,这也就是场景编辑器的优点了,它除了能支持 CocoStudio 本身所自带的动画编辑器,UI 编辑器,它还能支持,Tmx 地图资源,粒子编辑器的粒子效果资源,声音资源等~并且不断扩展中。以下将给出如何在 场景编辑器整合我们之前所创建的动画与 UI 界面的资源,来实现我们一个场景的运行效果。它的步骤如下:
1.启动场景编辑器,新建一个场景项目。并设置 “画布” 大小。画布大小要适量。
2.我们拖动一个 UI 控到画布之上,它作为我们之前导出的 UI 资源的承载。
3.我们将之前的 UI 编辑器所导出的资源,导入到当前场景项目中来,导入方式与 UI 编辑器导入资源方式同样,如下图:
4.为 UI 控件的 “文件” 属性赋值:我们在资源视图中找到 UI 编辑器所导出的 UI 资源,其目录下包含 json 文件资源(如这里的 “MysticalCard_1.json”),将其拖动到
前面的步骤已经将 UI 资源导入场景之内,现在需要添加之前所创建的动画资源。
我们以相同的方式导入动画编辑器所导出的动画资源文件。
拖动一个骨骼控件至场景界面,如下图所示。
为骨骼控件的 “文件” 属性赋值,其值为 动画资源中的 ExportJson(或者 json 文件,这取决于动画资源的导出方式) 文件。
3在 Cocos2d-x 中加载场景资源 并运行之
3.1加载场景内容
前面那么多步骤,使用 CocoStudio 来创建了 UI,动画,还有一个场景,而要将其运行在实际的项目中,就非常的简单与方便了,只需几行代码,就能够将其加载到项目中去,当然在这之前我们需要将场景编辑器的资源(场景项目目录中 “Resources” 目录,其中将包含一个 json 文件)复制到项目资源目录中去:
1
2
3
|
// 加载场景资源
CCNode *pNode = CCJsonReader::sharedJsonReader()->createNodeWithJsonFile(
"McScene.json"
);
this
->addChild(pNode);
|
通过 CCJsonReader 来读取解析 json,从而获得场景中的节点内容,直接添加到当前的场景就能运行。
3.2在场景中播放动画
默认加载的场景资源 动画 组件是没有播放的,需要手动获取动画组件对象,然后调用其播放方法,当然这个步骤也是非常简单的:
3
4
5
6
|
CCComRender *pLoadRender = (CCComRender*)(pNode->getChildByTag(1)->getChildByTag(1)->getComponent(
"CCArmature"
));
CCArmature* armLoad = (CCArmature*)(pLoadRender->getRender());
// 播放动画
armLoad->getAnimation()->playByIndex(0);
|
3.3对场景的一些编码说明
使用 CocoStudio 就是为了帮助我们快速的建立 UI 原型,然后通过编码可以获取到里面的任意一个元素对象,并修改其属性值,调用其方法,正如上面所示播放一个动画的方法同样。其步骤如下:
任何元素都能通过这个 CCNode 节点,获取到,它其实就是一个树,所不同的是层级关系(树节点的位置)
来自:泰然
原文链接:https://www.f2er.com/cocos2dx/346851.html