Unityカードゲームゲームの作り方メモ
2DカードゲームC#Unityゲーム開発シャドウバースドラッグ＆ドロップ手札生成

【Unity 2D】シャドウバース風カードゲームの作り方！手札生成＆ドラッグ操作（パート3）

Unity

はじめに

こんにちは！今回も シャドウバース風の2Dカードゲーム を作っていきます。前回のパート2では ScriptableObjectを使ったカードデータの作成と管理 を解説しましたね。これで、カードのステータスや画像をデータとして扱えるようになりました。

さて、カードデータが準備できたら、次にやるべきことは カードを実際に手札に生成して、ゲーム内で動かせるようにすること です。そこで、今回のパート3では 以下の機能 を実装していきます。

✅ カードを手札に生成する
✅ ドラッグ＆ドロップでカードをフィールドに移動する
✅ プレイヤーと敵の手札にカードを3枚ずつ配る

カードゲームの基本的な動作 となる、カードの配布や移動ができるようになると、いよいよ「ターン制のバトル」や「攻撃処理」などの実装に進めます！

今回も初心者の方でもわかりやすいように、スクリプトを1つずつ解説しながら 進めていくので、安心してください。それでは、カードを手札に生成する方法 からやっていきましょう！

1. カードを手札に生成する

カードゲームでは、プレイヤーの手札にカードをランダムに生成し、表示する機能 が欠かせません。今回は、手札にカードを生成し、データを適用する方法 を解説します。

① GameManagerスクリプトの作成

まずは、カードを手札に生成するスクリプトを作成します。

1. GameManagerスクリプトを作成

プロジェクトウィンドウを右クリックし、「Create」→「C# Script」を選び、GameManager と名前を付けます。

作成したスクリプトを開き、以下のコードを入力してください。

using UnityEngine;

public class GameManager : MonoBehaviour
{
    // カードのプレファブを入れる
    [SerializeField] CardController cardPrefab;

    // 手札のTransformを入れる
    [SerializeField] Transform PlayerHandTransform;

    void Start()
    {
        CreateCard(PlayerHandTransform);
    }

    void CreateCard(Transform hand) 
    {
        // 手札にカードを生成する
        CardController card = Instantiate(cardPrefab, hand, false);
        
        // カードIDを指定（例: Card1）
        card.Init(1);
    }
}

② スクリプトの解説

このスクリプトでは、CreateCard メソッドを使って、カードのプレハブを 手札に生成 しています。

コード説明
[SerializeField] CardController cardPrefab;カードのプレハブをInspectorで設定できるようにする
[SerializeField] Transform PlayerHandTransform;手札のTransformをInspectorで設定
void Start() { CreateCard(PlayerHandTransform); }ゲーム開始時に手札にカードを1枚生成
CardController card = Instantiate(cardPrefab, hand, false);手札の Transform にカードを生成
card.Init(1);Card1 のデータを適用

このコードでは、カードID 1 を適用していますが、後で ランダムなカードIDを適用できるようにする ことも可能です。

③ GameManagerをシーンに設定

次に、GameManagerスクリプトをシーンに配置 し、Inspectorで設定を行います。

  1. 空のオブジェクトを作成
    • ヒエラルキー（Hierarchy）ウィンドウを右クリック して「Create Empty」を選択
    • 名前を GameManager に変更
  2. GameManagerスクリプトをアタッチ
    • GameManagerオブジェクトを選択
    • Inspectorウィンドウにスクリプトをドラッグ＆ドロップ
  3. Inspectorでプレハブと手札を設定
    • CardPrefab → 作成済みのカードPrefabをドラッグ＆ドロップ
    • PlayerHandTransform → PlayerHandのTransformをドラッグ＆ドロップ

④ 実際に動作を確認

  1. Unityを実行
  2. 手札にカードが1枚生成される
  3. カードの名前やステータスが反映されているか確認
画像に alt 属性が指定されていません。ファイル名: 2024-01-11_161703.png

正しく設定できていれば、Card1の情報が手札に反映された状態で表示 されるはずです。

