Henry Blog

Javaer

0%

CVP认证学习笔记--(何小成)024--粒子动画

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

概念

本节课介绍如何使用在cocos中使用粒子动画，其中可以使用cocos中包含的11种系统定义好的粒子动画，也可以使用粒子编辑器自定义粒子动画，然后在cocos代码中使用自己定义的粒子动画。系统的11种默认粒子动画我分别截了图，不过粒子动画由于是动画，我截图是静态图，可能效果还是不大明显，大家还是用实际代码来看效果比较好

爆炸粒子效果

ParticleExplosion。属于半径模式。
爆炸粒子效果

火焰粒子效果

ParticleFire。属于重力径模式。
火焰粒子效果

烟花粒子效果

ParticleFireworks。属于重力模式。
烟花粒子效果

花粒子效果

ParticleFlower。属于重力模式。
花粒子效果

星系粒子效果

ParticleGalaxy。属于半径模式。
星系粒子效果

流星粒子效果

ParticleMeteor。属于重力模式。
流星粒子效果

漩涡粒子效果

ParticleSpiral。属于半径模式。
漩涡粒子效果

雪粒子效果

ParticleSnow。属于重力模式。
雪粒子效果

烟粒子效果

ParticleSmoke。属于重力模式。
烟粒子效果

太阳粒子效果

ParticleSun。属于重力模式。
太阳粒子效果

雨粒子效果

ParticleRain。属于重力模式
雨粒子效果

步骤

制作粒子动画

如果需要系统的粒子动画不能满足需求，可以使用粒子编辑器自己编辑一个粒子动画，我在mac系统使用的是ParticleDesigner，打开之后，有多种模板可以进行选择，选择完模板之后，再对各种细节进行调整，知道调整出满意的粒子动画，如下图：
ParticleDesigner
其中包括了调整面板以及预览面板，当调整结果满意之后，点击导出即可在相应的文件夹下导出程序中所需要的plist文件和png图片。

创建粒子

无论是使用系统提供的动画还是自定义的动画，首先需要创建相应的对象

1
2
3
4
// 使用自定义粒子动画
var myp = new cc.ParticleSystem("res/lizi.plist");
// 使用系统提供的粒子动画
var fire = new cc.ParticleFire();

设置纹理

系统粒子动画需要为动画设置纹理，自定义粒子动画一般会将粒子动画使用的纹理写在plist中

1
fire.texture = cc.textureCache.addImage("res/lizi.plist.png");

添加动画到图层

最后将粒子动画添加到图层，就能看见粒子动画在屏幕中播放

1
2
this.addChild(fire);
fire.setPosition(200, 200);

作业

本节作业：
主要了解所有的系统粒子动画以及掌握自定义粒子动画并加载到程序中。我在作业中实现了通过菜单选择查看不同的粒子动画，并且通过点击屏幕或在屏幕上滑动，粒子会跟着坐标移动。
作业代码实现如下：

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
var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function (index) {
        //////////////////////////////
        // 1. super init first
        this._super();
        var backMenu = new cc.MenuItemFont("返回",this.backCall,this);
        backMenu.setPosition(backMenu.width/2,cc.winSize.height-backMenu.height/2);
        var menu = new cc.Menu(backMenu);
        this.addChild(menu);
        menu.setPosition(0,0);
        //添加系统内置粒子效果
        var lizi;
        switch(index){
            case 1:
                lizi = new cc.ParticleFire();
                break;
            case 2:
                lizi = new cc.ParticleFireworks();
                break;
            case 3:
                lizi = new cc.ParticleFlower();
                break;
            case 4:
                lizi = new cc.ParticleGalaxy();
                break;
            case 5:
                lizi = new cc.ParticleMeteor();
                break;
            case 6:
                lizi = new cc.ParticleSpiral();
                break;
            case 7:
                lizi = new cc.ParticleSnow();
                break;
            case 8:
                lizi = new cc.ParticleSmoke();
                break;
            case 9:
                lizi = new cc.ParticleSun();
                break;
            case 10:
                lizi = new cc.ParticleRain();
                break;
            case 11:
                lizi = new cc.ParticleExplosion();
                break;
        }
        lizi.texture=cc.textureCache.addImage("res/ballfire.plist.png");
        lizi.setPosition(200,200);
        this.addChild(lizi);
        lizi.setTag(1);
        return true;
    },
    backCall:function(){
        cc.director.runScene(new MenuLayer());
    },
    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) {
        var x = touch.getLocationX();
        var y = touch.getLocationY();
        event.getCurrentTarget().getChildByTag(1).setPosition(x,y);
        return true;
    },
    touchmoved:function (touch,event) {
        var x = touch.getLocationX();
        var y = touch.getLocationY();
        event.getCurrentTarget().getChildByTag(1).setPosition(x,y);
        return true;
    },
    touchended:function () {

    }
});

