Cocos2d-JS自定义粒子系统

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

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">  
  3. <plist version="1.0">  
  4. <dict>  
  5.     <key>angle</key>  
  6.     <real>270</real>      
  7.     <key>angleVariance</key>  
  8.     <real>5</real>  
  9.     <key>blendFuncDestination</key>  
  10.     <integer>771</integer>  
  11.     <key>blendFuncSource</key>  
  12.     <integer>1</integer>  
  13.     <key>duration</key>  
  14.     <real>-1</real>  
  15.     <key>emitterType</key>  
  16.     <real>0.0</real>  
  17.     <key>finishColorAlpha</key>  
  18.     <real>1</real>  
  19.     <key>finishColorBlue</key>  
  20.     <real>1</real>  
  21.     <key>finishColorGreen</key>  
  22.     <real>1</real>  
  23.     <key>finishColorRed</key>  
  24.     <real>1</real>  
  25.     <key>finishColorVarianceAlpha</key>  
  26.     <real>0.0</real>  
  27.     <key>finishColorVarianceBlue</key>  
  28.     <real>0.0</real>  
  29.     <key>finishColorVarianceGreen</key>  
  30.     <real>0.0</real>  
  31.     <key>finishColorVarianceRed</key>  
  32.     <real>0.0</real>  
  33.     <key>finishParticleSize</key>  
  34.     <real>-1</real>  
  35.     <key>finishParticleSizeVariance</key>  
  36.     <real>0.0</real>  
  37.     <key>gravityx</key>  
  38.     <real>0.0</real>  
  39.     <key>gravityy</key>  
  40.     <real>-10</real>  
  41.     <key>maxParticles</key>  
  42.     <real>700</real>  
  43.     <key>maxRadius</key>  
  44.     <real>0.0</real>  
  45.     <key>maxRadiusVariance</key>  
  46.     <real>0.0</real>  
  47.     <key>minRadius</key>  
  48.     <real>0.0</real>  
  49.     <key>minRadiusVariance</key>  
  50.     <real>0.0</real>  
  51.     <key>particleLifespan</key>  
  52.     <real>3</real>  
  53.     <key>particleLifespanVariance</key>  
  54.     <real>1</real>  
  55.     <key>radialAccelVariance</key>  
  56.     <real>0.0</real>  
  57.     <key>radialAcceleration</key>  
  58.     <real>1</real>  
  59.     <key>rotatePerSecond</key>  
  60.     <real>0.0</real>  
  61.     <key>rotatePerSecondVariance</key>  
  62.     <real>0.0</real>  
  63.     <key>rotationEnd</key>  
  64.     <real>0.0</real>  
  65.     <key>rotationEndVariance</key>  
  66.     <real>0.0</real>  
  67.     <key>rotationStart</key>  
  68.     <real>0.0</real>  
  69.     <key>rotationStartVariance</key>  
  70.     <real>0.0</real>  
  71.     <key>sourcePositionVariancex</key>  
  72.     <real>1200</real>  
  73.     <key>sourcePositionVariancey</key>  
  74.     <real>0.0</real>  
  75.     <key>speed</key>  
  76.     <real>130</real>  
  77.     <key>speedVariance</key>  
  78.     <real>30</real>  
  79.     <key>startColorAlpha</key>  
  80.     <real>1</real>  
  81.     <key>startColorBlue</key>  
  82.     <real>1</real>  
  83.     <key>startColorGreen</key>  
  84.     <real>1</real>  
  85.     <key>startColorRed</key>  
  86.     <real>1</real>  
  87.     <key>startColorVarianceAlpha</key>  
  88.     <real>0.0</real>  
  89.     <key>startColorVarianceBlue</key>  
  90.     <real>0.0</real>  
  91.     <key>startColorVarianceGreen</key>  
  92.     <real>0.0</real>  
  93.     <key>startColorVarianceRed</key>  
  94.     <real>0.0</real>  
  95.     <key>startParticleSize</key>  
  96.     <real>10</real>  
  97.     <key>startParticleSizeVariance</key>  
  98.     <real>5</real>  
  99.     <key>tangentialAccelVariance</key>  
  100.     <real>0.0</real>  
  101.     <key>tangentialAcceleration</key>  
  102.     <real>1</real>  
  103.     <key>textureFileName</key>  
  104.     <string>snow.png</string>  
  105. </dict>  
  106. </plist>  

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

雪花图片
 
雪花粒子纹理图片





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

下雪粒子系统实例

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

[html] view plaincopy
 
  1. var HelloWorldLayer = cc.Layer.extend({  
  2.       
  3.     ctor: function () {  
  4.         //////////////////////////////  
  5.         // 1. super init first  
  6.         this._super();  
  7.         var size = cc.director.getWinSize();  
  8.   
  9.   
  10.         var bg = new cc.Sprite("res/background-1.png");  
  11.         bg.x = size.width / 2;  
  12.         bg.y = size.height / 2;  
  13.         this.addChild(bg);  
  14.   
  15.   
  16.         var particleSystem = new cc.ParticleSystem("res/snow.plist");  
  17.         particleSystem.x = size.width / 2;  
  18.         particleSystem.y = size.height - 50;          
  19.         this.addChild(particleSystem);  
  20.           
  21.         return true;  
  22.     }  
  23. });  

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

 

 

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

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

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

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

 

 

 

 

 

 

 

 

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

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

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

posted @ 2015-04-07 08:53  智捷iOS课堂  阅读(436)  评论(0)  编辑  收藏  举报