記事投稿しました！

2Dゲームのリッチなビジュアルを実現する技術調査 https://t.co/XIF4sj6o2G #Qiita pic.twitter.com/8pKjKR43fu
— 徳川バガ寅 (@flankids) August 25, 2019

馴染む！実に馴染むぞ！

これが・・・・ pic.twitter.com/Tzjvkul76A
— 徳川バガ寅 (@flankids) August 26, 2019

こうじゃ。
ちょっとだけオクトパストラベラーっぽくなった pic.twitter.com/5UKRtg4foH
— 徳川バガ寅 (@flankids) August 26, 2019

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これが・・・

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

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

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

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

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

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

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

Qiita記事投稿しました！
ドット絵のキャラクターに逆光を当ててみる https://t.co/O5RwoYODkX #Qiita pic.twitter.com/gdGt9n7OeI
— 徳川バガ寅 (@flankids) August 27, 2019