与动作密不可分的还有动画,动画又可以分为场景过渡动画和帧动画。场景过渡动画我们在以往介绍过,这一个我们只介绍帧动画。
帧动画
帧动画就是按一定时间间隔、一定的顺序、一帧一帧地显示帧图片。我们的美工要为精灵的运动绘制每一帧图片,因此帧动画会由很多帧组成,按照一定的顺序切换这些图片就可以了。
在Cocos2d-JS中播放帧动画涉及到两个类:cc.Animation和cc.Animate,类图如下图所示,cc.Animation是动画类,它保存有很多动画帧,cc.Animate类是动作类它继承于cc.ActionInterval类,属于间隔动作类,它的作用是将cc.Animation定义的动画转换成为动作进行执行,这样我们就看到动画播放的效果了。
实例:帧动画使用
下面我们通过一个实例介绍一下帧动画的使用,这个实例如下图所示,点击Go按钮开始播放动画,这时候播放按钮标题变为Stop,点击Stop按钮可以停止播放动画。
下面我们再看看具体的程序代码,app.js中的HelloWorldLayer的构造代码代码如下:
- ctor: function () {
- this._super();
- var size = cc.director.getWinSize();
- var bg = new cc.Sprite(res.Background_png);
- bg.x = size.width / 2;
- bg.y = size.height / 2;
- this.addChild(bg);
- var frameCache = cc.spriteFrameCache;
- frameCache.addSpriteFrames(res.run_plist, res.run_png);
- this.sprite = new cc.Sprite("#h1.png");
- this.sprite.x = size.width / 2;
- this.sprite.y = size.height / 2;
- this.addChild(this.sprite);
- //toggle菜单
- var goNormalSprite = new cc.Sprite("#go.png");
- var goSelectedSprite = new cc.Sprite("#go.png");
- var stopSelectedSprite = new cc.Sprite("#stop.png");
- var stopNormalSprite = new cc.Sprite("#stop.png");
- var goToggleMenuItem = new cc.MenuItemSprite(goNormalSprite, goSelectedSprite);
- var stopToggleMenuItem = new cc.MenuItemSprite(stopSelectedSprite, stopNormalSprite);
- var toggleMenuItem = new cc.MenuItemToggle(
- goToggleMenuItem,
- stopToggleMenuItem,
- this.onAction, this);
- toggleMenuItem.x = 930;
- toggleMenuItem.y = size.height - 540;
- var mn = new cc.Menu(toggleMenuItem);
- mn.x = 0;
- mn.y = 0;
- this.addChild(mn);
- return true;
- }
app.js中的HelloWorldLayer中的onAction函数代码如下:
- onAction: function (sender) {
- if (this.isPlaying != true) {
- ///////////////动画开始//////////////////////
- var animation = new cc.Animation(); ①
- for (var i = 1; i <= 4; i++) {
- var frameName = "h" + i + ".png"; ②
- cc.log("frameName = " + frameName);
- var spriteFrame = cc.spriteFrameCache.getSpriteFrame(frameName); ③
- animation.addSpriteFrame(spriteFrame); ④
- }
- animation.setDelayPerUnit(0.15); //设置两个帧播放时间 ⑤
- animation.setRestoreOriginalFrame(true); //动画执行后还原初始状态 ⑥
- var action = cc.animate(animation); ⑦
- this.sprite.runAction(cc.repeatForever(action)); ⑧
- //////////////////动画结束///////////////////
- this.isPlaying = true;
- } else {
- this.sprite.stopAllActions(); ⑨
- this.isPlaying = false;
- }
- }
上述第①行代码是创建一个Animation对象,它是动画对象,然后我们要通过循环将各个帧图片放到Animation对象中。第②行是获得帧图片的文件名。第③行代码是通过帧名创建精灵帧对象,第④行代码把精灵帧对象添加到Animation对象中。
第⑤行代码animation.setDelayPerUnit(0.15)是设置两个帧播放时间,我们这个动画播放是4帧。第⑥行代码animation.setRestoreOriginalFrame(true)是动画执行完成是否还原到初始状态。第⑦行代码是通过一个Animation对象创建Animate对象,第⑧行代码this.sprite.runAction(cc.repeatForever(action))是执行动画动作,无限循环方式。
第⑨行代码this.sprite.stopAllActions()停止所有的动作。
本书交流讨论网站:http://www.cocoagame.net
更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com
《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:
京东:http://item.jd.com/11659698.html
欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息
相关推荐
Cocos2d-JS中使用Cocos Studio资源05:帧动画 动画资源,代码
COCOS2D-X中所使用的骨骼动画文件
第1章 Cocos2D-X引擎的介绍 1 1.1 何为游戏引擎 1 1.1.1 游戏的核心—引擎 1 1.1.2 引擎的特点 2 1.1.3 知名的引擎介绍 4 1.1.4 引擎的分类 5 1.2 Cocos2D-X引擎的来历 8 1.3 引擎的版本 9 1.4 下载与安装 10 1.5 ...
本书共29章,按内容结构可分为六篇: 第一篇开发基础,即第2章~第8章,内容包括Cocos2d-x简介、环境搭建、字符串、标签、菜单、精灵、场景、层、动作、特效、动画和Cocos2d-x用户事件。 第二篇开发进阶,即第9章~...
第1章 开始前的准备工作 1 第2章 你的第一款iPhone游戏:垂直射击游戏 38 第3章 Cocos2D核心类 69 第4章 Cocos2D中的动作、特效与动画 152 第5章 Cocos2D中的文本渲染系统 229 共19章
cocos2dx editor是开发跨平台的手机游戏工具,运行window系统上,javascript脚本语言,基于cocos2d-x跨平台游戏引擎, 集合代码编辑,场景设计,动画制作,字体设计,还有粒子,物理系统,地图等等的,而且调试方便,...
基础知识的介绍,元素的基本关系,精灵元素的属性,动画,帧动画、事件机制的简单介绍
Cocos2d-x 3.2 大富翁游戏项目开发-第十四部分 购买空地动画
突破(Cocos2D HTML 2.x) 突破教程游戏的Cocos2d-html实现。 玩游戏 所有其他实现均已存档: 概述 这是用Cocos2D HTML编写的示例突破游戏。 最新版本是2.2.2,并且将在发布3.0时更新或分支。 此版本可在台式机...
完美搓牌效果 流畅翻拍动画 容易集成 一个文档一张图片即可
cocoseditor-popstar消灭星星游戏源代码 开发工具:cocos2dx editor,它是开发跨平台的手机游戏工具,运行window系统上,javascript脚本语言,基于cocos2d-x跨平台游戏引擎, 集合代码编辑,场景设计,动画制作,...
Cocos2d-HTML5 2.2 平铺贴图和骨架动画示例 免责声明 有关许可条款和条件,请参阅 。 此示例用于展示在 Cocos2d-HTML5 2.2 引擎中使用 Tiled Map & Armature Animation 和 Intel(R) XDK。 资产和代码由 Jucimar ...
cocos2dx editor,它是开发跨平台的手机游戏工具,运行window系统上,javascript脚本语言,基于cocos2d-x跨平台游戏引擎, 集合代码编辑,场景设计,动画制作,字体设计,还有粒子,物理系统,地图等等的,而且调试...
以cocos2dx 3.17.2自带的spine库不...在项目的cocos2d\cocos\editor-support\spine目录下 将所有代码文件删除,剩下如下图的三个文件,这三个文件不要删 打开上面下载并解压的文件目录,头文件:spine-cpp\spine-cpp\
Cocos2d-js是一款流行的H5游戏开发框架,介绍Cocos2d-js的核心技术和使用方法,学完以后可以独立开发一款休闲游戏,主要介绍cocos2d-js中的图层控制,用户交互,场景跳转,碰撞检测,数组集合,粒子效果,动画播放...
data.js就是需要更换的动作数据. 生成后的数据拷贝到之前的动作数据即可.packageSpineAtlas代码主要解决spine不能单独更换外部图片换装的问题。将图片打包成atlas格式的文件后,就可以使用接口单独更换spine的皮肤...
CocosBuilder 是一个用来快速...主要用于开发 Cocos2d-JavaScript 应用。这意味着你的代码、动画、接口将可运行在 iPhone、Android 和 HTML 5 浏览器上。如果你需要原生开发,也提供 cocos2d-iphone 和 cocos2d-x 版本.