cocos2d-xでパーティクル・システムを使用する方法について紹介させて頂きます。
まずは、パーティクル・システムについての簡単な説明です。
パーティクル・システムとは、エミッターと呼ばれる放出器からパーティクル(粒子)を発生させ、炎・煙・水・火花等の不規則な形状をしているものを表現するためのモデリング技術です。
エミッターから発生するパーティクルの角度やスピードといったパラメータを設定することによって、さまざまなものを表現することが可能です。
cocos2d-xでパーティクル・システムを使用する方法は２種類あります。
- パーティクル作成ツールで作成したファイル(plist)を読み込む
- パーティクルの各種パラメータをソースコード上で直接設定する
どちらもパーティクル・システムを使用することが出来ますが、今回は前者の「パーティクル作成ツールで作成したファイル(plist)を読み込む」の方法で進めていきます。
パーティクル作成ツールには、Particle DesignerやParticle2dxがあります。
Particle2dxは、web上で利用出来る無料のパーティクル作成ツールです。
出力できるファイルはPlist,PNGとなります。
Particle Designerは、Macにしか対応しておらず6,355円(※1)と有料ですが、Plistの他にPexファイル、JSONファイル、LAPファイルの出力が可能なので、Starling(※2)等のcocos以外のフレームワークでもパーティクルを使用することが出来ます。
ファイル出力が出来ないという制限がありますが、ライセンス登録をしなくてもツールをインストールすることで使用出来るので、いきなりの購入に抵抗がある方は一度触ってみることをおすすめします。
※1.本記事作成時点での価格で、Particle DesignerVer1.0を購入済みの方はバージョンアップとなり、5,028円となります。
※2.FlashPlayer11の新機能である”Stage3D”にもとづいてつくられた2次元の描画用フレームワークです。
本記事で使用するツールはParticle Designerになります。
それでは、Particle Designerのインストールの手順です。
■本体のダウンロード
上記サイトより、Particle Designerをダウンロードしてきます。
■本体のインストール
ダウンロードしたファイルを解凍し、インストールを開始します。
特に変更する箇所はありませんので、インストーラーの指示通りに進めるだけで問題はないと思います。
■ライセンスの購入と登録
この作業はライセンス購入する方のみの作業となりますので、購入を考えていない方は読まずに飛ばして頂いて構いません。
＜ライセンスの購入＞
- 本体をダウンロードしたページにある「Buy Now」から購入ページへ
- New Customerタブ内の「Buy」をクリック ※Indie,Enterpriceのどちらを購入するかはライセンス供与ページよりご判断下さい
- 各種項目を入力し、注文の完了をクリック
購入手続きが完了すると、メールにてライセンスキーが送られてくるので、下記の手順でライセンスを登録する。
＜ライセンスの登録＞
登録していない場合はツール起動時にライセンス登録のダイアログが表示されるので、メールにて送られてきたライセンスキーを入力して登録を完了する。
■パーティクルの作成
Particle Designerを起動すると、デフォルトでエミッターが一つ用意されており、青白い炎のようなパーティクルがすでにあると思います。
最初は各パラメータが何に影響を与えるものかがわからないと思いますので、Particle Designerに付属しているサンプルを参考にしてみると良いでしょう。
サンプル一覧は右メニューの雲マークをクリックすると開くことが出来ます。
以下、各種パラメータの簡易表となります。
| Emitter Settings | ||
| Duration | 継続時間 | |
| Source Position Variance X | パーティクルの出現位置(x座標)の分散度 | |
| Source Position Variance Y | パーティクルの出現位置(y座標)の分散度 | |
| Maximum Particles | パーティクルの最大数 | |
| Emit Angle | パーティクルの角度 | |
| Emit Angle Variance | Emit Angleで設定した方向を中心とした左右への分散度 | |
| Type | typeでGravityを選択した場合 | |
| Speed | パーティクルの速さ | |
| Speed Variance | パーティクルの速さの分散度 | |
| X Gravity | x座標の重力を設定 | |
| Y Gravity | y座標の重力を設定 | |
| Radial Acceleration | 引き付けながら加速 | |
| Radial Acceleration Variance | 上記パラメーターの分散度 | |
| Tangential Acceleration | 回転しながら加速 | |
| Tangential Acceleration Variance | 上記パラメーターの分散度 | |
| typeでRadialを選択した場合 | ||
| Maximum Radius | 開始点の半径 | |
| Maximum Radius Variance | 開始点付近の分散度 | |
| Minimum Radius | 終点の半径 | |
| Minimum Radius Variance | 終点付近の分散度 | |
| Degrees Per Second | 1秒毎に進む角度 | |
| Degrees Per Second Acceleration | 上記パラメータの分散度 | |
| Particle Settings | ||
| Lifespan | パーティクルが消えるまでの総合時間 | |
| Lifespan Variance | 上記パラメーターの分散度 | |
| Start Size | パーティクル開始時のサイズ | |
| Start Size Variance | 上記パラメーターの分散度 | |
| End Size | パーティクル終点のサイズ | |
| End Size Variance | 上記パラメーターの分散度 | |
| Start Rotation | パーティクル開始時のテクスチャの回転角度 | |
| Start Rotation Variance | 上記パラメーターの分散度 | |
| End Rotation | パーティクル終了までの回転角度 | |
| End Rotation Variance | 上記パラメーターの分散度 | |
| Color Settings | ||
| Start Color | パーティクル開始時の色指定 | |
| Red Variance | start Colorを基準にした、Red要素の分散値 | |
| Green Variance | start Colorを基準にした、Green要素の分散値 | |
| Blue Variance | start Colorを基準にした、Blue要素の分散値 | |
| Alpha Variance | start Colorを基準にした、Alpha要素の分散値 | |
| End Color | パーティクル終了時の色指定 | |
| Red Variance | End Colorを基準にした、Red要素の分散値 | |
| Green Variance | End Colorを基準にした、Green要素の分散値 | |
| Blue Variance | End Colorを基準にした、Blue要素の分散値 | |
| Alpha Variance | End Colorを基準にした、Alpha要素の分散値 | |
| Blend Source・Blend Destination | ||
| 得られる効果 | Blend Source | Blend Destination |
| アルファブレンド | GL_SRC_ALPHA | GL_ONE_MINUS_SRC_ALPHA |
| 加算 | GL_ONE | GL_ONE |
| 加算 + アルファ | GL_SRC_ALPHA | GL_ONE |
| 乗算 | GL_DST_COLOR | GL_ZERO |
| スクリーン | GL_ONE_MINUS_DST_COLOR | GL_ONE |
| 反転 | GL_ONE_MINUS_DST_COLOR | GL_ZERO |
■ファイルの出力
下記の画面にある「Export」をクリックすると出力先の選択ダイアログがでるので、任意の場所を選択してOKを押す。
以上で、Particle Designerの使用方法についての説明は終了となります。
パラメータの設定次第では初めにご紹介した炎や水の他にも、爆発や雪・星空のように本当に色々なものが作成可能ですので、是非使用してみて下さい。
＜次回の更新について＞
次回は、作成したファイルをcocos2d-xで読み込み、実際に表示する方法についてご紹介します。