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

+1

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

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

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

テクスチャを動かす方法

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

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

UVスクロールする背景

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

https://unityroom.com/games/shortest_action

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

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

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

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

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

完成イメージ

作り方の解説

使用する素材

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

タイリングすると上下左右がつながる素材(=シームレス)

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

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

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

STEP
ShaderGraphを作成し、マテリアルを作成する

過去の解説で何度も書いているので、詳細の手順は割愛します。
プロジェクトウィンドウから、右クリックでShaderGraphを作成し、対応するマテリアルを作成してください。

今回の名前はScrollShaderにしました。

STEP
プロパティを作成する

今回使うプロパティは2つだけです。
MainTex(Texture2D)とScrollSpeed(Vector2)で設定しました。

STEP
以下の画像のとおりShaderGraphのノードを作成する

画像をクリックするとアップした画像が見れます。

STEP
Save Assetボタンを押す

最後に、左上のSave Assetボタンを押し、編集を確定します。

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

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

X=0.1 Y=0.1の場合

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

AlwaysRefreshをONにする

ノードの解説

UV > TilingAndOffset

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

このノードを使うと、テクスチャを繰り返したり、オフセット(ずらす)を行うことが出来ます。
今回Tilingの値は今回は使いませんでしたが、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にすることで、繰り返し表示されるようになります。

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

Textureのインポート設定のラップモード

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

Textureのインポート設定で「固定」を設定している場合、デフォルでリピートされない

まとめ

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

→第6回はこちら

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

あわせて読みたい
【Unity】120以上のエフェクトがすぐに使える!Unityスターターキット Easy Custom VFX/UI Vol.1 - Yu-Rin-... ☆☆☆☆2024/10/10追記 第16回ユニティ・アワード Best Artistic Toolに、本アセットがノミネートされました!!!☆☆☆☆ 多くのゲームで使用出来る、汎用的な画像加工演出・ポスト...

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

+1

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ゲーム制作の敷居を下げ、もっと多くの人にゲーム作りを楽しんでもらうために、ゲームをカンタンに作る方法を”網羅的に”解説しています。
よかったらブックマークお願いします。
Twitter(X)もよければフォローお願いします。

コメント

コメント一覧 (2件)

コメントする


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。