パーティクルで炎のエフェクトを作成

CreativeStudio はパーティクルを使用して様々なエフェクトを作成できます。

ここでは、パーティクルとサンプルのテクスチャを使用して炎のエフェクトを作成する手順を説明します。

エフェクト ( パーティクル ) の作成

CreativeStudio のメニュー [作成]→[エフェクト] を選択します。

選択すると別ウィンドウで ParticleCtrCreationPanel が表示され、パーティクル名を任意で入力できます。

ここでは、パーティクル名を fire にします。

パーティクル名作成画像

パーティクル名を入力後、適用して閉じる、または適用を選択するとパーティクルが作成されます。

CreativeStudio の再生ボタンを押すと プレビューパネルにパーティクルが表示されます。

パーティクル作成画像01

エミッタの設定

エミッタパネルを使用してエミッタを設定します。

エミッタの形状や大きさ、放出するパーティクル量を設定できます。

(1)コンテンツパネルに表示されている fireEmitter をシングルクリックすると、プロパティパネルにエミッタパネルが表示されます。

パーティクル作成画像03

CreativeStudio のメニュー [ウィンドウ]→[プロパティパネル ] を選択するか、コンテンツパネルに表示されているエミッタのアイコンをダブルクリックすると、別ウィンドウでプロパティパネルが開き上記と同じエミッタの設定ができます。

エミッタ形状の変更

エミッタパネルでは、エミッタ形状を点、円盤、球、円柱、矩形、立方体から選択できます。

ここではエミッタ形状を球に変更し作業します。

パーティクル作成画像04

エミッタ形状を変更するとプレビューパネルでパーティクルの放出が変わるのが確認できます。

テクスチャ中間ファイルの読み込み

CreativeStudio のメニュー [ファイル]→[開く]→[中間ファイル] から以下の場所にある炎のテクスチャ中間ファイルを読み込みます。

%NW4C_ROOT%/SampleData/Effect/Intermediate/ManualResource/Fire_Particle/Fire_Anim.ctex

以下は、使用するテクスチャ画像です。テクスチャフォーマットは L8 を使用しています。

パーティクル作成画像02

炎のテクスチャ中間ファイルを読み込むと CreativeStudio の コンテンツパネルに Fire_anim が表示されます。

テクスチャには、4 パターンの炎が書かれています。これは後ほど説明するテクスチャパターンアニメーションのためです。

マテリアルの設定

マテリアルパネルを使用して CreativeStudio に読み込んだ炎のテクスチャ中間ファイルをパーティクルに貼り付けます。

(1)コンテンツパネルに表示されている fireMaterial をシングルクリックするとプロパティパネルに、マテリアルパネルが表示されます。

パーティクル作成画像05

マテリアルパネルには、標準モード、詳細モード、パーティクルモードが用意されています。

ここでは、マテリアルパネルの標準モードを使用して説明します。

マテリアルパネルの詳細については、こちらを参照してください。

テクスチャの追加

マテリアルパネルのテクスチャタブでテクスチャを変更します。

テクスチャ一覧のテクスチャ 0 タブのイメージをプルダウンから「Fire_anim」にします。

パーティクル作成画像06

Fire_anim を選択すると パーティクルに「Fire_anim」テクスチャが設定されます。

パーティクル作成画像07

マテリアルに使用するテクスチャや、カラーの設定は、マテリアルパネルのフラグメントタブにあるテクスチャコンバイナで行います。

テクスチャコンバイナの詳細は、こちらを参照してください。

パーティクルエフェクトの設定

パーティクルセットパネルを使用してパーティクル寿命の時間やアニメーションを設定します。

コンテンツパネルに表示されている「fireParticle」をシングルクリックします。

パーティクル作成画像09

CreativeStudio メインウィンドウの プロパティパネルに、パーティクルセットパネルが表示されますので以下の項目を変更します。

寿命の設定

ここではパーティクル寿命を設定します。

寿命の値を以下の数値に変更します。

パーティクル作成画像10

