UE4 ドット絵をマテリアルで煮込む
本記事はUnreal Engine 4 (UE4) Advent Calendar 2015, 8日目の記事になります。
Unreal Engine 4 (UE4) Advent Calendar 2015 - Qiita
前回は@yuujiさんでUnreal Engine4年末年始リアルタイム再入門 #UE4Study | Develog.VRでした。すごい情報量…!
UE4のマテリアルとドット絵の組み合わせで遊ぶのが思いの外楽しく、
いろいろ遊んで煮込んでたらいい匂いがしそうな感じになってきたのでその辺りの事を書いていきます。
夕焼けなのに地面テカテカしてて浮いてたから色情報とかパラメータ化して多少なじませたー。あと多重スクロールはこんな感じに、背景のドット絵とかはじめて打つから手探り感やばい… pic.twitter.com/HzJGcQnD89
— 月のお茶 (@tea_basira) November 15, 2015
記事のざっくりした内容はこちらです。
- ドットを光らせる
- 法線を自動生成してライティング
また本記事の特徴として、Papar2Dを使って解説しています。
Paper2Dの詳しい解説は @aizen76さんのブログの解説がとてもわかりやすく参考になったのでオススメです!(自分はここを見て覚えました!)
- UE4 Paper2Dを使って2Dゲームを作る! - Let's Enjoy Unreal Engine
- UE4 RPGツクールのようなマップが作れるタイルセットとタイルマップを使ってみる - Let's Enjoy Unreal Engine
ドットを光らせる
ひかります(๑•̀ㅂ•́)و✧
手間も少なく、綺麗にな表現になるのでとても気に入っています。
方法はマテリアルで元のドット絵の上に光源のみのドット絵テクスチャ重ねて加算、
部分的に過度なRGB値を作り出してエミッシブカラーに値を渡す事で、光ったように見せています。
例として光る灯籠を作成してみます。
まずは素材を用意。
光らせたいドット絵テクスチャ
光らせる部分のみのドット絵テクスチャ
こちらをマテリアルで加工していきます。
上の「SourceTexture」は「TextureSample」ノードではないので注意されたしー!
Paper2Dと検索して出てくるSpriteTextureSampler ノードを使います。
これはSpriteやTilemapなど、Paper2Dで描画されるテクスチャ情報が取得できるノードです。
上記マテリアルで行っているのは前述の通り、
Spriteに設定されているTextureに光源用の値を加算しているだけです。
光源のテクスチャはそのまま加算するだけではよく光らないので、↓のようにして調整しています。
このようにパラメータ化しておくとマテリアルインスタンスにして調整がし易いです!
@tos @tea_basira ブログヨウ pic.twitter.com/eRDCSoUGds
— 月のお茶 (@tea_basira) 2015, 12月 7
作成したマテリアルを適応させる場所ですがSpriteの中にDefault Materialという項目があります。
ここに新規作成したマテリアルを割り当てます。
ちなみに↑トップにある動画の背景の山の照り返しも、この方法で実装しました。
山っぽいのを書いてフチにそって線を引いてるだけです。
これがこうなります↓
@tos @tea_basira ブロリー pic.twitter.com/DXYRJV2NU8
— 月のお茶 (@tea_basira) 2015, 12月 7
Emissiveのブルームのおかげで、単なる線も手軽に綺麗に見せる事ができます!
こういったことが手軽に出来るのも、UE4の魅力だなぁと思ってます。
法線情報を自動生成してライティング
次です。ライティングしてみます!(とはいえこちらもまだまだ実験中…)
マテリアルのリファレンスを眺めていたところ、NormalFromHeightmapと呼ばれる白黒のテクスチャから法線情報を作成するマテリアルノードをみつけたのでそれを利用してみました。
ただこのノードはTextureObjectからしか法線情報が作れない様子だったので、
ノード中を見てTextureObjectを使用している部分をSceneTextureに置き換えてみました。
ノーマル以外は先程の光源テクスチャとほぼ同じマテリアルです。
結果はこちらです。
陰影のハッキリしたドット絵を打つ事で、自動でいい感じにでこぼこしてくれます。
ただし問題点はある模様…。
@tea_basira ただTileMapで1つのマテリアルを共有だからこのままだとデコボコしたくないものまで法線情報作られちゃう… 解決策は探し中
— 月のお茶 (@tea_basira) 2015, 11月 21
という事でまだまだ突き詰めないといけない箇所は残っています。
(法線を生成するかどうかの情報を格納した別テクスチャを用意してマスクをかけるといった事で回避はできそうだなぁとは思っていますがまだ試していません。)
最終的なクオリティでいえば別ソフトを使い、自前で法線マップを作成して適応するのがやはりいいのかなと思ってますが、
UEで完結する手軽さのメリットはかなり大きいと思っています。
他プロシージャルなドット絵エフェクトなど、紹介したい事は残っているのですが長くなりそうなので今回はここまでにしておきます。ありがとうございました!
後日改めて記事を投稿したいと思いますー。
明日は@malonyさんで「ぷちコンに出した作品で使った手法とおまけ内容の二つ」です。
反射ぷちコンでの手法…とても気になります!