茶ポーン

ゲーム作りめも。VR幻想郷いきたい。

UE4 TileMapのマテリアルでTileSet毎にマテリアルの内容を変える

UE4 pixelart Paper2D Material

本記事はUE4 Paper2DのTileMapに使用するマテリアルについて、
自分が詰まった点困ったこと、あと自分なりの解決方法についてになります。

「いやそれこうすればできるよ！」「その解決方法はスマートじゃない！こっちの方がよろしい！！」
などありましたらコメントか、@tea_basira まで飛ばして頂けるととてもありがたいです。



まだまだ試している段階のものでもありますのでこの記事は何か進展あり次第、
更新しようと思います。
という事で宜しくお願いします。


TileSet毎にマテリアルを変えたい

まずTileMapとTileSetについて簡単におさらいを。
TileMapでマップを作っていく際、作成したTileSetを配置していきます。
このTileSetは、Texture1枚に対して1枚のTileSetで作られています。
このTileMapは複数のTileSetを選択することが可能です。


実際にTileSetのテクスチャが表示に反映される流れは、
TileMapにマテリアルを設定し、マテリアル内で
「SpriteTextureSampler」というノードでTileSetに設定されたテクスチャ情報を取得し、
テクスチャの色情報等を最終マテリアル入力に渡した結果が描画されています。

f:id:toorsoo:20151231012507p:plain


ここで問題になるのがTileMapで設定できるマテリアルが１つな点です。

例えば別Textureを使って見た目を加工したいといった場合、マテリアルが共通のため全TileSetに同じ
加工用のテクスチャが適応されてしまいます。

f:id:toorsoo:20151231012958p:plain
マテリアル内でどのTilesetを使用しているのか判別できるパラメータを取得できればいいのですが、
どうにも見当たりませんでした…。

解決方法

色々考えられる解決策としては、

①TileSet毎にTileMapを分ける

同じサイズのTileMapを同じ箇所にシーンに配置するという方法です。
ただ自前でレイヤー的な管理をする必要があり事や管理がやや面倒臭い大変になることや、
TileMap自体にレイヤー機能があるので今後のエンジンのアップデートなど考えるとあまりやりたく無い感じです。

②リソースをテクスチャ1枚にまとめてしまい、TileSetを複数使わない前提で作る

リソースを全て１枚のテクスチャに詰め込む方法です。
マスク等の加工用テクスチャも配置を気にせず作れて↑にある問題も解決しそうでしたが、

  • TileSetで当たり判定を付ける際、巨大なテクスチャだとエディタ内での読み込みに時間がかかっているのか、ものすごく時間がかかった。
  • テクスチャが作りにくい（ドット絵がうちにくい）→4096x4096で32x32のドット絵をEDGEだと256色以内で収める必要あったりｷﾋﾞｼｲ…

な問題があり、わりと厳しく思えたので自分はこの方法は諦めました…。

③Textureの情報からテクスチャを判別

TileSetに使用するテクスチャの使用し無さそうな部分（例えば右隅など）にTexture判別用の色情報を配置し、
マテリアルで解釈してどのTileSetなのかを判別させようといった方法です。
他の方法を試して微妙だったので今は自分はこの方法を使っています。

「この位置のドットは～の効果」「この色は～のテクスチャ」
といった感じで使ってます。


話が少しそれますが、↓は以前自分がTwitterで呟いたテクスチャからの法線自動生成マテリアル時の問題ですが、
この方法で法線を反映させたい場所には白, 反映したく内場所には黒
を置いたマスクテクスチャを作り、上記方法でハンドリングすれば解決できました。


また前回の記事(ドット絵をマテリアルで煮込む)でTileMapの灯籠を光らせていましたが、今回の方法で光源用テクスチャ、TileSet用テクスチャを適応させました。


マテリアルは以下のような感じで実装しています。

マテリアル関数を作成。
MF_CheckTexIndexFromTexture

MF_CheckTexIndexFromColor

MF_CheckTexIndexFromTextureがマスク用などのテクスチャ情報、UVカラー情報を仕込んだ位置を指定するUV情報を入力し、TileSetとマスクテクスチャの判別用カラー情報が完全一致した場合にマスクのテクスチャ情報を返すマテリアル関数です。
後者はマスクの代わりに色とUVを指定したバージョンになります。



念のため利用例も貼っておきます。

TileSet毎にこのSourceTextureが切り替わるイメージです。
右下の色情報が同じものの効果だけが適応されているのがプレビューでわかるかと思います。

ただ効果とTileSetが増えてくるとどんどんマテリアルがカオスになっていきます……、のためもっといい方法探してる段階ﾃﾞｽ。



という事で、まだまだ情報少ないので自分の無知っぽさを晒す覚悟で書いてみました。
同じ問題にぶち当たった方の解決材料に少しでもなれば幸いですー。



f:id:toorsoo:20151231014157p:plain