【Unity】ロード中に流れる背景を作る

こんにちは、SAT-BOXのコアラです

ゲームのロード画面には何かしらの演出や動きがついていることが多いですが、今回は演出の１つとして流れる背景の作り方を紹介したいと思います

例としてボクらのスクールバトルのロード画面を持ってきました
f:id:sat-box:20191209171459p:plain

この画面の背景の、ハサミや数式など柄の入った１枚絵をループして流れるようにしていきます

ちなみにボクらのスクールバトルはNintendo Switch用ゲームとして12月19日(木)に配信開始されます！
購入はコチラから
Nintendo Switch｜ダウンロード購入｜ボクらのスクールバトル

さて、Unityで作っていきますが、今回は uGUI の RawImage を使って実装してみます

まず、Unityで Canvas と RawImage を作成して、RawImage を画面サイズに合わせて調整してください

こんな感じで
f:id:sat-box:20191209174709p:plain

ここまでで半分完成です。はやーい

あとは、画像の赤枠で囲ってある UV Rect の X と Y の数値をスクリプトから変えるだけです

その制御をしているのが BackgroundScroll ってやつですね、ソースコードを紹介します

using UnityEngine;
using UnityEngine.UI;

public class BackgroundScroll : MonoBehaviour
{
    private const float X_SPEED = 0.04f;
    private const float Y_SPEED = 0.04f;
    public RawImage background;
    
    void Update()
    {
        var rect = background.uvRect;
        rect.x = (rect.x + X_SPEED * Time.unscaledDeltaTime) % 1.0f;
        rect.y = (rect.y + Y_SPEED * Time.unscaledDeltaTime) % 1.0f;
        background.uvRect = rect;
    }
}