デッキ構築カードゲームの作り方#3｜カードの見た目をプレハブにしよう

前回は、カードの名前・コスト・種類・説明・絵をScriptableObjectのデータにしました。でも、データのままでは画面に何も出てきません。今回は、そのデータを読み込んで表示する「カードの見た目」を1つ作り、プレハブにします。見た目は1つ、中身のデータを差し替えるだけで別のカードになる形を作ってみたいと思います！

• シリーズの目次：デッキ構築カードゲームの作り方
• 前回：#2 カードのデータをScriptableObjectで作ろう

今回作るもの

• カードの見た目（枠・台紙・絵・名前・説明・コストの丸）
• カードのデータを見た目に反映するCardView
• カードのプレハブと、確認用に並べた3枚

前回の続きから

前回の最後の状態から始めます。カードのデータ（Ruler・PencilBoard・Bandage）と、カードの絵が入っていればOKです。

カードの部品を組もう

カードは、UIのImageとテキストを重ねて作ります。最終的な形はこうなります。

• Card（枠。種類で色が変わる）
  • Body（クリーム色の台紙）
    • Artwork（絵）
    • NameText（名前）
    • DescriptionText（説明）
  • Cost（左上のオレンジの丸）
    • CostText（数字）

UIの部品の基本は9-2 基本のUI要素、文字の設定は9-3 TextMeshProで美しいテキストを表示しようで紹介しています。

枠と台紙

• HierarchyのHandAreaを右クリック>UI (Canvas)>Image で「Card」を作る
  • アンカー：middle-center、Pos X・Pos Y：0、Width：220、Height：300
  • Source Image：UISprite（角の丸い、Unityに最初から入っている画像）
  • Image Type：Sliced
  • Color：#E86A5C（攻撃の赤。あとでスクリプトが種類に合わせて変えます）
• Cardの子に Image で「Body」を作る
  • アンカー：stretch-stretch、Left・Top・Right・Bottom：10
  • Source Image：UISprite、Image Type：Sliced、Color：#FFF8EC（クリーム色）

枠の内側に10だけ小さい台紙を重ねると、まわりの10がふちの色として見えます。枠の色を変えるだけで、カードの種類が分かるようになります。

Image TypeのSlicedは、画像の角を伸ばさずに、真ん中だけを伸ばす表示の方法です。UISpriteは最初から角の部分が設定されているので、どんな大きさにしても角が丸いままになります。自分で用意した画像をSlicedにする方法は、シンプルなカード型のUIプレファブを作ってみましょうで紹介しています。

絵・名前・説明

Bodyの子に、次の3つを作ります。

• Artwork（UI (Canvas)>Image）
  • アンカー：top-center、Pos Y：-80、Width：180、Height：130
  • Source Image：card_ruler（確認用）、Preserve Aspectにチェック
• NameText（UI (Canvas)>Text – TextMeshPro）
  • アンカー：top-center、Pos Y：-172、Width：190、Height：40
  • テキスト：「定規でペシッ」、Font Size：26、Font Style：B（太字）、Alignment：中央、Color：#3C2F2F
• DescriptionText（UI (Canvas)>Text – TextMeshPro）
  • アンカー：top-center、Pos Y：-230、Width：190、Height：60
  • テキスト：「敵に6ダメージ」、Font Size：22、Alignment：中央、Color：#3C2F2F

コストの丸

最後に、左上にコストの丸を付けます。はみ出して見えるように、BodyではなくCardの子にします。

• Cost（Cardの子に UI (Canvas)>Image）
  • アンカー：top-left、Pos X：18、Pos Y：-18、Width・Height：60
  • Source Image：Knob、Color：#FF9A3C（エネルギーと同じオレンジ）
• CostText（Costの子に Text – TextMeshPro）
  • アンカー：stretch-stretch、Left・Top・Right・Bottom：0
  • テキスト：「1」、Font Size：36、Font Style：B、Alignment：上下左右とも中央、Color：白

コストの丸をエネルギー（#1で左下に置いたオレンジの丸）と同じ色にしておくと、「このカードはエネルギーを1使う」ことが見ただけで伝わります。

CardViewを作ろう

見た目ができたので、カードのデータを読み込んで表示するスクリプトを作ります。

• DeckBuilding/Scriptsに「CardView」スクリプトを作る

using TMPro;
using UnityEngine;
using UnityEngine.UI;

// カードのデータ（CardData）を、見た目に反映する
public class CardView : MonoBehaviour
{
    [SerializeField] private CardData cardData; // 表示するカード

    [Header("表示する部品")]
    [SerializeField] private Image frameImage;
    [SerializeField] private Image artworkImage;
    [SerializeField] private TextMeshProUGUI nameText;
    [SerializeField] private TextMeshProUGUI costText;
    [SerializeField] private TextMeshProUGUI descriptionText;

