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

#### [前回の記事](https://qiita.com/flankids/items/f389531a8e3213f047bc) の続き的な記事です！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">記事投稿しました！<br><br>2Dゲームのリッチなビジュアルを実現する技術調査 <a href="https://t.co/XIF4sj6o2G">https://t.co/XIF4sj6o2G</a> <a href="https://twitter.com/hashtag/Qiita?src=hash&amp;ref_src=twsrc%5Etfw">#Qiita</a> <a href="https://t.co/8pKjKR43fu">pic.twitter.com/8pKjKR43fu</a></p>&mdash; 徳川バガ寅 (@flankids) <a href="https://twitter.com/flankids/status/1165633414411608065?ref_src=twsrc%5Etfw">August 25, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 馴染む！実に馴染むぞ！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">これが・・・・ <a href="https://t.co/Tzjvkul76A">pic.twitter.com/Tzjvkul76A</a></p>&mdash; 徳川バガ寅 (@flankids) <a href="https://twitter.com/flankids/status/1166028711361044480?ref_src=twsrc%5Etfw">August 26, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">こうじゃ。<br>ちょっとだけオクトパストラベラーっぽくなった <a href="https://t.co/5UKRtg4foH">pic.twitter.com/5UKRtg4foH</a></p>&mdash; 徳川バガ寅 (@flankids) <a href="https://twitter.com/flankids/status/1166051329908731904?ref_src=twsrc%5Etfw">August 26, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/726b783c-4493-150a-cd0a-01b461d627a8.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/35624ebb-4bd5-4743-1ba0-c770fef98ce0.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/fdff66e4-2e8a-6b5c-c5b5-a13af5cc9971.png)

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

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/fea7b5c0-2c6b-9f2a-22d7-36aec977df99.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/e601ef04-45b9-f617-b51f-e779b3e93563.png)

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/de61163f-81c7-4737-8375-e6137816ae81.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/811e6219-8f87-d632-24bc-7fc9d0441ce5.png)

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

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

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

### ◆Normal Mapの自動生成

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/de8b1205-c824-8b7a-f5ae-fd40d2a790ca.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/5e6321c9-e7b5-d1bf-3cea-73221872dcf8.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/db982ff8-58a7-25e9-660f-aae134e84ba8.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/c7c8646e-6a48-8892-3f1a-96d1d0565060.png)

これが・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/cf956970-cba3-1dd9-e020-f89e178c8034.png)

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

# ダメ押しにBloomをかける

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

* AssetStoreから [**Post Processing Stack**](https://assetstore.unity.com/packages/essentials/post-processing-stack-83912) をダウンロードして、プロジェクトにインポート。
* シーン内のカメラに **Post Processing Befaviour** コンポーネントをアタッチ
* Prijectビューで右クリック → Create → **Post-Processing Profile** を作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/b3edb33c-f47b-5d70-a4b6-b465f9052d58.png)

**Bloom** にチェックを入れる。
タブを開くとパラメータを調整できます。（詳しくは [こちら](https://docs.unity3d.com/ja/current/Manual/PostProcessing-Bloom.html)）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/25dc5d83-67f5-6c78-0943-b71f7176cd7e.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/b103c757-8915-5daa-4c23-2b677b6bac65.png)

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

# 所感

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

<img height = 250 src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184294/faf78f17-b6ec-1599-ba63-f75a3a09ab7e.png">

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

#### 2019/08/28 [続編記事](https://qiita.com/flankids/items/39080e2068bc7e7312f9) 出しました！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Qiita記事投稿しました！<br>ドット絵のキャラクターに逆光を当ててみる <a href="https://t.co/O5RwoYODkX">https://t.co/O5RwoYODkX</a> <a href="https://twitter.com/hashtag/Qiita?src=hash&amp;ref_src=twsrc%5Etfw">#Qiita</a> <a href="https://t.co/gdGt9n7OeI">pic.twitter.com/gdGt9n7OeI</a></p>&mdash; 徳川バガ寅 (@flankids) <a href="https://twitter.com/flankids/status/1166500618107641856?ref_src=twsrc%5Etfw">August 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>