LAB13：Flipbook 連番画像

Posted on By ayatofujii
GPU-VFX LAB

パーティクルにテクスチャを割り当てることはよくあると思いますが、今回は連番テクスチャを割り当てる方法を解説したいと思います。Unityでは連番ファイルを1枚ずつ読み込むのではなく、GPUが処理しやすいように1枚の大きなテクスチャファイルに配置したものを設定する形をとります。
1枚に配置されたテクスチャを「テクスチャシート」「テクスチャアトラス」と呼び、それをVFX-Graphで使用する仕組みをFlipbook（フリップブック）と呼びます。※Flipbookは「パラパラ漫画」という意味です。

VFX-Graphで「炎」「煙」などを低負荷かつリアルに表現する際、Flipbookを使用すると効果的です。

◆変換ツール Image Sequencer
ImageSquencer（イメージシーケンサー）は連番ファイルをテクスチャシートに変換するUnityのツールです。AfterEffectsなどで作成した連番ファイルをテクスチャシートに変換できます。現在 Image Sequencerは初期状態ではインストールされておらず、プロジェクトごとに「VFX Toolbox」というツールを別途インストールする必要があります。

手順１：GitHubから VFX Toolbox をダウンロード
●Unity VFX Toolbox – GitHub
https://github.com/Unity-Technologies/VFXToolbox
緑色の「＜＞Code」ボタン→「Download ZIP」

手順２：Zipファイルを解凍
Zipファイルをローカルフォルダで解凍。
Zip解凍ツールは何を使用しても構いませんが、解凍フォルダはフォルダパスに日本語が入らない場所に入れてください。
（例）C: ＞UNITY_WORKS＞VFXToolbox-master など

手順３：PackageManagerからインストール
UNITY EditorのWindowsメニュー＞Package Manager を起動
Install package from disk を選択
ダイアログから VFXToolbox-master ＞ package.json を指定

※Install package from git URL を使用してインストールする方法もあります。

Windowsメニュー ＞ Visual Effects ＞ Image Sequencer が選択できるようになっていればインストール成功です。

◆Image Sequencer を使った変換方法
（画像のインポート・設定・変換の流れ）
（1）変換したい連番ファイルの入ったフォルダをUnityプロジェクト内にコピー
（2）Image Sequencerを起動
　　Windows ＞ Visual Effects ＞ Image Sequencer
（3）「Create Image Sqeuence」ボタン→ファイル保存
（4）Input Frames というエリアに、連番フォルダをドラッグ＆ドロップ
　　　※連番ファイルはゼロパディングしておくと順番に並びます
　　　例「01～XX.tga」「001～XXX.tga」など
（5）Processorsタブへ移動
（6）＋ボタン ＞ Texture Sheet ＞ Assemble Flipbook
（7）縦横の配置数を入力して、シートを作成

（8）Export タブへ移動
（9）ファイル形式を指定して「Export as New」
　※デフォルトのファイル形式はTarga（,tga）になっています。

【注意】テクスチャサイズに関して
テクスチャサイズは GPUのメモリ展開を効率的に行うために「4の倍数」にしておく必要があります。※64・128・256・512・1024・2048・4096などの2の累乗でももちろん構いません。
【参考】Unityの正しい画像サイズとは
https://shibuya24.info/entry/unity-ui-texture-size

◆VFX-GraphでのFlipbook設定
VFX-GraphでFlipbookを使用するには、Updateコンテキストに「Flipbook Player」ブロックを追加し、更新フレームレートを設定します。OutputコンテキストのUV Modeを「Flipbook」に設定し、縦横の配置やテクスチャの割り当てを行うことで、パーティクルに連番テクスチャを適用できます。

★ Unity公式がFlipbookファイルを配布中
Unity公式ページにて 煙や炎、爆発なUどのFlipbookファイルが配布されているので、下記リンクからダウンロードして活用しましょう。

無料のVFX画像シーケンスとフリップブック
https://unity.com/ja/blog/engine-platform/free-vfx-image-sequences-flipbooks