Unity　２Dでライティングを使う

２Dでライティングが必要？いやあるとお手軽にリッチな表現ができるようになる。

松明の光、くらい洞窟、懐中電灯、魔法の光、アイディアは無限大。


## URP（Universal Render Pipeline）へ変更
なにはともあれ、ライトを使用するにはURPへ切り替える。URP軽いらしい。

:::note warn
※切り替えるとマテリアルを設定しなおす必要があるので新規プロジェクトからURPにするのが無難。
:::

Package ManagerからURPをインストール
Pacages Unity Registry > Universal RP
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/b3704740-1655-7c96-1f0f-ad79c7c65f24.png)

新しくフォルダを作り、Create > Renderring > URP Asset (with 2D Render

:::note warn
With Univaersal RendererにするとGrobal　Light　2dが出てこないので注意
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/487ef563-358b-c577-92f5-77921e6862d5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/9f93a7e2-6a4b-aceb-e4f3-2cf6746a1855.png)
作成した**Renderついていない方**をProject SettingsのGraphicsに設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/5ee580bf-9732-6c24-4f74-4ff6f30ff4ea.png)

Qualityにも設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/5cd1b97e-7409-d3ed-4104-004aeb816930.png)

MaterialsがピンクになっていたらURPように変更する必要がある。
一括での変更は
Window > Rendering > Render pipeline Convert
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/f0ea3dad-0e93-aac7-047a-10861d2312fe.png)
Built in to 2D　切り替え
チェックをいれてinirialize converters
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/3e8be3c5-e206-0128-6e24-db03b98f0d6f.png)
そのあとConvert　Assetsに切り替わるのでそれもクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/119969f5-3d8b-6844-ebcb-099d9d4a78d5.png)


個別に設定するには変更したいMaterialを選択し
Edit>Rendering>Materials>Convert Selected Buit-in Materials to URP
で変更する。

## 使って見ようLight
CreateからSquareを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/a5aea5c6-5a67-25a2-01bb-e3f9af272d2c.png)

AssetのほうのCreateからMaterialを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/026b5b51-526f-e2ce-c8cd-e95ce36e4d6f.png)

MaterialのShaderをUniversal Render Pipeline > 2D > Sprite Lit defaultに設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/806ca8e2-b7c0-9e7b-4380-2c07dfacf30e.png)

MaterialをSquareに設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/37eaa1f0-2de9-e9e1-487a-65ef110c8c6d.png)

Hierarchyで右クリック、Light＞SpotLight 2Dを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/48062dcc-1721-6d43-0e37-1a6378c4c104.png)

intensityを変更すると光の強弱が変わる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/287d1ff3-3598-2ce7-8c65-f377fa52b332.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/11bb49cd-ad72-b3e7-0cf2-8d2a40db5a7d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/7593416a-cd16-d57f-c092-8ff483b12335.png)

## 明かりを作ってみる
懐中電灯の光のようなものを作ってみる。
Freeform Light2d > Squareを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/eda34ac9-1558-805b-64ea-b3604932cc15.png)
Edit Shapeで光の形を変えることができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/0eccc909-bcd9-1971-d235-6ed0f6441e30.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/6d3eee58-42d8-d136-bf32-e6cd804718b6.png)
色も変えるとそれっぽくなる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/3317a661-5d34-5cf4-69bc-e2563ae14293.png)
同じものをコピーして元だけ強くするとさらにそれっぽくなる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/69d4b8df-c96d-4bcc-fd58-f29ae22af010.png)

別の方法ではSpotLightを使う。SpotLightは光の角度をAngleで設定できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/72d9b5a4-36da-e76b-f71a-9fa11334b9c9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/0966c606-2cbe-895e-f169-87e846bc28d4.png)
こんな感じで、懐中電灯っぽい光がつくれる。

光の種類まとめ
Grobal Light : すべて均等に光をあてる。太陽のひかり
Spot　Light　：　ある一部のひかり
FreeForm　Light　：　自由な形状の光
使い分けよう。

## 影をつける
光といえば影。2Dではスクリプトをついかすることで影を追加することができる。

作ったSpot　Light
すきなSprite（Triangleを追加した）を追加し、Add componentからShadow Caster2dを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/fc380687-5ff8-f853-42bd-0c0ccb3e9776.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/46706538-9756-250c-79d6-f7162f693e2c.png)
Edit ShapeからSpririteの形に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/9bd53c58-8e72-db92-bb75-b8b47100fa6e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/4b6915c3-5ce1-334d-d50a-2ffbab841fca.png)


Spot Lightの設定でShadowsにチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/b778bee2-260f-40dc-e6c5-4bcd1ca8f8ab.png)

TriangleをSpot　Lightの前に持っていくと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/f90fcd75-cc13-d5a5-c6c6-d97c8041a2f6.png)
影ができた！


## Tips
### 特定のものだけに光を当てる
光はレイヤーで当てるものと当てないものの設定ができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2294598/ca4dd039-b090-6726-2ec2-aa261affc760.png)
Lightはレイヤーの機能があるためレイヤーごとに限定できる。

## 発展
Normal Map（法線マップ）と呼ばれるものを使えば２Dでもおうとつが表現できる。簡単に言うと、色が黒いほど膨らんでいて、白いほどたいらというファイルを設定することで出来るようになる。
少し難しい話になるので別の機会に。

## URPでできること
その他URPでは
Shader Graph　：シェーダーを視覚的に作成
VFX　Graph　：　新しいパーティクルシステム
ができるようになる。詳しくは各自調べてみいて

## 参考リンク
https://www.youtube.com/watch?v=Km_4NQPk59s&t=563s

https://kurokumasoft.com/2022/01/06/builtin-vs-urp-vs-hdrp/

https://umistudioblog.com/tourp/

https://kingmo.jp/kumonos/unity-urp-in-middle-of-the-project/

https://docs.unity3d.com/ja/Packages/com.unity.render-pipelines.universal@14.0/manual/2DLightProperties.html

https://zenn.dev/nakaigames/articles/8f2135416fc2b9