i-school - カードゲーム 設計を考える

2Dカードゲームの設計を考える


 Unityのバージョンは 2022.3.xf1 LTS 以降のバージョンにて製作を行う前提です。
 
 ゲームのジャンルは2Dゲーム、スマホで遊ぶカードゲームです。

 基礎設計が出来上がれば、あとはカードのフレームやモデルを自由に差し替えたり(キャラ以外のものに変更)、ステージ用の背景を変えたり、
新しいルールや機能を追加していくことでオリジナルアプリとして製作することも出来ますし、最終的にはポートフォリオとして頂くことも出来ます。

 少なくても以下の内容について、詳細な設計を考えていく必要があります。

・クラスの抽象化(インターフェース・抽象クラスなどを利用したクラス設計)・疎結合

・ゲーム性(Canvasのみでゲームを製作する、スマホでの快適な操作(タップのみで遊べる)、戦略性のあるカード群、など)

・画面のデザイン(UIの配置、ゲームの世界観に沿ったUIのデザイン、など)

・必要なシステム・機能(イベント分岐、カードスロットにカードセット、カードプール、プレハブによる各種イベント画面構成、など)

・1つプレファブからの異なるカードを作成する方法(プレファブとデータベースの利用方法、など)

・ゲームのサイクル(ゲームの流れ(ボスを倒してクリア、HP が 0 でゲームオーバー、ゲームを再スタートさせる)、追加要素を設計して実装する、など)

 それでは1つずつ設計を行っていきましょう。


・クラスの抽象化

1.インターフェース・抽象クラスなどを利用したクラス設計


 インターフェース・抽象クラスを利用し、共通の処理(メソッド)を強制した設計にすることで、イベント処理などに一貫性を持たせるようにします。
例えば、イベント分岐用のボタンであれば、イベントを行うボタンとしての振る舞いを持ちつつ、その処理の内容は実装している子クラスに委ねます。
カードについても同じ設計にてデザインします。


2.疎結合


 クラス同士の繋がりをなるべく疎結合に保ち、コンポーネント間の依存性を減らすことを念頭に置いた設計を心掛けます。
この考え方は、コードの柔軟性と保守性を向上させる重要な原則です。

 主に UI 制御については UniRx を活用した MVP パターンを利用して、変数を管理するクラスと UI 更新クラスとの間を疎結合の設計にします。



 これら2つの抽象化と疎結合を実現するためのデザインパターンについても採用します。
ファクトリーパターン、オブザーバーパターン、およびイベントハンドラーパターンなどを利用することを検討します。

 合わせて、抽象化の利点について詳細に説明し、同時に過度な抽象化が逆効果になる可能性についても説明します。
あくまでもこれらは設計における1つの手法であって、例えば、デザインパターンを必ず採用しなければならない、ということではないことを理解しましょう。

 以上のことを踏まえて、この教材では、Unity におけるインターフェースと抽象クラスを使用して抽象化と疎結合を実現する方法を示します。


・ゲーム性

1.Canvasのみでゲームを製作する


 2Dカードゲームですので、今回はゲームシーンの製作については、Canvas内のみでゲームを製作するようにします。

 そのため、ヒエラルキー上にはまずCanvasを用意し、その中に必要なゲームオブジェクトを配置していく手法でゲームを製作していきます。

 多くのスマホゲームで利用させているデザイン手法ですので、ゲームの製作を通じて、UIの設置やゲーム画面の作り方などを学びます。
またカードゲームならではのゲームの要素面白さの追求して考えていくことを学習します。

 特にイベント発生時においては、シーン遷移ではなく、イベント用のプレハブを展開し、各イベントを実行する手法を採用します。


2.スマホでの快適な操作(タップのみで遊べる)


 スマホで遊ぶことを念頭に置き、シンプルな操作で快適に遊べる設計を考えます。画面は縦向き(Portrait)で考えます。

 今回は、ボタンのタップ、カードのタップなど、すべて画面タップのみでゲームが遊べて進行するような設計にします。

 1.イベント分岐ボタンをタップ            => 選択されたイベントの発生(実行)
 2.カードをタップ                  => 戦闘イベントにおいてはカードスロットへのセット、カードプールにおいてはカードの選択・破棄
 3.探索イベント地点のタップ             => 選択した地点に対応するイベントの発生(実行)
 4.ゲームクリア、ゲームオーバー表示に画面をタップ  => どの位置をタップしても再度ゲームが始まる

 上記のような挙動でゲームが進行していくように実装手順を考えます。


3.戦略性のあるカード群


 ゲームの構成は、縦方向に見る、1画面のデザインになっています。
 
 カードは戦闘イベントが発生すると表示され、攻撃用カードと魔法系カードのいずれかに分類されて手札として配置されます。

 一度使用したカードにはクールタイムが与えられるため、選択可能なカードから2枚を選択して、カードスロットにセットします。
タップした順番でスロットにセットされるため、シンプルな操作でカードの選択、そして戦闘を楽しむことが出来ます。



 カードスロットにはプレイヤーのカードと対戦相手のカードが相互、あるいはつながってセットされるため、
この状態を見た上で自分の使うカードの効果を考えてセットしていきます。

 自分の Hp が少ない場合には先に回復効果のあるカードをセットしてもよいでしょうし、
