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

智捷課堂現推出Cocos會員，敬請關注：http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&amp;categoryId=0

《Cocos2d-x實戰 JS卷》現已上線，各大商店均已開售：

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

歡迎關注智捷iOS課堂微信公共平臺，瞭解最新技術文章、圖書、教程信息