var MenuLayer = cc.Layer.extend({
    onEnter:function () {
        this._super();
        var size = cc.winSize;
        // cocos中的各种系统粒子
        var file = new cc.MenuItemFont("火焰粒子",this.enterLayer,this);
        file.setPosition(size.width/2,size.height-file.height/2-20);
        file.setTag(1);
        var yanhua = new cc.MenuItemFont("烟花粒子",this.enterLayer,this);
        yanhua.setPosition(size.width/2,file.getPositionY()-yanhua.height/2-20);
        yanhua.setTag(2);
        var flower = new cc.MenuItemFont("花粒子",this.enterLayer,this);
        flower.setPosition(size.width/2,yanhua.getPositionY()-flower.height/2-20);
        flower.setTag(3);
        var star = new cc.MenuItemFont("星系粒子",this.enterLayer,this);
        star.setPosition(size.width/2,flower.getPositionY()-star.height/2-20);
        star.setTag(4);
        var flowerStar = new cc.MenuItemFont("流星粒子",this.enterLayer,this);
        flowerStar.setPosition(size.width/2,star.getPositionY()-flowerStar.height/2-20);
        flowerStar.setTag(5);
        var rotation = new cc.MenuItemFont("漩涡粒子",this.enterLayer,this);
        rotation.setPosition(size.width/2,flowerStar.getPositionY()-rotation.height/2-20);
        rotation.setTag(6);
        var snow = new cc.MenuItemFont("雪粒子",this.enterLayer,this);
        snow.setPosition(size.width/2,rotation.getPositionY()-snow.height/2-20);
        snow.setTag(7);
        var smoke = new cc.MenuItemFont("烟粒子",this.enterLayer,this);
        smoke.setPosition(size.width/2,snow.getPositionY()-smoke.height/2-20);
        smoke.setTag(8);
        var sun = new cc.MenuItemFont("太阳粒子",this.enterLayer,this);
        sun.setPosition(size.width/2,smoke.getPositionY()-sun.height/2-20);
        sun.setTag(9);
        var rain = new cc.MenuItemFont("雨粒子",this.enterLayer,this);
        rain.setPosition(size.width/2,sun.getPositionY()-rain.height/2-20);
        rain.setTag(10);
        var explosion = new cc.MenuItemFont("爆炸粒子",this.enterLayer,this);
        explosion.setPosition(size.width/2,rain.getPositionY()-explosion.height/2-20);
        explosion.setTag(11);
        var menu = new cc.Menu(file,yanhua,flower,star,flowerStar,rotation,snow,smoke,sun,rain,menu,explosion);
        menu.setPosition(0,0);
        this.addChild(menu);
    },
    enterLayer:function(obj){
        var layer = new HelloWorldLayer(obj.tag);
        cc.director.runScene(layer);
    }
});

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

最终效果

http://www.cocoscvp.com/usercode/2016_05_03/6766355ed49af56b6c56f001bfac96ae65823c8e/

大爷赏点儿呗.

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