上記設定を行うことで 30f ~ 20f の間でパーティクル寿命の時間がランダムに変化します。

カラーの設定

パーティクルの色を変更します。

補足:
カラーサムネイルを左クリックすると、カラーピッカーがポップアップ表示され色の設定ができます。

パーティクル作成画像11

ここでのカラーは、パーティクルの頂点シェーダーの色のことです。

上記設定を行うと、パーティクルにカラーが反映されます。

パーティクル作成画像12

アニメーションの設定

ここでは、炎らしくするためアニメーションを作成します。

アルファのアニメーションを設定

パーティクルの頂点アルファにアニメーションを設定します。

アルファのアニメーションプルダウンメニューから「4 キー方式で前の値に上書き」を選択してください。

パーティクル作成画像13

「4 キー方式で前の値に上書き」の設定項目が表示されますので、以下の数値を設定します。

パーティクル作成画像22

補足:
4 キー方式とは、アニメーションのキー情報4 箇所のみで構成される負荷の軽いアニメーションです。
4 キー方式で前の値に上書きの詳細は、こちらを参照してください。

テクスチャに移動のアニメーションを設定

テクスチャの頂点 UV に移動アニメーションを設定して、テクスチャパターンアニメーションを作成します。

設定項目、テクスチャ座標 0 の「頂点 UVの移動」にあるプルダウンメニューからテクスチャパターンを選択して以下の設定をします。

パーティクル作成画像14

上記設定を行いますと CreativeStudio のプレビューパネルが以下のようになります。

パーティクル作成画像15

スケールの設定

パーティクルのスケールを変更してエフェクトの大きさと振れ幅を設定します。

スケールの値を以下の設定に変更します。

パーティクル作成画像16

振れ幅 ( % ) とは、パーティクル発生時の基準値にたいして、ランダムな値を入れる機能です。

振れ幅の計算式

基準値 ± ( 乱数 × 基準値 )

上記設定の X 軸 = 2 振れ幅 = 25 % にした場合の計算式は、2 ± ( 0.25 × 2 ) になり、ランダムの値は 1.5 ~ 2.5 の間になります。

スケールにアニメーションをつける

(1)スケールのアニメーションプルダウンメニューから「前の値に加算」を選択します。

(2)「前の値に加算」の設定項目が表示されますので、以下の値を設定します。

パーティクル作成画像17

補足:
上記の設定は、前のフレームの値に -0.02 を加算 ( 小さくする )する設定です。
実際の挙動は、フレームが進むにつれ -0.02 ずつ炎が小さくなります。

回転の設定

回転の設定では、パーティクルの X Y Z 軸への回転とパーティクル生成時の角速度を設定します。
回転の値を以下の設定に変更します。

パーティクル作成画像18
回転にアニメーションをつける

(1)回転のアニメーションプルダウンメニューから「前の値に加算」を選択します。

(2)「前の値に加算」の設定項目が表示されますので、ランダムテーブルのラジオボタンにチェックを入れます。

パーティクル作成画像27

補足:
ランダムテーブルにチェックを入れると、以下で作成する回転のアニメーションからランダムにキーを選択してアニメーションさせます。

カーブエディタパネルを開き回転の Z 軸にアニメーションを作成します。

Rotate の Z に以下のキーを作成します。

パーティクル作成画像23

前の値に加算を使用したアニメーションをカーブエディタパネルで表示させた場合の横軸と縦軸の値は以下になります。
横軸 : フレームの値
縦軸 : 加算するデフォルト値

速度にアニメーションを設定

(1)速度のアニメーションのプルダウンメニューから重力 ( 指定方向に加速 ) を選択して、追加ボタンを押します。

(2)重力(指定方向に加速)の設定項目が表示されますので、以下の設定に変更します。

パーティクル作成画像20

上記設定を行いますと、毎フレーム Y 軸方向に 0.02の重力がかかります 。

パーティクル作成画像21

パーティクルによる炎のエフェクトが作成されました。