CVP认证学习笔记--李天宇020实现切图帧动画

前端之家收集整理的这篇文章主要介绍了CVP认证学习笔记--李天宇020实现切图帧动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

帧动画的切换实际上是把所需要的帧动画放在一个缓存器里.首先创建数组,用textureCache添加图片到缓存中。然后添加帧序列,将序列添加到数组中。部分代码如下:

ctor:function () {

this._super();

//添加背景

var bg=new cc.Sprite(res.bg_jpg);

this.addChild(bg);

bg.setPosition(cc.winSize.width/2,cc.winSize.height/2);

//创建动画

var frameUp=[];

var frameDown=[];

var frameLeft=[];

var frameRight=[];

var texture=cc.textureCache.addImage("res/2.png");

//添加帧序列

for(var n=0;n<4;n++)

{

var nowframeup=new cc.SpriteFrame(texture,cc.rect(32*n,48*3,32,48));

var nowframedown=new cc.SpriteFrame(texture,48));

var nowframeleft=new cc.SpriteFrame(texture,48,48));

var nowframeright=new cc.SpriteFrame(texture,48*2,48));

frameUp.push(nowframeup);

frameDown.push(nowframedown);

frameLeft.push(nowframeleft);

frameRight.push(nowframeright);

}

//创建动画

var animationUp=new cc.Animation(frameUp,0.2);

var animationDown=new cc.Animation(frameDown,0.2);

var animationLeft=new cc.Animation(frameLeft,0.2);

var animationRight=new cc.Animation(frameRight,0.2);

//添加到缓存里

cc.animationCache.addAnimation(animationUp,"up");

cc.animationCache.addAnimation(animationDown,"down");

cc.animationCache.addAnimation(animationLeft,"left");

cc.animationCache.addAnimation(animationRight,"right");

//创建animate并运行

this.sprite=new cc.Sprite();

this.addChild(this.sprite);

this.sprite.setTag(100);

this.sprite.runAction(cc.animate(

cc.animationCache.getAnimation("up")).repeatForever());

this.sprite.setScale(4);

this.sprite.setPosition(200,200);

本节课的作业是实现帧动画上下左右的方向变化,通过触摸位置和动画当前所在位置进行了坐标的判断后,不难实现。

最后附上本节课的作业链接

http://www.cocoscvp.com/usercode/2016_04_25/6a92644a3d22ba869d86ebe4892b4d023f07c9ad/

猜你在找的Cocos2d-x相关文章