はじめてのShader・Shader Graph 解説5 テクスチャを動かそう（UVスクロール）

この記事では、Shader Graphの使い方の解説記事の第5回です。
ShaderやShader Graphを初めて触る方は、以下の内容を読んでからの方が圧倒的に理解出来る内容になっています。

はじめてのShader・Shader Graph 解説 その1
はじめてのShader・Shader Graph 解説 その2
はじめてのShader・Shader Graph 解説 その3
はじめてのShader・Shader Graph 解説 その4

テクスチャを動かす方法

ゲーム画面に動きを出そう

既存のゲームのUI画面などで、背景が動いているゲームを見たことがある人は多いと思います。

世界一短いアクションゲームより。面白かったですね!

https://unityroom.com/games/shortest_action

ゼンレスゾーンゼロのUI背景などでも、UVスクロールをしていますね。

楽しさの演出にはアニメーションは不可欠です。動きの少ない画面は、単調さ/飽きやすさを感じてしまいがちです。
テクスチャを動かすことで、そういった単調さを軽減することが出来ます。

他にも、水や、滝のオブジェクトなどの「流れる表現」などにもテクスチャをスクロールする、という手法を取ります。

このテクスチャをスクロールさせることを、「UVスクロール」と呼びます。
Shaderを作成するときは、必ずと言っていいほどこのワードが出てきます。

今回は、UVスクロールの実装方法を、以下のような背景画面の作成を実際に作る工程を通して解説していきます。

作り方の解説

使用する素材

まずは使用する素材を集めます。
UVスクロールを行う場合、上下左右をタイリングして並べても繋がる素材（＝シームレス）である必要があります。

ネットで探す場合は、検索ワードに「シームレス」などを入れるとヒットしやすいです。
今回はこちらの素材を使用させていただきます。

UVスクロールさせるShaderGraphを作る

次にShaderGraphの作り方です。今回は結構簡単です。

シーン内に素材のスプライトを配置し、先程作成したマテリアルをアタッチします。

マテリアルのプロパティから、ScrollSpeedの値を0から変更すると、Xの値に応じてヨコにYの値に応じてタテにテクスチャがスクロールするようになります。

また、シーンビューのスクロールがカクつくなぁと感じる場合は、シーンビューの設定の「Always Refresh」のチェックをONにしてください。

ノードの解説

UV > TilingAndOffset

TilingAndOffsetノードは、とても使用頻度の高いノードの一つです。

このノードを使うと、テクスチャを繰り返したり、オフセット（ずらす）を行うことが出来ます。
今回Tilingの値は今回は使いませんでしたが、Tilingの値を増やすと以下の画像のような、幾何学的なパターンなどを作成することが出来ます。

今回はテクスチャをスクロールさせる（ずらす）ため、Offsetの値を変化させることで、画像を動かしていました。
試しに、Time * ScrollSpeedのノードを外して、Offsetの値をスライドさせてみるとイメージがつかみやすいと思います。

今回は常に画像が動いていたのは、Offsetの値が常に変化していたからです。この変化を行うためのノードが、次のTime * ScrollSpeedになります。

Time * ScrollSpeed

ShaderGraphで、常時テクスチャを動かしたい場合は、基本的にTimeノードを使います。
Timeノードはその名のとおり、経過時間の値です。ゲームが開始されるとともに常に増加していきます。

ですが、TimeノードをそのままOffsetに繋いでしまうと、スクロールする速度が調整できません。
そこで、タテとヨコのスクロール速度を調整するために、 ScrollSpeedという調整用のプロパティを作成し、Timeノードと乗算することでスクロール速度を調整するようにしました。

Sample State

SampleTexture2Dにくっついていたこの部分です。

Filterの方はあまりいじることはほぼ無いです。
Wrapは、今回のようにOffsetすることで、UVが0~1の範囲を超えた場合、テクスチャをどのように繰り返し表示するかを決める設定値です。

今回のように、繰り返したい場合は、WrapをRepeatにすることで、繰り返し表示されるようになります。

実はこの繰り返しを行うかの設定は、テクスチャのインポート設定でも行うことが出来ます。

ここで繰り返し（Repeat）を選択しておけば、先程のSamplerStateノードを設定せずとも、リピートされます。
ですが、テクスチャのインポート設定を、「固定」などにしていると、SamplerStateノードでRepeatを設定しないと、以下のGIFの様に繰り返し表示が行われなくなります。

まとめ

以上、UVをスクロールさせる方法でした。
ショートゲームなどでも、こういったスクロールする背景を入れておくだけで、ゲームの印象が良くなると思います！
ぜひ取り入れていただければ！

→第6回はこちら

また、こういったShaderを使った演出が120種類以上使用出来るパックをBoothで販売をしています。こちらも良ければチェックしてみてくださいね！

あわせて読みたい

【Unity】120以上のエフェクトがすぐに使える！Unityスターターキット Easy Custom VFX/UI Vol.1 - Yu-Rin-... 多くのゲームで使用出来る、汎用的な画像加工演出・ポストプロセス的演出・トランジッション（画面遷移）演出・パーティクル・テクスチャ素材集になります。 合計130種類以...

それでは素敵なゲーム制作ライフを！