LoginSignup
224
183

More than 3 years have passed since last update.

@flankids(バーガー)

ドット絵のキャラクターを自然に3D空間に馴染ませるテクニック

Last updated at Posted at 2019-08-26

前回の記事 の続き的な記事です！

馴染む！実に馴染むぞ！

ドット絵をドット絵のまま設置

まず、後の工程で光に当たるよう設定するため、スプライトを SpriteRender でシーンに配置します。

image.png

テクスチャはインポート時の設定だと自動的に圧縮がかかって若干ボヤけてしまいます。

image.png

ドット絵のようにジャギーが大事なものはこれだと困るので、圧縮を切っちゃいます。

  • Filter Mode を Point(no filter)
  • Compression を None

image.png

これでくっきり表示されます。

影を作るRenderer設定＆マテリアル作成

SpriteRendererオブジェクトは、デフォルトでは光によって明るくなったり、後ろに影を落としたりしません。

◆SpriteRendererが影を作れるようにする

SpriteRendererコンポーネントのInspectorで設定します。
が、通常時はSpriteRendererの影に関する設定メニューが表示されません。

image.png

Inspectorの右上の ▼ をクリックして、Inspectorのモードを Debug に変えると・・・

image.png

設定メニューが増えます。
この中の Cast Shadow を ON にすることで、SpriteRendererが影を作れるようになります。
が、まだこれでは影が表示されません。

◆影を落とせるマテリアルを作る

Projectフォルダで右クリック → Create → Material
作成されたMaterialのシェーダーを選択して・・・

image.png

Shader が Standard であることを確認して、Rendering Mode を Cutout にしましょう。
※さっきInspectorのモードをDebugのままにしてる人は元に戻しておくこと！

このマテリアルを、さっき影の設定をしたSpriteRendererのMaterialに設定すると・・・

image.png

見事！影が表示されました。

ドット絵に凹凸の情報を付与

ここまでの工程でそれなりに3D空間に馴染むのですが、もうちょっとできることがあるのでやってみました。
それは Normal Map を与えることです。（面の凸凹情報）
凸凹情報があることで、光を受ける角度が変化したときによりリアルな陰影の変化が生まれます。

◆Normal Mapの自動生成

Normal Mapは本来テクスチャに合わせて繊細に制作する必要があるのですが、手っ取り早く試したいので、NormalMap-Online というWebアプリを利用しました。

image.png

一番左の欄に画像をドラッグ＆ドラッグする だけで結果が出ます。
画面下部の Download でファイルを保存できます。
※InvertのRにチェックを入れてたほうがいいかも？たぶん・・・？（使う画像によるかも）

image.png

ダウンロードした画像（Normal Map）をインポートしたら、Texture Type を Normal map にしておきましょう。

image.png

SpriteRendererのマテリアルの Normal Map に反映すると・・・

image.png

これが・・・

image.png

こうなる。
おお、なにやら迫力が出てきたぞ。

ダメ押しにBloomをかける

Bloom とは、画面内の輝度が高いところをボヤけさせてリアルな明かりや照り返しを表現するフィルターみたいな技術です。

  • AssetStoreから Post Processing Stack をダウンロードして、プロジェクトにインポート。
  • シーン内のカメラに Post Processing Befaviour コンポーネントをアタッチ
  • Prijectビューで右クリック → Create → Post-Processing Profile を作成

image.png

Bloom にチェックを入れる。
タブを開くとパラメータを調整できます。（詳しくは こちら）

image.png

さきほどカメラにアタッチした Post Processing Befaviour コンポーネントに、作成した Post-Processing Profile を渡せば・・・

image.png

このとおり。もう平面とは言えない！！・・・かもしれない。

所感

3Dモデルのマテリアルでできることをそのまま適用しただけなので、2Dならではの表現がもっと深掘りできるといいな。。

次やるときは、こういうボリュームライトをの組み合わせや、逆光時の見栄えの研究をしてみようかなと思います。

2019/08/28 続編記事 出しました！

224
183
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
224
183