読者です 読者をやめる 読者になる 読者になる

WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

【Cocos2d-x】Particle Designer v2 スタートアップガイド

OP

こんにちは、デザイナーの上松です。
以前Particle DesignerとCCParticleを解説した、「素敵エフェクトを作りましょう!How to CCParticleSystem! [Cocos2d-x]」を公開してからもう6ヶ月ほどになりました!

その間、Particle Designerのメジャーアップデートがあり、UIや制作補助機能が大幅にアップデートされました。
パーティクルの機能の方は同じのため、機能的に変化はなく、UIが大幅に整理されたのみとなっています。今回の記事ではParticle Designerに焦点を絞り、

・アップデートのポイント
・バージョン2のUI紹介
・パラメーターの配置解説(v2対応版)

以上の3点を記事にしたいと思います。


このブログをご覧の方はもうご存知かとは思いますが、Particle Designerは、
Cocos2d系フレームワーク向けのパーティクルを、GUIで便利に作成できるツールです。

詳細は公式HPへどうぞ!
Particle Designer | 71Squared

1. アップデートのポイント

重要なアップデートのポイントは以下の通りです。

1. 一つのプロジェクトで複数のパーティクルを作れるようになった(*重要)
2. 複数のパーティクルを同時に出力できるようになった
3. 画面解像度のプリセットが増えた・追加できるようになった
4. リファレンスとして背景画像をセットできるようになった(*重要)

(1)(2)は複数のパーティクルを組み合わせたエフェクトを作るときに威力発揮です!
以前は組み合わせのイメージを見るために勘に頼ったり、画像をPhotoshopで重ねて結果をイメージしていましたが、その手間がなくなりとても快適になりました。

(3)はとりあえず画面に出して大変なことにならないようになりました。
以前からありましたが、正確なサイズが定規で取れるので幸せに。

(4)は、合成後の結果をプレビューできるのでとても便利です!
これは重要です。本当に重要です。

2. バージョン2のUI紹介

こちらが新しいParticle Designerの画面です。

IMAGE1

左から順に、

・パーティクルのリスト「Particle Systems」
・プレビュー画面「Preview」
・設定画面「Settings」

で構成されています。

「Particle Systems」パネル

バージョンアップで新たに作られたパネルです。
複数のパーティクル、複数のエミッターを設定できます。

IMAGE2
▲複数のレイヤーを設定した例

各レイヤーのボタンで各種切り替え・設定ができます。

IMAGE3

a. 表示名は、保存されるパーティクル名になります
b. パーティクルの位置の設定です。
  点灯状態だと、位置を移動すると全体が移動に追従します。
  消灯状態だと、エミッターのみ移動に追従します。(発生済みの玉は元の位置にとどまります)
  この設定は、 Cocos2d-x内にもあるもので、位置をアニメーションさせる場合重要です。
c. リセットボタンです。
  resetSystem()と同様、一旦初期化されます。
d. 一時停止ボタンです。
  stopSystem()ではなく、現在の状態でとどまります。
e. 表示・非表示切り替えです。

また、下のボタンで出力設定と出力ができます。

IMAGE4

ギアマークをクリックすると、設定が表示されます。
ExportTypeはCocos2d-xなら「Plist」を選択します。
また、書き出し先を、Selectボタンから選択します。

設定が終わっていれば、Exportボタンを押すだけでパーティクルが書き出されるようになります。

「Preview」パネル

以前別窓になってたプレビュー部分です。

左下に背景色設定、右下に画面サイズを変更するボタンがあります。
ビューの部分に画像をドラッグ・アンド・ドロップすると背景画像を変更できます。

IMAGE5

「Settings」パネル

パーティクルの設定パネルです。
エミッター、パーティクル、色、テクスチャの4タブに分かれてます。
詳細は次の項目で紹介します。

3. パラメーターの配置解説(v2対応版)

バージョン2で大きく整理されたパラメーター類ですが、
タブになってしまったので、以前より探しにくくなってしまった印象です。
新しく始める方も、何がどこにあるの?という印象を受けられるかもしれません。

そこで、機能解説を含めて簡易なパラメータマップを作ってみました。
ぜひご活用ください!

IMAGE6

おまけ

他PCでの再現性はあまり確認しておりませんが、この記事の一番上で使っているパーティクルの
プロジェクトを公開します。
ゲームで動かす予定はなく15分ぐらいで作ったので、大盤振る舞いな設定になっています。ご注意を!

OpeningParticle.pdproject

それでは、今回はこのあたりで!