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

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

ctor:function () {

//添加背景

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);

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

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

相关文章