UnityUnityメモ

Unity初心者向け!カードの表裏に画像を表示させる方法を徹底解説

Unity

1. はじめに

Unityを使ってカードゲームを開発したいと考えたことはありませんか?カードの表裏に異なる画像を表示し、クリックでカードが回転する動きを加えると、ゲームにインタラクティブな要素が生まれ、より魅力的になります。

しかし、Unityでは通常、オブジェクトの片面にしか画像を貼り付けられないため、少し工夫が必要です。本記事では、クアッド(Quad)という平面オブジェクトを利用してカードの表裏を作り、それらを組み合わせてカードを作成する方法を解説します。

さらに、スクリプトを使ってカードがクリックで回転する仕組みを実現する手順も説明します。初心者の方でもわかりやすいように、具体的な操作やコードを含めてステップ形式で解説しますので、一緒に楽しく学んでいきましょう!

Unityを触ったことがないという方はコチラの記事から見てみてください!



Unityでカードを作成する準備

Unityでカードを作成するためには、表と裏の画像を貼り付ける2つの「クアッド(Quad)」を用意し、それらを組み合わせる必要があります。このセクションでは、必要なオブジェクトの作成と設定について解説します。


1. クアッドを作成する

まず、カードの表面になるクアッドを作成します。以下の手順に従ってください:

  1. ヒエラルキーウィンドウで右クリック
    メニューが表示されます。
  2. 「3D Object」→「Quad」を選択
    平面オブジェクト「Quad」が作成されます。
  3. サイズを調整する
    作成したクアッドを選択し、インスペクターウィンドウで「Transform」の「Scale」を以下のように設定してください:
    • X軸:2
    • Y軸:3
    • Z軸:1
  4. 名前を「Card_Front」に変更
    ヒエラルキーウィンドウでクアッドを右クリックし、「Rename」で「Card_Front」と入力します。

2. カードの裏面を作成する

次に、カードの裏面を作成します。

  1. 「Card_Front」を複製
    ヒエラルキーウィンドウで「Card_Front」を右クリックし、「Duplicate」を選択します。新しいクアッドが作成されます。
  2. 名前を「Card_Back」に変更
    複製したクアッドを「Card_Back」とリネームします。
  3. 裏面用に回転させる
    「Card_Back」を選択し、インスペクターウィンドウで「Transform」の「Rotation」を以下のように設定します:
    • X軸:0
    • Y軸:180
    • Z軸:0

これで、カードの表面と裏面がそれぞれ作成できました。


3. 必要なオブジェクトを整理する

最後に、これら2つのクアッドをまとめて管理しやすくします。

  1. 空のオブジェクトを作成
    ヒエラルキーウィンドウで右クリックし、「Create Empty」を選択します。
  2. 名前を「Card」に変更
    作成した空のオブジェクトを「Card」とリネームします。
  3. 親子関係を設定
    「Card_Front」と「Card_Back」を「Card」の子オブジェクトとして設定します。ヒエラルキーウィンドウで「Card_Front」と「Card_Back」をドラッグして「Card」にドロップしてください。

これで、カードの基本的な構成が完成しました!次は、それぞれの表裏に画像を貼り付けていきます。続きをご覧ください!



3. カードの表裏に画像を貼り付ける方法

カードの表と裏に異なる画像を貼り付けるためには、Unityの「Quad」オブジェクトに画像を適用する手順が必要です。以下のステップに沿って進めてみましょう!

1. 画像をUnityにインポートする

まず、使用したい画像ファイルをUnityのプロジェクトに取り込みます。

  1. プロジェクトウィンドウを開く
    • Unityエディターの下部にあるプロジェクトウィンドウを確認してください。
  2. 画像をドラッグ&ドロップ
    • 使用したい画像ファイルを直接プロジェクトウィンドウにドラッグ&ドロップします。
    • インポートされた画像は、自動的に「Assets」フォルダーに保存されます。

2. 表面の画像を貼り付ける

カードの表面にあたる「Card_Front」オブジェクトに画像を適用します。

  1. ヒエラルキーウィンドウで「Card_Front」を選択
    • 「Card_Front」オブジェクトをクリックして選択します。
  2. インスペクターウィンドウを確認
    • インスペクターウィンドウの「Mesh Renderer」セクションを見つけます。
  3. 画像を適用
    • インポートした画像を「Material」セクションにドラッグ&ドロップします。
    • これで、カードの表面に画像が表示されます。

3. 裏面の画像を貼り付ける

次に、カードの裏面にあたる「Card_Back」オブジェクトに異なる画像を適用します。

  1. ヒエラルキーウィンドウで「Card_Back」を選択
    • 「Card_Back」オブジェクトをクリックして選択します。
  2. インスペクターウィンドウを確認
    • インスペクターウィンドウで「Mesh Renderer」セクションを見つけます。
  3. 異なる画像を適用
    • 裏面用にインポートした画像を「Material」セクションにドラッグ&ドロップします。
    • これで、裏面の画像も設定されます。

