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課堂微信公共平臺,瞭解最新技術文章、圖書、教程資訊