強制横スクロールゲーム 設計を考える
最終更新：
orika_ex_miyako 2021年02月14日(日) 14:31:28履歴
２Ｄアクションゲームの設計を考える 
Unityのバージョンは2019.4.xf1、あるいは2020.1.xf1にて製作を行う前提です。
ゲームのジャンルは２Ｄゲーム、スマホで遊ぶアクションゲームです。
基礎設計が出来上がれば、あとはイラストを自由に差し替えたり(キャラ以外のものに変更)、ステージ用の背景を変えたり、
新しいルールや機能を追加していくことでオリジナルアプリとして製作することも出来ますし、最終的にはポートフォリオとして頂くことも出来ます。
少なくても以下の内容について、詳細な設計を考えていく必要があります。
・ゲーム性（ゲームシーンとCanvasでゲームを製作する、スマホでの快適な操作、ゴールまでにどれだけコインを集められるか、バルーンを使った仕掛け作り、など） ・画面のデザイン（UIの配置、ゲームの世界観に沿ったUIのデザイン、など） ・必要なシステム・機能（スワイプをしてゲーム画面内のプレイヤーを操作する、配置したボタンによってプレイヤーを操作する、 強制スクロールによってゲーム画面を動かす、敵や障害物を自動生成する方法、など） ・１つのゲームシーンでタイトルなどはポップアップを用意して進行する方法 ・演出（DoTweenによるアニメーション・エフェクト、など） ・ゲームのサイクル（ゲームクリア終了と同時にリザルトを表示する。リザルトからまたタイトルに戻る、など）
それでは１つずつ設計を行っていきましょう。
・ゲーム性
１．ゲームシーンとCanvasでゲームを製作する
２Ｄの横スクロールアクションゲームですので、今回はゲームシーンとCanvasとを組み合わせて製作するようにします。
プレイヤーは空中を浮遊しながら移動し、敵を避けて、コインを集めるというゲームです。
プレイヤーの操作は面白いか、アニメーションと同期しているか、など、アクションゲームならではのゲームの要素を考えていく必要があります。
２．スマホでの快適な操作
スマホで遊ぶことを念頭に置き、シンプルな操作で快適に遊べるような設計を考えます。画面は横向き(Landscape)で考えます。
・画面の左半分をスワイプで左右移動(上下は反応しない) ・画面の右半分にボタンを２つ設置。１つをタップでジャンプ ・もう１つのボタンをタップでバルーンの生成か、バルーンの切り離し
この３つの操作だけでゲームを遊べるようにしますので、上記のような挙動でゲームが進行していくように実装手順を考えます。
３．ゴールまでにどれだけコインを集められるか
ゲーム画面にはランダムで色々なオブジェクトが生成されるような設計にします。一定回数(設定可能)の生成が終了すると、ゴールが生成されてゲーム終了になります。
空中の床を上手くつかい、敵などの障害物を避けつつ、コインをたくさん集めてゴールへと到達するのが目的です。
障害物にプレイヤー自体が接触してもバルーンは割れませんが、弾き飛ばされてしまうため、
その反動で落下してしまったり、他の障害物にバルーンが接触して割れてしまったりという要素があります。
そのため、ゴールまでのコース取りを考えてもらえるよう、ゲームを設計します。
４．バルーンを使った仕掛け作り
プレイヤーの移動は主に空中をふわふわと浮遊したり、落下したりを繰り返しながら行います。
地面を歩くことも出来ますが、その時間は限られており、空中浮遊という、重力と慣性によって上手く移動できないジレンマを抱えています。
そのため、上手く移動ができ、敵を避けたり、コインを獲得できることによって感動を生み出すことが出来ます。
ユーザーが操作に成功し、やった！ と思える時間を演出することで、もっと上手く操作出来るようにしよう、という思考を持つようになるでしょう。
バルーンは２つありますが、もしも割れてしまっても、地面や空中の床に接地している間には、もう一度膨らませてバルーンの数を増やすことが出来ます。
また、空中での制御が難しい場合や、状況によっては、地面目掛けて落下をした方がよいタイミングもあるため、空中では任意にバルーンを切り離すことが出来ます。
バルーンの数に応じて、空中を浮遊する際の力や落下速度が変わります。これもゲームを面白くするための要素です。当然、バルーンがない間の落下速度は最も速くなります。
この辺りのバランスを調整して（レベルデザインを行って）何回も遊んでもらえるような仕組みを作ります。
・画面のデザイン
１．UIの配置
Canvasを利用してUIを表示します。タイトルの表示、ゲーム中のスコア表示、ゲームクリア後のリザルト表示などを制御します。
＜タイトル表示＞ タイトルの文字、タップを促す表示。
＜ゲーム時＞ スコア表示。他にも追加したら表示を検討する(ステージ番号、残機数など)
＜リザルト表示時＞ : スコアなどの表示部分と、背景部分、タップを促す表示などを考える
他にも必要な場合にはロジックも考えて設計し、画面へ追加していきます。
２．ゲームの世界観に沿ったUIのデザイン
各画面のUIは常にゲーム中表示されていますので、そのデザインや、文字に使用するフォントの種類が見にくかったりするとユーザーは疲れてしまいます。
世界観に凝ったデザインもよいですが、見やすさ、読みやすさも一緒に考えて、バランスを保ちましょう。
今回のゲームの世界観は、ファミコンのようなレトロな雰囲気のビットマップ画像によって作成されています。
そのためゲーム中に使用しているフォントもそのスタイルに沿ったフォントを採用しています。このフォントはゲーム製作に使用するアセットに含まれています。
フォント例
必要なシステム・機能
１．スワイプをしてゲーム画面内のプレイヤーを操作する
画面の左半分側をスワイプに反応するようにし、スワイプした距離に合わせて画面内のプレイヤーキャラクターを左右に移動させます。
指で隠れてしまうと操作が難しくなってしまうため、その辺りのユーザービリティを考えて設計をする必要があります。
２．配置したボタンによってプレイヤーを操作する
画面の右半分側にはボタンを２つ設置し、タップすることでプレイヤーをジャンプさせて空中浮遊させます。
もう１つのボタンはプレイヤーの状態を判断し、空中にいる間にタップするとバルーンを切り離して落下させます。
地面や床に接地している間にタップするとバルーンを１つ生成します。
プレイヤーの状態をどのような方法を使って判定するかを考えて、状態に応じてボタンの機能を切り替えるようにする設計する必要があります。
また頻繁に利用するジャンプのボタンは大きめに配置するなど、デザイン面での調整も必要になるでしょう。
３．強制スクロールによってゲーム画面を動かす
ゲームが開始されると、ゲーム画面が自動的に左側から右側に向かって強制的にスクロール（移動）します。
プレイヤーの移動とは別にゲーム画面が動いていくことになりますが、どのように移動させればよいかを考えていきます。
今回は背景である空と海の画像を移動させることによって、あたかもゲーム画面が動いているかのように見せる方法で設計しています。
４．敵や障害物を自動生成する方法
ゲームの進行に合わせて、障害物、空中床、それにコインが生成されます。
これらを自動生成されるようにすることで、ゲームっぽさに加えてランダム性を持たせています。
この部分については、各オブジェクトは作成後プレファブ化して利用します。
ゲームの管理用スクリプトを作成し、それが自動生成処理や、ゲームの進行管理などを担うようにしていきます。
１つのゲームシーンでタイトルなどはポップアップを用意して進行する方法
今回のゲームでは１つのシーンを用意して、タイトルやリザルトなどをそのゲームシーン上に表示させることで
シーン遷移を行わずに進行させる方法を取っています。その際、タイトルの表示やリザルト表示については
専用のゲームオブジェクトを作成後、ゲームの進行状態に合わせて、それらを適宜なタイミングで生成することによって
タイトルの表示 → ゲーム開始 → ゴール到達 → リザルト表示（もしも途中で落下したら、ゲームおーバー表示）を制御しています。
１つプレファブからの異なる敵や障害物を作成する方法
敵キャラを生成する場合、敵キャラの数だけプレファブを用意する方法もありますが、ここではすべて個別に作成するのではなく、
元となるプレーンな敵キャラ用プレファブを１つ用意しておいて、自動生成しながら、各敵キャラとしての役割・ふるまいを与えられて画面に配置されるような設計にします。
プレーンな敵キャラを自動生成する ↓ 用意された情報を元に、敵キャラの画像、体力などを自動で設定し、「どんな敵であるか」というふるまいを決める
演出（エフェクト）
１．DoTweenを使用してアニメーション演出をする
DoTween（ドットゥイーン）とは無料アセットの１つで、広く使われているTween（トゥイーン）系のアセットです。
Tweenとはゲームオブジェクトの途中経過情報を補間して表現することを言います。
例えば、Aというゲームオブジェクトが現在の地点から別の地点に移動するに際し、その移動する間の情報を補間して表現することが出来ます。
この補間表現機能を利用することにより、様々なアニメーション演出を実装出来ます。
またDoTweenには、この機能が終了するタイミングを待って別の処理を呼ぶことや、途中で補間処理を中断したりといったことも出来ます。
Transformコンポーネントに対しての補間機能が多くありますが、それ以外にも使用方法は多岐にわたります。
特に今回は多くの部分でこの機能を利用します。
２．画面のエフェクト
画面をフラッシュさせたり、暗転させたりといったものだけではなく、キャラクターを揺らしたり、文字を一部だけ大きくしたりなど
画面を通じて行える演出はたくさんあります。これらはシナリオに応じて適した内容のエフェクトを適宜いれていくことで、ゲームの臨場感や没入感が変わってきます。
やりすぎず、少なすぎず、バランスを見ながら考えて実装しましょう。
今回はタイトル表示、リザルト表示などに対して、要所要所でこの演出を追加しています。
ゲームのサイクル
１．ゲームの流れ
何回も繰り返し遊んでもらうような設計になっているため、明確なエンディングはありません。
ゲームクリア、あるいはゲームオーバーになったら、またタイトルに戻ってゲームを最初から遊べるようなサイクルを作成します。
２．追加の要素を作る
ベーシックなサイクルになっているため、ここには様々な要素を追加することが出来るはずです。
例えば、ステージクリア制、残機数制など、システム面の機能だけでもかなりの追加要素が考えられます。
それらの設計を行い、自分で考えた機能を実装してみましょう。
設計の項目については、以上になります。詳細については実装する際の手順内にて説明を補記していきます。
また、これら以外にも用意するべきものがあるのであれば、それらも考えておきましょう。
以上でこの手順は終了です。
次は 実装手順を考える です。
コメントをかく