これで、カードの表裏に異なる画像を設定する準備が整いました。次のステップでは、カードを回転させる動きをスクリプトで実装していきます!



4. カードをグループ化して管理する方法

カードの表と裏を効率的に管理するには、空のオブジェクトを利用してグループ化する方法が便利です。このステップでは、簡単な手順でカードを整理する方法を解説します。


1. 空のオブジェクトを作成する

ヒエラルキーウィンドウで以下の手順を行います:

  1. ヒエラルキーウィンドウを右クリックします。
  2. メニューから「Create Empty」を選択します。
  3. 作成された空のオブジェクトを選択し、名前を「Card」に変更します。

空のオブジェクトは、他のオブジェクトをまとめて管理するための便利なツールです。


2. 子オブジェクトとして設定する

「Card」オブジェクトに表と裏のクアッドをまとめる手順です:

  1. ヒエラルキーウィンドウで「Card_Front」と「Card_Back」をそれぞれ選択します。
  2. 両方のクアッドを「Card」にドラッグ&ドロップして、親子関係を作成します。

これで、「Card」オブジェクトを移動させると、表と裏が一緒に動くようになります。


3. 親オブジェクトの位置を調整する

グループ化したカードの中心位置がずれている場合は以下を確認してください:

  • 「Card」オブジェクトのPosition(位置)が(0, 0, 0)になっていることを確認します。
  • 必要に応じて、インスペクターウィンドウでPosition値を調整します。

これにより、カードの回転や移動が正しく行えるようになります。


これでカードのグループ化が完了です!次は、カードをクリックすると回転するスクリプトを作成していきましょう。



5. カードを回転させるスクリプトの作成

カードをクリックした際に180度回転する仕組みを作るためには、スクリプトを作成し、「Card」オブジェクトにアタッチする必要があります。以下の手順に従って進めてみましょう。

1. スクリプトの作成

  1. プロジェクトウィンドウで右クリック
    • 「Create」→「C# Script」を選択します。
    • スクリプトの名前を「CardFlip」と設定してください。
  2. スクリプトを開く
    • スクリプトファイルをダブルクリックして、コードエディタ(例:Visual Studio)で開きます。
  3. 以下のコードを入力する
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class CardFlip : MonoBehaviour
{
    void Update()
    {
        // マウスの左クリックを検知
        if (Input.GetMouseButtonDown(0))
            StartCoroutine("RotateStart");
    }

    IEnumerator RotateStart()
    {
        // カードを少しずつ回転させる
        for (int turn = 0; turn < 180; turn++)
        {
            transform.Rotate(0, 1, 0); // 1度ずつ回転
            yield return new WaitForSeconds(0.01f); // 0.01秒待機
        }
    }
}

このコードは、左クリックされたときにカードを180度回転させる動作を実現します。Updateメソッドでクリックイベントを検知し、RotateStartというコルーチンを呼び出します。コルーチン内では回転動作を少しずつ実行し、滑らかなアニメーションを作ります。


2. スクリプトのアタッチ

  1. 「Card」オブジェクトを選択
    • ヒエラルキーウィンドウで「Card」オブジェクトをクリックします。
  2. スクリプトをドラッグ&ドロップ
    • 作成した「CardFlip」スクリプトを「Card」オブジェクトにドラッグ&ドロップしてアタッチします。

3. 動作確認

  1. ゲームを実行
    • Unityエディタで「Play」ボタンを押してゲームを実行します。
  2. カードをクリック
    • シーン内でカードをクリックして、表から裏、または裏から表へ回転するか確認してください。

注意点

  • カードが正しく回転しない場合は、「Card」オブジェクトの中心が適切に設定されているか確認してください。中心がズレていると、想定外の回転になることがあります。
  • 回転スピードや滑らかさを調整したい場合は、forループ内の回転角度や待機時間を変更してください。

これで、カードがクリックで回転する仕組みが完成しました!続けてエフェクトやサウンドを追加すれば、さらに魅力的なカードゲームが作れます。



よくある質問

Q
表裏の画像が同時に表示されてしまうのですが?
A

「Card_Back」の画像が「Card_Front」を貫通して見える場合は、カメラ位置やZ値を調整してください。

Q
カードが正しく回転しません。どうすればいいですか?
A

回転軸が「Card」オブジェクトの中心になっているか確認してください。中心がズレている場合は、空のオブジェクトの位置を調整してください。

Q
画像が貼り付けられない場合の対処法は?
A

画像がMaterial化されているか確認してください。インポート時に「Texture」から「Material」に変換する必要があります。

おすすめのアセット

「TCG Card Bundle」は、トレーディングカードゲームやコレクタブルカードゲーム向けのUIアセットです。高品質なカードテンプレートが含まれており、簡単にカスタマイズして独自のカードデザインを作成できます。ファンタジーやRPG風のデザインが特徴で、プレイヤーの注目を集めるビジュアルを提供します。UnityのBuilt-in、URP、HDRPに対応しているため、幅広いプロジェクトで使用可能です。初心者でも簡単に導入でき、プロジェクトのクオリティ向上に役立ちます。