UnrealEngine4で2Dゲームを作ろう！ その17 UMGでテクスチャアトラスを使う

※ 任意サイズに切り出すマテリアルが作れましたので、以下の記事も参照してみてください
katze.hatenablog.jp

　UMGにおいて画像を使いUIを作るにはimageウィジェットを使います。
　imageウィジェットは、グラフィックを表示するのにSlateBrushを利用していますので、Brushを設定することで画像を表示します。

　Brushのimage設定には、テクスチャもしくはマテリアルを割り当てることができます。
　テクスチャ指定がお手軽ではあるのですが、テクスチャ全体が表示されてしまいます。

　テクスチャ指定で作るには、imageウィジェット1つに付き1つのテクスチャを用意すれば良いのですが、最近の描画システムはテクスチャ切り替えのコストが重いので、できれば避けたい所です。

　しかし、困ったことにimageウィジェットはテクスチャアトラスに対応していないため、テクスチャから部分的に画像を切り出すのは自前でやる必要があります。
　幸いBrushはマテリアルを使うことができますので、テクスチャから必要な部分を切り出すマテリアルを画像ごとに作ります。
　マテリアルインスタンスも利用してシェーダー切り替えコストも抑えたい所ですが、どう汎用化するかはお任せしまして*1、ここでは簡単な例と考え方を紹介します。

テクスチャを切り出すマテリアル

　一番簡単な例として、切り出す画像が等間隔で並んでいる場合を考えます。
　先ほどの横2列 縦4列並んでる画像から、ひとつ切り出してみます。

　マテリアルは以下の通りです。

　最初のADDで画像内の分割された位置(横,縦)を指定します。次のDivideで横を2分の1、縦を4分の1にして1枚分に切り出します。

マテリアルの仕組み

　imageウィジェットは、1つの四角ポリゴンを使ってBrush設定に従って描画されます。その四角ポリゴンに割り当てられるUVは、左上(0,0)～右下(1,1)となっているようです。

　そこで、欲しい画像の範囲がUV(0,0)～(1,1)になるように演算をいれます。

　ADDによってUVの原点をズラし、そこから分割数で割ることで1つに切り出します。
　ADDする値はDivideされることを考慮にいれます。Divideしなければ、横に1画像ズラすには0.5足しますが、横は2分の1されますので、2倍して1を足すことで1画像分ズレることになります。縦も同様です。

Misc

　パタパタアニメを仕込むのは、FlipBookマテリアル関数を使えばできるようです。
　テクスチャアトラス対応の要望自体は上がっているみたいですので、対応を期待したい所です。

*1:描画系苦手なので他力本願！　むしろ、良い感じのマテリアルが出来たらご教授願います……