UnityのShaderGraphを使って2D映像制作

# 概要

Unityを作って動画を作ろうとすると、基本的には3Dモデルを用いた動画をイメージするかもしれない。
参考サイト。MMDのようなこういう動画を作ってみるのも味なのだが、今回はShaderGraphをメインに使用して、
2Dのスライドショーのような動画を作成していく。

https://konichallengelog.com/unity_mv_what/

# 手順
今回は、以下のような動画を作成する。

## Uniyプロジェクト・ShaderGraphの作成。

ShaderGraphは、URPのプロジェクトであれば、作成時に自動的に付属されてくる。
そのため、作成するときはURPのプロジェクトを選択すること。今回は、2D(URP)を選択して、プロジェクトを作成する。

![スクリーンショット 2023-06-26 0.01.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/dc8cc0eb-a910-3ca1-440e-8766dcd17593.png)


その後、`Project / Create / ShaderGraph / URP / Lit Shader Graph`を作成し、任意の名前を入れる。

![スクリーンショット 2023-06-27 23.20.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/fa58bed5-6d06-70ad-bfec-7e72f80287a0.png)

以下のような形で、ShaderGraphを作成する。

![スクリーンショット 2023-07-17 15.03.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/0b0b0bcc-0426-92de-3233-b10ebe8b37b7.png)
左端

![スクリーンショット 2023-07-17 15.04.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/638f19e3-b322-7b26-91b4-559a8abaae1e.png)
中央

![スクリーンショット 2023-07-17 15.04.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/666d2ebb-c3f8-d22d-2f1f-8b9507a1fe9c.png)
右端

本当は、じわーって表現するためにマテリアルを透明、半透明にできる機能があるとよいのだが、今はまだうまく調べられていない。



# マテリアルへの適応
`Create / Material` を作成し、任意の名前を指定する。

![スクリーンショット 2023-06-27 23.32.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/0ceb063c-be65-ce48-a488-e415df3f55f3.png)

その後、inspectorを開き、マテリアルのShaderから、先ほど作成したShaderGraph(画像ではShader_Graph1)を選択する。

![スクリーンショット 2023-06-27 23.30.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/fe400ee3-7b24-a53a-3068-66a932cb4840.png)

これでプレイしてみると、スプライトが動いているのがわかる。

- Scrollspeedで動く速度が、
- spriteCountで縞の数
を調整する事ができる。

![マテリアル.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/599d0d17-a14f-39ad-0d1a-35ef8ba5ffd6.gif)


他の柄を作りたい場合は、shaderGraphはそのままに、マテリアルを新しく作って、Shaderを適応させる。

![スクリーンショット 2023-07-16 18.03.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/a1b82b41-a8b2-7551-d6de-d415e1512fb0.png)

![スクリーンショット 2023-07-16 18.04.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/4bb3fd89-98be-3d2a-559a-d5c8b6c7b3c0.png)

そんな感じで3つほど作ると、以下のように配置できる。

![スクリーンショット 2023-07-17 14.48.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/7497b9e9-c1f5-6842-fde8-0d8090d18188.png)
ちなみに、ただ角度を変えて置いただけである。
![スクリーンショット 2023-07-17 14.48.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/c333dcc4-2163-dc15-93be-46104bc0005e.png)

# インクがつく表現(できなかった。)
インクの素材は、以下のリンク先からダウンロードできる。

https://kage-design.com/2015/01/01/paint1/

このインクがじわじわくる表現は、自分では再現できなかった。また調べてみよう。。

# 動画っぽくする

Unityの映像制作では、Chinemachineを使うイメージがすごい強いかもしれないが、
今回は使用しない方向で。


プロジェクトwindowから＋で、`TimeLine`を選択する。

![スクリーンショット 2023-07-17 17.24.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/f22a56e0-ee58-6181-1e36-2f6ff84154ff.png)

timeLineを選択すると、TimeLineのタブが出てくる。また、ヒエラルキーに作ったTimeLine`をD&Dする。

![スクリーンショット 2023-07-17 17.27.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/3d08cf96-f0b9-af7a-6dac-17d86d471811.png)
![スクリーンショット 2023-07-17 17.28.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/8a5b61c7-1ed7-0969-533d-341f1d45692c.png)

タイムラインの中に、動かしたい画像をD&Dする。
![スクリーンショット 2023-07-17 17.42.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/a5d17248-3cc4-edb3-6d00-fab4fb782f9a.png)

そして、レコーディングボタンを押して、レコーディングする。
![スクリーンショット 2023-07-17 17.43.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/5c5afec6-fccf-8492-d262-4203c647fc5f.png)

この時に、動かしたい画像を任意のタイミングで移動させる事で、アニメーションを作成する。

＊キーを削除するときは、レコーディングの場面で右クリック、Removekey
![スクリーンショット 2023-07-17 17.38.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/23a00c4c-e839-a6ba-0f26-62dc1ef3a3ab.png)

これを、黒色部分のやつの方でも追加してやる。

その後、これを録画するため、UnityRecorderをインストール。

![スクリーンショット 2023-07-17 18.16.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/6da07897-6f21-281c-46cc-ff5e7c27defd.png)
PackageManagerからUnityRegistoryを選択肢、recorderをインストール。

その後、`window-> General -> Recorder Window `を選択する。

![スクリーンショット 2023-07-17 18.19.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/033e9107-3360-2400-07cf-7bc737b91978.png)

その後AddRecorderからmovieを選択し、`START RECORDING`を押す。


![スクリーンショット 2023-07-17 18.22.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/f4eb57cf-79b1-858f-4bc2-d0b2e089da4f.png)

すると、以下のような感じになる。この後にも動画を組み合わせて作っていけたらよい。

![movie.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/4010152f-7c0e-792b-f6e1-a4528c5922ae.gif)




# 参考サイト

https://tips.hecomi.com/entry/2022/11/30/233616

https://www.midnightunity.net/unity-timeline-introduction/