現在は 1枚のカードしか生成されません が、後のステップで 複数枚のカードを配る処理 を追加します。

次は、カードをドラッグ＆ドロップしてフィールドに移動させる機能を実装 しましょう！

2. カードをフィールドに移動させる

手札にあるカードをフィールドに移動させるには、ドラッグ＆ドロップ機能 を実装する必要があります。Unityでは EventSystems を活用することで、簡単にドラッグ＆ドロップを実装できます。
この記事では、カードをドラッグ＆ドロップできるようにする方法 を解説します。

2-1. カードの準備

まず、カードをドラッグできるようにするために、CanvasGroup コンポーネントを追加します。

① CanvasGroupを追加

  1. カードのPrefabを開く
  2. Inspectorウィンドウ で「Add Component」をクリック
  3. CanvasGroup を検索して追加

この CanvasGroup を使うことで、スクリプトから blocksRaycasts を制御し、ドラッグ中のカードが正しく動作するようにできます。

2-2. ドラッグ＆ドロップを実装するスクリプト

次に、カードをドラッグ＆ドロップできるようにする CardMovement スクリプトを作成します。

① C#スクリプト「CardMovement」を作成

  1. プロジェクトウィンドウを右クリック
  2. 「Create」→「C# Script」を選択
  3. スクリプト名を「CardMovement」にする
  4. スクリプトを開いて、以下のコードを入力
using UnityEngine;
using UnityEngine.EventSystems;

public class CardMovement : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler
{
    public Transform defaultParent;

    public void OnBeginDrag(PointerEventData eventData)
    {
        // カードをドラッグし始めた時の処理
        defaultParent = transform.parent;
        transform.SetParent(defaultParent.parent, false);
        GetComponent<CanvasGroup>().blocksRaycasts = false;
    }

    public void OnDrag(PointerEventData eventData)
    {
        // ドラッグ中のカードの位置をマウスの位置に追従させる
        transform.position = eventData.position;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        // カードを離した時の処理
        transform.SetParent(defaultParent, false);
        GetComponent<CanvasGroup>().blocksRaycasts = true;
    }
}

② スクリプトのポイント

  • OnBeginDrag()：ドラッグ開始時に 親オブジェクトを一時的に変更 し、blocksRaycasts を無効化
  • OnDrag()：マウスの位置にカードを移動
  • OnEndDrag()：元の位置に戻し、blocksRaycastsを有効化

2-3. ドロップ先の設定

次に、カードをフィールドに移動できるように、ドロップ処理を実装します。

① C#スクリプト「DropPlace」を作成

  1. プロジェクトウィンドウを右クリック
  2. 「Create」→「C# Script」を選択
  3. スクリプト名を「DropPlace」にする
  4. スクリプトを開いて、以下のコードを入力
using UnityEngine;
using UnityEngine.EventSystems;

public class DropPlace : MonoBehaviour, IDropHandler
{
    public void OnDrop(PointerEventData eventData)
    {
        // カードがドロップされた時に親を変更する
        CardMovement card = eventData.pointerDrag.GetComponent<CardMovement>();
        if (card != null) 
        {
            card.defaultParent = this.transform;
        }
    }
}

② スクリプトのポイント

  • OnDrop() を使って、ドラッグして離したカードの親オブジェクトを変更
  • eventData.pointerDrag.GetComponent<CardMovement>() で、ドラッグしているカードの情報を取得
  • defaultParent を変更することで、手札からフィールドへカードを移動

2-4. スクリプトをアタッチ

① CardMovement をカードPrefabにアタッチ

  1. カードのPrefabを開く
  2. 「CardMovement」スクリプトを ドラッグ＆ドロップでアタッチ

② DropPlace を PlayerHand と PlayerField にアタッチ

  1. Hierarchyで「PlayerHand」を選択
  2. 「Add Component」→ DropPlace を追加
  3. 同様に「PlayerField」にも DropPlace を追加

2-5. 動作確認

