2021.02.08 2025.03.11

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方⑨　マナコスト実装編

みじんこ

前回までの記事で、敵への攻撃まで実装出来ましたね。

やってない人は前回の記事参照↓

今回の記事では、マナコストの実装をしていきます！！

完成形はこんな感じ↓

マナの実装が出来ればかなり完成形に近づくので、張り切っていこう！！

では行くぞ！！！

Contents

【全体概要】全体の流れの説明
【実装】マナポイントの実装
【コードの解説】マナポイントの実装
【バグ修正】バグ探しとその修正
- バグ修正対象３つ
最後に、、

【全体概要】全体の流れの説明

ではまず、今回やっていく作業全体の説明をしていきます！

今回の実装の流れはこんな感じ↓

マナポイントをコードから表示する
ターン毎にマナポイントを増やす
カードを出したらマナポイントを減らす
出せるカードに印を付ける
マナポイント以下は出せなくする

ではひとつひとつ実装していこう！！

【実装】マナポイントの実装

①マナポイントをコードから表示する

ではまずマナポイントの表示を設定していくよ！

いま表示されてるマナポイントはあくまで「仮の数字」なので、コードから操作できるようにしていこう！

ではGamaManagerにオレンジ部分を追記していこう↓

（省略）

public class GameManager : MonoBehaviour
{
    [SerializeField] CardController cardPrefab;
    [SerializeField] Transform playerHand, playerField, enemyField;
    [SerializeField] Text playerLeaderHPText;
    [SerializeField] Text enemyLeaderHPText;
    [SerializeField] Text playerManaPointText;
    [SerializeField] Text playerDefaultManaPointText;

    public int playerManaPoint; // 使用すると減るマナポイント
    public int playerDefaultManaPoint; // 毎ターン増えていくベースのマナポイント

（省略）

    void StartGame() // 初期値の設定 
    {
        enemyLeaderHP = 5000;
        playerLeaderHP = 5000;
        ShowLeaderHP();

        /// マナの初期値設定 ///
        playerManaPoint = 1;
        playerDefaultManaPoint = 1;
        ShowManaPoint();

        // 初期手札を配る
        SetStartHand();

        // ターンの決定
        TurnCalc();
    }

    void ShowManaPoint() // マナポイントを表示するメソッド
    {
        playerManaPointText.text = playerManaPoint.ToString();
        playerDefaultManaPointText.text = playerDefaultManaPoint.ToString();
    }

（省略）

}

（省略）

public class GameManager : MonoBehaviour

{

[SerializeField] CardController cardPrefab;

[SerializeField] Transform playerHand, playerField, enemyField;

[SerializeField] Text playerLeaderHPText;

[SerializeField] Text enemyLeaderHPText;

[SerializeField] Text playerManaPointText;

[SerializeField] Text playerDefaultManaPointText;

public int playerManaPoint; // 使用すると減るマナポイント

public int playerDefaultManaPoint; // 毎ターン増えていくベースのマナポイント

（省略）

void StartGame() // 初期値の設定

{

enemyLeaderHP = 5000;

playerLeaderHP = 5000;

ShowLeaderHP();

/// マナの初期値設定 ///

playerManaPoint = 1;

playerDefaultManaPoint = 1;

ShowManaPoint();

// 初期手札を配る

SetStartHand();

// ターンの決定

TurnCalc();

}

void ShowManaPoint() // マナポイントを表示するメソッド

{

playerManaPointText.text = playerManaPoint.ToString();

playerDefaultManaPointText.text = playerDefaultManaPoint.ToString();

}

（省略）

}

特にエラーが出なければアタッチに進もう！！

⓪．まず4つ分ある「ManaCost」を「ManaPoint」に名前を変えよう。
（既に「Point」になってる！って人はスルーで大丈夫。）
※これはただ単に個人的に変えたかっただけなので、「ManaCost」の方がしっくりくる人はそのままでもいいよ！（変えてくれた方が無駄な読み替えが必要ないから、変えた方が楽だとは思うけども）

①．「ManaPoint」を「playerManaPointText」にアタッチする
②．「DefaultManaPoint」を「playerDefaultManaPointText」にアタッチする

では実行してみよう！

マナの数字が１に変わったかな？？

変わったならOK！！

②ターン毎にマナを増やす

では次にマナポイントを毎ターン１づつ増やしていく処理を実装するよ！！

GamaManagerの「PlayerTurn」メソッドにオレンジ部分を追記↓

    void PlayerTurn()
    {

（省略）
        /// マナを増やす
        playerDefaultManaPoint++;
        playerManaPoint = playerDefaultManaPoint;
        ShowManaPoint();

        DrawCard(playerHand); // 手札を一枚加える
    }

void PlayerTurn()

{

（省略）

/// マナを増やす

playerDefaultManaPoint++;

playerManaPoint = playerDefaultManaPoint;

ShowManaPoint();

DrawCard(playerHand); // 手札を一枚加える

}

追記出来たら実行してみよう！！

ターンエンドボタンを押す度にマナポイントが増えるようになったかな？？

無事、実装出来ていたら次へ進もう！

※ちなみに、マナが10以上になった時にもし数字が重なる場合は、左右に表示位置をずらした方がいいかも。こんな感じに↓

③使用時にマナを減らす

では今度は「カードを出す度にマナポイントを減らす処理」を追記していこう！

※ ここから追記するコードが増えるので、間違えないように注意しながら進めてね！！

GameManagerの「ShowManaPointメソッド」の下に下記のメソッドを追記↓

    public void ReduceManaPoint(int cost) // コストの分、マナポイントを減らす
    {
        playerManaPoint -= cost;
        ShowManaPoint();
    }

public void ReduceManaPoint(int cost) // コストの分、マナポイントを減らす

{

playerManaPoint -= cost;

ShowManaPoint();

}

DlopPlaceクラスを下記コードになるように修正↓
※丸々コピペでもOK。

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

