Henry Blog

Javaer

0%

CVP认证学习笔记--(何小成)020--实现切图帧动画

发表于 更新于 分类于 阅读次数： 评论：

概念

本节内容是掌握cocos中的动画缓存，通过cc.animationCache.addAnimation，可以将预先写好的一组动画放入动画缓存，当一些事件触发时，如触摸点击屏幕精灵时，便可以通过cc.animationCache.getAnimation获取到先前缓存的动画。

步骤

添加帧序列

事先准备好的帧序列图片放在一张大图中，通过截取矩形区域来获得所需要的帧序列图片

1
2
3
for(var n=0;n<4;n++) {
    var sp1Nowframedown=new cc.SpriteFrame(sp1Texture,cc.rect(32*n,0,32,48));
}

创建动画

使用帧序列创建一个动画，动画播放0.1s

1
var sp1AnimationDown=new cc.Animation(sp1FrameDown,0.1);

添加精灵到缓存

把精灵帧动画添加到动画缓存中

1
cc.animationCache.addAnimation(sp1AnimationDown,"sp1down");

获取并运行动画

以上步骤完成后，就可以在事件中使用动画

1
cc.animate(cc.animationCache.getAnimation("sp1down")).repeatForever();

作业

作业内容是点击屏幕，英雄移动到该位置并且播放动画，跟上节课作业差不多，只不过这节课的动画通过动画缓存来获得，而上节课使用的是固定的动画。我在作业中实现了点击按钮可以切换精灵，在行走方向的判断上，我把屏幕在以人物为中心的坐标轴上，画两条对角线，根据分为四个区域，分别判断这四个区域为上下左右。点击相应区域实现人物相应的动画播放。由于是作业，所以代码也就不是那么规范了，看起来是有点乱的，在正式项目中，应该对这些方法进行良好的封装。作业代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    chooseRole:0,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();
        //添加背景
        var bg=new cc.Sprite(res.bg_jpg);
        this.addChild(bg);
        bg.setPosition(cc.winSize.width/2,cc.winSize.height/2);
        sp1Texture=cc.textureCache.addImage("res/1.png");
        sp2Texture=cc.textureCache.addImage("res/2.png");
        // 精灵1
        var sp1FrameUp=[];
        var sp1FrameDown=[];
        var sp1FrameLeft=[];
        var sp1FrameRight=[];
        // 精灵2
        var sp2FrameUp=[];
        var sp2FrameDown=[];
        var sp2FrameLeft=[];
        var sp2FrameRight=[];
         //添加帧序列
        for(var n=0;n<4;n++) {
            // 精灵1
          var sp1Nowframedown=new cc.SpriteFrame(sp1Texture,cc.rect(32*n,0,32,48));
          var sp1Nowframeleft=new cc.SpriteFrame(sp1Texture,cc.rect(32*n,48,32,48));
          var sp1Nowframeright=new cc.SpriteFrame(sp1Texture,cc.rect(32*n,48*2,32,48));
          var sp1Nowframeup=new cc.SpriteFrame(sp1Texture,cc.rect(32*n,48*3,32,48));
          sp1FrameDown.push(sp1Nowframedown);
          sp1FrameLeft.push(sp1Nowframeleft);
          sp1FrameRight.push(sp1Nowframeright);
          sp1FrameUp.push(sp1Nowframeup);
          // 精灵2
          var sp2Nowframedown=new cc.SpriteFrame(sp2Texture,cc.rect(32*n,0,32,48));
          var sp2Nowframeleft=new cc.SpriteFrame(sp2Texture,cc.rect(32*n,48*1,32,48));
          var sp2Nowframeright=new cc.SpriteFrame(sp2Texture,cc.rect(32*n,48*2,32,48));
          var sp2Nowframeup=new cc.SpriteFrame(sp2Texture,cc.rect(32*n,48*3,32,48));
          sp2FrameUp.push(sp2Nowframeup); 
          sp2FrameDown.push(sp2Nowframedown);
          sp2FrameLeft.push(sp2Nowframeleft);
          sp2FrameRight.push(sp2Nowframeright);
        }
        //创建动画
        // 精灵1
        var sp1AnimationUp=new cc.Animation(sp1FrameUp,0.1);
        var sp1AnimationDown=new cc.Animation(sp1FrameDown,0.1);
        var sp1AnimationLeft=new cc.Animation(sp1FrameLeft,0.1);
        var sp1AnimationRight=new cc.Animation(sp1FrameRight,0.1);
         // 精灵2
        var sp2AnimationUp=new cc.Animation(sp2FrameUp,0.1);
        var sp2AnimationDown=new cc.Animation(sp2FrameDown,0.1);
        var sp2AnimationLeft=new cc.Animation(sp2FrameLeft,0.1);
        var sp2AnimationRight=new cc.Animation(sp2FrameRight,0.1);
        //添加到缓存里
        // 精灵1
        cc.animationCache.addAnimation(sp1AnimationUp,"sp1up");
        cc.animationCache.addAnimation(sp1AnimationDown,"sp1down");
        cc.animationCache.addAnimation(sp1AnimationLeft,"sp1left");
        cc.animationCache.addAnimation(sp1AnimationRight,"sp1right");
        // 精灵2
        cc.animationCache.addAnimation(sp2AnimationUp,"sp2up");
        cc.animationCache.addAnimation(sp2AnimationDown,"sp2down");
        cc.animationCache.addAnimation(sp2AnimationLeft,"sp2left");
        cc.animationCache.addAnimation(sp2AnimationRight,"sp2right");
        //创建animate并运行
        this.sprite=new cc.Sprite(sp1Texture,cc.rect(32,0,32,48));
        this.chooseRole=1;// 默认选择鸣人
        this.addChild(this.sprite);
        this.sprite.setTag(1);
        this.sprite.setScale(4);
        this.sprite.setPosition(200,200);
        //添加按钮改变精灵
        var sp1=new cc.MenuItemFont("选鸣人",this.callback,this);
        var sp2=new cc.MenuItemFont("选小樱",this.callback,this);
        sp1.setTag(11);
        sp2.setTag(12);
        sp1.setPositionY(50);
        var menu=new cc.Menu(sp1,sp2);
        this.addChild(menu);
        return true;
    },
    getRole:function(){
        return this.chooseRole;
    },
    callback:function(obj){
        switch(obj.tag){
            case 11://鸣人
                this.sprite.stopAllActions();
                this.sprite.setTexture(cc.textureCache.addImage("res/1.png"),cc.rect(32,0,32,48));
                this.chooseRole=1;
                break;
            case 12://小樱
                this.sprite.stopAllActions();
                this.sprite.setTexture(cc.textureCache.addImage("res/2.png"),cc.rect(32,0,32,48));
                this.chooseRole=2;
                break;
        }
    },
    onEnter:function(){
        this._super();
        //添加触屏事件
        cc.eventManager.addListener({
           event:cc.EventListener.TOUCH_ONE_BY_ONE,
           swallowTouches:true,//吞噬事件 不再传递
           onTouchBegan:this.touchbegan,
           onTouchMoved:this.touchmoved,
           onTouchEnded:this.touchended
       },this);
    },
    touchbegan:function(touch,event){
        var x = touch.getLocation().x;
        var y = touch.getLocation().y;
        var bn = event.getCurrentTarget().getChildByTag(1);
        // 走路时间
        var time = Math.round(Math.sqrt(Math.pow(x-bn.getPositionX(),2)+Math.pow(y-bn.getPositionY(),2)))/100;
        bn.stopAllActions();
        if(x<bn.getPositionX()){// 点击人物左侧
            if(Math.abs(x-bn.getPositionX())/Math.abs(y-bn.getPositionY())<1){
                if(y<bn.getPositionY()){
                    //  向下走
                    var role = Number(event.getCurrentTarget().getRole());
                    var act=role==1?cc.animate(cc.animationCache.getAnimation("sp1down")).repeatForever():cc.animate(cc.animationCache.getAnimation("sp2down")).repeatForever();
                    bn.runAction(act);
                    bn.runAction(cc.sequence(cc.moveTo(time,cc.p(x,y)),cc.callFunc(
                                function(sprite){
                                    sprite.stopAllActions();
                                },event.getCurrentTarget().sprite)));
                }else{
                    // 向上走
                     var role = event.getCurrentTarget().getRole();
                    var act=role==1?cc.animate(cc.animationCache.getAnimation("sp1up")).repeatForever():cc.animate(cc.animationCache.getAnimation("sp2up")).repeatForever();
                    bn.runAction(act);
                    bn.runAction(cc.sequence(cc.moveTo(time,cc.p(x,y)),cc.callFunc(
                                function(sprite){
                                    sprite.stopAllActions();
                                },event.getCurrentTarget().sprite)));
                }
            } else if(Math.abs(x-bn.getPositionX())/Math.abs(y-bn.getPositionY())>=1){// 向左走
                var role = event.getCurrentTarget().getRole();
                var act=role==1?cc.animate(cc.animationCache.getAnimation("sp1left")).repeatForever():cc.animate(cc.animationCache.getAnimation("sp2left")).repeatForever();
                bn.runAction(act);
                bn.runAction(cc.sequence(cc.moveTo(time,cc.p(x,y)),cc.callFunc(
                            function(sprite){
                                sprite.stopAllActions();
                            },event.getCurrentTarget().sprite)));
            }
        }else if(x>bn.getPositionX()){
           if(Math.abs(x-bn.getPositionX())/Math.abs(y-bn.getPositionY())<1){
                if(y<bn.getPositionY()){
                    //  向下走
                    var role = event.getCurrentTarget().getRole();
                    var act=role==1?cc.animate(cc.animationCache.getAnimation("sp1down")).repeatForever():cc.animate(cc.animationCache.getAnimation("sp2down")).repeatForever();
                    bn.runAction(act);
                    bn.runAction(cc.sequence(cc.moveTo(time,cc.p(x,y)),cc.callFunc(
                                function(sprite){
                                    sprite.stopAllActions();
                                },event.getCurrentTarget().sprite)));
                }else{
                    // 向上走
                    var role = event.getCurrentTarget().getRole();
                    var act=role==1?cc.animate(cc.animationCache.getAnimation("sp1up")).repeatForever():cc.animate(cc.animationCache.getAnimation("sp2up")).repeatForever();
                    bn.runAction(act);
                    bn.runAction(cc.sequence(cc.moveTo(time,cc.p(x,y)),cc.callFunc(
                                function(sprite){
                                    sprite.stopAllActions();
                                },event.getCurrentTarget().sprite)));
                }
            } else if(Math.abs(x-bn.getPositionX())/Math.abs(y-bn.getPositionY())>=1){// 向右走
                var role = event.getCurrentTarget().getRole();
                var act=role==1?cc.animate(cc.animationCache.getAnimation("sp1right")).repeatForever():cc.animate(cc.animationCache.getAnimation("sp2right")).repeatForever();
                bn.runAction(act);
                bn.runAction(cc.sequence(cc.moveTo(time,cc.p(x,y)),cc.callFunc(
                            function(sprite){
                                sprite.stopAllActions();
                            },event.getCurrentTarget().sprite)));
            }
        }
        return true;
    },
    touchmoved:function(){
        return true;
    },
    touchended:function(touch,event){
        return true;
    }
});

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

最终效果

http://www.cocoscvp.com/usercode/2016_04_24/3faf3ea09347be95a5fd15287ff32724995d4f09/

大爷赏点儿呗.

欢迎关注我的其它发布渠道