すべての設定が完了したら、Unityを実行して 手札のカードをドラッグ＆ドロップでフィールドに移動 できるか確認しましょう！

✅ 手札のカードをドラッグできるか？
✅ フィールドにカードをドロップすると、正しく配置されるか？
✅ 手札に戻る動作は正しく機能しているか？

まとめ

  • CanvasGroup を追加 してドラッグ中の blocksRaycasts を制御
  • CardMovement を実装 してカードをドラッグ＆ドロップ可能に
  • DropPlace を実装 してカードをフィールドに移動できるようにした
  • PlayerHand と PlayerField に DropPlace をアタッチ して、適切にカードを移動

これで、手札からフィールドへカードを移動させる基本的な仕組みが完成しました！
次回は、ターン制の管理やカードのバトル処理 について実装していきます。

3. 両プレイヤーにカードを配る

カードゲームでは、ゲーム開始時にプレイヤーと敵の両方にカードを配る処理が必要です。ここでは、 両プレイヤーに3枚ずつカードを配る方法 を実装していきます！

3-1. GameManagerのコードを修正

まずは GameManagerスクリプト を修正し、カードを複数枚配る処理を追加しましょう。

① 修正後のスクリプト

using UnityEngine;

public class GameManager : MonoBehaviour
{
    // カードのプレファブを入れる
    [SerializeField] CardController cardPrefab;

    // 両プレイヤーの手札のTransformを入れる
    [SerializeField] Transform PlayerHandTransform, EnemyHandTransform;

    void Start()
    {
        StartGame();
    }

    private void StartGame()
    {
        SettingHand();
    }

    void CreateCard(Transform hand, int cardID) 
    {
        // 手札にカードを生成する
        CardController card = Instantiate(cardPrefab, hand, false);

        // カードIDを指定
        card.Init(cardID);
    }

    void SettingHand() 
    {
        // それぞれの手札に3枚カードを配る
        for (int i = 0; i < 3; i++)
        {
            CreateCard(PlayerHandTransform, i + 1);  // プレイヤー用のカード
            CreateCard(EnemyHandTransform, i + 1);   // 敵用のカード
        }
    }
}

3-2. コードの解説

① StartGame() でゲーム開始時にカードを配る

void Start()
{
    StartGame();
}
  • Start() 内で StartGame() を実行し、ゲーム開始時に SettingHand() を呼び出します。

② CreateCard() でカードを生成

void CreateCard(Transform hand, int cardID) 
{
    CardController card = Instantiate(cardPrefab, hand, false);
    card.Init(cardID);
}
  • Instantiate を使い、指定された手札（hand）に カードPrefabを生成
  • card.Init(cardID); で カードデータを適用 する

③ SettingHand() で3枚ずつカードを配布

void SettingHand() 
{
    for (int i = 0; i < 3; i++)
    {
        CreateCard(PlayerHandTransform, i + 1);
        CreateCard(EnemyHandTransform, i + 1);
    }
}
  • forループ を使って、プレイヤーと敵の 手札に3枚ずつカードを追加
  • i + 1 を使って 異なるカードを生成 するように設定

3-3. Unity側の設定

① GameManagerのInspectorを設定

  • 空のオブジェクト（GameManager）を作成
  • GameManagerスクリプトをアタッチ
  • Inspectorで以下の設定を行う
    • CardPrefab → カードのプレハブを設定
    • PlayerHandTransform → プレイヤーの手札（UI Panel）を設定
    • EnemyHandTransform → 敵の手札（UI Panel）を設定

② Unityを実行して確認

  • ゲームを実行すると、プレイヤーと敵の手札にカードが3枚ずつ生成される
  • カードの情報が適切に表示されているかチェック！

3-4. カスタマイズのポイント

① 配るカードの種類をランダムにする

現在は i + 1 の固定IDを使用していますが、ランダムなカードを配ることもできます。

void SettingHand() 
{
    for (int i = 0; i < 3; i++)
    {
        int randomID = Random.Range(1, 4); // 1〜3のランダムなカード
        CreateCard(PlayerHandTransform, randomID);
        CreateCard(EnemyHandTransform, randomID);
    }
}
  • Random.Range(1, 4); を使用してランダムなカードIDを選択
  • 毎回異なるカードが手札に配られるようになる！

