【Unity VFX Graph入門】Fire and Smoke Effect(1/3)

1. Home
2. VFX & Shader

もくじ

1. 炎と煙のエフェクト・導入編
   • はじめに
   • Flipbook
   • Normal Map
   • HDRPプロジェクトのセットアップ
2. スモーク・エフェクト
3. ファイア・エフェクト

はじめに

Making Fire and Smoke Effect With Unity VFX Graph | Work Scape #5

BrackeysのYouTubeチャンネルで公開されているビデオ「 FIRE AND SMOKE with Unity VFX Graph!」を参考に、Unity VFX GraphでFire and Smokeエフェクトを作る。完成後のエフェクトのイメージを最初に載せておく。( 1.1)

また、VFX Graphでのエフェクトの作成プロセスはWork Scape Videoとしても作成したので、併せて参照してほしい。

1.1 完成イメージ - Unity Editor

使用した各プログラムのバージョンは下記の通りとなる。先日、Unity 2020バージョンのLTS版がリリースされたので次回は2020.3に移行しようかと考えている。

• Unity 2019.4.22 LTS
• Visual Effect Graph 7.5.3

Flipbook

煙や炎などの動きを表現するために単一イメージのTextureではなく、複数のイメージシーケンスを1つのファイルにまとめてイメージ化したものがある。これをFlipbook（パラパラアニメ）と呼んでいる。

Flipbookとなる素材イメージを手に入れたい。Unity公式のブログ記事「 Free VFX Image Sequences & Flipbooks」から各種Flipbookのサンプルがフリーでダウンロードできる。( 1.2)

このページにはスモーク以外にも爆発や雲、炎などのFlipbookが公開されている。煙のイメージに近い「WispySmoke01」のFlipbookイメージをダウンロードする。( 1.3)

Flipbookを見るとタイル状に複数のイメージが並んでいる。この画像ファイルは8x8のタイル状になっており64個のイメージが含まれている。( 1.4, 1.5)

Normal Map

スモークの立体感を出すためにNormal Mapと言われるテクスチャ画像を使う。Flipbookとしてダウンロードした煙のシーケンスファイルにはNormal Mapがないので自分で作る必要がある。

Normal Mapは、Photoshopでも作成できるらしいが、「 Normal Map - Online」というオンラインツールを使って簡易的に作成することができる。( 1.6)

このWebツールの使い方は簡単なので説明不要だと思うが、左の枠内に使用したいイメージファイルをドラッグ&ドロップすると自動的にNormal Mapを作成してくれる。中央にプレビューが表示されるので、パラメーターを調整してDownloadするだけである。( 1.7)

HDRPプロジェクトのセットアップ

HDRPで新規プロジェクトを作成する。新規プロジェクト作成についてはこちらの記事「 Learn Unity VFX Graph - Basic Guide(1/2)」にも手順を記載している。( 1.8)

HDRPで新規プロジェクトを作成すれば、パッケージとしてVFX Graphも含まれるので、特別にセットアップする必要がなく便利である。VFX Graphのバージョン等確認したい場合は「Window」→「Package Manager」で確認できる。( 1.9)

新規シーンをHD Template Sceneで作成する。( 1.10)
Directional Lightは無効にする。( 1.11)

Assets配下にVFXフォルダを作成し、右クリックメニューから「Create」→「Visual Effects」→「Visual Effect Graph」を選択し( 1.12)、名前を「Smoke Effect」とする。それをHierarchyウィンドウにドラッグ&ドロップでゲームオブジェクト化する。

Projectウィンドウの「Smoke Effect」をダブルクリックしてVFX Graphウィンドウを表示させる。デフォルトのParticle SystemのGraphは全てノードをマウスで範囲選択してDeleteキーで削除する。( 1.13)

FlipbookとNormal MapのイメージファイルはVFXフォルダ等のAssetsフォルダ配下にインポートする。以上で事前の準備は完了である。次からVFX Graphでノードを組み立てる。