ShaderGraphで画像をお手軽にスクロール

[PPONOS Advent Calendar 2023](https://qiita.com/advent-calendar/2022/ponos) 16日目の記事です。
昨日は@FW14Bさんの[ステージ選択マップの道筋を自動配置する](https://qiita.com/FW14B/items/5a0263249672afdad9d9)でした。
# 初めに
オートランゲームでキャラに合わせて背景を動かしたり、メニュー画面でのちょっとした演出など画像がスクロールする場面はよく目にすると思います。

実際に実装するとなると、同じ画像を2枚用意して動かすやり方が一番シンプルでしょうか。
しかし、画像を2枚用意したり、コード側で動かす実装が必要になるので面倒ですよね。
一方向だけならいいですが、「斜めにスクロールしたい」ってなるとしんどいですし。

今回はそんな画像スクロールをShaderGraphで簡単に実装できるやり方を紹介します。
## 用意するもの

- Unity（当然ですね！）。今回の記事ではUnityバージョン2011.3.11f1を使用しています。
- ShaderGraph

ShaderGraphが入っていない場合はPackageManagerよりインストールお願いします。

### ShaderGraphで画像を表示
スクロールを作成するにあたって、画像を表示するところから始めましょう。
今回はこちらのピクトアーツ様の画像を表示します。
https://pictarts.com/10/15-download/1466-large-image.html
<img width="400" alt="1466-large-image-l.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909345/27d1bf50-63a1-1714-fc49-069074d3278d.png">

まずはShaderGraphとマテリアル作成します。
Create/ShaderGraph/BuiltIn/LitShaderGraph
の順で作成し、名前はなんでもOKです。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909345/7d063544-f776-bc74-5c2c-dbfb4aa4dc97.png)

次にマテリアルも作成しましょう。
マテリアルを作成しましたら、ShaderStandardをクリックして、先ほど作成したShaderGraphを選択します。
<img width="400" alt="" src="">
![スクリーンショット 2023-12-13 15.06.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909345/d99694b1-b777-8da3-06fd-81acd3781687.png)

マテリアルの設定が終わったら、Hierarchyに適当な画像を入れたSpriteRenderを配置し先ほどのマテリアルをセットします。
灰色になると思いますが、今は問題ありません。

ここからShaderGraphをいじっていきます。
Assetsの中にある作成したShaderGraphを選択し、OpenShaderEditorをクリックして開きます。
<img width="400" alt="スクリーンショット 2023-12-13 15.03.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909345/c4d4a998-2fa3-36f3-28df-9b2cbf382376.png">

開くとこんな感じ。ではここから画像表示のノードを作成します。
画面の何もないところを右クリックし、CreateNodeからSampleTexture2Dを選択してください。
検索欄に打てば出てくるのでクリックして追加しましょう。
<img width="400" alt="スクリーンショット 2023-12-13 15.04.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909345/3b086257-eefe-6f79-821a-dd5cb8e9059e.png">

SampleTextureを２Dを追加しましたら、実際に値を入れていきます。
![スクリーンショット 2023-12-13 15.04.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909345/b235e3ee-b822-7415-e123-910c5c708a90.png)
下記画像を参考に画像とノード接続をやってみましょう。
繋げ終えたら左上のSaveAssetを忘れずに。セーブもしたらSceneに戻ってみましょう。

![スクリーンショット 2023-12-14 9.21.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909345/5c743625-39d8-3c1f-a34a-d352ad1895d9.png)

まずは画像表示成功ですね。
続いて表示した画像をスクロールさせていきましょう。
ShaderGraphEditerに戻ります。
スクロールさせるのに必要なノードは以下の5つ。SampleTexture2Dと同じ容量で作成してみましょう。
- Multiply
- Time
- Vector2
- Tiling　And　Offset
- Sampler State

作成できましたら、各ノードを以下のように繋ぎます。値は後から設定していきます。
![スクリーンショット 2023-12-13 15.12.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909345/298312e0-a3a0-f0dc-f28e-98f7d839c353.png)

ここから実際に値をいじります。いじるのは以下の３つ

- SamplerState
- TilingAndOffSet
- Vector2
１つ１つ設定していきましょう。

SamplerStateのWrapをRepeatに。
<img width="300" alt="スクリーンショット 2023-12-14 9.31.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909345/d75152ce-b1c8-f288-47a4-f93801e20b68.png">

TilingAndOffSetのX,Yを１に。
描画領域に何分割で表示するかの設定です。
2にすると画像が2枚分表示されます。0.5だと半分だけ表示される形です。
<img width="300" alt="スクリーンショット 2023-12-14 9.31.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909345/e07dabb6-07dd-3e08-fceb-8e8670ffde5a.png">

Vector2 X,Yを任意の値に。
横にスクロールなら、Xを。縦ならYを。両方設定すると斜めにスクロール。
値の大きさによってスクロールの速度が変わります。
<img width="300" alt="スクリーンショット 2023-12-14 10.46.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/909345/1a8e5d11-b280-d29c-8bbe-175e91ee568d.png">



値を設定したらSaveしてSceneに戻るとスクロールされていると思います。
文字に起こすと手順多そうですが、実際に行うと意外と設定項目も少なく簡単です。
各値をいじれば動きも変わるのでお好みでどうぞ。

# 最後に
背景の小さな演出もあるとないとではゲームの見た目は大きく変わります。
ShaderGraph便利で覚えて損はないのでこの機会に学んでみてはいかがでしょうか。

今回は１つの画像を表示しましたが、画像１つに１つのShaderGraph作成だと手間になるので
次の機会があれば、１つのShaderGraphで複数の画像を切り替える記事作りたいと思いました。

最後まで見ていただきありがとうございます！
明日は@bluenova1221さんの記事になります！