首先看下人物动画效果

实现步骤

制作人物动作图片
在代码中提取动作图片
将图片组成每一种状态的动作
实现不同动作间的切换

制作人物动作图片

在代码中提取动作图片

将图片资源在src/resource.js 中注册
将plist资源加入缓存
从缓存中提取每一张图片资源

resource.js

var img_plist = 'img.plist';
var img_png = 'img.png';
var background = 'background.jpg';
var g_resources = [//imageimg_plist,img_png,background
];

将plist资源加入缓存

cc.spriteFrameCache.addSpriteFrames(img_plist);

读取图片资源
方法一:

//注意这里的图片名是在制作plist之前的原文件的文件名,而且需要加#
this.sprite = new cc.Sprite("#person1.png");

方法二：

//制作动画帧的常用方法
var str = "person" + i + ".png";
frame = cc.spriteFrameCache.getSpriteFrame(str);

将图片组成每一种状态的动作

制作动画组

//running left 动作初始化for (var i = 1; i <= 4; i++) {str = "person" + i + ".png";frame = cc.spriteFrameCache.getSpriteFrame(str);animFrames.push(frame);}this.runRightAnimation = new cc.Animation(animFrames, 0.1);//running right 动作初始化animFrames = [];for (var i = 5; i <= 8; i++) {str = "person" + i + ".png";frame = cc.spriteFrameCache.getSpriteFrame(str);animFrames.push(frame);}this.runLeftAnimation = new cc.Animation(animFrames, 0.1);//jump 向右animFrames = [];for (var i = 9; i <= 10; i++) {str = "person" + i + ".png";frame = cc.spriteFrameCache.getSpriteFrame(str);animFrames.push(frame);}this.jumpRightAnimation = new cc.Animation(animFrames, 0.25);//jump 向右animFrames = [];for (var i = 11; i <= 12; i++) {str = "person" + i + ".png";frame = cc.spriteFrameCache.getSpriteFrame(str);animFrames.push(frame);}this.jumpLeftAnimation = new cc.Animation(animFrames, 0.25);

执行动画

this.sprite.runAction(cc.animate(this.runRightAnimation).repeatForever());

实现不同动作间的切换

cocos2d 在实现人物动画的时候使用的是action，由于我们需要保持人物的跑动状态而使用了.repeatForever()方法，那么在切换动作的时候就会出现一点问题，即在向右跑动时再向左跑的时候实际上向右跑动的动作动画并没有停止，就会出现两种动画叠加的情况。

解决方法：
在每次执行动作动画之前都执行这句代码

this.sprite.stopAllActions();

但是这样又带来了新的问题，当按住向右不放时，会不停的触发this.sprite.stopAllActions()，则动画始终处于第一帧，解决方法，使用状态机

goRight: function(){switch (this.runState){case 1://原本向右，则保持原本的动画不变break;case 2://原本向左，则停止向右的动作，变为向左this.sprite.stopAllActions();this.sprite.runAction(cc.animate(this.runRightAnimation).repeatForever());break;default :this.sprite.runAction(cc.animate(this.runRightAnimation).repeatForever());break;}this.sprite.runAction(new cc.MoveBy(0.2, cc.p(this.stepLength,0)));this.runState = 1;},

demo源码
https://github.com/caohanghust/cocos2d-html5-demo

Cocos2d-HTML5--人物动画相关推荐

html人物动画效果图,9款用HTML5/CSS3制作的动物、人物动画
原标题:9款用HTML5/CSS3制作的动物.人物动画今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. ...
html 动物特效,分享9款用HTML5/CSS3制作的动物人物动画，
分享9款用HTML5/CSS3制作的动物人物动画, 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示源码下载 2.HTML5 Canv ...
9款用HTML5/CSS3制作的动物、人物动画
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分 ...
分享9款用HTML5/CSS3制作的动物、人物动画
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分 ...
用html和css做动态动物,分享9款用HTML5/CSS3制作的动物人物动画
1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 2.HTML5 Canvas头发飘逸动画很酷的HTML5动画 HTML5 Canvas动画非常 ...
html插图动物主题代码,分享9款用HTML5/CSS3制作的动物、人物动画
本文作者html5tricks,转载请注明出处今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分享一个利用纯CSS3绘制的蚱 ...
分享9款用HTML5/CSS3制作的动物人物动画
1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示源码下载 2.HTML5 Canvas头发飘逸动画很酷的HTML5动画 HTML5 ...
用html和css做动态动物,分享9款用HTML5/CSS3制作的动物、人物动画
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分 ...
android 三维动画效果,9款令人惊叹的HTML5 3D动画应用
原标题:9款令人惊叹的HTML5 3D动画应用之前我们已经向大家分享了很多HTML5动画应用了,大部分都非常炫酷,也有一小部分是很实用的.今天我们要向各位HTML5动画爱好者介绍更多的HTML5 3 ...
惊艳的HTML5粒子动画特效
转自:http://geek.csdn.net/news/detail/201487?ref=myread HTML5确实非常强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果, ...

Cocos2d-HTML5--人物动画

首先看下人物动画效果

实现步骤

制作人物动作图片

相关技术 Plist

Plist制作

在代码中提取动作图片

将图片组成每一种状态的动作

执行动画

实现不同动作间的切换

Cocos2d-HTML5--人物动画相关推荐

最新文章

热门文章