茶ポーン

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

UE4 ドット絵をマテリアルで煮込む

本記事はUnreal Engine 4 (UE4) Advent Calendar 2015, 8日目の記事になります。
Unreal Engine 4 (UE4) Advent Calendar 2015 - Qiita

前回は@yuujiさんでUnreal Engine4年末年始リアルタイム再入門 #UE4Study | Develog.VRでした。すごい情報量…!



UE4のマテリアルとドット絵の組み合わせで遊ぶのが思いの外楽しく、
いろいろ遊んで煮込んでたらいい匂いがしそうな感じになってきたのでその辺りの事を書いていきます。



記事のざっくりした内容はこちらです。

  • ドットを光らせる
  • 法線を自動生成してライティング



また本記事の特徴として、Papar2Dを使って解説しています。
Paper2Dの詳しい解説は @aizen76さんのブログの解説がとてもわかりやすく参考になったのでオススメです!(自分はここを見て覚えました!)

ドットを光らせる

ひかります(๑•̀ㅂ•́)و✧
手間も少なく、綺麗にな表現になるのでとても気に入っています。


方法はマテリアルで元のドット絵の上に光源のみのドット絵テクスチャ重ねて加算、
部分的に過度なRGB値を作り出してエミッシブカラーに値を渡す事で、光ったように見せています。



例として光る灯籠を作成してみます。
まずは素材を用意。

光らせたいドット絵テクスチャ
光らせる部分のみのドット絵テクスチャ


こちらをマテリアルで加工していきます。


上の「SourceTexture」は「TextureSample」ノードではないので注意されたしー!
f:id:toorsoo:20151207234822p:plain
Paper2Dと検索して出てくるSpriteTextureSampler ノードを使います。
これはSpriteやTilemapなど、Paper2Dで描画されるテクスチャ情報が取得できるノードです。



上記マテリアルで行っているのは前述の通り、
Spriteに設定されているTextureに光源用の値を加算しているだけです。
光源のテクスチャはそのまま加算するだけではよく光らないので、↓のようにして調整しています。
f:id:toorsoo:20151207235703p:plain
このようにパラメータ化しておくとマテリアルインスタンスにして調整がし易いです!


作成したマテリアルを適応させる場所ですがSpriteの中にDefault Materialという項目があります。
ここに新規作成したマテリアルを割り当てます。


ちなみに↑トップにある動画の背景の山の照り返しも、この方法で実装しました。
山っぽいのを書いてフチにそって線を引いてるだけです。
f:id:toorsoo:20151208013748p:plain
これがこうなります↓

Emissiveのブルームのおかげで、単なる線も手軽に綺麗に見せる事ができます!
こういったことが手軽に出来るのも、UE4の魅力だなぁと思ってます。

法線情報を自動生成してライティング

次です。ライティングしてみます!(とはいえこちらもまだまだ実験中…)
マテリアルのリファレンスを眺めていたところ、NormalFromHeightmapと呼ばれる白黒のテクスチャから法線情報を作成するマテリアルノードをみつけたのでそれを利用してみました。

NormalFromHeightmap

ただこのノードはTextureObjectからしか法線情報が作れない様子だったので、
ノード中を見てTextureObjectを使用している部分をSceneTextureに置き換えてみました。

ノーマル以外は先程の光源テクスチャとほぼ同じマテリアルです。



結果はこちらです。
f:id:toorsoo:20151208002410p:plain

陰影のハッキリしたドット絵を打つ事で、自動でいい感じにでこぼこしてくれます。
ただし問題点はある模様…。


という事でまだまだ突き詰めないといけない箇所は残っています。
(法線を生成するかどうかの情報を格納した別テクスチャを用意してマスクをかけるといった事で回避はできそうだなぁとは思っていますがまだ試していません。)


最終的なクオリティでいえば別ソフトを使い、自前で法線マップを作成して適応するのがやはりいいのかなと思ってますが、
UEで完結する手軽さのメリットはかなり大きいと思っています。




他プロシージャルなドット絵エフェクトなど、紹介したい事は残っているのですが長くなりそうなので今回はここまでにしておきます。ありがとうございました!
後日改めて記事を投稿したいと思いますー。



明日は@malonyさんで「ぷちコンに出した作品で使った手法とおまけ内容の二つ」です。
反射ぷちコンでの手法…とても気になります!

広告を非表示にする