Unityでクリスマスを飾ろう！(UnityLight2Dの話）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/b424a272-9a11-61b6-85a9-01bdd4b36b84.png)


[Unity #3 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/unity3)　12/24・・・僕の番だ！ｼｬﾝｼｬﾝｼｬﾝｼｬﾝ:confetti_ball:

今日はクリスマスイヴですね。
去年はクリスマスの時期に[Unityを使ってクリスマスカードを作ろうの話](https://qiita.com/hayu500ml/items/bc75db616a2d8aafee2b)を投稿しましたが今年もしますよ:snowflake:

# Unityでクリスマスカードを作ろう

作りましょう。

- 使ってみたかったUnityの機能があるので試す
     - Unity Light2Dとドット絵で作ろう
- WebGLでかきだしてUnityRoomにあげる
- UnityRoomのURLをペッと送ればOK



# Unity Light2D

このLight2DはUnity2019.2から使用が可能です。なんとなくクリスマスのイルミネーションピカピカさせっかーと思い使おうとしました。


## UnityのLight2Dを使う準備

Window->PackageManagerからLightweight RPをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/90d91b97-f22f-bd59-2168-8ee87c969eac.png)

Projectウインドウ上でPipeline Assetと2D RendererをCreateします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/9456a8e5-10f3-627c-caeb-1cfde020a976.png)

Pipeline AssetのRenderer TypeをCustomに変更し、Dataに先程作成した2D Rendererを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/83caf5c0-5502-2df0-b381-cc4e40edb54c.png)

その後、projectSettingのGraphicsにあるScriptable Renderer Pipeline Assetに先ほど作成したPipeline Assetを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/5de7206e-e681-6b60-9cd7-bbc269b7b2a2.png)

これで、Hierarch上でLight2Dが作成できるようになりました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/1dd0e03f-d78f-b5a2-91f2-6def5e965730.png)


## Unity Light2Dでできる表現

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/de59d72f-a5cf-4233-9441-8ca0bacfe9f3.png)
こちらに動画を上げました。
https://www.youtube.com/watch?v=2knzJoysZ1s


## 法線マップを使ってちょっとだけ立体表現してみる

### そもそも法線とは？
面に垂直なベクトルのことです。下の図で言うと、黄色の面から垂直に出てる青い矢印が法線です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/bf43c3cb-3158-b4a2-cb8c-e75ca1a560bf.png)


（画像はwikipediaより）

### 法線マップとは？
オブジェクトの法線ベクトルのX, Y, Z座標に対応したRGB画像のことです。ノーマルマップともいいます。
左の図の法線マップを立方体に張り付けると、立方体が法線マップに応じて凸凹しているのが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/0da526f2-3c71-a188-56d7-6c07718c28a2.png)

（画像は http://cpetry.github.io/NormalMap-Online/ より）

### 簡単に法線マップを作ろう
[NormalMap-Online](http://cpetry.github.io/NormalMap-Online/)を使います。
面白いので、サイトにいって遊んでみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/537a08d0-005d-3cd2-e954-6cee034fbbbe.png)

### 実際に作ってみた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/d6eb0674-b3b8-2722-748a-ec97ff15ad05.png)

こいつを立体的にしてみましょう。
ここに影が入るかな～と思ったところを暗くしたHeightMapとやらをつくって変換してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/cb458994-7e33-5231-7d16-10574d284c86.png)


## SpriteにNormalMapを設定

Sprite EditorのSecondary Textureから設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/45d68936-fd96-a44d-e35c-94e770e99443.png)

Nameの部分は、ラベルの右にある▼から選びます。
※手入力でいれるとうまくいきませんでした（これに気づくのに30分くらいかかった人）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/f5a34203-9028-ab0c-ef47-3d2adcb41ee7.png)


## Light2Dの設定を行う
こちらがノーマルマップ適用前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/a722bdca-ac2c-d9e8-aca3-9b9d8292e42f.png)

Light2Dの設定にUse Normal Mapにチェックをいれるだけで・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/6a5f5040-9d0a-ae6c-a3cd-791c490523d2.png)

にじいろカワウソが立体っぽくなりました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/2b8b135c-bfb5-8c39-b62c-c655ab753d96.png)

こちらに動画をあげています。
https://www.youtube.com/watch?v=C_MHtLP36zc

# ってことでUnityRoomにクリスマスカードをうｐしました。

とある場所をクリックすることで開封（ライトアップ）します。
![icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311402/8cc683d3-68e1-2134-7163-abbb206a94b0.png)
https://unityroom.com/games/xmascard2019

みなさん、良きクリスマスを！