uGUIでImageのSpriteを無限スクロールする

uGUIのImageコンポーネントの画像を無限スクロールする方法です。

こんな感じで画像を無限スクロールします。

たくさん画像を並べれば無限スクロールは実現できるわけですが、
今回の方法はImageコンポーネントや画像を1つしか使いません。

また、TextureTypeはDefaultではなくSprite(2D and UI)のまま行います。

非常に簡単なのでUIのスクロールはこの方法で基本問題なさそう。

無限スクロールの方法

Projectビューから対象の画像を選択し、WrapModeをRepeatにします。

そして、Imageコンポーネントの

image.material.mainTextureOffset

という値を変更することで、ImageのSpriteを動かすことができます。

注意点としては、マテリアル自体に適用されるので他の同一マテリアルを使っているオブジェクトにも反映されてしまう点です。（materialの代わりにmaterialForRenderingを使えば良いと思っていたが、そうではなさそうだった）

そのため、スクロール用のマテリアルを個別に用意してアタッチした上で、そのマテリアルに対してmainTextureOffsetを変更した方が良いと思います。

このmainTextureOffsetを毎フレーム変更することで、無限スクロールが実現できます。

private const float speed = 1f;

private void Update(){
    var image = GetComponent<Image>();
    image.material.mainTextureOffset += Time.deltaTime * speed;
}

ちなみに、DOTweenを使っている場合はMaterialにDOOffsetが使えるので、これをそのまま使うことができます。

private const float duration = 1f;

private void Start(){
    var image = GetComponent<Image>();
    var step = new Vector2(0, -1);
    image.material.DOOffset(step, duration).SetLoops(-1, LoopType.Incremental);
}

DOTweenはデフォルトのイージングがEase.OutQuadになっているので、一定速度でスクロールしたい場合は