神経衰弱でカードをめくる処理

Unityで神経衰弱を作るために左クリックしてカードをめくる処理を実装します。
神経衰弱に必要なカードの画像は以下のURLのサイトのものを使わせてもらいます。
https://joytas.net/programming/website/js_flip-2

URLのサイトではJavaScriptで神経衰弱を製作していますが、今回の記事ではC#とUnityを使って作ります。実行環境はUnity 2022.3.10fです。

カードの準備

上記のURLから画像をダウンロードしてUnityのProjectビューのAssetsフォルダにドラッグします。数字とマークが書かれたカードの表面の画像の中から1つ選んでSceneビューにドラッグします。カードの裏面の画像もSceneビューにドラッグします。カードの裏の画像はカードの表の画像の子オブジェクトにして、ローカル座標を原点に指定しておきます。

例：カードの表

例：カードの裏

次にInspectorビューのOrder in Layerの値を、カードの表は0、カードの裏は1とします。これでカードの裏面によって表が見えなくなっています。

カードをめくる処理

カードの表面の画像にBox Colliderをアタッチします。
以下のスクリプトを作成してMain Cameraにアタッチします。

CardClick.cs

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

public class CardClick : MonoBehaviour
{
    private GameObject clickedObject;
    private SpriteRenderer sprite;

    void Update()
    {
        if (Input.GetMouseButtonDown(0)) //マウス左ボタンをクリックした場合
        {
            Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition); //カメラからクリックした座標にレイを飛ばす
            RaycastHit hit = new RaycastHit();

            if (Physics.Raycast(ray, out hit))
            {
                clickedObject = hit.collider.gameObject;
                sprite = clickedObject.GetComponent<SpriteRenderer>();
                sprite.sortingOrder = 2 - sprite.sortingOrder; //レイが当たったカードの表面のOrder in Layerの値を0と2で切り替える
            }
        }
    }
}

これでカードを左クリックするたびに裏・表の表示が切り替わるようになります。

参考