Cocos2d-x中自定義粒子系統
阿新 • • 發佈：2019-02-10
除了使用Cocos2d-x的11種內建粒子系統外，我們還可以通過建立ParticleSystemQuad物件，並設定屬性實現自定義粒子系統，通過這種方式完全可以實現我們說需要的各種效果的粒子系統。使用ParticleSystemQuad自定義粒子系統至少有兩種方式可以實現：程式碼建立和plist檔案建立。
程式碼建立
所謂程式碼建立就是完全通過程式碼方式實現，其中所有的屬性全部是通過程式程式碼設定。這要求開發人員對於這些屬性值非常熟悉，而且這種方式無法預覽，只能通過程式執行看效果，調整，再執行看效果，再調整，因此比較麻煩。
要想實現如下圖所示的下雪粒子系統，我們當然可以通過前面介紹的方式實現，但本節我們先介紹通過自定義粒子系統實現。
程式碼建立的下雪粒子系統，主要程式碼如下：
bool HelloWorld::init() { if ( !Layer::init() ) { return false; } Size visibleSize = Director::getInstance()->getVisibleSize(); auto bg = Sprite::create("background-1.png"); bg->setPosition(Point(visibleSize.width/2, visibleSize.height /2)); this->addChild(bg); auto particleSystem = ParticleSystemQuad::createWithTotalParticles(200); ① //設定雪花粒子紋理圖片 particleSystem->setTexture(TextureCache::getInstance()->addImage("snow.png")); ② //設定發射粒子的持續時間-1表示永遠持續 particleSystem->setDuration(-1); //設定粒子的重力方向 particleSystem->setGravity(Point(0,-240)); //設定角度以及偏差 particleSystem->setAngle(90); particleSystem->setAngleVar(360); //設定徑向加速度以及偏差 particleSystem->setRadialAccel(50); particleSystem->setRadialAccelVar(0); //設定粒子的切向加速度以及偏差 particleSystem->setTangentialAccel(30); particleSystem->setTangentialAccelVar(0); // 設定粒子初始化位置偏差 particleSystem->setPosVar(Point(400,0)); //設定粒子生命期以及偏差 particleSystem->setLife(4); particleSystem->setLifeVar(2); //設定粒子開始時候旋轉角度以及偏差 particleSystem->setStartSpin(30); particleSystem->setStartSpinVar(60); //設定結束時候的旋轉角度以及偏差 particleSystem->setEndSpin(60); particleSystem->setEndSpinVar(60); //設定開始時候的顏色以及偏差 particleSystem->setStartColor(Color4F(1,1,1,1)); //設定結束時候的顏色以及偏差 particleSystem->setEndColor(Color4F(1,1,1,1)); //設定開始時候粒子大小以及偏差 particleSystem->setStartSize(30); particleSystem->setStartSizeVar(0); //設定粒子結束時候大小以及偏差 particleSystem->setEndSize(20.0f); particleSystem->setEndSizeVar(0); //設定每秒鐘產生粒子的數量 particleSystem->setEmissionRate(100); particleSystem->setPosition(Point(visibleSize.width/2, visibleSize.height + 50)); this->addChild(particleSystem); return true; }
上述第①行程式碼ParticleSystemQuad::createWithTotalParticles(200)是建立ParticleSystemQuad物件，靜態createWithTotalParticles函式是通過指定初始粒子數來建立粒子物件。
第②行程式碼是指定粒子的紋理，TextureCache::getInstance()->addImage("snow.png")語句可以通過指定的紋理圖片建立紋理物件Texture2D，貼圖的紋理圖片寬高必須是2的n次冪，大小不要超過64x64畫素，在美工設計紋理圖片時候，不用關注太多細節，例如：設計雪花紋理圖片時候，按照雪花是有6個角的，很多人會設計為 圖10-7所示的樣式，而事實上我們需要的圖10-8所示的漸變效果的圓點。
雪花圖片
雪花粒子紋理圖片
plist檔案建立
程式碼建立方式要維護很多屬性，要想手工調整這些屬性那是非常困難的事情，我們推薦使用Particle Designer等粒子設計工具進行所見即所得的設計，這些工具一般會生成一個描述粒子的屬性類表文件plist，然後通過類似下面的語句載入：
auto particleSystem =ParticleSystemQuad::create("snow.plist");
snow.plist是描述運動的屬性檔案，plist檔案是一種XML檔案，參考程式碼如下：
<?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檔案描述的屬性和屬性值都是成對出現，其中<key>標籤描述的是屬性，<real>描述的屬性值。plist檔案是描述粒子的屬性，使用的時候還需要有粒子紋理圖片，plist檔案中textureFileName屬性指定了紋理圖片，我們需要將plist檔案和紋理圖片放置到Resources目錄下面。
提示 描述粒子屬性的plist檔案，可以通過粒子系統設計工具生成，有關粒子系統工具使用大家可以參考我的TODO。
如圖所示的下雪例項，使用plist檔案建立，主要程式碼如下：
bool HelloWorld::init()
{
if ( !Layer::init() )
{
return false;
}
Size visibleSize = Director::getInstance()->getVisibleSize();
auto bg = Sprite::create("background-1.png");
bg->setPosition(Point(visibleSize.width/2, visibleSize.height /2));
this->addChild(bg);
auto particleSystem = ParticleSystemQuad::create("snow.plist");
particleSystem->setPosition(Point(visibleSize.width/2, visibleSize.height - 50));
this->addChild(particleSystem);
return true;
}從程式碼可見plist檔案建立粒子系統要比程式碼建立簡單很多，這主要是因為採用了plist描述粒子屬性。