注册 登录
主题 : CVP 认证学习 笔记--(刘春江)020(三周五章)-实现切图帧动画
级别: 新手上路
UID: 556608
精华: 1
发帖: 21
可可豆: 230 CB
威望: 230 点
在线时间: 42(时)
注册时间: 2016-04-11
最后登录: 2018-08-17
0 楼:  发表于: 2016-04-22 10:57    发自: Web Page

CVP 认证学习 笔记--(刘春江)020(三周五章)-实现切图帧动画   

管理提醒: 本帖被 li_mm 执行置顶操作(2016-05-04)

1、本节介绍了动画缓存cc.animationCache,实现切图帧动画。
   1)用cc.SpriteFrame(texture,cc.rect(32*n,48*3,32,48));的格式把图片切好,在push到一个数组中。
   2)用cc.Animation(数组,0.2);这样就不用上节课的for循环,把数组中的图片,即帧动画加入到了一个cc.Animation对象中。
   3)用cc.animationCache.addAnimation(animation对象,"标记")把这个cc.Animation对象加入到缓存中并打上标记。
   4)this.sprite.runAction(cc.animate(缓存对象).repeatForever()),最后用this.Sprite.sprite.runAction(用cc.animate(缓存对象)包装好的Action,重复次数),结束。
2、本节课和上节课实现帧动画处理的区别:
   1)多了切图的步骤
   2)用数组代替了for循环
   3)动画层用this.sprite取代。
   4)act是加入了缓存打上标记(而在上一节课的知识里,只要新建不同的动画层就可以封装多种帧动画,但本节课只有一个this.sprite。


3、本节作业是:触摸屏幕,点击一个位置之后让英雄移动过去注意不同方向用不通的动画序列。
作业难点是如何判断npc移动时播放哪个方向的帧动画,即判定方向。


代码如下:
var HelloWorldLayer = cc.Layer.extend
({
    sprite:null,
    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,cc.rect(32*n,48*0,32,48));
           var nowframeleft=new cc.SpriteFrame(texture,cc.rect(32*n,48,32,48));
           var nowframeright=new cc.SpriteFrame(texture,cc.rect(32*n,48*2,32,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.runAction(cc.animate(
                    cc.animationCache.getAnimation("up")).repeatForever());
        this.sprite.setScale(4);
        this.sprite.setPosition(200,200);
        this.sprite.setTag(99);
        return true;
    },
      onEnter:function()
    {
        this._super();
        cc.log("初始化完成");
      //添加触屏事件
      cc.eventManager.addListener({
          event:cc.EventListener.TOUCH_ONE_BY_ONE,
          swallowTouches:true,//吞噬事件 不再传递
          onTouchBegan:this.touchbegan.bind(this),
          onTouchMoved:this.touchmoved,
          onTouchEnded:this.touchended
      },this);
        
    },
    onExit:function()
    {
        this._super();
        cc.log("即将消失");
    },
    touchbegan:function(touch,event)
    {
        cc.log("按下");
        
        var npc=this.getChildByTag(99);
        var x00=touch.getLocation().x-npc.x;
        var y00=touch.getLocation().y-npc.y;
        this.sprite.stopAllActions();
        

        var x000=(Math.abs(x00));
        var y000=(Math.abs(y00));
        
    if(x000>y000) 
    {   
        if(x00>=0)//shang
        {
              this.sprite.runAction(cc.animate(
              cc.animationCache.getAnimation("right")).repeatForever());
 
        }
         else if(x00<0)//xia
        {
            
             this.sprite.runAction(cc.animate(
             cc.animationCache.getAnimation("left")).repeatForever());
             
        } 
    }
    else if(x000<y000)   
    {     
        if(y00>=0)//shang
        {
              this.sprite.runAction(cc.animate(
              cc.animationCache.getAnimation("up")).repeatForever());
        }
         else if(y00<0)//xia
        {
             
             this.sprite.runAction(cc.animate(
             cc.animationCache.getAnimation("down")).repeatForever());
        }
    }
      
          action1 = new cc.moveTo(0.8, cc.p(touch.getLocation().x,touch.getLocation().y));
          act1 = new cc.spawn(action1);
          npc.runAction(cc.sequence(act1)); 
        
        return true;
    },
    touchmoved:function(touch,event)
    { 
        cc.log("移动");
    },
    touchend:function(touch,event)
    {
        cc.log("抬起");
    }
    
});

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});



本节作业地址如下:
http://www.cocoscvp.com/usercode/2016_04_20/294c606a4e4f6690354d4711a099cf2924dc4201/
级别: 新手上路
UID: 675687
精华: 0
发帖: 1
可可豆: 1 CB
威望: 1 点
在线时间: 0(时)
注册时间: 2018-12-20
最后登录: 2018-12-20
1 楼:  发表于: 2018-12-20 11:09    发自: Web Page
    

CocoaChina社区转载内容已尽可能注明出处,如未能核实来源或转发内容图片有权利瑕疵的,请及时联系社区进行修改或删除【联系方式QQ : 3442093904 邮箱:support@cocoachina.com】文章内容为作者独立观点,不代表CocoaChina社区立场。版权归原作者所有,如申请授权请联系作者,因文章侵权CocoaChina社区不承担任何法律及连带责任。

描述
快速回复

关注本帖(如果有新回复会站内信通知您)

发帖、回帖都会得到可观的积分奖励。查看论坛积分规则

按"Ctrl+Enter"直接提交
    顶部