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

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

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

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

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

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

無限スクロールの方法

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

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

image.material.mainTextureOffset

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

この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になっているので、一定速度でスクロールしたい場合は

.SetEase(Ease.Linear)

も追加しておきましょう。

こうすることで、uGUIのImageを無限スクロールすることができます。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です