Resoniteひとくち技術メモ：UVスクロールのやり方（Panner2D）
どうも、akiRAMです。
Resoniteでテクスチャをスクロールさせて、回転する部分やベルトコンベアのような動きを表現したいと思ったことはありませんか？
例えば、扇風機の羽根やタイヤ、ベルトコンベアなど、テクスチャをアニメーションさせることで、より動的な表現が可能になります。
今回は、Panner2D というコンポーネントを使って、簡単にUVスクロールを実装する方法を紹介します。
この方法はよっしーさんに教えていただきました。感謝！
前提条件
UVスクロールを実装するには、回転部分のメッシュやテクスチャが分離されている必要があります。
スクロールさせたい部分だけが独立したマテリアルになっていることを確認してください。
今回はこのグリッド上のテクスチャ画像とXiexeToonを使って、右のスフィアモデルのEmissionのグリッドをスクロールさせます。
実装手順
①Panner2Dコンポーネントをアタッチする
まず、スクロールさせたいマテリアルがあるスロットに「Panner2D」をアタッチします。
対象のスロットのインスペクターを開きます
インスペクター下部の「コンポーネントをアタッチ」ボタンをクリック
以下の順に選択していきます：
Transform > Drivers > Panner2D
②テクスチャのオフセット値をPanner2Dに接続する
次に、スクロールさせたいテクスチャのオフセット値をPanner2Dの `_target` に接続します。
マテリアルの中から、スクロールさせたいテクスチャのオフセット値を探します
例：「MainTextureOffset」「EmissionMapOffset」など
そのオフセット値の項目の名前部分をグラブで掴みます
Panner2Dコンポーネントの「_target」フィールド（初期値は「null」）に重ねます
グラブを離すと、オフセット値が代入されます
これで、Panner2Dがテクスチャのオフセットをコントロールできるようになりました。
③スクロール速度を設定する
最後に、スクロール速度を設定します。
Panner2Dの「_speed」フィールドを見つけます
x と y にそれぞれスクロール速度の値を入れます
x: 横方向のスクロール速度
y: 縦方向のスクロール速度
まずは試しに「1」などを入れてみて、実際の見た目を確認します
望む速度になるまで値を調整してください
例えば：
横方向にスクロール：`x = 1.0, y = 0`
縦方向にスクロール：`x = 0, y = 1.0`
斜めにスクロール：`x = 0.5, y = 0.5`
負の値を入れると、逆方向にスクロールします。
活用例
UVスクロールは様々な場面で活用できます：
回転する機械部品（扇風機、タイヤ、歯車など）
ベルトコンベア
流れる水や溶岩
スクロールするディスプレイ
動く背景
工夫次第で色々な表現が可能です！
テンプレート配布
今回の記事のために作成したテンプレートをUniPocketで配布しています
より詳しく学びたい方へ
Pannerコンポーネントのより詳細な使い方については、以下の記事が参考になります：
また、動画の方が分かりやすい方は、Resoniteの前身であるNeosのチュートリアルも参考になるかもしれません。
まとめ
Panner2Dコンポーネントを使えば、たった3ステップでUVスクロールが実装できます！
テクスチャをアニメーションさせることで、静止したオブジェクトに動きを与えられるので、ワールドやアバターの表現力がグッと上がります。
皆さまもぜひ、色々なオブジェクトでUVスクロールを試してみてください。
他にも「こんな使い方ができるよ！」というアイデアがあれば、ぜひ教えてください。
今回は以上です！
リンク集
Resonite便利リンク集です👇
