Unity シェーダーグラフを使用した炎表現について解説します。

シェーダーグラフとは、グラフィカルなインターフェースでシェーダーを作成することができるUnityの標準機能です。
シェーダーグラフを使うことで、炎をリアルに表現することができます。ゲームの臨場感や迫力を高める上で重要な役割を果たします。
炎を表現する方法
Particle Systemを使う方法
Particle Systemは、点や線、面などの要素を使って炎を表現する方法です。パーティクルの動きや見た目を自由自在に設定することができます。
シェーダーグラフを使う方法
シェーダーグラフを使用することで、より高度な炎表現が可能になります。炎の形状、色、質感、アニメーションをより詳細に設定することができます。

今回はシェーダーグラフを使った方法について解説します!
シェーダーグラフを使用した炎表現の手順
炎表現の作成手順を以下のステップで解説します。特別なアセットやテクスチャは不要で、Unityでシェーダーグラフを使える環境さえあれば誰でもできるので、試してみましょう。
- ベースの作成(火の玉)
- 炎の形状の設定
- 燃え上がるアニメーションの設定
- 炎の質感の作り込み
火の玉の作成
まずは、ベースとなる火の玉を作ります。シェーダーグラフを新規作成して、エディターを開きます。
Sample Texture 2Dノードを作成し、テクスチャを選択します。今回は、Unityに標準で提供されているDefault-Particleを使用します。

自分で炎の形状を書いたものを使ってもOK!

multiplyを使ってColorと掛け合わせることで、色をつけます。
FragmentのAlphaにも接続し、黒い部分が透明になるようにします。

ColorのModeはHDRに設定して、Intensityを上げると光って見えます。

炎の形状の設定
ノイズノードを使って、火の形状を作成しましょう。
Sample Texture 2Dの後に、以下のノードを組み合わせます。
Gradient Noiseノードを使いますが、そのまま使うとノイズの効果が強くかかり過ぎてしまいます。


ノイズの効果がかかり過ぎで火に見えない!
ノイズ効果を柔らかくするために、Lerpノードを使います。
火の形状ができました。こちらが完成した様子です。ノイズノードのスケールを調整して火に見えるようにします。

補足:炎の形状をインスペクターでも調整できるようにしよう
LerpノードのTに接続しているのは、float型の変数です。Blackboardから作成してドラッグ&ドロップしましょう。
ここの値を変えることで、ノイズ効果の強さを調整できます。


他のパラメーターもインスペクターで調整できるようにしておくと便利です!
炎のアニメーションの設定
次は、炎にアニメーションを加えていきます。
Gradient Noiseノードをスクロールさせることで、炎が燃え上がっている様子を表現します。
Gradient Noiseノードの後ろに以下のようにノードを作成してつなぎましょう。
Vector2ノードのX軸を0、Y軸には負の値を入れることで、上に向かうようなアニメーションとなります。

これで、炎のアニメーションができました。

炎の質感の作成
ノイズノードをさらに組み合わせることで、炎の質感をさらに詳細に作ることができます。
例えば、今までに作成したGradient Noiseを使い回してみます。
Sample Texture 2Dの後で、Gradient Noiseと掛け合わせれば、複雑な形状の炎ができます。



色々なノイズを組み合わせてみて、お好みの炎エフェクトを作りましょう!
おわりに
シェーダーグラフを使った炎エフェクトの作り方の解説でした!
出来上がったシェーダーグラフには複数のノードやパラメーターがあり、一見複雑に見えますが、一つ一つ順を追って作成することでコツが掴めてきます。