カードのデザインを変えたい場合は？

BackPanelのImageやCharaImageのSpriteを変更することでカスタマイズできます。

カードの情報をプログラムで設定できますか？

可能です！次回の記事で C#スクリプトを使ってカードの情報を動的に変更する方法を紹介します。

カードのドラッグ＆ドロップはどうやって実装するの？

次回の記事で解説予定ですが、EventTrigger や PointerEventData を使うと実装できます。

【Unity 2D】シャドウバース風カードゲームの作り方！初心者向け解説（パート1）

Q: カードのデザインを変えたい場合は？

BackPanelのImageやCharaImageのSpriteを変更 することでカスタマイズできます。

Q: カードの情報をプログラムで設定できますか？

可能です！次回の記事で C#スクリプトを使ってカードの情報を動的に変更する方法 を紹介します。

Q: カードのドラッグ＆ドロップはどうやって実装するの？

次回の記事で解説予定 ですが、EventTrigger や PointerEventData を使うと実装できます。

はじめに

「シャドウバース」や「ハースストーン」のようなデジタルカードゲームを自分で作ってみたいと思ったことはありませんか？Unityを使えば、誰でも簡単に2Dカードゲームを作ることができます！

この記事では、シャドウバース風のカードゲームを作るための基本的なUIの作成方法 を解説します。具体的には、以下の内容を順番に学んでいきます。

✅ カードの作成（カードの画像、テキスト情報の配置）
✅ フィールドの作成（手札や場のレイアウト設定）
✅ ヒーローの作成（プレイヤーと敵のヒーローのUI設定）
✅ その他のUI要素（ターンエンドボタン、コスト表示など）

初心者でも理解しやすいように、ステップごとに詳しく説明していきます。

🛠 必要なもの

Unity（バージョン2021以上推奨）
2D UIの基本的な知識（未経験でもOK！）
画像アセット（フリー素材を活用）

今回は、カードのイラストとして Aekashics Librarium MegaPack III を使用します。フリーで使える高品質な2Dキャラクター素材なので、ぜひ活用してください！

🎯 この記事のゴール
このパートでは カードの見た目やUIの基本部分を作成する ところまで進めます。カードの操作（ドラッグ＆ドロップ）やバトルシステムは、次回以降のパートで実装予定です！

本記事では、シャドウバース風の2Dカードゲームをゼロから作成する方法を解説します。ただし、より本格的なオンラインカードゲームを効率よく開発したい場合は、TCG Engine – Online Card Gameというアセットを活用するのもおすすめです！

それでは、さっそく カードの作成 から始めましょう！🚀

1. カードの作成

シャドウバース風のカードゲームを作るには、まずカードの見た目を作成する必要があります。この記事では、カードのデザイン、画像の設定、情報表示、プレハブ化 までを詳しく解説します。さっそく始めましょう！

1-1. カードのベースオブジェクトを作成

まずは、カードのベースとなるオブジェクトを作成します。

Canvasを作成（まだ作っていない場合）
- 「Hierarchy」ウィンドウ で右クリック → UI → Canvas を選択
- Canvas の Render Mode を Screen Space - Overlay に変更（デフォルトのままでOK）
カードの本体を作成
- Canvas の子オブジェクトとして Image を作成
- 「Hierarchy」ウィンドウ で右クリック → UI → Image を選択
- 名前を「Card」に変更
- サイズを 200×300 に設定（お好みで調整可能）
Imageコンポーネントを削除
- 「Inspector」ウィンドウ で Image コンポーネントの Remove Component をクリック
- 背景画像や装飾を子オブジェクトで追加するため、ここでは削除しておきます。

1-2. カードの背景を作成

次に、カードの背景となる部分を作成します。

「Card」の子オブジェクトとして Image を作成
- Card を選択した状態で、右クリック → UI → Image を選択
- 名前を「BackPanel」に変更
- Rect Transform のサイズを 親オブジェクト（Card）と同じ 200×300 に設定
- Image の Source Image に好きな背景画像を設定（カードのベースとなるデザイン）

背景画像がない場合は、UnityのAssetsフォルダにある適当な画像を使うか、フリー素材を利用すると良いでしょう。

1-3. キャラクター画像を設定

次に、カードにキャラクターのイラストを追加します。

「Card」の子オブジェクトとして Image を作成
- Card を選択した状態で、右クリック → UI → Image を選択
- 名前を「CharaImage」に変更
- サイズを 180×180 に設定（お好みで調整）
キャラクターの画像を設定
- Inspector で 「Source Image」 にキャラクターのスプライト画像を設定
- 画像がない場合は、以下のアセットなどを使用するのもオススメ
  - Aekashics Librarium MegaPack III
位置を調整
- Rect Transform の Pos Y を 50 に設定（中央より少し上に配置）
- Image の Preserve Aspect を ON にして、画像の縦横比を維持

1-4. カード情報を表示するテキストを作成

カードの名前、攻撃力、HP、コストを表示するためにテキストを追加します。

カード名を表示
- Card の子オブジェクトとして Text を作成
- 名前を「CardName」に変更
- フォントサイズを調整
- Rect Transform を調整してキャラクター画像の下あたりに配置
攻撃力（ATK）の表示
- Card の子オブジェクトとして Text を作成
- 名前を「AttackText」に変更
- フォントサイズを調整
- Rect Transformを調整し左下に配置する
HPの表示
- Card の子オブジェクトとして Text を作成
- 名前を「HPText」に変更
- フォントサイズを調整
- Rect Transformを調整して右下に配置する
コストの表示
- Card の子オブジェクトとして Text を作成
- 名前を「CostText」に変更
- フォントサイズを調整
- Rect Transformを調整して左上に配置

