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

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

概述帧动画的切换实际上是把所需要的帧动画放在一个缓存器里.首先创建数组,用textureCache添加图片到缓存中。然后添加帧序列,将序列添加到数组中。部分代码如下: ctor:function () {         this._super();        //添加背景        var bg=new cc.Sprite(res.bg_jpg);        this.addChild(

帧动画的切换实际上是把所需要的帧动画放在一个缓存器里.首先创建数组,用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/

总结

以上是内存溢出为你收集整理的CVP认证学习笔记--李天宇020实现切图帧动画全部内容,希望文章能够帮你解决CVP认证学习笔记--李天宇020实现切图帧动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1080517.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存