Cocos2d-JS自定义粒子系统

概述除了使用Cocos2d-JS的11种内置粒子系统外，我们还可以通过创建ParticleSystem对象，并设置属性实现自定义粒子系统，通过这种方式完全可以实现我们说需要的各种效果的粒子系统。使用ParticleSystem自定义粒子系统至少有两种方式可以实现：代码创建和plist文件创建。 代码创建粒子系统需要手工设置这些属性，维护起来非常困难，我们推荐使用Particle Designer等粒子 除了使用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"?><!DOCTYPE pList PUBliC "-//Apple//DTD PList 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"><pList version="1.0"><dict>	<key>angle</key>	<real>270</real>		<key>angleVariance</key>	<real>5</real>	<key>blendFuncDestination</key>	<integer>771</integer>	<key>blendFuncSource</key>	<integer>1</integer>	<key>duration</key>	<real>-1</real>	<key>emitterType</key>	<real>0.0</real>	<key>finishcolorAlpha</key>	<real>1</real>	<key>finishcolorBlue</key>	<real>1</real>	<key>finishcolorGreen</key>	<real>1</real>	<key>finishcolorRed</key>	<real>1</real>	<key>finishcolorVarianceAlpha</key>	<real>0.0</real>	<key>finishcolorVarianceBlue</key>	<real>0.0</real>	<key>finishcolorVarianceGreen</key>	<real>0.0</real>	<key>finishcolorVarianceRed</key>	<real>0.0</real>	<key>finishParticleSize</key>	<real>-1</real>	<key>finishParticleSizeVariance</key>	<real>0.0</real>	<key>gravityx</key>	<real>0.0</real>	<key>gravityy</key>	<real>-10</real>	<key>maxParticles</key>	<real>700</real>	<key>maxRadius</key>	<real>0.0</real>	<key>maxRadiusVariance</key>	<real>0.0</real>	<key>minRadius</key>	<real>0.0</real>	<key>minRadiusVariance</key>	<real>0.0</real>	<key>particlelifespan</key>	<real>3</real>	<key>particlelifespanVariance</key>	<real>1</real>	<key>radialAccelVariance</key>	<real>0.0</real>	<key>radialacceleration</key>	<real>1</real>	<key>rotatePerSecond</key>	<real>0.0</real>	<key>rotatePerSecondVariance</key>	<real>0.0</real>	<key>rotationEnd</key>	<real>0.0</real>	<key>rotationEndVariance</key>	<real>0.0</real>	<key>rotationStart</key>	<real>0.0</real>	<key>rotationStartvariance</key>	<real>0.0</real>	<key>sourcepositionVariancex</key>	<real>1200</real>	<key>sourcepositionVariancey</key>	<real>0.0</real>	<key>speed</key>	<real>130</real>	<key>speedVariance</key>	<real>30</real>	<key>startcolorAlpha</key>	<real>1</real>	<key>startcolorBlue</key>	<real>1</real>	<key>startcolorGreen</key>	<real>1</real>	<key>startcolorRed</key>	<real>1</real>	<key>startcolorVarianceAlpha</key>	<real>0.0</real>	<key>startcolorVarianceBlue</key>	<real>0.0</real>	<key>startcolorVarianceGreen</key>	<real>0.0</real>	<key>startcolorVarianceRed</key>	<real>0.0</real>	<key>startParticleSize</key>	<real>10</real>	<key>startParticleSizeVariance</key>	<real>5</real>	<key>tangentialAccelVariance</key>	<real>0.0</real>	<key>tangentialacceleration</key>	<real>1</real>	<key>texturefilename</key>	<string>sNow.png</string></dict></pList>

在上述的pList文件描述的属性和属性值都是成对出现，其中<key>标签描述的是属性，<real>描述的属性值。
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&amp;categoryId=0

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

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

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

以上是内存溢出为你收集整理的Cocos2d-JS自定义粒子系统全部内容，希望文章能够帮你解决Cocos2d-JS自定义粒子系统所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。