2020.07.20 2024.06.22

【解説通りに作るだけ】デジタルカードゲームの作り方講座⑤ カードデータの反映編

みじんこ

前回までの記事でカードを持って動かせるようになりましたね！！

見てない人は前回の記事参考↓

【解説通りに作るだけ】デジタルカードゲームの作り方④ カードの動かし方編前回の解説で手札やフィールドにカード生成することが出来るようになりましたね！見てない人はこちら参照↓ http://yu...

今回は実際のカードデータを反映していくよ！！

前回までのカードはただの仮置きのデータなので、今回から本物のデータを持たせて、表示させるよ！

完成形としてはこんな感じ↓

今回から実際にカードを作っていくので、楽しいぞー！！笑

というわけで行くぞ！！

Contents

【作業全体の説明】カードデータ作成と反映
コードの作成＆記入
1. コード追記
Unity側の設定
コードの解説
【演習】カードの作成と表示
1. 【演習】答え合わせ
まとめ

【作業全体の説明】カードデータ作成と反映

まずはザックリ今回の作業の流れを説明します。

①４つクラスを作る
②コードを書く
③Unity側の設定をする(アタッチ等)

ザックリ言うとこれだけ。

ただこの今回作る４つのコードってのがめっちゃ大事で、それぞれのスクリプトがそれぞれの役割を持ってます。

表にまとめるとこんな感じ↓

【クラス名】	【役割】
Card Entity	カードデータそのもの
CardVeiw	カードの見た目を管理する
CardModel	カードのデータを管理する
Card Controller	カード全体を管理する

ここがよく分からないまま進むと後々「ん？何言ってんのこいつ？( ˘ω˘ )ﾜｹﾜｶﾗﾝ」ってなるので、なんとなくでいいから「このスクリプトはこの役割だからこの処理をやってるのね。」って理解しながら進めてね。

コードの作成＆記入

まずはスクリプトを４つ作ろう！

４つの名前はこれね↓

CardEntity
CardModel
CardView
CardController

こんな感じに無事４つ分作れたら、早速コードを記入していこう！！

とりあえず丸々コピペで大丈夫だよ！

CardEntityのコードはこれ↓

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

[CreateAssetMenu(fileName = "CardEntity", menuName = "Create CardEntity")]

public class CardEntity : ScriptableObject
{
    public int cardId;
    public new string name;
    public int cost;
    public int power;
    public Sprite icon;
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

[CreateAssetMenu(fileName = "CardEntity", menuName = "Create CardEntity")]

public class CardEntity : ScriptableObject

{

public int cardId;

public new string name;

public int cost;

public int power;

public Sprite icon;

}

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 CardModel(int cardID)
    {
        CardEntity cardEntity = Resources.Load<CardEntity>("CardEntityList/Card" + cardID);

        cardId = cardEntity.cardId;
        name = cardEntity.name;
        cost = cardEntity.cost;
        power = cardEntity.power;
        icon = cardEntity.icon;
    }
}

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 CardModel(int cardID)

{

CardEntity cardEntity = Resources.Load<CardEntity>("CardEntityList/Card" + cardID);

cardId = cardEntity.cardId;

name = cardEntity.name;

cost = cardEntity.cost;

power = cardEntity.power;

icon = cardEntity.icon;

}

CardViewのコードはこれ↓

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

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

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

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class CardView : MonoBehaviour

