【ハルシオンブログ】Unity２Dでカードを回転させて裏から表にする方法。こんな感じでできますよん♪

05 «1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.» 07

【ハルシオンブログ】Unity２Dでカードを回転させて裏から表にする方法。こんな感じでできますよん♪

皆様御機嫌いかがでしょうか？
こんにちは。坂内です。

最近金がマジやばいんで受託して生きています。
何をしてでも生きていきましょう！転職はする予定はないですが。

さて、ちょっとしたUnityの小ネタを。

裏のカードを回転して表にする方法。
ゲームとかでたまにカード使ったりしますよね。

こんな感じで。

3Dなら簡単だと思うんですが、2Dでやるとするとカード（ImageやSpriteRenderer）に裏・表という概念がないため、「裏返しする」といった事はできません。

では、どうやるのかというと、
①カードを90度回転
②カードの絵を表の絵（スーツとか絵が描いてる方ね）に変更
③カードを90度戻す
この一連の流れをすると、上の動画みたいにカードが裏返ったように見えます。

それでは実際のコードとかを書いていきますね。

ResourceフォルダにCardsというフォルダを作成し、そこにトランプの表の絵を置いておきます。
（Resourceフォルダはあんまり使わない方がいいらしいですが・・・）

コードはこちら。

【CardTest.cs】

using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class CardTest : MonoBehaviour {

    public Image imgCard;

    string[] suits = {"c","d","h","s"};

    public void OpenCard() {
        string card;
        // スーツ
        card = suits[Random.Range(0,suits.Length)];
        // No
        card += Random.Range(1,14).ToString("00");

        imgCard.transform.DOLocalRotate(new Vector3(0, 90, 0), 0.6f)
                              .SetEase(Ease.Linear).OnComplete(() => ChangeCard(card));
    }

    void ChangeCard(string cardNo) {
        imgCard.sprite = Resources.Load<Sprite>("Cards/" + cardNo);
        imgCard.transform.DOLocalRotate(new Vector3(0, 0, 0), 0.6f).SetEase(Ease.Linear);
    }
}