    [Header("種類ごとの枠の色")]
    [SerializeField] private Color attackColor = new Color(0.91f, 0.42f, 0.36f);  // 攻撃：赤
    [SerializeField] private Color defenseColor = new Color(0.36f, 0.61f, 0.88f); // 防御：青
    [SerializeField] private Color healColor = new Color(0.42f, 0.77f, 0.48f);    // 回復：緑
    [SerializeField] private Color specialColor = new Color(0.65f, 0.48f, 0.84f); // 特殊：紫

    public CardData Data => cardData;

    private void Start()
    {
        // Inspector でデータを入れておいたときは、そのカードを表示する
        if (cardData != null)
        {
            Setup(cardData);
        }
    }

    // データを受け取って、見た目を書き換える
    public void Setup(CardData data)
    {
        cardData = data;
        nameText.text = data.cardName;
        costText.text = data.cost.ToString();
        descriptionText.text = data.description;
        artworkImage.sprite = data.artwork;
        frameImage.color = FrameColor(data.cardType);
    }

    // 種類ごとの枠の色
    private Color FrameColor(CardType type)
    {
        switch (type)
        {
            case CardType.Attack:
                return attackColor;
            case CardType.Defense:
                return defenseColor;
            case CardType.Heal:
                return healColor;
            case CardType.Special:
                return specialColor;
            default:
                return Color.gray;
        }
    }
}

• Setup(CardData data)
  • データを受け取って、見た目を全部書き換えるメソッド。#4からは、山札から引いたカードをこのメソッドで表示します
  • 名前・コスト・説明はテキストに、絵はImageのspriteに入れる
• Start
  • Inspectorでデータを入れておいたときは、再生したときにそのカードを表示する（今回の確認用）
• FrameColor
  • 種類（enum）ごとに、枠の色をswitch文で選ぶ。switch文は6-15 選択肢に名前を付けよう：enum（列挙型）とswitch文で紹介しています
  • 色は[SerializeField]にしてあるので、Inspectorで好きな色に変えられます
• [Header(“…”)]
  • Inspectorで、欄の上に見出しを出す。部品と色が分かれて見えるので、設定するときに迷いにくくなる
• public CardData Data => cardData;
  • 「このカードのデータ」をほかのスクリプトから読めるようにする書き方。読むだけで、書き換えはSetupからだけにしている
  • #6でカードを使うときに使います

スライム

=>って、なんだか見慣れない書き方ですね・・・

フェアリー

{ get { return cardData; } }を短く書いたものだよ。「読むだけの窓口」って覚えておけばOK！

スクリプトを付けて、部品をつなごう

• CardにCardViewを付ける
• Inspectorで、部品をHierarchyからドラッグ＆ドロップ
  • Frame Image：Card（自分自身）
  • Artwork Image：Artwork
  • Name Text：NameText
  • Cost Text：CostText
  • Description Text：DescriptionText
• Card Dataに、ProjectウインドのData>Cards>Rulerをドラッグ＆ドロップ

プレハブにしよう

カードの見た目を直したくなったら、Hierarchyのどれか1枚を直して、InspectorのOverrides>Apply Allを押すと、プレハブと全部のカードに反映されます。

カードは手札に何枚も並べるので、プレハブにしておきます。プレハブの基本は7-1 プレハブの基本で紹介しています。

• HierarchyのCardを、ProjectウインドのDeckBuilding>Prefabsにドラッグ＆ドロップ
• HierarchyのCardの名前が青い文字になれば、プレハブになっています

3枚並べてみよう

プレハブができたので、同じプレハブから3枚並べて、それぞれに別のデータを入れてみます。

• HierarchyのCardを選んで、Ctrl+D（MacはCmd+D）で2回複製する
• 3枚の名前とPos X、Card Dataを次のようにする

この3枚は確認用です。#4からは、山札から引いたカードをスクリプトで作るので、そのときに消します。

動かして確認！

再生してみましょう。

編集中は3枚とも「定規でペシッ」の見た目でしたが、再生すると、それぞれのデータの名前・絵・説明・枠の色に変わります。

さらに、データを変えてみましょう。

• 再生を止めて、ProjectウインドでData>Cards>Bandageを選ぶ
• Costを2、Descriptionを「HPを8回復する」に変えて、もう一度再生

ばんそうこうのカードのコストと説明が変わっていれば成功です。確認できたら、Costを1、Descriptionを「HPを5回復する」に戻しておきましょう。

「見た目（プレハブ）」と「中身（データ）」を分けておくと、カードのデザインを直したいときはプレハブを1つ直すだけ、カードを増やしたいときはデータを1つ足すだけで済みます。カードが何十種類になっても、直す場所は1か所です。

あとがき

今回は、カードの見た目をプレハブにして、データを入れるだけで別のカードになるところまで作りました。やっと画面にカードが出てきて、カードゲームらしくなってきましたね。次回は、デッキをシャッフルして山札を作り、そこから5枚引いて手札にする「山札・手札・捨て札」の仕組みを作りたいと思います！