【Unity2D】カードを裏返すアニメーションを作る

やりたいこと

カードをひっくり返すアニメーションを作ります。
タッチで裏返したようなUIは簡単に動きが出せるので、トランプ等のカードゲームを作る際はもちろん、他のゲームでも重宝しそうです。

方法

カードの横幅を100% → 0% → 100%と連続で変化させると、2D視点ではまるでY軸で回転しているように見えます。
あとは横幅0%の瞬間画像(sprite)を変更すれば完成です。

アニメーションウィンドウからコードレスで作ることも当然可能ですが、汎用性や操作性の面から今回はコードで実装します。
アニメーション部分はコルーチンで記述しています。

以下のコードをひっくり返したいImageにくっつけて、StartTurn()を呼び出せばokです。

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

public class TurnCard : MonoBehaviour
{
    public Sprite spriteCardFront;
    public Sprite spriteCardBack;

    static bool isFront = true;  // カードの表裏
    static float speed = 4.0f;  // 裏返すスピード 裏返しには(2/speed)秒かかる

    RectTransform rectTransform;
    Image cardImage;


    private void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
        cardImage = GetComponent<Image>();
    }

    // 初期設定
    private void Start()
    {
        if (isFront)
        {
            cardImage.sprite = spriteCardFront;
        }
        else
        {
            cardImage.sprite = spriteCardBack;
        }
    }

    // コルーチンの開始
    public void StartTurn()
    {
        StartCoroutine(Turn());
    }

    // 裏返す
    IEnumerator Turn()
    {
        float tick = 0f;

        Vector3 startScale = new Vector3(1.0f, 1.0f, 1.0f); // 開始時のスケール
        Vector3 endScale = new Vector3(0f, 1.0f, 1.0f); // 中間地点のスケール (x = 0)

        Vector3 localScale = new Vector3();


        // (1/speed)秒で中間地点までひっくり返す
        while (tick < 1.0f)
        {
            tick += Time.deltaTime * speed;

            localScale = Vector3.Lerp(startScale, endScale, tick); // 線形補間

            rectTransform.localScale = localScale;

            yield return null;
        }

        // カードの画像(sprite)を変更する
        if (isFront)
        {
            cardImage.sprite = spriteCardBack;
        }
        else
        {
            cardImage.sprite = spriteCardFront;
        }

        // 表裏を変更
        isFront = !isFront;
        
        tick = 0f;

        // (1/speed)秒で中間から最後までひっくり返す
        while (tick < 1.0f)
        {
            tick += Time.deltaTime * speed;

            localScale = Vector3.Lerp(endScale, startScale, tick);

            rectTransform.localScale = localScale;

            yield return null;
        }
    }
}

使用例

UI.Imageのカードを用意して、上のスクリプトをアタッチします。
インスペクターからspriteCardFront(表の画像)とspriteCardBack(裏の画像)を登録してください。
今回は「カードをクリックすると裏返る」ようにしたいので、EventTriggerのPointerClickを使っています。
これでカードをクリックすると、StartTurn()が呼び出され、カードが裏返るようになりました。

これだけでも何だか嬉しいですね。

以上です。