Cocos2d-JS自定义粒子系统

阅读更多

除了使用Cocos2d-JS的11种内置粒子系统外，我们还可以通过创建ParticleSystem对象，并设置属性实现自定义粒子系统，通过这种方式完全可以实现我们说需要的各种效果的粒子系统。使用ParticleSystem自定义粒子系统至少有两种方式可以实现：代码创建和plist文件创建。
代码创建粒子系统需要手工设置这些属性，维护起来非常困难，我们推荐使用Particle Designer等粒子设计工具进行所见即所得的设计，这些工具一般会生成一个描述粒子的属性类表文件plist，然后通过类似下面的语句加载：
var particleSystem = new cc.ParticleSystem("res/snow.plist");
snow.plist是描述运动的属性文件，plist文件是一种XML文件，参考代码如下：

xml version="1.0" encoding="UTF-8"?>
>
<plist version="1.0">
<dict>
    <key>anglekey>
    <real>270real>
    <key>angleVariancekey>
    <real>5real>
    <key>blendFuncDestinationkey>
    <integer>771integer>
    <key>blendFuncSourcekey>
    <integer>1integer>
    <key>durationkey>
    <real>-1real>
    <key>emitterTypekey>
    <real>0.0real>
    <key>finishColorAlphakey>
    <real>1real>
    <key>finishColorBluekey>
    <real>1real>
    <key>finishColorGreenkey>
    <real>1real>
    <key>finishColorRedkey>
    <real>1real>
    <key>finishColorVarianceAlphakey>
    <real>0.0real>
    <key>finishColorVarianceBluekey>
    <real>0.0real>
    <key>finishColorVarianceGreenkey>
    <real>0.0real>
    <key>finishColorVarianceRedkey>
    <real>0.0real>
    <key>finishParticleSizekey>
    <real>-1real>
    <key>finishParticleSizeVariancekey>
    <real>0.0real>
    <key>gravityxkey>
    <real>0.0real>
    <key>gravityykey>
    <real>-10real>
    <key>maxParticleskey>
    <real>700real>
    <key>maxRadiuskey>
    <real>0.0real>
    <key>maxRadiusVariancekey>
    <real>0.0real>
    <key>minRadiuskey>
    <real>0.0real>
    <key>minRadiusVariancekey>
    <real>0.0real>
    <key>particleLifespankey>
    <real>3real>
    <key>particleLifespanVariancekey>
    <real>1real>
    <key>radialAccelVariancekey>
    <real>0.0real>
    <key>radialAccelerationkey>
    <real>1real>
    <key>rotatePerSecondkey>
    <real>0.0real>
    <key>rotatePerSecondVariancekey>
    <real>0.0real>
    <key>rotationEndkey>
    <real>0.0real>
    <key>rotationEndVariancekey>
    <real>0.0real>
    <key>rotationStartkey>
    <real>0.0real>
    <key>rotationStartVariancekey>
    <real>0.0real>
    <key>sourcePositionVariancexkey>
    <real>1200real>
    <key>sourcePositionVarianceykey>
    <real>0.0real>
    <key>speedkey>
    <real>130real>
    <key>speedVariancekey>
    <real>30real>
    <key>startColorAlphakey>
    <real>1real>
    <key>startColorBluekey>
    <real>1real>
    <key>startColorGreenkey>
    <real>1real>
    <key>startColorRedkey>
    <real>1real>
    <key>startColorVarianceAlphakey>
    <real>0.0real>
    <key>startColorVarianceBluekey>
    <real>0.0real>
    <key>startColorVarianceGreenkey>
    <real>0.0real>
    <key>startColorVarianceRedkey>
    <real>0.0real>
    <key>startParticleSizekey>
    <real>10real>
    <key>startParticleSizeVariancekey>
    <real>5real>
    <key>tangentialAccelVariancekey>
    <real>0.0real>
    <key>tangentialAccelerationkey>
    <real>1real>
    <key>textureFileNamekey>
    <string>snow.pngstring>
dict>
plist>

在上述的plist文件描述的属性和属性值都是成对出现，其中标签描述的是属性，描述的属性值。
plist文件中textureFileName属性指定了纹理图片，纹理图片宽高必须是2的n次幂，大小不要超过64x64像素，在美工设计纹理图片时候，不用关注太多细节，例如：设计雪花纹理图片时候，按照雪花是有6个角的，很多人会设计为下图所示的样式，而事实上我们需要的下图所示的渐变效果的圆点。

雪花图片

 

雪花粒子纹理图片

提示 描述粒子属性的plist文件，可以通过粒子系统设计工具生成，有关粒子系统工具使用大家可以参考本系列丛书的工具卷（《Cocos2d-JS实战（卷Ⅳ）：工具详解》）。
下面我们通过实现如下图所示的下雪粒子系统，介绍一下自定义粒子系统的实现。

下雪粒子系统实例

图中所示的下雪实例，使用plist文件创建，主要代码如下：

var HelloWorldLayer = cc.Layer.extend({

    ctor: function () {
        //////////////////////////////
        // 1. super init first
        this._super();
        var size = cc.director.getWinSize();


        var bg = new cc.Sprite("res/background-1.png");
        bg.x = size.width / 2;
        bg.y = size.height / 2;
        this.addChild(bg);


        var particleSystem = new cc.ParticleSystem("res/snow.plist");
        particleSystem.x = size.width / 2;
        particleSystem.y = size.height - 50;
        this.addChild(particleSystem);

        return true;
    }
});

从代码可见plist文件创建粒子系统要比代码创建简单很多，这主要是因为采用了plist描述粒子属性。

 

 

更多内容请关注最新Cocos图书《 Cocos2d-x实战：JS卷——Cocos2d-JS开发》

本书交流讨论网站：http://www.cocoagame.net

欢迎加入Cocos2d-x技术讨论群：257760386

更多精彩视频课程请关注智捷课堂Cocos课程：http://v.51work6.com

智捷课堂现推出Cocos会员，敬请关注： http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&categoryId=0

 

 

 

 

 

 

 

 

《Cocos2d-x实战 JS卷》现已上线，各大商店均已开售：

京东：http://item.jd.com/11659698.html

欢迎关注智捷iOS课堂微信公共平台，了解最新技术文章、图书、教程信息