UnityでUIをシュッとスライドさせてみた

ゲームソリューション部の えがわ です。

ゲームだとUIをパッよりもシュッと表示させたいですよね。
今回は簡単な方法でパネルをシュッとさせてみました。

開発環境

• Unity 2023.1.16f1
• DOTween 1.2.745
• UniTask 2.4.1

完成形

事前準備

DOTweenのインストール

Window -> Asset Storeから入手し、Pakage Managerからインストールしておきます。

UniTaskのインストール

こちらから入手可能です。
unitypackageでもgit URLでも好きな方法でインストールできます。

DOTweenでUniTaskを使用するため以下の設定も行っておきます
File -> BuildSettings -> Player -> Script CompilationにUNITASK_DOTWEEN_SUPPORTを追加

これで準備は整いました。

実装開始

UIの作成

まずシュッと動かしたいパネルを作成します。

大きさを適当な値に設定しCanvasの右側に寄り添うように配置します。

また、パネルの中に何かしらのUIを作成してみましょう。
今回はボタンを追加します。

次にAnchor Presetsを画像の通りにして、PivotのXを1にします。
この設定でPosXが0の時が表示させたい位置となります。

ここまで設定を行えたら、パネルをCanvasよりも外側に移動します。
配置した場所からキャンバス内にシュッとスライドさせます。

シュッさせる処理を作成

パネルのInspecterからAdd Componentを選択してNew scriptを選択します。

名前にはUISlidePanelとでもしておきましょう。

作成したスクリプトに以下をペーストします。

using UnityEngine;
using Cysharp.Threading.Tasks;
using DG.Tweening;

public class UISlidePanel : MonoBehaviour
{
    private Vector3 initPosition;
    private CanvasGroup canvasGroup;
    private RectTransform rect => this.gameObject.transform as RectTransform;

    private void Awake()
    {
        initPosition = rect.position;
        canvasGroup = GetComponent<CanvasGroup>();
    }

    public async void Show()
    {
        canvasGroup.alpha = 0f;

        var fade = canvasGroup.DOFade(1f, 0.2f);
        var move = rect.DOAnchorPosX(0f, 0.2f);

        await UniTask.WhenAll(
            fade.ToUniTask(),
            move.ToUniTask()
            );

        Debug.Log("Showed");
    }

    public async void Hide()
    {
        var fade = canvasGroup.DOFade(0f, 0.2f);
        var move = rect.DOAnchorPosX(initPosition.x, 0.2f).SetEase(Ease.InCubic);

        await UniTask.WhenAll(
            fade.ToUniTask(),
            move.ToUniTask()
            );

        Debug.Log("Hid");
    }
}

UIにボタンを二つ作成し、ShowとHideをそれぞれOnClickに設定します。

最後に

今回は複雑な設定はしていませんが、EASE等を設定させるともっとリッチなUIになります。

ですが、ゲーム種類によっては変に凝る必要もなく、パッと表示させたほうがユーザー体験が向上する場合もあります。
Tweenを使ってUIを動かすのは楽しいですが、自己満足にならないようにですね。
うーん、UI/UXは奥が深い