i-school - 2Dタップシューティングゲーム 設計を考える

2Dタップシューティングゲームの設計を考える


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

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

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

・ゲーム性(Canvasのみでゲームを製作する、スマホでの快適な操作(タップのみで遊べる)、シンプルなルール(エネミーにバレットを当てて倒す)、バレットを切り替えることで発射できるバレットの種類が変化する、など)

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

・必要なシステム・機能(タップした方向に向けてバレットを生成して発射する、エネミーを自動生成する方法、バレットのボタンを自動生成して並べる方法、など)

・1つプレファブからの異なるエネミーやバレットを作成する方法(プレファブとデータベースの利用方法、など)

・演出(DoTweenによるアニメーション、画面のエフェクト、タイミングに合わせてエフェクトを作成する方法、など)

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

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


・ゲーム性

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


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

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

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


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


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

 今回は、バレットの発射、バレットの選択など、すべて画面タップのみでゲームが遊べて進行するような設計にします。

 1.画面下部に設置するボタンをタップ         => バレットの切り替え
 2.ボタン以外の画面をタップ             => 選択しているバレットの生成
 3.ゲームクリア、ゲームオーバー表示に画面をタップ  => どの位置をタップしても再度ゲームが始まる

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


3.シンプルなルール(エネミーにバレットを当てて倒す)


 ゲームの構成は、縦方向に見る、1画面のデザインになっています。
プレイヤーはゲーム画面となるフィールドを上から見下ろしている視点です。
 
 ゲームがスタートすると、画面をタップすることで最初に選択しているバレットを発射することが出来ます。

 画面の上方よりエネミーがプレイヤーの位置まで迫ってきますので、拠点に来る前にバレットを当てて倒します。一定数のエネミーが出現すると最後にボスが出現し、ボスを倒すとゲームクリアとなります。

 画面をタップすると、どんどんバレットが生成されますので、エネミーを次々と倒すことにより爽快感を得ることが出来ます。

 プレイヤーの足元には水平方向に拠点があり、拠点には耐久力があります。この部分にエネミーが侵入したり、エネミーの発射したバレットが接触すると、それらの持つ攻撃力分だけ耐久力が減少します。
耐久力が 0 以下になるとゲームオーバーです。
 
 プレイヤーやエネミーを直接タップして操作をするようなことはできません。

 ルールはこれだけですので、非常にシンプルでわかりやすいデザインになっています。



 発展編としては、エネミーにはHP(体力)があり、バレットには攻撃力があります。バレットを当てると、攻撃力分だけHPが減少し、0 以下になるとエネミーを倒すことが出来ます。

 エネミーを倒す(破壊する)と、ランダムで宝箱が出現し、宝箱はタップすることで獲得することが出来ます。

 エネミー以外の障害物などはありません。またアイテムなどもありません。この部分は製作後に、自由に設計を改良して追加してください。


4.バレットを切り替えることで発射できるバレットの種類が変化する


 エネミーを倒すとプレイヤーには EXP が加算されていき、一定値を超えると、初期以外のバレットを選択出来るようになります。

 画面の下部にはバレットのボタンが4つ用意されており、明るくなったバレットのボタンが押せる状態を示します。



 バレットの切り替えもタップで行います

 発展編としては各バレットは攻撃力や性能、デザインが異なるため、それを自由に切り替えて発射していくことが出来ます。応用編としてはさらに属性情報を与えることにより、バレットによる相性効果をゲーム内に表現し、バレットによって倒しやすいエネミーなどを実装できます。

 バレットを切り替えるとバレットに設定されている分だけ EXP を消費します。そのため、EXP の値を考慮しながら、バレットを効率よく切り替えていくことが楽しみの1つになります。

 ただしこれは、そういった遊び方も出来るという提案であって、バレットを一度も切り替えることなくエネミーを倒すことも可能です。

 あくまでもユーザーには選択肢を与えて、どのように楽しむかを委ねることで、ユーザーなりの遊び方を考えてもらえるようなデザインします。

 この辺りのバランスを調整して(レベルデザインを行って)何回も遊んでもらえるような仕組みを作ります。
 

 

・画面のデザイン

1.UIの配置


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

 ・ゲーム画面の上部に、現在のゲーム情報のUIの部分(EXPなど)を表示
 ・ゲーム画面の下部に、拠点の耐久力のゲージ、バレットのボタンを表示
            
 ・ゲームクリア、ゲームオーバー時には、現在のゲーム状態と、再スタートのタップを促す表示などを考える

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



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



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


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


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

 今回のゲームの世界観は、プレイヤーのキャラクターに合わせて、ファンシーでかわいいデザインを採用しています。
そのためゲーム中に使用しているフォントもそのスタイルに沿ったフォントを採用しています。
このフォントは無料素材として入手したものですので、イメージに合わせて自由に設計してみてください。
 

必要なシステム・機能

1.タップした方向に向けてバレットを生成して発射する


 画面下部にあるバレットの切り替えボタン以外の部分をタップした際に、プレイヤーの位置からタップした方向に向けてバレットを生成して発射します。これが今回のゲームのベースとなるシステムになります。

 エネミーを上方向から下方向に移動させているのは、画面を見ながらプレイヤーがタップをしやすくするためのデザインです。
 仮に下方向から上方向にエネミーが移動することをイメージしてみてください。画面をタップする際に、自分の手が邪魔で、エネミーの方向を見ながらタップすることが困難になります

 こういったユーザービリティはいつも考えて設計をする必要があります。
 

2.エネミーを自動生成する方法


 今回は一定の時間おきにエネミーを自動生成して、プレイヤーの方向に移動させる制御を実装しています。
