見出し画像

Amplify Shader Editor の使い方 4

レッキー(Lecky)

パラパラアニメを作る

今回はUVタイルアニメーションを作成します。
以前しっぽをただ左右に振る動画を投稿したことがあるのですが、今回はAmplifyでそれを再現します。

１.下準備をしよう

まず動画からパラパラアニメに必要な画像を用意。振り子のように
しっぽが左から右へ移動する画像を６枚、逆パターン６枚の合計１２枚です。そして一枚の画像にタイリングしてまとめました。
この複数のテクスチャをまとめることをテクスチャアトラスと呼びます。こうすることでデータを減らし、パフォーマンス負荷を軽減させることができます。

画像1

次にunityの下準備
①テクスチャの設定をAlphaが有効になるよう設定
②作成したマスターノードの設定で、今回は影の影響を一切なくしたいので、落ち影を落とすCast Shadow をオフに。他オブジェクトから影の情報受け取る必要はないのでReceive Shadow をオフに。
③Blend Mode の設定を Transparent に変更　　

画像2

２.タイリングテクスチャから１つを描画しよう

①最初にCreate/3DobjectからPlaneを生成。
そこにTexture Sampleを生成しテクスチャを割り当てる。当然この段階では一枚の板に画像の全体が描画された状態に

画像3

②Divide(A/Bを割る)ノードを追加
③Floatノードに１を入力
④Vectorノードに今回のテクスチャに合わせたX、Y軸の数値である４と３を入力

それぞれを繋ぐことで４×３マスのテクスチャに適したタイリングになりました。画像4

３.UVを０～１の範囲でスクロールさせよう

スクロールといえば以前Time Parametersを使用し表現したことが記憶に新しいかと思います。
しかし今回はかっちりテクスチャUVの0～１(画像の隅から隅)のみの範囲を繰り返すように調整します。
そこで使うのがFractノードになります。
Fractは0から1までを繰り返す関数です。今回はUVに当て嵌め、いくらスクロールしてもUV0～1に収まるようにしました。

よって先ほどのタイリングにスクロールアニメーションのノードセットを加え、Fractでその範囲を制御する構成となりました。

画像5

４.コマ単位のスクロールにしよう

次にパラパラアニメのようにタイリングをコマ送りにする必要があります。
現状のUVスクロールの滑らかな移動をステップ式にしましょう。
そこで使うのが
Floorノード　小数点以下を切り捨て整数にする関数
これをスクロールアニメーションを管理するノードの間につなぐことで、少数値が切り捨てられ一秒間のスクロールを一秒ごとにコマ送りするスクロールへと変化させることができます。

画像6

Xに4移動したのち、Yに-1移動するようにしよう

あとは移動する方向の制御をつければ完成となります。
そうすると、ｘ軸とY軸で処理を分ける必要があります。
そこで使うのが
Appendノード。（数値を合成し、ベクトルを新規に作り直す）
X軸とY軸にそれぞれ細かな制御を行い、最後に合成することができます。
そして各軸には以下の処理を行います。
X軸
Floorにより整数のときのみコマ送りに処理が行われる。
Y軸
X軸の1/4ずつの処理が合計で１になったときFloor2の処理が走り、subtract(引く)ノードによりY軸から-1を引く。言い換えるとY軸を1タイリング下へ移動させる。

画像7

そして完成したのがこちら

無事しっぽをフリフリすることに成功しました！
かわいいですね。
（四隅現れる線は気にしない…）

この記事が気に入ったらサポートをしてみませんか？