{

[SerializeField] Text nameText, powerText, costText;

[SerializeField] Image iconImage;

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

{

nameText.text = cardModel.name;

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

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

iconImage.sprite = cardModel.icon;

}

※（2024/04/22 追記）
TextMeshProを使いたい場合は下記のコードをコピペして使ってください！

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class CardView : MonoBehaviour
{
    [SerializeField] TextMeshProUGUI nameText, powerText, costText;
    [SerializeField] Image iconImage;

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

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

using TMPro;

public class CardView : MonoBehaviour

{

[SerializeField] TextMeshProUGUI nameText, powerText, costText;

[SerializeField] Image iconImage;

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

{

nameText.text = cardModel.name;

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

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

iconImage.sprite = cardModel.icon;

}

CardControllerのコードはこれ↓

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

public class CardController : MonoBehaviour
{
    public CardView view; // カードの見た目の処理
    public CardModel model; // カードのデータを処理

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

    public void Init(int cardID) // カードを生成した時に呼ばれる関数
    {
        model = new CardModel(cardID); // カードデータを生成
        view.Show(model); // 表示
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class CardController : MonoBehaviour

{

public CardView view; // カードの見た目の処理

public CardModel model; // カードのデータを処理

private void Awake()

{

view = GetComponent<CardView>();

}

public void Init(int cardID) // カードを生成した時に呼ばれる関数

{

model = new CardModel(cardID); // カードデータを生成

view.Show(model); // 表示

}

無事全部に張り付けられたかな？？

どこかしらにエラーとか出てないか軽く確認して、特にエラーがなければ次にいくよ！

コード追記

次は前に作ったGameManagerスクリプトに対しても、ちょっと追記をしていくよ！

たぶん今は、以前に書いた
Instantiate(cardPrefab, playerHand);
とかが書いてあるので、
Startメソッドに書いてある処理は全部消していいよ！

そしたら以下の様にコードを書き換えよう↓

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

public class GameManager : MonoBehaviour
{
    [SerializeField] CardController cardPrefab;
    [SerializeField] Transform playerHand, playerField, enemyField;

    void Start()
    {
        StartGame();
    }

    void StartGame()
    {
        CardController card = Instantiate(cardPrefab, playerHand);
        card.Init(1);
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class GameManager : MonoBehaviour

{

[SerializeField] CardController cardPrefab;

[SerializeField] Transform playerHand, playerField, enemyField;

void Start()

{

StartGame();

}

void StartGame()

{

CardController card = Instantiate(cardPrefab, playerHand);

card.Init(1);

}

詳細はあとで説明するけど、

要はゲーム実行したらStartGameメソッドが動いて、
Card1ってカードを出すよ！って処理をしてるよ。

Unity側の設定

コードが書けたらUnity側の設定をやってこう！！

やることとしては２つだけ！

・カードの作成
・アタッチ

ではやっていこう！！

カードの作成

では今回の一番楽しいところ！！

実際のカードを作ってくよ！！

と言いたいところだけど、
その前にフォルダを作ったりちょっとした前準備をしてくよ。

手順に沿って作ってこう↓

まずはカードデータとかを保存するフォルダを作るよ。

※まず「Assets」フォルダに移動してね！！

①「＋」をクリック
②「Folder」をクリック
③「Resources」という名前を付ける
④「Resources」フォルダにCardプレハブをドラッグ&ドロップ
⑤「Resources」フォルダをダブルクリックして、中に入ろう

①先ほどの手順と同じく「CardEntityList」フォルダを作る
②「CardEntityList」フォルダをダブルクリックして中に入る

ここからカードデータを作ってくよ！！

①「＋」をクリック
②「Create CardEntity」をクリックする
③こんな感じのが出来る（Unityのバージョンによって多少見た目に違いがあるかも）
④出来たやつの名前を「Card1」に変える

①クリックして、パラメータを画像通りに設定しよう
②「◎」みたいなのをクリックする
③アイコンはこれを選択する

これで1枚目のカードが完成！！！

同じ手順で今度は「Card2」を作ろう。

ちなみに新しく作るときは、Card1をクリックして、「Ctrl＋D」でコピー出来るよ。

こんな感じになればOK!!

アタッチ

次はさっき作ったコードをCardプレハブにアタッチしよう！

①「Card」プレハブをクリック
②「AddComponent」をクリックして、「CardController」と「CardView」を検索して、選択する
③「CardController」と「CardView」の二つが張り付けばOK！
④「OpenPrefab」をクリックしよう

①Card（左側）から「Name」を、左の「NameText」に張り付ける。
②この貼り付けを「Cast」「Power」「Image」も同じように行う

ここまで出来たら最後に「GameManagerオブジェクト」にCardプレハブをアタッチしよう！！

①「GameManager」オブジェクトをクリック
②Cardプレハブをドラッグ&ドロップ
③こんな感じに「CardPrefab」に張り付けばOK！！

ではゲームを実行してみよう！！

今までとは違うカードが出てきた！！！！

他の種類のカードを出すには？？

ひとまず新しく作ったカードを表示することは出来るようになったけど、まだ1種類のカードしか出せてない！！

というわけで他のカードも出せるようにしていくよ！

GameManagerにコードを追記して、Card2も出せるようにしていこう。

※オレンジ部分を追記してね↓

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

public class GameManager : MonoBehaviour
{
（省略）
    void StartGame()
    {
        CardController card = Instantiate(cardPrefab, playerHand);
        card.Init(1);
        CardController card2 = Instantiate(cardPrefab, playerHand);
        card2.Init(2);
        CardController card3 = Instantiate(cardPrefab, playerHand);
        card3.Init(2);
        CardController card4 = Instantiate(cardPrefab, playerHand);
        card4.Init(1);
        CardController card5 = Instantiate(cardPrefab, playerField);
        card5.Init(2);
        CardController card6 = Instantiate(cardPrefab, playerField);
        card6.Init(1);
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class GameManager : MonoBehaviour

{

（省略）

void StartGame()

{

CardController card = Instantiate(cardPrefab, playerHand);

card.Init(1);

CardController card2 = Instantiate(cardPrefab, playerHand);

card2.Init(2);

CardController card3 = Instantiate(cardPrefab, playerHand);

card3.Init(2);

CardController card4 = Instantiate(cardPrefab, playerHand);

card4.Init(1);

CardController card5 = Instantiate(cardPrefab, playerField);

card5.Init(2);

CardController card6 = Instantiate(cardPrefab, playerField);

card6.Init(1);

}

これで実行すると、

自分のフィールドに2番目に作ったカードも出てきた！！

これはどうやったかと言うと、下のコードの処理によるもの。

CardController card2 = Instantiate(cardPrefab, playerHand);
≪和訳：PlayerHandにCardPrefabを出しますよ。そして出したものを「card2」としますよ。≫

card2.Init(2);
≪和訳：card2は「Card2」として表示させますよ。≫

（以下、何度か繰り返し）

Initの後ろの()の中の数字が、さっき作ったCard1とかCard2を指してるので、ここを書き換えることで好きなカードを出せるようになる！！ってことだね。

例えば、Initの()の中に「1」と書いて、
Instantiate(cardPrefab, playerField)と書き換えたら、
Card1のカードが、自分のフィールドに出る。
ってことだね。

まあ好きなようにいじってみるとわかると思うよ！！

要はこれを書いていけばどんどん色んなカードを好きな場所に出せるようになる！！ってことですな！

、、、でもこれいちいち書くの面倒くない？？

「CreatCard」メソッドの作成をしよう

というわけで、カードを作りだす処理をメソッド(関数)にしてまとめよう！！

オレンジの部分が変わってるので、張り替えて実行してみよう↓

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

public class GameManager : MonoBehaviour
{
    [SerializeField] CardController cardPrefab;
    [SerializeField] Transform playerHand, playerField, enemyField;

    void Start()
    {
        StartGame();
    }

    void StartGame()
    {
        CreateCard(1, playerHand);
        CreateCard(2, playerHand);
        CreateCard(2, playerHand);
        CreateCard(1, playerHand);
        CreateCard(2, playerField);
        CreateCard(1, playerField);
    }

    void CreateCard(int cardID, Transform place)
    {
        CardController card = Instantiate(cardPrefab, place);
        card.Init(cardID);
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class GameManager : MonoBehaviour

{

[SerializeField] CardController cardPrefab;

[SerializeField] Transform playerHand, playerField, enemyField;

void Start()

{

StartGame();

}

void StartGame()

{

CreateCard(1, playerHand);

CreateCard(2, playerHand);

CreateCard(1, playerHand);

CreateCard(2, playerField);

CreateCard(1, playerField);

}

void CreateCard(int cardID, Transform place)

{

CardController card = Instantiate(cardPrefab, place);

card.Init(cardID);

}

さっきと同じようになったかな？？

でもさっきよりスッキリしたコードになってるよね！

これは「何度も繰り返す処理」をCreatCardと言うメソッドにしたことで、何度も同じようなコードを書かずに済んだから。ってことだね。

なので今後も何度も同じ処理をするような場合は、メソッドにまとめちゃった方がいいよ！

コードの詳細は次で説明してきます！！

コードの解説

今回はいろいろ出てきたので、ざっくりと説明していくよ！！

いきなり読んでも初心者の人はたぶん全部は理解できないと思うけど、

「20％くらい分かったわ！！」で全然OK！！

分かんなくて手が止まっちゃう事の方が勿体ないので、雰囲気だけ掴めれば次にドンドン進んでいって大丈夫だよ！！やってる内にそのうち分かるようになるから。笑

ではいくぞ！！

「CardEntity」について

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

[CreateAssetMenu(fileName = "CardEntity", menuName = "Create CardEntity")]

public class CardEntity : ScriptableObject
{
    public int cardId;
    public new string name;
    public int cost;
    public int power;
    public Sprite icon;
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

[CreateAssetMenu(fileName = "CardEntity", menuName = "Create CardEntity")]

public class CardEntity : ScriptableObject

{

public int cardId;

public new string name;

public int cost;

public int power;

public Sprite icon;

}

このスクリプトは、
カードデータそのもの！！

「どういうことだよ！！！」って人は、下記のオレンジ部分のコードを追記してみよう↓

public class CardEntity : ScriptableObject
{
    public int cardId;
    public new string name;
    public int cost;
    public int power;
    public Sprite icon;

    public string rarity;

}

public class CardEntity : ScriptableObject

{

public int cardId;

public new string name;

public int cost;

public int power;

public Sprite icon;

public string rarity;

}

例えばだけど、Rarity（レアリティ）を付けてみる。

コードを追記したら、カードデータを見に行くと。

パラメータが増えてる！！！！

というわけ。(Legendは勝手に書いただけね。笑)

なのでカードのデータをいじりたかったらCardEntityをいじればいい。ってことですな。

※後で戻しておいてね！！

「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 CardModel(int cardID) // データを受け取り、その処理
    {
        CardEntity cardEntity = Resources.Load<CardEntity>("CardEntityList/Card" + cardID); // CardEntityのパス

        cardId = cardEntity.cardId;
        name = cardEntity.name;
        cost = cardEntity.cost;
        power = cardEntity.power;
        icon = cardEntity.icon;
    }
}

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 CardModel(int cardID) // データを受け取り、その処理

{

CardEntity cardEntity = Resources.Load<CardEntity>("CardEntityList/Card" + cardID); // CardEntityのパス

cardId = cardEntity.cardId;

name = cardEntity.name;

cost = cardEntity.cost;

power = cardEntity.power;

icon = cardEntity.icon;

}

このスクリプトは、
バトル中のカードデータを管理してるもの！！

カードのデータ自体はCardEntityが持ってるけど、

自分のカードなのか、敵のカードなのか
攻撃できる状態なのか、召喚酔いしてるのか
手札のカードなのか、フィールドに出てるのか

っていうバトル中のデータに関してはバトルによって変わるじゃん？？

そういうバトル中のデータを持ってるのがCardModel。

だから今後、「このカードは召喚酔いしてるから攻撃できない」とか「自分のカードなのか、敵のカードなのか」とかいうのは、CardModelが管理していくよ！！

「CardView」について

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

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

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

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class CardView : MonoBehaviour

{

[SerializeField] Text nameText, powerText, costText;

[SerializeField] Image iconImage;

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

{

nameText.text = cardModel.name;

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

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

iconImage.sprite = cardModel.icon;

}

このスクリプトは、
バトル中のカードの見た目を管理してるもの！

CardEntityからカードデータそのものを受け取って、CardModelでそのカードデータを持ってても、ゲームの画面に表示されないと意味ないよね。

そこで名前とか、パワーとか色んなデータを表示してるのが、このCardView。

今後出てくる、「攻撃できる状態のカードを光らせる。」という処理はここが管理することになるよ！！

「CardController」について

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

public class CardController : MonoBehaviour
{
    public CardView view; // データを表示する
    public CardModel model; // データに関することを処理

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

    public void Init(int cardID) // カードを生成した時に呼ばれる関数
    {
        model = new CardModel(cardID); // カードデータを生成
        view.Show(model); // 表示
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class CardController : MonoBehaviour

{

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

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

private void Awake()

{

view = GetComponent<CardView>();

}

public void Init(int cardID) // カードを生成した時に呼ばれる関数

{

model = new CardModel(cardID); // カードデータを生成

view.Show(model); // 表示

}

このスクリプトは、
今までのカードに関係するスクリプトをまとめるもの！
という認識でOK

これから出てくるカードは全てCardControllerを使って処理していくよ。

「GameManager」について

    void StartGame()
    {
        CreateCard(1, playerHand);
        CreateCard(2, playerField);
    }


    void CreateCard(int cardID, Transform place)
    {
        CardController card = Instantiate(cardPrefab, place);
        card.Init(cardID);
    }

void StartGame()

{

CreateCard(1, playerHand);

CreateCard(2, playerField);

}

void CreateCard(int cardID, Transform place)

{

CardController card = Instantiate(cardPrefab, place);

card.Init(cardID);

}

GameManagerは、今回追記した処理の説明をしてくよ。

今回大事になるのが、CreatCardメソッド！！

CreatCardメソッドってのは、8~12行目のやつね。

このメソッドは何をしてるのかというと、
「カード番号(int cardID)と場所(Transform place)を教えたら、その通りカードを出します！！」
って処理をしてるよ。

日本語で言うと、
CreateCard（出したいカードの名前(番号),　出したいカードの場所）
ってこと。

このCreatCardの後ろの（）の中の値を「引数」っていうんだけど、いまいち分かんない人は「C#　メソッド（関数）」「C#　引数」とかで軽く調べた方がいいかも！！

以上！！！
ものすごくザックリとした説明だったけど分かったかな？？

もうちょっと説明が必要なところがあったらコメント下さい！

【演習】カードの作成と表示

では最後に理解度チェックとして演習をやっていこう！！

演習としては、
コードでこの状況を作ってみよう！！↓

ヒントとしては、

・新しいカードを作って、
・カードをそれぞれ表示させる。

って処理が必要だね。

ではやってみよう！！

【演習】答え合わせ

出来たかな？？

答えとしては、
Card3を作って、StartGameメソッドに下の処理を突っ込むだけ！

    void StartGame()
    {
        CreateCard(3, playerHand);
        CreateCard(1, playerHand);
        CreateCard(2, playerHand);
        CreateCard(2, playerField);
        CreateCard(3, playerField);
    }