// フィールドにアタッチするクラス
public class DropPlace : MonoBehaviour, IDropHandler
{
    public void OnDrop(PointerEventData eventData) // ドロップされた時に行う処理
    {
        //CardMovement card = eventData.pointerDrag.GetComponent<CardMovement>(); // ドラッグしてきた情報からCardMovementを取得
        CardController card = eventData.pointerDrag.GetComponent<CardController>(); // 今回の書き換え部分

        if (card != null) // もしカードがあれば、
        {
            //card.cardParent = this.transform; // カードの親要素を自分（アタッチされてるオブジェクト）にする
            card.movement.cardParent = this.transform; // カードの親要素を自分（アタッチされてるオブジェクト）にする 今回の書き換え部分
            card.DropField(); // カードをフィールドに置いた時の処理を行う
        }
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.EventSystems;

// フィールドにアタッチするクラス

public class DropPlace : MonoBehaviour, IDropHandler

{

public void OnDrop(PointerEventData eventData) // ドロップされた時に行う処理

{

//CardMovement card = eventData.pointerDrag.GetComponent<CardMovement>(); // ドラッグしてきた情報からCardMovementを取得

CardController card = eventData.pointerDrag.GetComponent<CardController>(); // 今回の書き換え部分

if (card != null) // もしカードがあれば、

{

//card.cardParent = this.transform; // カードの親要素を自分（アタッチされてるオブジェクト）にする

card.movement.cardParent = this.transform; // カードの親要素を自分（アタッチされてるオブジェクト）にする今回の書き換え部分

card.DropField(); // カードをフィールドに置いた時の処理を行う

}

CardControllerにオレンジ部分を追記↓

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

public class CardController : MonoBehaviour
{
    public CardView view; // データを表示する
    public CardModel model; // データに関することを処理
    public CardMovement movement;  // 移動(movement)に関することを操作


    private void Awake()
    {
        view = GetComponent<CardView>();
        movement = GetComponent<CardMovement>();
    }

（省略）

    public void DropField()
    {
        GameManager.instance.ReduceManaPoint(model.cost);
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class CardController : MonoBehaviour

{

public CardView view; // データを表示する

public CardModel model; // データに関することを処理

public CardMovement movement; // 移動(movement)に関することを操作

private void Awake()

{

view = GetComponent<CardView>();

movement = GetComponent<CardMovement>();

}

（省略）

public void DropField()

{

GameManager.instance.ReduceManaPoint(model.cost);

}

エラーメッセージが出てないことを確認して、問題なければ実行してみよう！

カードを出した時にマナポイントが減るようになったかな？？

無事減ったならOK！！次に進もう！

④使用可能な手札にカードに印を付ける

マナポイントは減るようになったけど、こんな感じで↓

今のままだといくらでもカードを出せちゃう！！

という訳で、まずは「使用可能な手札のカード」に緑の枠を付けるようにしていくよ！！

GameManagerの「ReduceManaPoint」メソッドとその下に追記しよう↓

    public void ReduceManaPoint(int cost)
    {
        playerManaPoint -= cost;
        ShowManaPoint();

        SetCanUsePanelHand();
    }

    void SetCanUsePanelHand() // 手札のカードを取得して、使用可能なカードにCanUseパネルを付ける
    {        
        CardController[] playerHandCardList = playerHand.GetComponentsInChildren<CardController>();
        foreach (CardController card in playerHandCardList)
        {
            if (card.model.cost <= playerManaPoint)
            {
                card.model.canUse = true;
                card.view.SetCanUsePanel(card.model.canUse);
            }
            else
            {
                card.model.canUse = false;
                card.view.SetCanUsePanel(card.model.canUse);
            }
        }
    }

public void ReduceManaPoint(int cost)

{

playerManaPoint -= cost;

ShowManaPoint();

SetCanUsePanelHand();

}

void SetCanUsePanelHand() // 手札のカードを取得して、使用可能なカードにCanUseパネルを付ける

{

CardController[] playerHandCardList = playerHand.GetComponentsInChildren<CardController>();

foreach (CardController card in playerHandCardList)

{

if (card.model.cost <= playerManaPoint)

{

card.model.canUse = true;

card.view.SetCanUsePanel(card.model.canUse);

}

else

{

card.model.canUse = false;

card.view.SetCanUsePanel(card.model.canUse);

}

同じくGameManagerの「DrawCard」メソッドにオレンジ部分を追記しよう↓

    void DrawCard(Transform hand) // カードを引く
    {
        // デッキがないなら引かない
        if (deck.Count == 0)
        {
            return;
        }

        CardController[] playerHandCardList = playerHand.GetComponentsInChildren();

        if (playerHandCardList.Length < 9)
        {
            // デッキの一番上のカードを抜き取り、手札に加える
            int cardID = deck[0];
            deck.RemoveAt(0);
            CreateCard(cardID, hand);
        }

        SetCanUsePanelHand();
    }

void DrawCard(Transform hand) // カードを引く

{

// デッキがないなら引かない

if (deck.Count == 0)

{

return;

}

CardController[] playerHandCardList = playerHand.GetComponentsInChildren();

if (playerHandCardList.Length < 9)

{

// デッキの一番上のカードを抜き取り、手札に加える

int cardID = deck[0];

deck.RemoveAt(0);

CreateCard(cardID, hand);

}

SetCanUsePanelHand();

}

CardModelにオレンジ部分を追記↓

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

public class CardModel
{
    public int cardId;
    public string name;
    public int cost;
    public int power;
    public Sprite icon;

    public bool canUse = false;
    public bool PlayerCard = false;
    public bool canAttack = false;
（以下、省略）

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using System;

public class CardModel

{

public int cardId;

public string name;

public int cost;

public int power;

public Sprite icon;

public bool canUse = false;

public bool PlayerCard = false;

public bool canAttack = false;

（以下、省略）

CardViewにオレンジ部分を修正、追記↓

public class CardView : MonoBehaviour
{
    [SerializeField] Text nameText, powerText, costText;
    [SerializeField] Image iconImage;
    [SerializeField] GameObject canAttackPanel, canUsePanel;

    public void Show(CardModel cardModel) // cardModelのデータ取得と反映
    {
        nameText.text = cardModel.name;
        powerText.text = cardModel.power.ToString();
        costText.text = cardModel.cost.ToString();
        iconImage.sprite = cardModel.icon;
    }

    public void SetCanAttackPanel(bool flag)
    {
        canAttackPanel.SetActive(flag);
    }

    public void SetCanUsePanel(bool flag) // フラグに合わせてCanUsePanelを付けるor消す
    {
        canUsePanel.SetActive(flag);
    }
}

public class CardView : MonoBehaviour

{

[SerializeField] Text nameText, powerText, costText;

[SerializeField] Image iconImage;

[SerializeField] GameObject canAttackPanel, canUsePanel;

public void Show(CardModel cardModel) // cardModelのデータ取得と反映

{

nameText.text = cardModel.name;

powerText.text = cardModel.power.ToString();

costText.text = cardModel.cost.ToString();

iconImage.sprite = cardModel.icon;

}

public void SetCanAttackPanel(bool flag)

{

canAttackPanel.SetActive(flag);

}

public void SetCanUsePanel(bool flag) // フラグに合わせてCanUsePanelを付けるor消す

{

canUsePanel.SetActive(flag);

}

CardControllerのDropFieldメソッドにオレンジ部分を追記↓

    public void DropField()
    {
        GameManager.instance.ReduceManaPoint(model.cost);
        model.canUse = false;
        view.SetCanUsePanel(model.canUse); // 出した時にCanUsePanelを消す
    }

public void DropField()

{

GameManager.instance.ReduceManaPoint(model.cost);

model.canUse = false;

view.SetCanUsePanel(model.canUse); // 出した時にCanUsePanelを消す

}

コードを張り付けてエラーがないことを確認したら、次はパネルをアタッチをしていくよ！

①②Cardプレハブをクリックして、「OpenPrefab」をクリック

①「CanUsePanel」をアタッチする。

では実行してみよう！！

2コスト以下の手札に枠が付いて、、

1コストのカードを出すと、マナポイントが１になって、コストが１のカードにだけ枠が付いた！！

という感じ！！！！

だいぶゲームっぽくなってきたね！

あともうちょっと頑張ろう！！

⑤マナポイント以上のコストのカードを出せないようにする

とは言えまだマナポイントを下回ってもカードを出せてしまうので、次はマナポイントよりコストが大きいカードは動かせないようにしていくよ！！

ではやっていこう！

CardMovementにオレンジ部分を追記しよう↓

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

public class CardMovement : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler
{
    public Transform cardParent;
    bool canDrag = true; // カードを動かせるかどうかのフラグ

    public void OnBeginDrag(PointerEventData eventData) // ドラッグを始めるときに行う処理
    {
        CardController card = GetComponent<CardController>();
        canDrag = true;

        if (card.model.canUse == false) // マナコストより少ないカードは動かせない
        {
            canDrag = false;
        }

        if (canDrag == false)
        {
            return;
        }

        cardParent = transform.parent;
        transform.SetParent(cardParent.parent, false);
        GetComponent<CanvasGroup>().blocksRaycasts = false; // blocksRaycastsをオフにする
    }

    public void OnDrag(PointerEventData eventData) // ドラッグした時に起こす処理
    {
        if (canDrag == false)
        {
            return;
        }
        
        transform.position = eventData.position;
    }

    public void OnEndDrag(PointerEventData eventData) // カードを離したときに行う処理
    {
        if (canDrag == false)
        {
            return;
        }
        
        transform.SetParent(cardParent, false);
        GetComponent<CanvasGroup>().blocksRaycasts = true; // blocksRaycastsをオンにする   
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.EventSystems;

public class CardMovement : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler

{

public Transform cardParent;

bool canDrag = true; // カードを動かせるかどうかのフラグ

public void OnBeginDrag(PointerEventData eventData) // ドラッグを始めるときに行う処理

{

CardController card = GetComponent<CardController>();

canDrag = true;

if (card.model.canUse == false) // マナコストより少ないカードは動かせない

{

canDrag = false;

}

if (canDrag == false)

{

return;

}

cardParent = transform.parent;

transform.SetParent(cardParent.parent, false);

GetComponent<CanvasGroup>().blocksRaycasts = false; // blocksRaycastsをオフにする

}

public void OnDrag(PointerEventData eventData) // ドラッグした時に起こす処理

{

if (canDrag == false)

{

return;

}

transform.position = eventData.position;

}

public void OnEndDrag(PointerEventData eventData) // カードを離したときに行う処理

{

if (canDrag == false)

{

return;

}

transform.SetParent(cardParent, false);

GetComponent<CanvasGroup>().blocksRaycasts = true; // blocksRaycastsをオンにする

}

では実行してみよう！！

マナポイント以上のコストのカードを引っ張っても動かなくなったかな？？

これで大枠は完成！！

多少のバグが残っているけど、一旦コードの解説をしてから後で修正していくよ！！

【コードの解説】マナポイントの実装

今回はかなり色々なクラスをいじったので、

「どこをどう変えて、どうなったのか。」

をよく確認しながら進んで行こう！！

今回の実装の流れはこんな感じだったよね↓

マナポイントを表示する
ターン毎にマナポイントを増やす
カードを出したらマナポイントを減らす
出せるカードに印を付ける
マナポイント以下は出せなくする

ではそれぞれの詳細について説明していくよ！！

①マナポイントの表示

まずはマナポイントを表示するコードの解説をしていくよ！！

ここではまず、

「マナポイントを表示するメソッド」を作成する。
マナポイントに数字を入れる。
マナポイントを表示する。

ってな流れでマナポイントを表示しているよ。

では実際のコードで見ていこう！

①「マナポイントを表示するメソッド」を作成

まずは「マナポイントを表示するメソッド」を作成するよ！

≪GameManager≫

    /// 【解説①】マナポイントを表示する ///
    void ShowManaPoint()
    {
        playerManaPointText.text = playerManaPoint.ToString();
        playerDefaultManaPointText.text = playerDefaultManaPoint.ToString();
    }

≪GameManager≫

/// 【解説①】マナポイントを表示する ///

void ShowManaPoint()

{

playerManaPointText.text = playerManaPoint.ToString();

playerDefaultManaPointText.text = playerDefaultManaPoint.ToString();

}

メソッドの中の処理としては、

「マナポイントテキストって言う文字列に、
マナポイントっていう数字を文字列に変換して入れますよ！！」

ってなことをしているよ。

ただこの説明だと正直、

初心者なひと

は？？急に何言ってんのこいつ？

って思われそうなので、

最強に砕けた説明をすると、

文字しか受け付けない超数学嫌いの「てきすと子」に、「マナポイントはこれだよー」って、「１」を渡すと、「数字とか、まじむり。」って言われるけど、

「１」を文字として、てきすと子に渡す(ToString)と、「１ね。おっけー」って受け取ってくれるわけですよ！

（分かる？この説明？？笑）

②③初期値の入力とマナポイントの表示

次は②マナポイントの初期値を設定して、さっき書いた③「ShowManaPoint」メソッドでマナポイントを表示するよ！

≪GameManager≫

    void StartGame() // 初期値の設定 
    {
        /// 【解説②】マナポイントの初期値の設定 ///
        playerManaPoint = 1;
        playerDefaultManaPoint = 1;
        ShowManaPoint(); /// 【解説③】マナポイントを表示
    }

≪GameManager≫

void StartGame() // 初期値の設定

{

/// 【解説②】マナポイントの初期値の設定 ///

playerManaPoint = 1;

playerDefaultManaPoint = 1;

ShowManaPoint(); /// 【解説③】マナポイントを表示

}

②ターン毎にマナポイントを増やす

ここでは単に、
「自分のターンが来たら、マナポイントを１増やす」
って処理をやっているよ！

なのでターン毎の動きを処理している「PlayerTurn」メソッドに追記をして、マナポイントの増加を実装しているよ↓

    void PlayerTurn()
    {
        /// 【解説】マナを増やす処理 ///
        playerDefaultManaPoint++; // マナポイントを1増やす
        playerManaPoint = playerDefaultManaPoint;
        ShowManaPoint(); // マナポイントを表示する
    }

void PlayerTurn()

{

/// 【解説】マナを増やす処理 ///

playerDefaultManaPoint++; // マナポイントを1増やす

playerManaPoint = playerDefaultManaPoint;

ShowManaPoint(); // マナポイントを表示する

}

③カード使用時にマナポイントを減らす

今回の記事ではここからの処理が肝になるよ！

追記した処理が結構多いので、処理の流れを抑えると、

カードがフィールドに置かれると、
「DropPlace」クラスの「OnDrop」メソッドが起動。
その中で「CardController」クラスの「DropField」が呼ばれて、
「GameManager」クラスの「ReduceManaPoint」を呼んで、
コスト分マナポイントを減らして、
現在のマナポイントを表示する。

こんな感じで色んな処理が連続して実装されてるよ！

ではコードを含めて見ていこう！

①②③フィールドにカードが置かれると、「OnDrop」メソッドが動く

カードをフィールドにドロップすると、Fieldに貼り付けた「DropPlace」クラスの「OnDrop」メソッドが動くよね？

その中で、今回追記した「DropField」メソッドが呼ばれる。

≪DropPlace≫

    public void OnDrop(PointerEventData eventData) // ドロップされた時に行う処理
    {
        CardController card = eventData.pointerDrag.GetComponent<CardController>();

        if (card != null) /// 【解説①②】カードがフィールドに置かれると、
        {
            card.movement.cardParent = this.transform;
            card.DropField(); // 【解説③】DropFieldメソッドを呼ぶ
        }
    }

≪DropPlace≫

public void OnDrop(PointerEventData eventData) // ドロップされた時に行う処理

{

CardController card = eventData.pointerDrag.GetComponent<CardController>();

if (card != null) /// 【解説①②】カードがフィールドに置かれると、

{

card.movement.cardParent = this.transform;

card.DropField(); // 【解説③】DropFieldメソッドを呼ぶ

}

④DropFieldメソッドが呼ばれる

「DropFieldメソッド」が呼ばれて、「ReduceManaPoint」（マナポイントを減らす処理）を呼ぶ。

≪CardController≫

    /// 【解説④】カードをフィールドに置いた時の処理 ///
    public void DropField()
    {
        GameManager.instance.ReduceManaPoint(model.cost); /// マナを減らす
    }

≪CardController≫

/// 【解説④】カードをフィールドに置いた時の処理 ///

public void DropField()

{

GameManager.instance.ReduceManaPoint(model.cost); /// マナを減らす

}

⑤⑥マナポイントを減らして、表示する

「ReduceManaPoint」メソッドが呼ばれたので、マナポイントからカードのコストの数字を引いて、「ShowManaPoint」メソッドを呼んで、マナポイントを改めて表示する！！って感じ！

≪GameManager≫

    /// カード使用時にマナポイントを減らす処理 ///////////////////////
    public void ReduceManaPoint(int cost)
    {
        playerManaPoint -= cost; /// 【解説⑤】「playerManaPoint」をコスト分減らす
        ShowManaPoint(); /// 【解説⑥】マナポイントを表示する
    }

≪GameManager≫

/// カード使用時にマナポイントを減らす処理 ///////////////////////

public void ReduceManaPoint(int cost)

{

playerManaPoint -= cost; /// 【解説⑤】「playerManaPoint」をコスト分減らす

ShowManaPoint(); /// 【解説⑥】マナポイントを表示する

}

④手札の使用可能カードに印を付ける

ここの処理もややこしいので、まず流れを抑えよう。

CardModelクラスに「canUse」という、使用可能かどうかを判断するフラグを作る。
CardViewクラスに「SetCanUsePanel」メソッド（canUseの値によって、カードに緑の枠を付ける or 消す処理をするメソッド）を追記する。
GameManagerクラスに「SetCanUsePanelHand」メソッド（手札のカードのコストとマナポイントを比較して、マナポイントの方が多いカードには緑の枠を付けるメソッド）を追記する。
ドローした時に「SetCanUsePanelHand」を実行する様にする。
カードを使った時に「SetCanUsePanelHand」を実行する様にする。
カードをフィールドに出した時に、「canUse」の値をfalseにして「CanUsePanel」を外す。（緑の枠を取る）

文字で書くとめっちゃゴチャゴチャしてるけど、

コードなら割とシンプルなのでコードを見ながら説明していくよ！

①「canUse」フラグの作成

カード1枚1枚に「今このカードは使用できるかどうか」のフラグを作る。

初期値は当然、false。

≪CardModel≫ 

public class CardModel
{
    public bool canUse = false; /// 【解説①】「使用できるかどうか」のフラグを作る
}

≪CardModel≫

public class CardModel

{

public bool canUse = false; /// 【解説①】「使用できるかどうか」のフラグを作る

}

②フラグに合わせて緑の枠を付ける or 消すメソッドの作成

このカードが使用できるかどうかを表す「CanUse」フラグに合わせて、「CanUsePanel」を付ける or 消すメソッドを作る。

≪CardView≫ 

public class CardView : MonoBehaviour
{
    ///【解説②】「CanUsePanel」をフラグに合わせて消すor出すメソッド
    public void SetCanUsePanel(bool flag)
    {
        canUsePanel.SetActive(flag);
    }
}

≪CardView≫

public class CardView : MonoBehaviour

{

///【解説②】「CanUsePanel」をフラグに合わせて消すor出すメソッド

public void SetCanUsePanel(bool flag)

{

canUsePanel.SetActive(flag);

}

③手札のカードに「CanUsePanel」を付ける

手札のカードのリストを取得して、条件に当てはまるカードに「CanUsePanel」を付けていってるよ！

≪GameManager≫ 

    /// 【解説③】手札の使用可能なカードに枠を付ける処理
    void SetCanUsePanelHand()
    {
        // 手札のカードを取得して、CanUseパネルを付ける
        CardController[] playerHandCardList = playerHand.GetComponentsInChildren&lt;CardController&gt;();
        foreach (CardController card in playerHandCardList) // 手札のカードを1枚づつ判定する
        {
            if (card.model.cost &lt;= playerManaPoint) // マナポイントよりコストが小さい場合
            {
                card.model.canUse = true;
                card.view.SetCanUsePanel(card.model.canUse); // パネルを付ける
            }
            else // マナポイントよりコストが大きい場合
            {
                card.model.canUse = false;
                card.view.SetCanUsePanel(card.model.canUse); // パネルを消す
            }
        }
    }

≪GameManager≫

/// 【解説③】手札の使用可能なカードに枠を付ける処理

void SetCanUsePanelHand()

{

// 手札のカードを取得して、CanUseパネルを付ける

CardController[] playerHandCardList = playerHand.GetComponentsInChildren<CardController>();

foreach (CardController card in playerHandCardList) // 手札のカードを1枚づつ判定する

{

if (card.model.cost <= playerManaPoint) // マナポイントよりコストが小さい場合

{

card.model.canUse = true;

card.view.SetCanUsePanel(card.model.canUse); // パネルを付ける

}

else // マナポイントよりコストが大きい場合

{

card.model.canUse = false;

card.view.SetCanUsePanel(card.model.canUse); // パネルを消す

}

④ドローした時に「SetCanUsePanelHand」を実行する

ドローした時にも改めて「SetCanUsePanelHand」メソッドを実行しよう。

これをしないと、ドローしたカードに対して「CanUse」のフラグが更新されないので、本当なら使えるはずのコストのカードでも使えなくなっちゃうので注意！！

≪GameManager≫

    void DrawCard(Transform hand) // カードを引く
    {
        if (playerHandCardList.Length &lt; 9)
        {
            // デッキの一番上のカードを抜き取り、手札に加える
            int cardID = deck[0];
            deck.RemoveAt(0);
            CreateCard(cardID, hand);
        }

        SetCanUsePanelHand(); ///【解説④】ドローした後に「CanUsePanel」の更新をする」
    }

≪GameManager≫

void DrawCard(Transform hand) // カードを引く

{

if (playerHandCardList.Length < 9)

{

// デッキの一番上のカードを抜き取り、手札に加える

int cardID = deck[0];

deck.RemoveAt(0);

CreateCard(cardID, hand);

}

SetCanUsePanelHand(); ///【解説④】ドローした後に「CanUsePanel」の更新をする」

}

⑤カードを使用した時に「SetCanUsePanelHand」を実行する

さっきと同じく、マナポイントが変化した時にも「SetCanUsePanelHand」メソッドを実行しよう。

「ReduceManaPoint」の中にこのメソッドを入れることで、マナポイントが減った後に、手札のカードのコストとマナポイントを比較して、「CanUsePanel」を付けてくれるよ！

≪GameManager≫

    public void ReduceManaPoint(int cost)
    {
        playerManaPoint -= cost;
        ShowManaPoint();

        /// 【解説⑤】マナポイントを減らした後にも改めて「CanUsePanel」を更新する
        SetCanUsePanelHand();
    }

≪GameManager≫

public void ReduceManaPoint(int cost)

{

playerManaPoint -= cost;

ShowManaPoint();

/// 【解説⑤】マナポイントを減らした後にも改めて「CanUsePanel」を更新する

SetCanUsePanelHand();

}

⑥フィールドに出した時に「CanUsePanel」を消す

手札の「CanUsePanel」が付いたカードを出すと、パネルが付いたままフィールドに置かれてしまうので、

「DropField」メソッド（カードをフィールドに置いた時に動く処理）に、「CanUsePanel」を消す処理を書き加えてあげよう！！

≪CardController≫ 

    public void DropField()
    {
        GameManager.instance.ReduceManaPoint(model.cost);
        model.canUse = false;
        view.SetCanUsePanel(model.canUse); ///【解説⑥】フィールドに出した時にCanUsePanelを消す
    }

≪CardController≫

public void DropField()

{

GameManager.instance.ReduceManaPoint(model.cost);

model.canUse = false;

view.SetCanUsePanel(model.canUse); ///【解説⑥】フィールドに出した時にCanUsePanelを消す

}

⑤マナ以上のカードを動かせなくする

では最後に使用できないカードを動かせないようにするコードの説明していくよ！

流れとしてはこんな感じ↓

「canDrag」フラグ（カードを動かせる or 動かせないのフラグ）を作る。
「canUse」の値によって「canDrag」フラグを変更する。
「canDrag」がFalseなら動かせない処理を入れる。

コードだとこんな感じ↓

≪CardMovement≫

public class CardMovement : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler
{
    bool canDrag = true; /// 【解説①】カードを動かせるかどうかのフラグ

    public void OnBeginDrag(PointerEventData eventData) // ドラッグを始めるときに行う処理
    {
        CardController card = GetComponent&lt;CardController&gt;();
        canDrag = true;

        if (card.model.canUse == false) ///【解説②】「CanUse」に合わせてフラグを変更する
        {
            canDrag = false;
        }

        if (canDrag == false) ///【解説③】フラグがFalseなら処理を止める
        {
            return;
        }

       （Parentを変える等の処理 省略）
    }

    public void OnDrag(PointerEventData eventData) // ドラッグした時に起こす処理
    {
        if (canDrag == false) ///【解説③】フラグがFalseなら処理を止める
        {
            return;
        }
        
        transform.position = eventData.position;
    }

    public void OnEndDrag(PointerEventData eventData) // カードを離したときに行う処理
    {
        if (canDrag == false) ///【解説③】フラグがFalseなら処理を止める
        {
            return;
        }

        （Parentを変える等の処理 省略） 
    }
}

≪CardMovement≫

public class CardMovement : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler

{

bool canDrag = true; /// 【解説①】カードを動かせるかどうかのフラグ

public void OnBeginDrag(PointerEventData eventData) // ドラッグを始めるときに行う処理

{

CardController card = GetComponent<CardController>();

canDrag = true;

if (card.model.canUse == false) ///【解説②】「CanUse」に合わせてフラグを変更する

{

canDrag = false;

}

if (canDrag == false) ///【解説③】フラグがFalseなら処理を止める

{

return;

}

（Parentを変える等の処理省略）

}

public void OnDrag(PointerEventData eventData) // ドラッグした時に起こす処理

{

if (canDrag == false) ///【解説③】フラグがFalseなら処理を止める

{

return;

}

transform.position = eventData.position;

}

public void OnEndDrag(PointerEventData eventData) // カードを離したときに行う処理

{

if (canDrag == false) ///【解説③】フラグがFalseなら処理を止める

{

return;

}

（Parentを変える等の処理省略）

}

ざっくり説明していったけど分かったかな？？

色々コードが出てきて混乱するかもしれないけど、処理は一方向に進んでるだけなので解説を何度か読んでみれば分かるはず！

それでもよくわからなかった場合は、解説を読みながらもう一度ゲームを作り直してみると深く理解出来るはずだよ！

それでも分かりづらい等あればコメントくださいー！！

【バグ修正】バグ探しとその修正

では最後にバグの修正をしていこう！！

まずは今回直すべきバグは何があるかを探してみよう！

今回気になるバグは大きく３つかな？？

いつも言ってますが、バグ探しも自分でゲームを作る際の立派な練習になるよ！

バグを見つけたら「こうやったら直せるかも！」って風にその解決方法も考えるとメキメキ力が付くよ！

解説に沿って作るだけでなく、ちょっと立ち止まって考えてみてね！！

では実際にゲームを動かしながらバグを３つ見つけてみよう！！

バグ修正対象３つ

ではでは、今回直すべきバグはこの３つ↓

・手札から場に置いたときに出せてないのに、コストが引かれる
・フィールドからフィールドにドロップした時にもコストが引かれる
・フィールドのカードが動かせない

どれもなかなか致命的なのでしっかり直していこう！！

バグ修正① フィールドに置いた時、出せないカードをドロップした場合もコストが減る

現状では、使用できない手札のカードをフィールドにドロップすると、カードはフィールドに置けないけどマナポイントがコスト分引かれてしまう！

という訳で、まずはこのバグを解消していこう！！

ではまず、こうなってしまう原因を考えると、

今の処理だと「とりあえず全部区別なく、フィールドにカードが置かれたらコスト分マナポイントを減らせ！！」ってなってるのが原因だよね。

ということは、「使用できないカード（「CanUse」フラグがFalseのカード）をフィールドにドロップした時は、処理を動かすな！！！」とすれば解決するので、

現状、DropPlaceクラスの「OnDrop」メソッドが

「カードがフィールドに置かれたら、DropFieldメソッドを実行する」となっているのを、

「CanUseフラグがTrueなら、DropFieldメソッドを実行する」という分岐にしてあげればOK！！

コードで言うとこんな感じ↓

    public void OnDrop(PointerEventData eventData) // ドロップされた時に行う処理
    {
        CardController card = eventData.pointerDrag.GetComponent<CardController>();

        if (card != null) // もしカードがあれば、
        {
            if (card.model.canUse == true)  // 使用可能なカードなら、
            {
                card.movement.cardParent = this.transform; // カードの親要素を自分（アタッチされてるオブジェクト）にする 今回の書き換え部分
                card.DropField(); // カードをフィールドに置いた時の処理を行う
            }
        }
    }

public void OnDrop(PointerEventData eventData) // ドロップされた時に行う処理

{

CardController card = eventData.pointerDrag.GetComponent<CardController>();

if (card != null) // もしカードがあれば、

{

if (card.model.canUse == true) // 使用可能なカードなら、

{

card.movement.cardParent = this.transform; // カードの親要素を自分（アタッチされてるオブジェクト）にする今回の書き換え部分

card.DropField(); // カードをフィールドに置いた時の処理を行う

}

DropPlaceクラスの「OnDrop」メソッドのオレンジ部分を上記の様に修正したら実行してみよう！

マナポイント以上のコストのカードをフィールドにドロップしても、マナポイントは減らないようになったかな？？

ちなみにフィールドに出てるカードのCanUseフラグはFalseなので、②のフィールドにある「フィールドにあるカードをフィールドにドロップしてもマナポイントが減る」ってバグも同時解決するよ！！

③フィールドのカードが動かない

「マナポイント関連のバグは直ったけど、
　フィールドのカードが動かなくなってんじゃん！！( ﾟДﾟ)」

って感じなので、次はそこを直していきましょう！

この原因としては、CanUseフラグがFalseなら動けなくしてるからだよね？

まあこれ自体は正しいんだけど、あくまで手札のカードに対してそうして欲しい！って処理なのに、フィールドのカードまでそうなってしまってるのが原因。

という訳で、「フィールドのカードにはこの処理を行いませんよ～」ってやればOK！

なのでまずは、「フィールドのカードですよ～」って分かるようなフラグを作ろう。

CardModelにオレンジ部分を追記↓

    public bool canUse = false;
    public bool PlayerCard = false;
    public bool FieldCard = false;
    public bool canAttack = false;

public bool canUse = false;

public bool PlayerCard = false;

public bool FieldCard = false;

public bool canAttack = false;

そんでその後は、フィールドにカードを出した時に、そのカードの「FieldCard」フラグをTrueにする処理を追記する。

CardControllerの「DropField」メソッドにオレンジ部分を追記↓

    public void DropField()
    {
        GameManager.instance.ReduceManaPoint(model.cost);
        model.FieldCard = true; // フィールドのカードのフラグを立てる
        model.canUse = false;
        view.SetCanUsePanel(model.canUse);
    }

public void DropField()

{

GameManager.instance.ReduceManaPoint(model.cost);

model.FieldCard = true; // フィールドのカードのフラグを立てる

model.canUse = false;

view.SetCanUsePanel(model.canUse);

}

そんで最後に、

「手札のカードなら、カードのコストがマナポイントより大きいカードは動かない。」
「フィールドのカードなら、攻撃できないカードは動かせない。」

というように、手札のカードかフィールドのカードかで処理を変えればOK！

CardMovementクラスのコードのオレンジ部分を修正してみよう！！↓

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

public class CardMovement : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler
{
    public Transform cardParent;
    bool canDrag = true;

    public void OnBeginDrag(PointerEventData eventData) // ドラッグを始めるときに行う処理
    {
        
        CardController card = GetComponent();

        canDrag = true;

        if (card.model.FieldCard == false) // 手札のカードなら
        {
            if (card.model.canUse == false) // マナコストより少ないカードは動かせない
            {
                canDrag = false;
            }
        }
        else
        {
            if (card.model.canAttack == false) // 攻撃不可能なカードは動かせない
            {
                canDrag = false;
            }
        }

        if (canDrag == false)
        {
            return;
        }

        cardParent = transform.parent;
        transform.SetParent(cardParent.parent, false);
        GetComponent().blocksRaycasts = false; // blocksRaycastsをオフにする
    }
（省略）
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.EventSystems;

public class CardMovement : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler

{

public Transform cardParent;

bool canDrag = true;

public void OnBeginDrag(PointerEventData eventData) // ドラッグを始めるときに行う処理

{

CardController card = GetComponent();

canDrag = true;

if (card.model.FieldCard == false) // 手札のカードなら

{

if (card.model.canUse == false) // マナコストより少ないカードは動かせない

{

canDrag = false;

}

else

{

if (card.model.canAttack == false) // 攻撃不可能なカードは動かせない

{

canDrag = false;

}

if (canDrag == false)

{

return;

}

cardParent = transform.parent;

transform.SetParent(cardParent.parent, false);

GetComponent().blocksRaycasts = false; // blocksRaycastsをオフにする

}

（省略）

}

では実行してバグを確かめてみよう！！

フィールドの攻撃可能なカードが動かせるようになったかな？？

無事出来ていたら完成！！！

超お疲れ様！！！(*´Д｀)

最後に、、

今回も最後まで解説を読んでいただき、ありがとうございました！！

処理がだいぶ複雑になってきたので分かりづらい部分もあるとは思いますが、ベースの完成までもうすぐなんで、もうちょっと頑張りましょー！

記事数で言うとあと2記事ですかね。（敵のモンスターの攻撃と、エフェクト関係の2記事）

なので今月中(2月)には完成できるんじゃないかな～と思っております！（あくまで予定）

そして最後にこの場を借りて、謝罪とお礼を言わせてください。

めっちゃ記事の更新放置してしまってごめんよ！！！

そしてその間もコメントを書いて送ってくださった皆様、

ほんっっっとうにありがとうございました！！

コメントをもらう度に、やる気を貰いました。元気を貰ってました。

そしてまたこうやって記事を更新出来ました。

このカードゲーム作成解説記事は、大学2年の時に「カードゲームが作りたい！！」って思って調べてみたけど、ことごとく意味が分かんなくて挫折した当時の僕を助けられる記事を書けたらいいな～って思いで書き始めたものです。

始めは正直「自分の備忘録程度に書いとこ！」ってくらいだったんですが、当時の僕と同じように「プログラミングなんて全然分かんないけど、カードゲームが作りたい！！」って完全な初心者の人達が「僕にも作れました！ありがとうございます！！」って言ってくれるのが嬉しくてここまで書くことが出来ました。

とはいえまだまだ途中なので、

このままでは当時の僕に「なんだよみじんこ！解説が途中でいつまでもカードゲームが完成しないじゃんよ！！おこだぜ！ぷんぷんだぜ！！」って言われちゃうので、出来るだけ早めに、分かりやすく記事を出せるようにします！！

まあいろいろ書きましたが、要は「コメントしてくれてありがとう！！」ってことです！笑

ひとつひとつのコメントが嬉しいです。

（返信してない人はごめん！これからします！笑）

もちろん「ここがちょっと読みづらい。分かりづらい。」ってコメントもありがたいので、気付いたことがあればコメントくださいな！！

ではでは今回はこれで終わりっ！！！

次は敵のモンスターの攻撃を実装していくよ！！

次の記事↓

前の記事↓

参考にさせて頂いた動画
[Unityゲーム開発講座] シャドバ風！？カードゲームの作り方 #1 UIの実装

【ゲームを作りたい初心者必見！】UnityとC#の勉強方法まとめこんな疑問に答えます。 ■本記事のテーマ【完全初心者向け】Unityでゲームを作るための勉強法【3...

【男子の夢】子供の頃に作ったカードゲームをデジタル化して遊んでみたいんじゃ！！全ての男の夢を今、叶えん。子供の頃に作った自作カードゲームをデジタル化するぞーー！！！というわけで今日...

ひとってついつい『三番目に好きなこと』をやっちゃうよね。って話めっちゃ久しぶりにただの雑記。話の内容としてはまあタイトルの通りなんだけど、休みの日とかってつい、一番やりたいこととか...

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方⑨　マナコスト実装編

【全体概要】全体の流れの説明

【実装】マナポイントの実装

①マナポイントをコードから表示する

②ターン毎にマナを増やす

③使用時にマナを減らす

④使用可能な手札にカードに印を付ける

⑤マナポイント以上のコストのカードを出せないようにする

【コードの解説】マナポイントの実装

①マナポイントの表示

①「マナポイントを表示するメソッド」を作成

②③初期値の入力とマナポイントの表示

②ターン毎にマナポイントを増やす

③カード使用時にマナポイントを減らす

①②③フィールドにカードが置かれると、「OnDrop」メソッドが動く

④DropFieldメソッドが呼ばれる

⑤⑥マナポイントを減らして、表示する

④手札の使用可能カードに印を付ける

①「canUse」フラグの作成

②フラグに合わせて緑の枠を付ける or 消すメソッドの作成

③手札のカードに「CanUsePanel」を付ける

④ドローした時に「SetCanUsePanelHand」を実行する

⑤カードを使用した時に「SetCanUsePanelHand」を実行する

⑥フィールドに出した時に「CanUsePanel」を消す

⑤マナ以上のカードを動かせなくする

【バグ修正】バグ探しとその修正

バグ修正対象３つ

バグ修正① フィールドに置いた時、出せないカードをドロップした場合もコストが減る

③フィールドのカードが動かない

最後に、、

コメントをキャンセル

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方⑧　リーダーへの攻撃編

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方③ 手札の生成編

【Unity カードゲーム】デッキ作成、編成機能の実装方法③ カードの種類の実装編【解説通りに作るだけ】

【Unity カードゲーム】オンライン対戦機能の実装方法解説【解説通りに作るだけ】

【ゲームを作りたい初心者必見！】UnityとC#の勉強方法まとめ

【Unity】デッキ(リスト)をシャッフル(ランダムに)する方法【コピペで完成】

【全体概要】全体の流れの説明

【実装】マナポイントの実装

①マナポイントをコードから表示する

②ターン毎にマナを増やす

③使用時にマナを減らす

④使用可能な手札にカードに印を付ける

⑤マナポイント以上のコストのカードを出せないようにする

【コードの解説】マナポイントの実装

①マナポイントの表示

①「マナポイントを表示するメソッド」を作成

②③初期値の入力とマナポイントの表示

②ターン毎にマナポイントを増やす

③カード使用時にマナポイントを減らす

①②③フィールドにカードが置かれると、「OnDrop」メソッドが動く

④DropFieldメソッドが呼ばれる

⑤⑥マナポイントを減らして、表示する

④手札の使用可能カードに印を付ける

①「canUse」フラグの作成

②フラグに合わせて緑の枠を付ける or 消すメソッドの作成

③手札のカードに「CanUsePanel」を付ける

④ドローした時に「SetCanUsePanelHand」を実行する

⑤カードを使用した時に「SetCanUsePanelHand」を実行する

⑥フィールドに出した時に「CanUsePanel」を消す

⑤マナ以上のカードを動かせなくする

【バグ修正】バグ探しとその修正

バグ修正対象３つ

バグ修正① フィールドに置いた時、出せないカードをドロップした場合もコストが減る

③フィールドのカードが動かない

最後に、、

コメントをキャンセル

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方⑧ リーダーへの攻撃編

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方③ 手札の生成編

【Unity カードゲーム】デッキ作成、編成機能の実装方法③ カードの種類の実装編【解説通りに作るだけ】

【Unity カードゲーム】オンライン対戦機能の実装方法解説【解説通りに作るだけ】

【ゲームを作りたい初心者必見！】UnityとC#の勉強方法まとめ

【Unity】デッキ(リスト)をシャッフル(ランダムに)する方法【コピペで完成】

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方⑧　リーダーへの攻撃編