エフェクトについて

こんにちは、トータルクリエイト部のきのこです。今回は弊社HPで公開中の「メタバース×HPスターターパック版」で使われているエフェクトについてお話したいと思います。
エフェクトとは
「メタバース×HPスターターパック版」のメタバース空間の色々な場所で見ることのできるエフェクトですが、エフェクトという単語を耳にしたことはあるけれど具体的に分からない、そもそも聞いたこともない方のために簡単に説明していきます。
エフェクトとは、映像や音楽、音声などに加えることのできる効果や演出表現のことです。
メタバースやゲームのようなバーチャル空間で使われるものとしては、メラメラと燃える炎やその炎から出る煙、何かがピカっと光った時の光など様々な表現に使われます。
炎や煙のように現実世界で実際に目にすることのできるもの以外にも、目にできない電磁波や音の振動なども視覚的に表現することができます。
エフェクトを作ってみよう
エフェクトについての簡単な説明が終わったところで実際にエフェクトを作ってみましょう。今回作るエフェクトは「メタバース×HPスターターパック版」の田舎のかまどや囲炉裏で見ることのできる炎エフェクトです。
エフェクトは様々なツールで作成することができますが、「メタバース×HPスターターパック版」ではPhotoshopとUnityのパーティクルシステムという機能を使用して作成しています。
このブログでもPhotoshopとUnityを使用して説明していきますので、Unityでのエフェクト作成に興味のある方はぜひ一緒に作ってみてくださいね。
まずエフェクトの元となるテクスチャをPhotoshopで用意します。
フィルターの描画から雲模様1を選択。もう一度フィルターからフィルターギャラリーを開き、ストローク(暗)を選択します。バランス5、黒の適用度7、白の適用度6と設定します。この数値の設定でエフェクトの雰囲気が変わりますので、色々試してみてください。

フィルターの設定をした雲模様のレイヤーの上に新規レイヤーを作成し、白から黒の円形グラデーションを塗ります。円形グラデーションのレイヤーを乗算レイヤーに変更して炎の元となるテクスチャは完成です。

上の画像が完成した炎テクスチャです。さっそくこのテクスチャを使用してUnityでエフェクトを作っていきましょう。
まずは先ほど作成した炎テクスチャを割り当てるためのFireと名前を付けたマテリアルを作成します。

Shaderの項目を画像と同じように変更し、右側のテクスチャの欄に炎テクスチャを割り当てます。これでマテリアルの設定は完了です。次にエフェクトを出すためのパーティクルシステムの設定を行います。

まずパーティクルシステムの生成をします。パーティクルシステムはゲームオブジェクトのエフェクトからパーティクルシステムを選択することで生成されます。
生成されたパーティクルシステムは分かりやすくFireなど作成したいものの名前に変更しておきましょう。それでは設定を行っていきます。

レンダラーの項目からパーティクルシステムで生成される粒の見た目を設定します。レンダラーを開きマテリアルの欄に作成したFireマテリアルを割り当てます。これで粒の見た目が先ほど作成した炎テクスチャになります。

この段階ではまだ炎テクスチャがそのまま上へ放出されているだけですので、設定を行います。

まずパーティクルシステムで生成される粒の表示される時間や、表示されている間の大きさ、回転、色の設定を行います。重力モディファイアの欄では重力の強さを設定します。

次に放出と形状の設定。放出では一秒間に生成される粒の数を設定します。
形状では目には見えませんが、パーティクルシステムの粒がどのような形を基準に放出されるかを設定します。今回の炎エフェクトでは円形に放出されてほしいのでスフィアを選択します。スフィアに選択したら、半径もあわせて設定を行います。半径を小さくすることによってパーティクルの粒の生成される範囲が狭まります。

パーティクルの生成される数と範囲が設定出来たら、粒が表示されている間の色とサイズ、速度によってサイズと回転が変わるように設定をします。生存期間の色では炎が徐々に透明になるようにしておきましょう。
生存期間のサイズと速度によるサイズでは、カーブが上の画像のような形になるように設定をしてください。速度による回転はZを45にします。
最後にノイズの設定です。

ノイズを設定すると、エフェクトに揺らぎを与えることができます。強さと頻度、スクロール速度を設定します。強さの数値が大きいほどエフェクトが大きく揺らぎます。
ここまでたくさん設定をしてきましたがこれで炎エフェクトは完成です。

今回の炎テクスチャの作成手順はあくまで一例ですのでエフェクトを作成される際はご自身のイメージにあった設定を行ってください。また炎テクスチャの数値を応用すると煙エフェクトの作成も可能です。煙エフェクトも「メタバース×HPスターターパック版」の田舎で見ることができますのでぜひ、どのように作成されているか考えながら見てみてくださいね。
↓メタバース×HPスターターパック版 リンク↓
https://comfort-inc.co.jp/lp_meta/lp_metaverse_starter-pack.html