Cocos2d-JS自定义粒子系统

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

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文件创建，主要代码如下：

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

从代码可见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课堂微信公共平台，了解最新技术文章、图书、教程信息