２Ｄまるばつゲーム(三目並べ) 設計を考える
最終更新：
orika_ex_miyako 2022年01月10日(月) 19:36:39履歴
２Ｄまるばつゲーム(三目並べ)の設計を考える 
Unityのバージョンは 2020.3.xf1にて製作を行う前提です。
ゲームのジャンルは２Ｄゲーム、スマホで遊ぶテーブルゲームです。
基礎設計が出来上がれば、あとはレイアウトを自由に差し替えたり、ステージ用の背景を変えて、オリジナリティを演出してください。
新しいルールや機能を追加していくことでオリジナルアプリとして製作することも出来ますし、最終的にはポートフォリオとして頂くことも出来ます。
少なくても以下の内容について、詳細な設計を考えていく必要があります。
・ゲーム性（Canvasのみでゲームを製作する、スマホでの快適な操作(タップのみで遊べる)、シンプルなルール(マス目を３つ繋げた方が勝ち)、など） ・画面のデザイン（UIの配置、ゲームの世界観に沿ったUIのデザイン、など） ・必要なシステム・機能（タップした位置に印がない(空いている)かを判定して〇×を表示し、勝敗の判定を行う、マス目を３×３マス分自動生成する方法、など） ・演出（DoTweenによるアニメーション、画面のエフェクト、タイミングに合わせてエフェクトを作成する方法、など） ・ゲームのサイクル（ゲームの流れ(勝敗決着後にゲームを再スタートさせる)、新しい設計方法を学習する、など）
それでは１つずつ設計を行っていきましょう。
・ゲーム性
１．Canvasのみでゲームを製作する
２Ｄのテーブルゲームということですので、今回はゲームシーンの製作については、Canvas内のみでゲームを製作するようにします。
そのため、ヒエラルキー上にはまずCanvasを用意し、その中に必要なゲームオブジェクトを配置していく手法でゲームを製作していきます。
多くのスマホゲームで利用させているデザイン手法ですので、ゲームの製作を通じて、UIの設置やゲーム画面の作り方などを学びます。
また、テーブルゲームならではのゲームの要素や面白さの追求して考えていくことを学習します。
２．スマホでの快適な操作(タップのみで遊べる)
スマホで遊ぶことを念頭に置き、シンプルな操作で快適に遊べる設計を考えます。画面は横向き(Portrait)で考えます。
今回はすべて画面タップのみでゲームが遊べて進行するような設計にします。
１．画面内にあるマス目をタップ => 〇印をつける ２．リスタートのボタンをタップ => 勝敗が決している場合、次のゲームを開始
上記のような挙動でゲームが進行していくように実装手順を考えます。
３．シンプルなルール(マス目を３つ繋げた方が勝ち)
ゲームの構成は、横方向に見る、１画面のデザインになっています。(スクロールしません。)
プレイヤーはゲーム画面となる盤面を上から見下ろしている視点です。
ゲームをスタートし、画面内の印のないマス目をタップすることで、タップしたマス目に〇印をつけることが出来ます。
プレイヤーが〇印をつけると、対戦相手のコンピュータも、空いているマス目に×印を付けます。
この手順を繰り返していき、縦横斜めのいずれかに３つのマス目を先に揃えた方が勝利することになり、ゲーム終了となります。
ルールはこれだけです。どなたでも一度は遊んだことがあるゲームですので、操作も内容も非常にシンプルでわかりやすいデザインになっています。
また短い時間で遊べるため、繰り返し何度でも最初から遊べるように設計してありますので、お互いの勝利した数を画面に表示するようにしています。
ただし、このルールをすべてプログラミングして制御をするためには、しっかりとしたロジックを考えてプログラムを組み立てていく必要があります。
シンプルなルールだから作るのも簡単という訳ではありませんので、そういった部分も学習していくことになります。
・画面のデザイン
１．UIの配置
Canvas内にてゲームを製作するようになりますので、各画面に表示・設置するゲームオブジェクトとともに、UIの配置について設計をしておく必要があります。
表示する情報さえしっかりと把握できていれば、これは一例ですので、レイアウトについては自由に考えていただいて構いません。
・ゲーム画面の中央部に３×３のマス目を配置する ・ゲーム画面の左部に、プレイヤー側の情報(ゲーム結果、勝利数)を表示 ・ゲーム画面の右部に、対戦相手(コンピュータ)側の情報(ゲーム結果、勝利数)を表示 ・ゲーム画面中央上部には、ゲームのインフォメーション(ゲーム終了、配置できないメッセージなど)を表示 ・ゲーム画面中央下部には、再ゲームスタート用のボタンの配置
＜ゲーム時＞ 画面の中央をメインゲームの表示。上下左右にUIを設置してメインゲームの邪魔にならないようにする
他にも必要な場合にはロジックも考えて設計し、画面へ追加していきます。
色々なゲームを参考にしながら、どの部分にどんな情報があれば便利なのか、邪魔にならない場所なのか、という視点で考えながら設計しましょう。
２．ゲームの世界観に沿ったUIのデザイン
各画面のUIは常にゲーム中表示されていますので、そのデザインや、文字に使用するフォントの種類が見にくかったりするとユーザーは疲れてしまいます。
世界観に凝ったデザインもよいですが、見やすさ、読みやすさも一緒に考えて、バランスを保ちましょう。
ゲームの世界観については、今回のゲームであれば、ゲーム画面の背景画像、１マス１マスのデザインや、○×のフォントなどによって意匠をこらすことが出来ます。
ご自分のイメージに合わせて自由に設計してみてください。
必要なシステム・機能
１．タップした位置に印がない(空いている)かを判定して〇×を表示し、勝敗の判定を行う
ゲーム画面をスタートすると、プレイヤーの手番から始まります。
画面中央部にある３×３マスのマス目のいずれかをタップすることにより、空いているマス目であるかを判別した上で、そのマス目に〇印をつけます。
その後、すべてのマス目に対して、縦横斜めのいずれかで３つそろっている場所がないか、チェックを行います。この時点でマス目を〇で３つ揃えていれば、プレイヤーの勝利になります。
もしも勝敗が決していない場合には、自動的のコンピュータの手番になり、空いているマスを自動で１つ選択して、×印をつけます。
その後、同じように、すべてのマス目に対して、縦横斜めのいずれかで３つそろっている場所がないか、チェックを行います。
この時点でマス目を×で３つ揃えていれば、コンピュータの勝利になります。
これがゲームのシステムのすべてです。
文字にすると短いと思うかもしれませんが、これをプログラミングして制作することはとても大変な作業になります。
この機能がどのようにすればプログラムによって制御できるようになるのか。イメージすることが大切です。
ロジックを考えて、空いているマスの判定、マス目に印をつける、勝利しているか判定できるようにします。
２．マス目を３×３マス分自動生成する方法
マス目を９個ゲーム画面に配置する方法として、１つずつ手動で配置するのではなくて、プレファブになっているマス目用のゲームオブジェクトを
ゲームの開始時に自動的に必要な数(今回であれば９個)生成して並べてゲーム画面を作成します。
この部分は自分でプログラミングを考えて処理を制作していただくことになります。
いままでの学習内容を遺憾なく発揮して挑戦してみてください。
演出（エフェクト）
１．DOTweenを使用してアニメーション演出をする
DOTween（ドットゥイーン）とは無料アセットの１つで、広く使われているTween（トゥイーン）系のアセットです。
Tweenとはゲームオブジェクトの途中経過情報を補間して表現することを言います。
例えば、Aというゲームオブジェクトが現在の地点から別の地点に移動するに際し、その移動する間の情報を補間して表現することが出来ます。
この補間表現機能を利用することにより、様々なアニメーション演出を実装出来ます。
またDOTweenには、この機能が終了するタイミングを待って別の処理を呼ぶことや、途中で補間処理を中断したりといったことも出来ます。
Transformコンポーネントに対しての補間機能が多くありますが、それ以外にも使用方法は多岐にわたります。
今回はゲームをすべて完成したあとに、ブラッシュアップ(磨きをかけるの意。転じて、ゲーム内容や機能向上を表す)の一環として、これらの演出を追加していく予定です。
２．画面のエフェクト
画面をフラッシュさせたり、暗転させたりといったものだけではなく、キャラクターをアクションさせたり、画像を一瞬だけ大きくしたりなど
画面を通じて行える演出はたくさんあります。これらは場面に応じて適した内容のエフェクトを適宜いれていくことで、ゲームの臨場感や没入感が変わってきます。
また BGM や SE といった音楽の関係も重要な要素の１つです。
やりすぎず、少なすぎず、バランスを見ながら考えて実装しましょう。
今回は、勝利した際や敗北したときなどにエフェクトや SE を鳴らすように考えてみてください。
３．タイミングに合わせてエフェクトを作成する方法
今回のゲームでは無料のアセットのエフェクトをいくつか利用し、生成のタイミングや制御の方法などを学習します。
＜例＞
プレイヤーがマス目をタップする ↓ 演出用のエフェクトをプレファブから生成する ↓ 演出終了後にマス目に○印がつく
このように演出を設計し、その順番通りに動くように制御を行っていきます。
ゲームのサイクル
１．ゲームの流れ(勝敗決着後にゲームを再スタートさせる)
何回も繰り返し遊んでもらうような設計になっているため、明確なエンディングはありません。
先に３つのマス目をそろえた方が勝ちですので、終了条件もシンプルです。
いずれかが勝利の状態になったら、ゲーム画面にある再スタート用のボタンを押せるように制御を行い(この制御は重要です。最初から押せたらゲームになりません)
もう一度ゲームを最初から遊べるようなサイクルを作成します。その際、遊んだ回数を確認できるように、お互いの勝利数をゲーム画面に表示するようにします。
２．新しい設計方法を学習する
ゲームが完成したら、設計から見直しを行います。
Web デザインなどでは広く利用されている MVP パターンという手法を Unity でも採用し、どのような設計において制御するかを学習します。
ただし、これは非常に難しいため、すぐに挑戦する必要はありません。
設計の項目については、以上になります。詳細については実装する際の手順内にて説明を補記していきます。
また、これら以外にも用意するべきものがあるのであれば、それらも考えておきましょう。
以上でこの手順は終了です。
=> 次は 実装手順を考える です。
コメントをかく