パーティクルで魔法エフェクト(1) - 炎魔法編

ウィッチクライドでは、いくつかの魔法をParticle Systemを使って表現しています。

今回は炎魔法を紹介。

動画の1:02あたりで、炎魔法が発動しています。火炎弾ですね。手元でポッと点火して、モンスターに向かって発射、着弾と同時に破裂といったエフェクトです。

ちなみにウィッチクライドはCocos-2dを使っていますが、パーティクルの基本的な考え方は、どのSDKでも一緒です。例えば、Qtにもパーティクルシステムが用意されていますが、パラメタが若干異なるものの、使い方や考え方はやはり一緒です。

CCParticleSun

Cocos-2dでは、いくつかのパーティクルがテンプレートとして用意されていますが、火炎弾は、すべてCCParticleSunをベースに作っています。

CCParticleSunは、ある点を中心とした所定半径内に、速度・加速度ともに0の赤色パーティクルを発生させ続けるテンプレートです。ブレンド条件がスクリーンなため、重なれば重なるほど色が白くなります。そのため、中心部は白色に発光して、円周部は若干赤みを帯びます。円周もいい感じで揺らぐため、さながら太陽のように見えます。

着火エフェクト

CCParticleSunをベースに、いくつかパラメータをいじっています。

CCParticleSun* charge = [CCParticleSun node];
charge.scale = .8f;
charge.position = ccp(startPos.x+40, startPos.y);
charge.texture = [[CCTextureCache sharedTextureCache] addImage:@"flame@2x.png"];
charge.startSpinVar = 360;
charge.endSpinVar = 360;
charge.totalParticles = 100;
charge.duration = 0.8f;
charge.gravity = ccp(charge.position.x, charge.position.y + 100);

動画で確認すると、手元の炎が若干左上に流れているのがわかると思います。

これは、charge.gravity = ccp(charge.position.x, charge.position.y + 100);で、左上に重力点を置いているため、パーティクルがそっちに引き寄せられています。

また、パーティクル自体も、通常のCCParticleSunは半透明の正円(fire.png)ですが、ここではブーメランに近い形状のパーティクルを使用しています。

これがそうですが、真っ白で見えませんね。

射出エフェクト

着火エフェクトとは別のCCParticleSunインスタンスを使用しています。これは、CCParticleSunのパラメータそのままで、サイズだけ小さくしています。

そのCCParticleSunをそのままターゲットに向かって移動(CCMoveTo)させているだけです。中心点を移動しながらパーティクルを発生させ続けているため、いい感じに炎の尻尾が表現されています。

爆発エフェクト

これも素のCCParticleSunです。サイズを0.6から3.0倍に150msでアニメーションしているだけです。