📖

(UE4)EmberGen→UE4にインポート-フリップブック編-(EmberGen)

2022/01/25に公開

*概要
EmberGenで作成したシミュレーションをUE4にインポートする

*作業環境
UE4:4.26
EmberGen:v0.7.5.2
OS:Windows10

EmberGen、UE4どちらも勉強中のため、
もし間違った認識などあればご指摘いただけると助かります。

EmberGenの爆発をUE4に

執筆時点で一番最適な手段は、
シミュレーションをテクスチャ化し、フリップブックで再生する方法かと思います。
今回はフリップブックの作成手順を学んでいきます。

EmberGenのエクスポート方法

現状、EmberGenをUE4でリアルタイムにシミュレートする手段は無く、
エクスポートしたものをインポートする必要があります。

EmberGenは静止画ファイル、もしくはVDBという形式でエクスポートできます。


EmberGenのエクスポートはノードから行います。
画像のように、ImageとVDBでノードが分かれていますが、
フリップブックを書き出す場合はImageを選びます。


Export:Imageノードの詳細です。
ModeからFlipBookとSequenceを選択できますが、
UE4で扱うには、FlipBookの方を選びましょう。

フリップブックの使い方

フリップブックとはパラパラマンガという意味で、
一枚の画像データからテクスチャアニメーションを作成して使うことができます。


フリップブックは左上のフレームから開始されます。
First Frameは何フレーム目から書き出すか、
Num Framesは書き出すフレーム数です。

RenderノードのCapture TypesでRender Allを選ぶと、
全てのレンダーパスが書き出されます。
ほとんどの場合アルファが必要だと思うので、
Alphaにもチェックを入れましょう。

ノードを上記のように繋げて、エクスポートします。

このようなテクスチャシートが書き出されました。
解像度はデフォルトで2048×2048px、
フレームは8×8分割なので、1フレーム256pxになります。

これをUE4にインポートしてマテリアルを作成しましょう。
以下、UE4のワークスペースになります。


Blend ModeはMaskedにしておきます。

テクスチャをアニメートさせるためには、
FlipBookノードを使用します。

使い方はかなり簡単です。
まずは、以下のように組みましょう。

Number of Rows/Columnsには、EmberGenで書き出した時と同じ値を入力します。

これだけで、すでにアニメーションが始まります。

再生速度を変えたい場合、Timeノードに任意の数値をかけてAnimation Phaseに繋げます。

あとはEmissiveの数値等を調整し、最終的に以下のようになりました。

結果はこんな感じです。

あとはspriteノードでビルボードにしてもいいかもしれません。

フリップブックの難点

解像度

フリップブックの解像度を上げるには、
テクスチャシート自体の解像度を上げるか、
総フレーム数を減らすしかありません。


どちらも8×8の64フレームです。

どちらの手段もあまり実用的では無いと思いますし、
もっと良いやり方が他にある気がするのですが分からず…
何か知ってる方がいましたら、ご教授いただけると幸いです。


参考
EmberGen Tutorial #0005: Creating Flipbooks For Games
フリップブック アニメーションをレンダリングする
UE4 MaterialのFlipBookノードについて

Discussion