Cocos2d-JS自定義粒子系統
阿新 • • 發佈：2019-02-03
除了使用Cocos2d-JS的11種內建粒子系統外，我們還可以通過建立ParticleSystem物件，並設定屬性實現自定義粒子系統，通過這種方式完全可以實現我們說需要的各種效果的粒子系統。使用ParticleSystem自定義粒子系統至少有兩種方式可以實現：程式碼建立和plist檔案建立。
程式碼建立粒子系統需要手工設定這些屬性，維護起來非常困難，我們推薦使用Particle Designer等粒子設計工具進行所見即所得的設計，這些工具一般會生成一個描述粒子的屬性類表文件plist，然後通過類似下面的語句載入：
var particleSystem = new cc.ParticleSystem("res/snow.plist");
snow.plist是描述運動的屬性檔案，plist檔案是一種XML檔案，參考程式碼如下：
plist檔案中textureFileName屬性指定了紋理圖片，紋理圖片寬高必須是2的n次冪，大小不要超過64x64畫素，在美工設計紋理圖片時候，不用關注太多細節，例如：設計雪花紋理圖片時候，按照雪花是有6個角的，很多人會設計為下圖所示的樣式，而事實上我們需要的下圖所示的漸變效果的圓點。
雪花圖片
雪花粒子紋理圖片
提示 描述粒子屬性的plist檔案，可以通過粒子系統設計工具生成，有關粒子系統工具使用大家可以參考本系列叢書的工具卷（《Cocos2d-JS實戰（卷Ⅳ）：工具詳解》）。
下面我們通過實現如下圖所示的下雪粒子系統，介紹一下自定義粒子系統的實現。
下雪粒子系統例項圖中所示的下雪例項，使用plist檔案建立，主要程式碼如下：
程式碼建立粒子系統需要手工設定這些屬性，維護起來非常困難，我們推薦使用Particle Designer等粒子設計工具進行所見即所得的設計，這些工具一般會生成一個描述粒子的屬性類表文件plist，然後通過類似下面的語句載入：
var particleSystem = new cc.ParticleSystem("res/snow.plist");
snow.plist是描述運動的屬性檔案，plist檔案是一種XML檔案，參考程式碼如下：
在上述的plist檔案描述的屬性和屬性值都是成對出現，其中<key>標籤描述的是屬性，<real>描述的屬性值。<?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檔案中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開發》歡迎加入Cocos2d-x技術討論群：257760386《Cocos2d-x實戰 JS卷》現已上線，各大商店均已開售：
歡迎關注智捷iOS課堂微信公共平臺，瞭解最新技術文章、圖書、教程資訊