デッキ構築カードゲームの作り方|スライムちゃんのおもちゃ箱カードバトルをUnityで最後まで作る全16回

「定規でペシッ」をブリキロボの上で離すと、カードが小さくなりながら飛んでいき、ブリキロボが白く光ってのけぞる。火花と赤い「6」が飛び出し、画面が揺れる。続けて「ホチキスでパチン」で、もっと大きな「12」が出る

手札からカードを選んで、敵と戦う。勝ったら新しいカードを手に入れて、自分だけのデッキを育てていく。「Slay the Spire」をはじめとするデッキ構築ゲームは、遊ぶたびにちがう展開になるのが魅力ですよね!このシリーズでは、マップや大量のカードは作らずに範囲をしぼった「ミニ版」のデッキ構築カードバトルを、最初から最後まで一緒に作っていきたいと思います!

舞台は子ども部屋のおもちゃ箱。夜になると動き出した、ちょっと壊れたおもちゃたちを、スライムちゃんが文房具のカードでおとなしくさせます。

どんなゲームを作るの?

  • 毎ターン、山札から5枚のカードを引いて戦う
  • カードには使うためのエネルギーが決まっていて、1ターンに使えるのは3エネルギーまで
  • カードの種類は攻撃・防御・回復・特殊の4つ。全部で15種類
  • 敵は次に何をするか予告してくるので、それを見て攻めるか守るかを決める
  • 敵を倒すと、3枚の中から1枚をデッキに加えられる
  • 3連戦+ボスを倒せばクリア
  • 攻撃すれば敵が光ってのけぞり、ダメージの数字が飛び出す。操作するたびに手応えが返ってくるところまで作る
  • 最後はWindowsのゲーム(.exe)にして、友達に遊んでもらえる形にする
ゲーム画面の各部の名前。上に「今何戦目か」、左にスライムちゃんとHP(防御は盾と数字)、エネルギーの「3/3」、右に敵とHP・行動の予告、右下にターン終了ボタン、下に手札、左下に山札(残りの枚数)、右下に捨て札

登場するおもちゃ

順番敵特徴
1戦目ゼンマイのブリキロボまっすぐ攻撃してくる、素直な敵
2戦目ブリキロボ+びっくり箱びっくり箱は、力をためたあとに大きく攻撃してくる
3戦目ほつれたぬいぐるみ×2守りを固めながら攻撃してくる
ボスおもちゃの王さま手下の「ちびロボ」を呼んだり、強い攻撃をしてくる

カード(15種類)

種類カード
攻撃定規でペシッ/ハサミでチョキチョキ/コンパスでチクッ/分度器ブーメラン/ホチキスでパチン
防御下じきガード/ふでばこの壁/クリップでとめる
回復ばんそうこう/おやつタイム
特殊付せんメモ/色えんぴつセット/えんぴつをけずる/修正テープ/大そうじ

このシリーズの対象

  • Unityスタートガイドをひととおり読んだ人
  • 特に、UIとスクリプトの記事をしっかり読んだ人
  • カードゲームや、ゲームの仕組みを作ることに興味がある人

アクションゲームとちがって、画面のほとんどがUIです。スタートガイドの第9章(UI)の内容をたくさん使います。

スライム

カードゲームって、ルールを作るのが大変そう・・・

フェアリー

だから今回は小さく作るよ!カード15種類と4戦だけ。1回で作る量も少なめにしてあるから、1つずつ進めていこう

プロジェクトの環境

  • Unityのバージョン:Unity 6.3 LTS
  • テンプレート:Universal 2D(URP)
  • 画面:横画面(1920×1080)
  • 入力:マウス(クリックとドラッグ)

このシリーズで学べること

スタートガイドの知識をゲームで使う

このシリーズで新しく覚えること

  • 山札のシャッフル:山札・手札・捨て札をListで回す
  • カードの効果をクラスで分ける:攻撃・防御・回復・特殊を、同じ形で扱えるようにする
  • ターンの管理:あなたのターン → 敵のターン → 次のターン、の流れをコルーチンで作る
  • カードの動き:Lerpを使って、配る・並べる・持ち上げる・飛ばすの動きをなめらかにする
  • 手応えの演出:ヒットストップ・画面の揺れ・ダメージの数字・光る・のけぞる・パーティクル
  • バランスの確かめ方:シードを固定して、同じ条件で何度も戦わせて数字で比べる

目次

#1 プロジェクトの準備とバトル画面の枠組みを作ろう

  • 横画面のプロジェクトを作り、Canvasを設定する
  • スライムちゃん・敵・手札・エネルギー・ボタンの場所を決める
  • 素材のzip(スライムちゃん・カードの絵・音・日本語フォント)を取り込む

#2 カードのデータをScriptableObjectで作ろう

  • カードの名前・コスト・種類・説明・絵を持つデータを作る
  • 「定規でペシッ」「下じきガード」「ばんそうこう」の最初の3枚を作る

#3 カードの見た目をプレハブにしよう

  • カードのデータを読み込んで、見た目に反映するプレハブを作る
  • データを差し替えるだけで、ちがうカードになることを確認!
同じプレハブから作った「定規でペシッ」「下じきガード」「ばんそうこう」の3枚のカード

#4 山札・手札・捨て札をListで作ろう

  • デッキのカードをシャッフルして山札にする
  • 山札から5枚引いて手札にする。使ったカードは捨て札へ
  • 山札がなくなったら、捨て札をシャッフルして戻す

#5 手札を扇形に並べて、配る・持ち上げる動きを付けよう

  • 手札の枚数に合わせて、カードを扇形に並べる
  • 山札から1枚ずつ、すべるように配る
  • マウスを乗せたカードが、ふわっと持ち上がる
