IlluGen 1.1 の新機能 Optical Flow ノード を使って、フリップブックから flowmap(オプティカルフロー/モーションベクタ系のテクスチャ)を生成し、Unreal Engine 5 側で滑らかに再生する手順を紹介します。IlluGen 1.1 では Optical Flow ノードFlow Blend ノード が追加されており、フレーム間のピクセル移動を解析して flowmap を作り、flowmap を使ってフレーム間を補間(ブレンド)することで、低フレーム感を抑えた再生が可能になります。

1) IlluGen 側:下準備(フリップブックを正しい解像度で扱う)

まず新規 IlluGen プロジェクトを作り、右上の設定で Tiling(タイル)を無効 にします。今回扱うフリップブックはタイル前提のテクスチャではないためです。
次にフリップブックを読み込みます。手早い方法は、ファイルを IlluGen に ドラッグ&ドロップ してインポートすることです。今回は 2D 作業が中心なので、3D レンダリングが不要であればレンダラー系ノードは外して整理します。
インポート直後にフリップブックがぼやけて見える場合、インポートノードのサイズソースが親(プロジェクト解像度)に追従してダウンサンプルされている可能性があります。そこで サイズ指定を Absolute(絶対) に切り替え、フリップブック本来の解像度(例:4K)を指定します。

2) Sheet Decode:フリップブックをフレーム列に分解する

フリップブックから個別フレームを取り出すには Sheet Decode を使います。Sheet Decode はフリップブックを走査して、各フレームを順に出力するためのノードです。
再生が速すぎる場合は Stride(間引き) で、何フレームごとに新しいフレームをデコードするかを調整します。たとえば「10」にすれば、10フレームごとに次フレームへ進むため、結果として動きがゆっくりになります。
タイムラインは Loop にしておくと、検証中に自動で周回してくれるので便利です。

3) Optical Flow:From/To 2フレームから flowmap を生成する(IlluGen 1.1)

次に、低フレーム感を抑えるための flowmap を作ります。IlluGen 1.1 では Optical Flow ノード が追加されており、これは「フレーム間でピクセルがどう移動するか」を解析して、スムーズなフリップブック再生用の flowmap 生成に使えます。
ここで重要なのは、 Optical FlowFrom(現在フレーム)と To(次フレーム) の2枚を必要とする点です。Sheet Decode 側で 「次フレーム出力(例:Decode Next Frame)」を有効化 して、現在フレームと次フレームを同時に取り出せるようにし、それぞれを Optical Flow の From/To に接続します。
すると、フレーム間の移動情報を表す flowmap が生成されます。

4) Flow Blend:flowmap を使ってフレーム間を補間する

flowmap ができたら、IlluGen 1.1 の Flow Blend ノードを使います。Flow Blend は「 flowmap を使って2つの画像をブレンド」するノードです。
Flow Blend に From/To フレームと flowmap を接続し、Blend Frames(補間数)を調整します。基本の考え方は、Sheet Decode の Stride と Flow Blend の 補間数 を揃えることです。
例:Stride=10 なら Blend Frames=10 にすると、 Stride で飛ばした分を補間で埋める形になり、見た目が一気に滑らかになります。

5) Optical Flow パラメータ調整(動画内UI表記ベース)

ここからは中心部の「吸い込み(vacuuming)」のような不自然な動きを抑えるため、Optical Flow のパラメータを調整します。

Flow Distance:1フレームでピクセルが動ける最大距離。小さすぎるとカクつきやすく、大きすぎると過剰に動きます。

Neighbor Radius:解析時に参照する近傍ピクセル範囲。素材によって最適値が変わるためスライドで探ります。

Upflow Radius:流れの方向を揃えて均一化する寄りのパラメータ。低いとカオス、高いとまとまりやすい。

Obscurance Threshold / Obscurance Flow:隠れ(obscured)判定と、その場合にどの程度動かすか。不要な動きを抑える方向に使えますが、下げ過ぎは破綻の原因にもなります。

Travel Cost:ピクセルが動くこと自体のコスト。上げると「動きにくくなる」ため、中心の吸い込みのような不要モーションを抑えるのに効く場合があります。

Intensity:flow の強さ。

Blurringflowmap を後段で少しぼかし、滑らかさや均一性を上げる用途(かけ過ぎは情報を失います)。

6) UE 用に flowmap をフリップブック化して書き出す

UE 側で使うには、 flowmap もフリップブック(アトラス)として書き出すのが扱いやすいです。そこで Sheet Encode を使って、 flowmap を再びスプライトシートにまとめます。
IlluGen 1.1 ではスプライトシート(spritesheet)エンコードに Super sampling AA が追加された旨がリリースノートにあります。必要に応じて 品質容量 のトレードオフとして使えます。
また、 flowmap (UVベクトル)をそのままでは色テクスチャとして扱えないため、 UV → Color 変換(UV to Color) を挟み、ゲームエンジン向けの表現にします。IlluGen 1.1 では Export 系に Invert Y channel が追加されています。Unreal 側の UV(Y方向)と符号が合わない場合、この反転が効くケースがあります。
(実際、Unreal 側のモーションベクタ運用でも 緑チャンネルを反転 してみるのは典型的な対処として挙がります。)
書き出しでは sRGB を無効(linear) にします。 flowmap は色ではなく「ベクトル情報」なので、ガンマ付きで扱うと破綻しやすいためです(Unreal フォーラムでも linear 扱いが推奨されることがあります)。

7) Unreal Engine 5 側:フリップブック+flowmap で滑らかに再生する

Unreal に、元のフリップブックと、IlluGen で生成した flowmap フリップブックをインポートします。 flowmap 側は sRGB をオフ にして linear にします。
マテリアルでは、通常の Flipbook に加えて モーションベクタ(flowmap) を使うための仕組みを組みます。Epic 側の説明では、エンジン内に Flipbook_MotionVectors という material function があり、モーションベクタは 「強度を上げて8bit精度を稼ぐ→最終マテリアルで同量を割り戻す」 設計にします。
つまり IlluGen 側で、UV→Color 変換などで 強度を 500%(=5倍) にして見える化・精度確保をしたなら、Unreal 側ではその 逆数(1/5 = 0.2) を motion vector intensity 側に入れて帳尻を合わせる、という考え方になります。
補足として、Flipbook MotionVector 系は 4×2 のような非正方アトラスで挙動が崩れる場合があります。今回のように 8×8 の均一分割なら回避しやすいですが、もし別形状を使うようなら注意してください。
IlluGen
ゲーム VFX アーティストの制作を強力に支援する新ツール

ゲーム開発向け IlluGen