Henry Blog

Javaer

0%

CVP认证学习笔记--(何小成)022--加载帧动画

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

概念

本节课介绍如何使用Animation Editor创建帧动画，然后在cocos中加载编辑好的动画，通过一些动画编辑器如Animation Editor能使我们在开发动画的时候更加方便，在cocos中，可以通过ArmatureDataManager加载自定义好的帧动画。

步骤

首先需要下载Animation Editor（从大海老师网盘中取win版的），网上没找到mac版的，我只能找了一个win的电脑装了Animation Editor，并且将网盘中的图片资源做了四个动画，分别是stand、walk、punch、kick，代表robert的四个状态，最好之后由酋长上传到了作业资源中。然后再根据作业要求在程序中加载我制作好的帧动画。实际上，也有别的动画编辑器，包括现在Animation Editor也继承到了Cocos Studio中，本节课就Animation Editor为例进行讲解。

制作帧动画

制作帧动画的过程很简单，通过Animation Editor使得动画编辑非常简单，只需要把需要的资源拖进资源中，然后选择形体模式，将第一张图片放在屏幕中心，如下图：
![Animation editor形体模式](http://7xnnwn.com1.z0.glb.clouddn.com/2.pic.jpg）
选择动画模式，将剩下的四张图片拖放到左下角眼睛的地方，然后就能根据多张图片自动创建一个帧动画，如下图：
![Animation editor动画模式](http://7xnnwn.com1.z0.glb.clouddn.com/1.pic.jpg）
创建完动画之后，可以预览，确定没有问题就可以导出做好的动画，导出的文件有png、plist和ExportJson三个文件。

添加文件

先将json文件导入到armatureDataManager中

1
2
//添加文件
ccs.armatureDataManager.addArmatureFileInfo(res.punch_json);

创建动画层

通过Armature创建动画层，并设置播放第几个动画，设置坐标之后添加到图层中，就可以看到一个播放着动画的Robert

1
2
3
4
var punch=new ccs.Armature("punch");
punch.getAnimation().playWithIndex(0);//通过0 1 2可以切换不同的动画
punch.setPosition(this.npcX,this.npcY);
this.addChild(punch);

动画回调函数

如果需要动画播放之后回调某个函数

1
2
3
4
5
6
7
8
9
10
11
12
13
// 设置动画回调函数
punch.getAnimation().setMovementEventCallFunc(this.animationEvent,this); 
// 动作结束时执行相关回调
animationEvent:function (armature, movementType, movementID) {   
    // TODO
    // movementType有如下几种类型：
    // 1.boneFrameEvent
    // 2.complete
    // 3.loopComplete
    // 4.movementChange
    // 5.movementFameEvent
    // 6.start
},

作业

本节作业：
// 实现罗伯特走路和攻击的动画，然后保存
// 发到limu@h5edu.cn
// 让老师协助上传到服务器
// 然后在代码中加载自己编辑的动画
// 当用户点击屏幕则播放攻击动画动画播放完成则继续播放走路动画
我实现了点击屏幕，Robert可以播放行走动画，并走到该点，走到目的地时播放stand动画，右边提供踢和打两个按钮，点击分别会播放kick和punch动画
作业代码实现如下：

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

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    direction:"right",
    npcX:100,
    npcY:100,
    isStand:true,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();

        // 实现罗伯特走路和攻击的动画，然后保存
        // 发到limu@h5edu.cn
        // 让老师协助上传到服务器
        // 然后在代码中加载自己编辑的动画
        // 当用户点击屏幕则播放攻击动画动画播放完成则继续播放走路动画
        var size = cc.winSize;
        // 拳击按钮
        var punch = new cc.MenuItemFont("打",this.punchCall,this);
        punch.setPosition(size.width-100,100);
        // 脚踢按钮
        var kick = new cc.MenuItemFont("踢",this.kickCall,this);
        kick.setPosition(size.width-100,150);
        var menu=new cc.Menu(punch,kick);
        menu.setPosition(0,0);
        this.addChild(menu);
        //添加文件
        ccs.armatureDataManager.addArmatureFileInfo(res.stand_json);
        //创建动画层
        var stand=new ccs.Armature("stand");
        stand.getAnimation().playWithIndex(0);//通过0 1 2可以切换不同的动画
        stand.setPosition(this.npcX,this.npcY);
        this.addChild(stand);
        stand.setTag(1);
        return true;
    },
    // 拳击动画
    punchCall:function(){
        this.npcX = this.getChildByTag(1).getPositionX();
        //移除当前动画
        this.removeChildByTag(1);
        //添加文件
        ccs.armatureDataManager.addArmatureFileInfo(res.punch_json);
        //创建动画层
        var punch=new ccs.Armature("punch");
        punch.getAnimation().playWithIndex(0);//通过0 1 2可以切换不同的动画
        punch.setPosition(this.npcX,this.npcY);
        this.addChild(punch);
        punch.setTag(1);
        
        this.isStand = false;
        punch.getAnimation().setMovementEventCallFunc(this.animationEvent,this);  //为Armature添加一个事件监听
        
    },
    // 踢腿动画
    kickCall:function(){
        this.npcX = this.getChildByTag(1).getPositionX();
        //移除当前动画
        this.removeChildByTag(1);
        //添加文件
        ccs.armatureDataManager.addArmatureFileInfo(res.kick_json);
        //创建动画层
        var kick=new ccs.Armature("kick");
        kick.getAnimation().playWithIndex(0);//通过0 1 2可以切换不同的动画
        kick.setPosition(this.npcX,this.npcY);
        this.addChild(kick);
        kick.setTag(1);
        
        this.isStand = false;
        kick.getAnimation().setMovementEventCallFunc(this.animationEvent,this);  //为Armature添加一个事件监听
        
    },
    // 动作结束时播放stand动画
    animationEvent:function (armature, movementType, movementID) {   //当事件loopComplete发生时触发下一个动作；
        if(!this.isStand){
            //移除当前动画
            this.removeChildByTag(1);
            //添加文件
            ccs.armatureDataManager.addArmatureFileInfo(res.stand_json);
            //创建动画层
            var stand=new ccs.Armature("stand");
            stand.getAnimation().playWithIndex(0);//通过0 1 2可以切换不同的动画
            stand.setPosition(this.npcX,this.npcY);
            this.addChild(stand);
            stand.setTag(1);
            this.isStand = true;
        }
    },
    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);
        return true;
    },
    touchbegan:function(touch,event){
        event.getCurrentTarget().npcX = event.getCurrentTarget().getChildByTag(1).getPositionX();
        // 走路动画
        //移除当前动画
        event.getCurrentTarget().removeChildByTag(1);
        //添加文件
        ccs.armatureDataManager.addArmatureFileInfo(res.walk_json);
        //创建动画层
        var walk=new ccs.Armature("walk");
        walk.getAnimation().playWithIndex(0);//通过0 1 2可以切换不同的动画
        walk.setPosition(event.getCurrentTarget().npcX,event.getCurrentTarget().npcY);
        event.getCurrentTarget().addChild(walk);
        walk.setTag(1);
        
        var x = touch.getLocation().x;
        var y = event.getCurrentTarget().npcY;
        var bn = event.getCurrentTarget().getChildByTag(1);
        bn.stopAllActions();
        // 走路时间
        var time = Math.round(Math.sqrt(Math.pow(x-bn.getPositionX(),2)+Math.pow(y-bn.getPositionY(),2)))/100;
        bn.runAction(cc.sequence(cc.moveTo(time,cc.p(x,y)),cc.callFunc(function(bn){
            var layer = bn.parent;
            //移除当前动画
            bn.removeFromParent();
            //添加文件
            ccs.armatureDataManager.addArmatureFileInfo(res.stand_json);
            //创建动画层
            var stand=new ccs.Armature("stand");
            stand.getAnimation().playWithIndex(0);//通过0 1 2可以切换不同的动画
            stand.setPosition(bn.getPositionX(),bn.getPositionY());
            layer.npcX = bn.getPositionX();
            layer.npcY = bn.getPositionY();
            layer.addChild(stand);
            stand.setTag(1);
            layer.isStand = true;
        },bn)));   
        return true;
    },
    touchmoved:function(){
    },
    touchended:function(){
    }
});

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

最终效果

http://www.cocoscvp.com/usercode/2016_04_30/785bc6b6db98a170b123a8151f7e965d4132ba3c/

大爷赏点儿呗.

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