カードの背景やUIをより魅力的にしたい場合は、Unity Asset Storeの Card Game GUI を活用すると、プロフェッショナルなデザインを手軽に導入できます！

1-5. プレハブ化して再利用可能にする

作成したカードは プレハブ（Prefab） にすることで、簡単に複製できます。

「Project」ウィンドウの「Assets」フォルダで右クリック
- Create → Folder を選択し、「Prefabs」というフォルダを作成
作成したカードをプレハブ化
- Hierarchy ウィンドウで「Card」を ドラッグして「Prefabs」フォルダにドロップ
- これで「Card」のプレハブが作成され、簡単に複製できるようになります！

画像に alt 属性が指定されていません。ファイル名: 2024-01-10_025158.png

ここまでで、カードのデザイン、背景、キャラクター画像、情報テキスト、プレハブ化 まで完了しました！次は フィールドの作成 に進んで、カードを配置できる場所を作っていきます。

2. フィールドの作成

カードの準備ができたら、次は フィールドの作成 です。ここでは、手札・プレイヤーフィールド・敵のフィールドを作成して、ゲームの基本的なレイアウトを整えていきます。

2-1. 手札（PlayerHand）の作成

まず、 プレイヤーがカードを持つエリア（手札） を作成します。

① パネル（Panel）を作成

「ヒエラルキー（Hierarchy）」ウィンドウで右クリック
「UI」→「Panel」 を選択
作成されたPanelの名前を 「PlayerHand」 に変更

② サイズと位置を調整

「インスペクター（Inspector）」ウィンドウでRectTransformを編集
- PosYを-300 に設定（画面下に配置するため）
- サイズは好みに応じて調整（例: Width: 800、Height: 200）
「Color」を変更（手札のエリアを見やすくするために薄い色にすると良い）

③ カードを横並びにする

手札に並べるカードがキレイに整列するように、 Horizontal Layout Group を追加します。

「PlayerHand」を選択
「インスペクター」ウィンドウの「Add Component」ボタンをクリック
「Horizontal Layout Group」を検索して追加

Horizontal Layout Group の設定

Child Alignment → Middle Center
Spacing → 20（カード同士の間隔）
Control Child Size の「Width」と「Height」に チェックを入れる
Use Child Scale の「Width」と「Height」のチェックを外す

この設定をすることで、カードが 横一列に等間隔で並ぶ ようになります！

2-2. プレイヤーフィールド（PlayerField）の作成

次に、プレイヤーが 場に出したカードを配置するエリア を作ります。

① 「PlayerHand」をコピー

「手札（PlayerHand）」と似た構造なので、 そのままコピー すると効率的です！

「PlayerHand」を右クリック
「Duplicate（複製）」を選択
複製されたパネルの名前を 「PlayerField」 に変更

② 位置を調整

「PlayerField」の位置を 手札の少し上 に移動します。

「PlayerField」を選択
「インスペクター」でPosYを「-100」に設定

③ 横並びの設定を確認

コピーした時点で、Horizontal Layout Group の設定はそのまま適用されています。

手札と同じように カードが横に並ぶ形 になっていればOK！

2-3. 敵のフィールド作成

プレイヤーのフィールドができたら、 敵のフィールド も作りましょう。

① PlayerHand と PlayerField をコピー

「PlayerHand」と「PlayerField」を選択
右クリック → Duplicate（複製）
名前を 「EnemyHand」 と 「EnemyField」 に変更

② 位置を調整

「EnemyHand」 の PosY を +300
「EnemyField」 の PosY を **+100`

この設定をすることで、 プレイヤーの手札・フィールドと対称の位置 に配置されます。

フィールド作成の完成！

これで プレイヤーと敵の手札＆フィールドが完成 しました！

完成形のフィールド構成

今は見た目だけの配置ですが、次回は カードをプレイヤーの手札に並べる処理 や カードの移動（プレイ）処理 を作成していきます！

3. ヒーローの作成

カードバトルゲームでは、プレイヤーの分身となる「ヒーロー」を画面に表示するのが一般的です。ここでは、ヒーローの背景、アイコン、HP（体力）の表示を作成し、敵のヒーローも配置する方法を紹介します。

3-1. ヒーローの背景を作成

まずは、ヒーローの背景となるオブジェクトを作成しましょう。

ヒエラルキー（Hierarchy）ウィンドウで右クリック して、「UI」→「Image」を選びます。
作成したImageの名前を 「PlayerHero」 に変更します。
インスペクター（Inspector）ウィンドウでサイズを調整し、ヒーローの背景となるイメージを設定します。

これでヒーローの背景が完成しました！次に、ヒーローの画像を設定していきます。

3-2. ヒーローの画像を設定

ヒーローの見た目となる画像（アイコン）を設定します。

PlayerHeroを選択し、子オブジェクトとして新しいImageを作成 します。
Imageの名前を 「Icon」 に変更します。
インスペクターで「Source Image」を ヒーローのイラストが描かれたSprite に変更します。
- 例えば、Aekashics Librarium MegaPack III などの無料アセットから使うと良いでしょう。
画像の位置とサイズを調整し、適切な大きさにします。

これでヒーローの画像が画面に表示されました！次に、HPを表示するテキストを追加しましょう。

3-3. ヒーローのHPを表示

ゲーム中、ヒーローのHP（体力）は重要な情報の一つです。HPを表示するために、テキストを追加しましょう。

PlayerHeroの子オブジェクトとして「UI」→「Text」を作成 します。
名前を 「HP」 に変更します。
インスペクターで次の設定を行います：
- Text： 20（初期HPとして設定）
- Font Size：見やすいサイズ（例：30以上）
- Color：青
- Alignment：中央揃え