第04回 半透明表現と UV アニメーション
3 / 4 時間と速度によるUVスクロール
このステップの目的
一定速度から参照座標の変化を作ります。
速度の単位
Scroll Speedは一秒あたりに参照UVを変える量です。(0.2,0)なら、時間が2秒増える間に参照UVのUが0.4増えます。TextureのWrap ModeをRepeatにして確認します。
UVアニメーション
時間でテクスチャーを読む場所をずらす
テクスチャーそのものを動かすのではなく UV の読み取り位置を時間でずらします。
Offset に時間変化を加えることで画像が流れているように見えます。
炎、煙、雲、水、魔法の流れなど連続的な変化を作るときに使います。
Timeノードで経過時間を使う
Time ノードの例
Time ノードはシェーダー内で時間の値を使うためのノードです。
例えば時間をそのまま UV に足すと一定方向へスクロールします。
速度や方向を調整したい場合は Time に Float の係数を掛けてから Offset に入れます。
ここではTimeを速度と組み合わせ、一定の移動量へ変換します。
時間をUVに加えるスクロール
Timeに係数を掛けてUVへ加えた例です。横方向だけにスクロールさせるため、移動量はX成分だけに与えています。
text
UV = 元のUV + 時間 * スクロール速度
Texture Color = Sample Texture 2D(Texture, UV)
Base Color = Texture Color.rgb
Alpha = Texture Color.a実際の Shader Graph では UV、Time、Multiply、Add、 Sample Texture 2D などの各ノードをつなぎます。
実習3：UVスクロールを作る
UVノードを用意するTimeにスクロール速度を掛ける- 元の UV と時間変化を
Addする - 結果を
Sample Texture 2DのUVへ接続する - 保存してマテリアル上で動きを確認する
実習4：スクロール速度を調整できるようにする
Vector2のScroll Speedプロパティを追加するTime * Scroll Speedを UV に足す(0.2, 0)、(0, 0.5)、(-0.3, 0.1)を試す- 方向と速度がどう変わるか説明できるようにする
条件を変えた確認
Speedを(0.2,0)から(-0.2,0)へ変えたとき、読む座標と画面の模様の動きを予想してから比較してください。
予測と結果の照合
読む座標の進行方向が逆になります。UVへ正のOffsetを足すと、標準的なUV配置では模様は画面上で反対方向へ移って見えます。オブジェクトの向きも関係するため、座標の増減と見た目の左右を分けて記録します。
Speed=(0,0)へ戻し、静止したTexture表示になることを確認します。
チェックリスト
- TimeとSpeedを掛け、元UVへ加えてからTextureを読んでいる。
- Speed=0で停止し、符号を変えると逆向きになる。