はきだめ

UnityやRailsに関するメモを残します。

uGUIの画像をスライドショーさせるやつをつくってみた

Unityで画像を切り替えて簡単なスライドショーさせるスクリプトを作ったのでメモしておきます。主にコルーチンとDOTweenを使っています。なのでDOTweenが入っていない場合は公式からインポートしてセットアップする必要があります。

assetstore.unity.com

コード紹介

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

namespace SlideShow.Sample
{
    public class SlideShow : MonoBehaviour
    {
        [SerializeField] Sprite[] images;

        [Space(5f)]
        
        [SerializeField] Image nextImage;
        [SerializeField] Image prevImage;

        [Space(5f)]

        public int waitTime = 5;
        public float changeSlideTime = 0.5f;

        Color visible = new Color(1f, 1f, 1f, 1f);
        Color invisible = new Color(1f, 1f, 1f, 0f);

        void Start()
        {
            StartCoroutine(slide());
        }

        public IEnumerator slide()
        {
            int count = 0;
            int length = images.Length;

            bool fadein = false;
            bool fadeout = false;

            var prevImageObject = prevImage.gameObject;
            var nextImageObject = nextImage.gameObject;
            
            while(count < length)
            {
                //画像をセット
                prevImage.sprite = images[count];
                nextImage.sprite = images[(count+1) % length];

                yield return new WaitForSeconds(waitTime);

                //fadeout
                DOTween.ToAlpha(
                    () => prevImage.color,
                    color => prevImage.color = color,
                    0f,
                    changeSlideTime
                ).OnComplete(() => fadeout = true);

                //fadein
                DOTween.ToAlpha(
                    () => nextImage.color,
                    color => nextImage.color = color,
                    1f,
                    changeSlideTime
                ).OnComplete(() => fadein = true);

                while(fadeout == false || fadein == false){ yield return null; }

                prevImageObject.SetActive(false);
                prevImage.sprite = nextImage.sprite;
                prevImage.color = visible;
                prevImageObject.SetActive(true);

                nextImageObject.SetActive(false);
                nextImage.color = invisible;
                nextImageObject.SetActive(true);

                count++;
                fadein = false;
                fadeout = false;

                //スライドが最後までいったらリセットする
                if(count == images.Length)
                {
                    count = 0;
                }
            }
        }
    }
}

使い方

まず初めに下記の画像のようなオブジェクトを作ります。親オブジェクトに上記スクリプトをアタッチし、子にImageコンポーネントを持つオブジェクトを持たせてください。

f:id:kurome-stdio:20180318163240p:plain:w200

f:id:kurome-stdio:20180318163833p:plain:w500

Imagesにスライドショーさせたい画像を配列で持たせているので、要素数を入力してインスペクタ上で画像をアタッチさせてあげると以下のようになると思います。
(下記のgifでは2秒でスライドさせるようにしています)

f:id:kurome-stdio:20180318164715g:plain

雑感

スライドショーにさらにアニメーションを加える場合(少しずつ画像が拡大されながら切り替わる等)はDOTweenのsequence機能を使ったほうが綺麗にかけそうだと思いました。色々頑張ればもうちょっとスッキリとしたコードになりそう...。