【Unity】カードを回転させてめくる動作を実装する

カードゲームといえば、裏になってるカードを捲って表にする動きを実装したいですよね。そんな時に使える方法を紹介します。

概要

uGUIでもtransformを回転させればGameObjectを回転させられます。
そこで、カードのGameObjectを回転させて90度を越えたら画像を表面のSpriteに差し替えることで、カードが捲られたように見えるようになります。

サンプル

    //カードのGameObjectにアタッチしたScriptに記述
    //右回転用
    public IEnumerator CardOpen ()
    {
        //カードを予め-180度回転させ裏面用の画像を表示する
        //裏面表示はコルーチン外で行っても良い
        //CanvasGroupでなくspriteのalpha値を操作しても良い
        transform.eulerAngles = new Vector3 (0, 180, 0);
        ReversedFace_CanvasGroup.alpha = 1f;

        float angle = -180f;
        float Speed = 300f;

        //-90度を超えるまで回転
        while (angle < -90f) {
            angle += Speed * Time.deltaTime;
            transform.eulerAngles = new Vector3 (0, angle, 0);
            yield return null;
        }

        //裏面用の画像を非表示(表面が表示される)
        ReversedFace_CanvasGroup.alpha = 0f;

        //0度まで回転
        while (angle < 0f) {
            angle += Speed * Time.deltaTime;
            transform.eulerAngles = new Vector3 (0, angle, 0);
            yield return null;
        }

        //綺麗に0度にならないことがあるため、補正
        transform.eulerAngles = new Vector3 (0, 0, 0);
    }

回転させる方法はぶっちゃけもっと良い書き方があると思いますが、大筋の方針としてはこれで良いかと思います。

まとめ

１．カードのGameObjectを予め-180度回転させておき、裏面用画像を表示させる
２．ransform.eulerAnglesなどでGameObject回転させる
３．90度回転したら裏面用画像を非表示にする
４．そのまま180度回転させる

サンプルの動画

参考になった方はいいねお願いします。
それともっとこう書いた方がスマートだよ等あれば是非教えてください。