② 配るカードの枚数を増やす

もし 5枚ずつ配りたい 場合は、ループ回数を変更するだけ！

for (int i = 0; i < 5; i++) // 5枚ずつ配る

3-5. まとめ

✅ GameManagerでプレイヤーと敵にカードを配る処理を実装
✅ Inspectorでプレファブや手札のTransformを設定
✅ 実行すると手札に3枚ずつカードが生成される！
✅ ランダムなカードや配る枚数の変更も可能！

次回は ターンの管理やカードの攻撃処理を実装 していきます！お楽しみに！ 😊

【UnityAssetStore】シャドウバース風カードゲーム制作におすすめのアセット
Unityでシャドウバース風のカードゲームを開発したい方必見！本記事では、TCG（トレーディングカードゲーム）制作におすすめのアセット10選を紹介！初心者でも簡単にカードゲームが作れる便利なツールをチェックしよう。
cbagames.jp

まとめ

今回は、カードを手札に生成する方法 や ドラッグ＆ドロップでフィールドに移動させる方法、そして 両プレイヤーにカードを配る方法 を実装しました。

まず GameManagerスクリプト を作成し、手札にカードを生成できるようにしました。Instantiate を使ってカードのプレハブを作成し、Init() メソッドを利用してデータを適用することで、カードが正しく表示されるようになりました。

次に、カードをドラッグ＆ドロップで移動できる機能 を追加しました。CanvasGroup を活用し、スクリプト CardMovement で ドラッグ時の挙動 を制御、さらに DropPlace を利用して カードをフィールドに移動できるように設定 しました。これにより、手札からカードを自由に移動させることができるようになりました。

最後に、両プレイヤーに3枚ずつカードを配る機能 を実装しました。GameManagerの SettingHand() メソッドを拡張し、for ループを使って プレイヤーと敵それぞれにカードを3枚配布 できるようになりました。

これで、カードゲームの基本的な動作が完成しました！次回は ターン管理の仕組み や カードの攻撃処理 を実装し、ゲームをさらに動かせるようにしていきます。少しずつ完成に近づいていくので、引き続き楽しんで開発を進めていきましょう！

よくある質問（FAQ）

Q
カードのIDをランダムにしたい場合は？
A

Random.Range(1, 4); などを使って CreateCard 内でランダムなIDを設定できます。

Q
手札のカードを制限するには？
A

PlayerHandTransform.childCount を確認し、上限を超えたら追加を防ぐ処理 を入れると良いです。

Q
カードをフィールドに配置したままターンを進められる？
A

可能です。次回の記事で ターンの管理方法 を解説予定です！

Unity初心者必見！Asset Storeで手に入るゲーム制作が楽になるおすすめアセット
Unity Asset Storeで手に入るゲーム制作が楽になるおすすめアセットを厳選紹介！ゲーム制作を効率化し、クオリティをアップさせる便利なツールやテンプレートなどを紹介！
cbagames.jp

関連記事:

【Unity 2D】シャドウバース風カードゲームの作り方！ターン制＆ドロー機能を実装（パート4）【Unity 2D】シャドウバース風カードゲームの作り方！初心者向け解説パート2【Unity】Slay the Spire風カードゲーム制作におすすめのアセットUnityのスクリプト設計を改善！SOLID原則で整理する方法TCG Card Shop Simulator風ゲーム制作におすすめのUnityアセット【UnityAssetStore】シャドウバース風カードゲーム制作におすすめのアセット【実践】UnityでJSONデータ管理！セーブ＆ロードを最適化する方法【Unity C#】カスタムイベントの作り方！EventとActionを使いこなそう【Unity 2D】シャドウバース風カードゲームの作り方！初心者向け解説（パート1）Unityのオブジェクト指向設計！継承・ポリモーフィズム・インターフェースを徹底解説
タイトルとURLをコピーしました