この部分はシステムとして自由に変更可能です。例えば、エネミーを倒すごとに出現させるようにも出来るでしょう。

 いずれにしても、ゲームの進行に合わせてエネミーが自動生成されることによって、エネミーを倒すとしうゲームシステムが確立できますので、重要なシステムになります。


3.バレットのボタンを自動生成して並べる、条件を満たしたときにだけボタンを押せるように制御する


 ゲームが開始されると、バレットが自動生成されて4つ並ぶようにシステム化しています。
プレファブにして最初から4つ設置しておくことも可能ですが、今後、バレットの種類を増やしたりした際には、バレットを自動生成して画像や、その性能をゲーム実行時に動的に変更する方法を実装できないと、こういったやりとりが困難になるためです。他にも応用できる技術でもあるので、ここで学習をしておきましょう。

 各ボタンには、ボタンを押せるための条件があり、それはプレイヤーの獲得している EXP の値になります。この値はエネミーを倒すごとに加算されますので、その際に、ボタンを押せる状態であるかを判定して、条件を満たしたボタンから押せる状態に制御を行う必要があります。


1つプレファブからの異なるエネミーやバレットを作成する方法(プレファブとデータベースの利用方法、など)


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

 プレーンなエネミーを自動生成する
   ↓
 用意された情報を元に、エネミーの画像、HP、攻撃力、移動方法などを自動で設定し、「どんなエネミーであるか」というふるまいを、その時に決める


演出(エフェクト)

1.DOTweenを使用してアニメーション演出をする


 DOTween(ドットゥイーン)とは無料アセットの1つで、広く使われているTween(トゥイーン)系のアセットです。
Tweenとはゲームオブジェクトの途中経過情報を補間して表現することを言います。
例えば、Aというゲームオブジェクトが現在の地点から別の地点に移動するに際し、その移動する間の情報を補間して表現することが出来ます。
この補間表現機能を利用することにより、様々なアニメーション演出を実装出来ます。

 またDOTweenには、この機能が終了するタイミングを待って別の処理を呼ぶことや、途中で補間処理を中断したりといったことも出来ます。
Transformコンポーネントに対しての補間機能が多くありますが、それ以外にも使用方法は多岐にわたります。

 特に今回は多くの部分でこの機能を利用します。


<動画 ゲームスタート時の演出(真っ黒い画面が徐々に薄くなってゲーム画面が見えてくる。
    その後、GameStartの画像が飛び跳ねながら画面内に入ってきて、一時停止して、また画面外に出ていく)>
https://gyazo.com/e6d3349c1301a6295e944dd97f6a6489


<動画 バレットの残り時間の演出(バレットのボタンの位置に青いゲージが出現し、残り時間に合わせてゲージが時計回りで減少していく)>
https://gyazo.com/d180eaca917454ecee9b7ce4c947971c


<動画 拠点の耐久力やエネミーの上部に表示されるHPゲージの演出(ゲージが徐々に動く)>
<動画 宝箱出現時の演出(生成時に光の柱の中から徐々に宝箱が出現するように見せる)>
https://gyazo.com/279a431f3dd8c6ed109e4768a28ae5a8


<動画 選択可能になったバレットの演出(EXPが規定値を超えたバレットが1回だけアニメしてタップ出来る状態であることを促す)>
https://gyazo.com/3cc5d79a26e8cb9c9f2e3913c96519ad


<動画 エネミーの移動処理(垂直移動、水平移動、ジグザグ移動(垂直+水平移動のループ処理))>
<動画 宝箱獲得時の演出(タップして獲得した際に、画面左上の宝箱アイコンに向かって移動していく)>
https://gyazo.com/dc8343f01e1615b7df36f0ad128d4a40


2.画面のエフェクト


 画面をフラッシュさせたり、暗転させたりといったものだけではなく、キャラクターをアクションさせたり、画像を一瞬だけ大きくしたりなど
画面を通じて行える演出はたくさんあります。これらは場面に応じて適した内容のエフェクトを適宜いれていくことで、ゲームの臨場感や没入感が変わってきます。
 
 やりすぎず、少なすぎず、バランスを見ながら考えて実装しましょう。

 今回は、エネミーにバレットが命中した場合のヒットエフェクトの演出、ボタンが押せるようになった際のアニメ演出、ゲームスタート表示の暗転演出、ゲームクリア表示の花火のエフェクト演出など、要所要所でこの演出を追加しています。


<動画 エネミーにバレットが命中した場合のヒット演出(プレイヤーの拠点にも)>
https://gyazo.com/d180eaca917454ecee9b7ce4c947971c


<動画 選択可能になったバレットの演出(EXPが規定値を超えたバレットが1回だけアニメしてタップ出来る状態であることを促す)>
https://gyazo.com/3cc5d79a26e8cb9c9f2e3913c96519ad


<動画 ゲームスタート時の演出(真っ黒い画面が徐々に薄くなってゲーム画面が見えてくる。
    その後、GameStartの画像が飛び跳ねながら画面内に入ってきて、一時停止して、また画面外に出ていく)>
https://gyazo.com/e6d3349c1301a6295e944dd97f6a6489


<動画 宝箱獲得時の演出(タップして獲得した際に、画面左上の宝箱アイコンに向かって移動していく)>
https://gyazo.com/dc8343f01e1615b7df36f0ad128d4a40


3.タイミングに合わせてエフェクトを作成する方法


 今回のゲームでは無料のアセットのエフェクトをいくつか利用し、生成のタイミングや制御の方法などを学習します。
 
<例>
 プレイヤーのバレットがエネミーに接触する
   ↓
 ヒット演出用のエフェクトをプレファブから生成する
   ↓
 演出終了後にエフェクトを破壊する(演出中に消えないように気を付ける)

 このように演出を設計し、その順番通りに動くように制御を行っていきます。


ゲームのサイクル

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

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

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


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


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

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

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



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


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

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