山札から1枚ずつ配られたカードが扇形に並び、マウスを乗せたカードが持ち上がる

#6 カードをドラッグして使おう

  • カードをつかんで、敵の上で離すと使える
  • ねらっている敵に枠を出す
  • 使えない場所で離したら、手札にすっと戻る

#7 エネルギーとカードの効果を作ろう

  • 1ターンに使えるエネルギーを3にする。足りないカードは暗くなり、使おうとするとブルッと弾かれる
  • 攻撃・防御・回復・「カードを引く」「エネルギーを増やす」の効果を、継承でクラスに分けて作る

#8 HPのゲージと敵の行動の予告を作ろう

  • スライムちゃんと敵のHPのゲージ、防御の盾
  • 敵を2体並べて、次にする行動の予告を出す

#9 ターンの流れを作ろう

  • 「あなたのターン → 敵のターン → 次のターン」の流れを作る
  • ターン終了ボタンで手札を捨て、敵が予告どおりに行動する
スライム

やっと戦えるようになりました!でも、なんだか静かですね・・・

フェアリー

そう、ここで2回かけて「手応え」を作るよ。反応が返ってくると、同じルールでも別のゲームみたいに気持ちよくなるんだ

#10 攻撃の手応えを作ろう

  • 使ったカードが、敵に向かって飛んでいく
  • 当たった敵が白く光って、のけぞる。ダメージの数字と火花
  • ヒットストップ(一瞬止める)と画面の揺れで、重い一撃を表現する

#11 守る・受ける・回復するときの演出

  • 敵が踏み込んで攻撃してくる
  • ダメージを受けたら、画面のふちが赤く光る。防いだら盾が光って弾く
  • 回復のキラキラと、減った分が遅れて縮むHPゲージ
ブリキロボとびっくり箱が踏み込んで攻撃し、盾がはねて青い「5」、スライムちゃんが痛がって画面のふちが赤く光り、減ったHPのゲージが白く残ってから縮む

#12 勝ち負けと報酬のカード選択

  • 敵を全部倒したら勝ち、HPが0になったら負け
  • 倒れた敵は、しぼんで弾けるように消える
  • 勝ったら3枚の中から1枚選んで、デッキに加える
勝ったあとの報酬の画面。「報酬:カードを1枚えらぼう」と3枚のカードが並んでいる

#13 特殊なカードを増やそう

  • 「えんぴつをけずる」(次の攻撃が強くなる)と「修正テープ」(敵の攻撃が半分になる)で、状態のアイコンを作る
  • 「分度器ブーメラン」(全体攻撃)「クリップでとめる」「大そうじ」「おやつタイム」(使ったらなくなる)
  • 全体攻撃は、敵全員にねらいの枠を出す

#14 3連戦をつなげよう

  • 戦いのデータを作って、1戦目→2戦目→3戦目と続けて戦う
  • 戦いの間に休んでHPを回復し、報酬で強くしたデッキを持ちこす

#15 ボスと手下

  • ボスの登場演出と、手下を呼ぶ行動を作る
  • シードを固定して何度も戦わせ、強すぎたボスを「ぎりぎり勝てる」ところまで調整する
背景が暗くなり、画面が揺れながら、おもちゃの王さまが大きくポンと出てくる。「おもちゃの王さま」の帯が出る

#16 効果音とBGM、タイトルとクリア画面で完成

  • 効果音とBGM(ボス戦で切りかえ)
  • タイトル画面と、クリア・ゲームオーバーから「タイトルへ」
  • Windowsで遊べるようにビルドして完成
完成したタイトル画面。カードの絵が回りながら舞い、スライムちゃんとタイトル、「はじめる」ボタン

番外編:バトルのシミュレーターを作ろう

本編のゲームが完成したら、バランス調整の道具を作ってみましょう。画面を使わずにルールだけで何千回も戦わせて、勝率で数字を決められるようになります。

番外編①画面なしで戦いを回す

  • ルールだけを写したシミュレーター(MonoBehaviourを使わないC#のクラス)
  • 同じシードで、ゲームとまったく同じ結果になることを確かめる

番外編②エディタのウインドで何千回も戦わせよう

  • 条件を選んでボタンを押すだけの、エディタのウインド
  • 勝率・残りHPの棒グラフ・負けた戦い、CSVへの書き出し
バトルシミュレーターのウインドで1000回実行すると、勝率や残りHPの棒グラフが出る

番外編③数字を変えて比べ、バランスを決めよう

  • アセットを書きかえずに、ボスのHPや敵の攻撃を上書きして試す
  • ボスのHPごとの勝率、報酬のカードごとの勝率、考え方(攻め重視・守り重視)の比較

準備するもの

  • Unity 6.3 LTS がインストールされたPC(1-1 Unityのインストール)
  • コードエディタ:VS Code(1-3 VS Codeの導入)
  • シリーズで使う素材:DeckBuildingAssets.zip(約16MB)
    • スライムちゃん・敵・カードの絵・予告と状態のアイコン・パーティクルの粒・効果音とBGM・日本語フォント(Noto Sans JP)が入っています
    • 取り込み方は2つあります。zipの中のDeckBuildingAssets.unitypackageをダブルクリックするか、DeckBuildingフォルダをUnityのAssetsにドラッグ&ドロップ(くわしくは#1で説明しています)
    • 自由に使ってOKです(クレジット不要。作ったゲームの公開・販売にも使えます)。素材そのものの再配布はご遠慮ください

ほかのシリーズ