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


./images/1.png

1CocoStudio 场景编辑器

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

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

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

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

  1. 创建项目(项目名称:MysticalCard),并导入项目 UI 资源,添加 一图片框设定背景图片。注意在工具拦设置 “画布” 的大小(如果需要),这将决定着你的设计分辨率,在运行时还需要注意屏幕的适配问题,如放大缩小,位置偏移等,视具体情况而定。

    ./images/2.png

  2. 为界面添加 UI 元素,图片框等,请根据自己的需要定制

    ./images/3.png

  3. 实践过程中的注意事项

  • 添加控件时注意必要的属性设置

  • 控件的命名规范,这有助于我们今后在后台编写代码获取界面元素

  • 可交互的控件的 “可交互属性” 开启

2.2建立关键帧动画

除了主界面一些必要的 UI 控件,我们还需要一个 “对话框指示” 的动画效果。这是一个帧动画。

  1. 准备工作。

    如下图所示:

    ./images/4.png

  • 打开 CocoStudio,启动 动画编辑器

  • 创建一个新的项目,后导入资源(在 “资源窗口” 中,点击 “文件” 或者 “文件夹” 标示,添加需要的素材资源)

  • 在 “资源窗口中” 点击关键帧动画的守帧图片,拖动至 “渲染窗口”

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

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

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

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

./images/8.png

3.我们将之前的 UI 编辑器所导出的资源,导入到当前场景项目中来,导入方式与 UI 编辑器导入资源方式同样,如下图:

./images/9.png


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

UI 控件的文件 属性中去,如下图所示:

./images/11.png

  1. 前面的步骤已经将 UI 资源导入场景之内,现在需要添加之前所创建的动画资源。

    ./images/12.png

  • 我们以相同的方式导入动画编辑器所导出的动画资源文件。

  • 拖动一个骨骼控件至场景界面,如下图所示。

  • 为骨骼控件的 “文件” 属性赋值,其值为 动画资源中的 ExportJson(或者 json 文件,这取决于动画资源的导出方式) 文件。

运行效果:当我们建立好场景之后,可以通过工具栏运行按钮,点击查看效果,这意味着你不用将所有的资源文件,手动以代码的方式添加到 Cocos2d-x 中,便能看到效果。在运行效果中,所有的控件都是可操作的,如下图,但这里只有点击效果,如果需要实现其逻辑,那么现在需要将其加载到 Cocos2d-x 项目中,编写后台代码实现。

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
// pNode 为 之前所获取的场景资源根节点,通过此节点获取到动画对象,获取方式根据在场景编辑其中设置的层次关系而定
CCComRender *pLoadRender = (CCComRender*)(pNode->getChildByTag(1)->getChildByTag(1)->getComponent( "CCArmature" ));
CCArmature* armLoad = (CCArmature*)(pLoadRender->getRender());
// 播放动画
armLoad->getAnimation()->playByIndex(0);


./images/15.png

3.3对场景的一些编码说明

使用 CocoStudio 就是为了帮助我们快速的建立 UI 原型,然后通过编码可以获取到里面的任意一个元素对象,并修改其属性值,调用其方法,正如上面所示播放一个动画的方法同样。其步骤如下:

  • 通过 CCJsonReader 类读取 json 文件,将会自动解析构建对象,返回一个节点 CCNode

  • 任何元素都能通过这个 CCNode 节点,获取到,它其实就是一个树,所不同的是层级关系(树节点的位置)

  • 找到需要对象所在的 “树枝”,后通过 getComponent 方法获取 所在的 CCComRender 对象

  • 通过 CCComRender 的 getRender 方法获取最终对象

  • 得到我们所需要的具体对象之后,我们就能够对齐进行草,设置属性,调用方法等,诸如此类

来自:泰然

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


    本文实践自 RayWenderlich、Ali Hafizji 的文章《How To Create Dynamic Textures with CCRenderTexture in Cocos2D 2.X》,文中使用Cocos2D,我在这里使用Cocos2D-x 2.1.4进行学习和移植。在这篇文章,将会学习到如何创建实时纹理、如何用Gimp创建无缝拼接纹
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@163.com微信公众号:HopToad 欢迎转载,转载标注出处:http://blog.csdn.netotbaron/article/details/424343991.  软件准备 下载地址:http://cn.cocos2d-x.org/download 2.  简介2.1         引用C
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从Cocos2D-x官网上下载,进入网页http://www.cocos2d-x.org/download,点击Cocos2d-x以下的Download  v3.0,保存到自定义的文件夹2:从python官网上下载。进入网页https://www.python.org/downloads/,我当前下载的是3.4.0(当前最新
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发引擎,易学易用,支持多种智能移动平台。官网地址:http://cocos2d-x.org/当前版本:2.0    有很多的学习资料,在这里我只做为自己的笔记记录下来,错误之处还请指出。在VisualStudio2008平台的编译:1.下载当前稳
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《最强大脑》娱乐节目。将2048改造成一款挑战玩家对数字记忆的小游戏。邮箱:appdevzw@163.com微信公众号:HopToadAPK下载地址:http://download.csdn.net/detailotbaron/8446223源码下载地址:http://download.csdn.net/
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试以QtCreatorIDE来进行CMake构建。Cocos2d-x3.X地址:https://github.com/cocos2d/cocos2d-x1.打开QtCreator,菜单栏→"打开文件或项目...",打开cocos2d-x目录下的CMakeLists.txt文件;2.弹出CMake向导,如下图所示:设置
 下载地址:链接:https://pan.baidu.com/s/1IkQsMU6NoERAAQLcCUMcXQ提取码:p1pb下载完成后,解压进入build目录使用vs2013打开工程设置平台工具集,打开设置界面设置: 点击开始编译等待编译结束编译成功在build文件下会出现一个新文件夹Debug.win32,里面就是编译