敵の Hp が少ないなら、攻撃力の高いカードを使って一気に倒してしまうこともよいでしょう。

 そのときの互いの状態によってカードの選択を行う必要があり、それが上手くマッチしたときには達成感や爽快感があります。


・画面のデザイン

1.UIの配置


 Canvas内にてゲームを製作するようになりますので、各画面に表示・設置するゲームオブジェクトとともに、UIの配置について設計をしておく必要があります。

 ・ゲーム画面の上部に、現在のゲーム情報のUIの部分を表示
 ・イベントに応じて、Hp のゲージ、手札のカード・ボタンを表示
            
 ・ゲームクリア、ゲームオーバー時には、現在のゲーム状態と、再スタートのタップを促す表示などを考える

<ゲーム時> 画面の上下にUIを設置してメインのゲームの邪魔にならないようにする


<ゲームクリア表示時> クリア表示、再スタート用のタップを促す表示などを考える


 他にも必要な場合にはロジックも考えて設計し、画面へ追加していきます。
色々なゲームを参考にしながら、どの部分にどんな情報があれば便利なのか、邪魔にならない場所なのか、という視点で考えながら設計しましょう。


2.ゲームの世界観に沿ったUIのデザイン


 各画面のUIは常にゲーム中表示されていますので、そのデザインや、文字に使用するフォントの種類が見にくかったりするとユーザーは疲れてしまいます。
世界観に凝ったデザインもよいですが、見やすさ、読みやすさも一緒に考えて、バランスを保ちましょう。

 ゲーム中に使用しているフォントもそのスタイルに沿ったフォントを採用しています。
このフォントは無料素材として入手したものですので、イメージに合わせて自由に設計してみてください。
 

・必要なシステム・機能

1.イベント分岐


 ゲームのメイン部分です。
ステージ内のルート構成により、イベント分岐用のボタンを生成し、選択することでゲームが進行します。
これが今回のゲームのベースとなるシステムになります。

 タップするボタンの配置・押しやすいサイズなど、ユーザービリティはいつも考えて設計をする必要があります。
 

2.カードスロットにカードセット


 戦闘イベントにて利用する機能です。
所持しているカードを攻撃用と魔法用の2つに分類してボタンとして並べ、自由に選択できるようにします。

 選択したカードは順番にカードスロットにセットされ、すべてのカードをセットすると戦闘ターンを開始します。
先にカードスロットを選択していると、そのスロットにカードをセットします。

 この手順を、いずれかの Hp が 0 になるまで繰り返し戦闘ターンを行います。


3.カードプール


 所持しているカードはインベントリを開くことでカードプールとして確認できます。

 この部分では所持しているカードを確認できる他、ステージクリア時に上限になるまで破棄する際にも利用されます。

 List を利用してカードの情報を管理し、それを元にしてカードプール内にカードのオブジェクトを作成する仕組みを採用します。


4.プレハブによる各種イベント画面構成


 メインとなるシーンにおいてイベントの分岐が発生した場合、戦闘シーンや探索シーンといった形でイベント用のシーンへ遷移させる設計ではなく、
各イベントをプレハブの形で用意し、メインシーンの中に生成してイベントを実行する構成を採用します。

 イベントが終了すると、プレハブを非表示にし、オブジェクトプールを利用して再利用する形にして処理負荷の軽減を図ります。

 イベント用のプレハブが非表示になったタイミングでメインシーンが進行し、次のイベント分岐のボタンが生成されるようにします。
この部分にも UniTask による非同期処理を採用し、1つずつ処理が順番に制御されるように設計します。


・1つプレファブからの異なるカードを作成する方法(プレファブとデータベースの利用方法、など)


 カードを生成する場合、用意したカードの種類の数だけプレファブを用意する方法もありますが、
今回はすべてのカードを個別に作成するのではなく、元となるプレーンなカード用プレファブを1つ用意しておいて、自動生成したあとに、各カードしての役割・ふるまいを与えられて画面に配置されるような設計にします

 つまり、抽象化を行ったカード設計を採用します。

 プレーンなカードを自動生成する
   ↓
 用意された情報を元に、カードの画像、攻撃力、クールタイムなどを自動で設定し、「どんなカードであるか」というふるまいを、その時に決める


・ゲームのサイクル

1.ゲームの流れ(ボスを倒してクリア、HP が 0 でゲームオーバー、ゲームを再スタートさせる)

 
 何回も繰り返し遊んでもらうような設計になっているため、明確なエンディングはありません。
ボスを倒してゲームクリア、プレイヤーの Hp が 0 でゲームオーバーと、ゲームの終了条件もシンプルです。

 この状態になったら、ゲーム画面をタップすることで、またゲームを最初から遊べるようなサイクルを作成します。


2.追加要素を設計して実装する


 ベーシックなゲーム内容とゲームサイクルになっているため、様々な要素を追加することが出来ます。

 例えば、ステージクリア制、アイテム要素の追加、障害物要素の追加など、システム面の機能だけでもかなりの追加要素が考えられます。

 それらの設計を行い、自分で考えた機能を実装してみましょう。



 設計の項目については、以上になります。詳細については実装する際の手順内にて説明を補記していきます。
また、これら以外にも用意するべきものがあるのであれば、それらも考えておきましょう。


 以上でこの手順は終了です。

 => 次は 実装手順を考える? です。