分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!http://www.captainbed.net前言上次用象棋演示了cocos2dx的基本用法,但是对cocos2dx并没有作深入的讨论,这次以超级马里奥的源代码为线索,我们一起来学习超级马里奥的实
1. 圆形音量button事实上作者的本意应该是叫做“电位计button”。可是我觉得它和我们的圆形音量button非常像,所以就这么叫它吧~先看效果:好了,不多解释,本篇到此为止。(旁白: 噗。就这样结束了?)啊才怪~我们来看看代码:[cpp] viewplaincopyprint?CCContro
原文链接:http://www.cnblogs.com/physwf/archive/2013/04/26/3043912.html为了进一步深入学习贯彻Cocos2d,我们将自己写一个场景类,但我们不会走的太远,凡是都要循序渐进,哪怕只前进一点点,那也至少是前进了,总比贪多嚼不烂一头雾水的好。在上一节中我们建
2019独角兽企业重金招聘Python工程师标准>>>cocos2d2.0之后加入了一种九宫格的实现,主要作用是用来拉伸图片,这样的好处在于保留图片四个角不变形的同时,对图片中间部分进行拉伸,来满足一些控件的自适应(PS: 比如包括按钮,对话框,最直观的形象就是ios里的短信气泡了),这就要求图
原文链接:http://www.cnblogs.com/linji/p/3599478.html1.环境和工具准备Win7VS2010/2012,至于2008v2版本之后似乎就不支持了。 2.安装pythonv.2.0版本之前是用vs模板创建工程的,到vs2.2之后就改用python创建了。到python官网下载版本2.7.5的,然后
环境:ubuntu14.04adt-bundle-linux-x86_64android-ndk-r9d-linux-x86_64cocos2d-x-3.0正式版apache-ant1.9.3python2.7(ubuntu自带)加入环境变量exportANDROID_SDK_ROOT=/home/yangming/adt-bundle-linux/sdkexportPATH=${PATH}:/$ANDROID_SDK_ROOTools/export
1开发背景游戏程序设计涉及了学科中的各个方面,鉴于目的在于学习与进步,本游戏《FlappyBird》采用了两个不同的开发方式来开发本款游戏,一类直接采用win32底层API来实现,另一类采用当前火热的cocos2d-x游戏引擎来开发本游戏。2需求分析2.1数据分析本项目要开发的是一款游
原文链接:http://www.cnblogs.com/linji/p/3599912.html//纯色色块控件(锚点默认左下角)CCLayerColor*ccc=CCLayerColor::create(ccc4(255,0,0,128),200,100);//渐变色块控件CCLayerGradient*ccc=CCLayerGradient::create(ccc4(255,0,0,
原文链接:http://www.cnblogs.com/linji/p/3599488.html//载入一张图片CCSprite*leftDoor=CCSprite::create("loading/door.png");leftDoor->setAnchorPoint(ccp(1,0.5));//设置锚点为右边中心点leftDoor->setPosition(ccp(240,160));/
为了答谢广大学员对智捷课堂以及关老师的支持,现购买51CTO学院关老师的Cocos2d-x课程之一可以送智捷课堂编写图书一本(专题可以送3本)。一、Cocos2d-x课程列表:1、Cocos2d-x入门与提高视频教程__Part22、Cocos2d-x数据持久化与网络通信__Part33、Cocos2d-x架构设计与性能优化内存优
Spawn让多个action同时执行。Spawn有多种不同的create方法,最终都调用了createWithTwoActions(FiniteTimeAction*action1,FiniteTimeAction*action2)方法。createWithTwoActions调用initWithTwoActions方法:对两个action变量初始化:_one=action1;_two=action2;如果两个a
需要环境:php,luajit.昨天在cygwin上安装php和luajit环境,这真特么是一个坑。建议不要用虚拟环境安装打包环境,否则可能会出现各种莫名问题。折腾了一下午,最终将环境转向linux。其中,luajit的安装脚本已经在quick-cocos2d-x-develop/bin/中,直接luajit_install.sh即可。我的lin
v3.0相对v2.2来说,最引人注意的。应该是对触摸层级的优化。和lambda回调函数的引入(嗯嗯,不枉我改了那么多类名。话说,每次cocos2dx大更新。总要改掉一堆类名函数名)。这些特性应该有不少人研究了,所以今天说点跟图片有关的东西。v3.0在载入图片方面也有了非常大改变,仅仅只是