２Ｄタップシューティングゲーム 学習内容
最終更新：
orika_ex_miyako 2021年03月21日(日) 01:56:21履歴
製作物の概要 
タップのみで遊べるシューティングゲームを製作します。スマホで動作するため、気軽に楽しめます。
画面をタップするとバレット(弾)が生成されますので、それをたくさん打ち出して、プレイヤーの拠点の耐久力がなくなる前にすべてのエネミー(敵)を倒すゲームです。
タップしてエネミーにバレットを当てて倒すというシンプルなシステムですので、難しく考えなくても爽快なゲームを楽しむことができます。
また、ゲームに慣れてきたら、バレットの切り替えと属性による効果によって、プレイヤーはバレットの制御に成功することによる達成感を得る楽しみがあります。
このゲームの素材にはぴぽや様とイラストAC様の素材を利用させていただいております。
ぴぽや様
https://pipoya.net/sozai/
イラストAC様
https://www.ac-illust.com/
＜動画 タップでバレット生成してエネミーを攻撃＞
＜動画 画面下部のバレットボタンをタップするとバレットを変更可能＞
＜動画 警告表示演出とボス出現＞
＜動画 ボス対決。エネミーには相性のよいバレットで攻撃するとダメージ２倍に＞
＜動画 クリア演出＞
＜動画 ゲームスタート時のオープニング演出＞
システムとルール
世界観をファンシーな雰囲気にしているため、老若男女楽しめるデザインになっています。（自由にデザイン変更できます）
ゲームを開始すると、ゲームスタートの演出が実行されます。(これは発展編で実装します。)
プレイヤーであるキャラは画面の下部に位置しており、移動はできません。
画面をタップすると、プレイヤーの位置からタップした方向に向けてバレット(弾)を打ち出します。
画面の上部でタップしても、中央付近でタップしても構いません。位置に関係なく、その方向に対して打ち出す速度は変わらないように制御します。
画面の上方からはプレイヤーの位置に向けてエネミーが下りてきます。
エネミーはバレットを当てることで倒すことが出来ます。たくさんのエネミーをタップでどんどんと倒すことで爽快感が得られるようになっています。
プレイヤーの地点は平行方向に自分の拠点となっており、この地点までエネミーや、エネミーのバレットが到達するとダメージを受けます。
拠点の耐久力が 0 になってしまったらゲームオーバーです。
そのため、プレイヤーの位置にエネミーが到達する前に、バレットを当てて倒す必要があります。
プレイヤーと拠点と耐久力のバー表示
エネミーを倒すと、EXP(経験値)が獲得できます。この値は画面の上部右側に常時表示するようにします。
また発展編では、ランダムで宝箱が出現する実装(生成と出現時の演出、獲得時の演出)も行います。
EXP表示
画面下部のプレイヤーの拠点よりも下にはバレットの選択ボタンを配置してあります。
このボタンは最初は一番左のバレットが選択されている状態です。
バレットのボタン(４種類)
バレットのボタン上には数字が書かれており、この数字分の EXP がたまると、そのバレットを選択できるようになり、ボタンの色が変わって押せることを知らせます。
バレットのボタンを押すと、数字分の EXP が消費されて、一定時間の間、そのバレットが開放されてタップで発射できるバレットの種類が変更になります。
左から２番目のバレット選択中。押せるバレットは明るく表示される
バレットは途中でも別のバレットに変更できます。
一番左の初期バレット以外は制限時間があり、制限時間の途中で別のバレットに切り替えた場合には、一旦そこで時間の消費が停止します。
再度選択した際に、また残りの時間分だけそのバレットを発射出来るようになっています。
発展編では、エネミーには属性情報があり、バレットにも属性情報があります。バレットの背景イメージが属性情報になっています。
そのため、相性のよいバレットを選択してエネミーを攻撃すると、通常の２倍のダメージを与えることが出来ます。
同様に、プレイヤー側にも属性情報があり、現在選択しているバレットの属性情報を保持するようになっています。
よってバレットとエネミーの属性によっては相性が悪くなり、その場合には通常の２倍のダメージを受けてしまうことになります。
そのため、異なるエネミーを効率よく倒し、なるべく受けるダメージを減らすためには、バレットを上手く切り替えていく必要があります。
ここがユーザーに与えられるジレンマであり、プレイ中に考えて、選択をしていってもらう部分になります。
ですが、特に考えなくてもエネミーを倒すことはできるため、これは遊び方(プレイスタイル)の１つになります。
バレットの選択を上手く制御することによって、ノーダメージでエネミーを倒すことも出来るようになりますので、
タップだけして遊ぶ楽しみ方ももちろん出来ますが、考えてプレイできるようになれば、今度は達成感が得られる仕組みになっています。
最後には警告の演出とともにボスが出現し、ボスを倒すことでゲームクリアとなります。
警告の演出やゲームクリア時の花火の演出なども発展編で学習します。
ゲームオーバー、あるいはゲームクリア時には再度タップすることで、もう一度ゲームを最初からプレイできます。
この部分をステージ制などに変更すれば、１つのゲームサイクルとして完成できます。
発展要素としましては追加のルールを考えたり、宝箱の要素を追加したり、バレットの種類をデッキを組んで画面に配置したり、アイテムを用意したりと、色々な楽しみ方を設計出来ます。
完成図
この教材をすべて完成させると、以下のような画面構成を持つゲームになります。
１．ゲームの流れ
今回は１つのシーンでのみゲームを作成しています。そのため、タイトルシーンなどは教材内にはありません。
必要であれば、タイトルシーンについては自分で考えて楽しいイメージの設計を行って実装をしてみてください。
ゲームを実行すると、メインとなるシューティングゲームがスタートします。
最初にゲームスタートの演出を行います。
ゲームスタートの演出
続いて、画面をタップできるようになり、タップした方向に向かってプレイヤーからバレットが発射されます。
タップしてバレット生成
ゲーム時間の経過に合わせてエネミーが上からプレイヤーの方向に向かって下りてきますので、バレットをぶつけて倒します。
エネミー
一定のエネミーが生成されると(ルール変更可能です。自分のルールを考えてみましょう)、ボスが出現します。
ボスが出現する際には警告の演出が入ります。
警告の演出
拠点の耐久力が 0 になる前にボスを倒すことが出来ればゲームクリアです。
ゲームクリアすると、再ゲームスタートのタップを促す表示と、ゲームクリアの演出が入ります。
ゲームクリア演出
ゲームクリア、あるいはゲームオーバー時に画面をタップすると、再度ゲームをスタートすることが出来ます。
ゲームオーバー
ここでゲームをサイクル化しています。
学習内容
２Ｄタップシューティングアクションゲームを製作していくことで、習得することを目標とする技術を記載しておきます。
また、スクリプトに関しては、たくさん書いて覚える、ということを主軸として記述を行っています。
一見、合理的・機能的には見えない処理もありますが、あくまでも書いて覚えるための手順書になっています。
そのため、学習状況によっては、もっとスマートに書けるのでは？ と感じる方もいると思いますが
そうした「気づき」を感じた方は自分なりの記述方法を考えて、よりよいスクリプトを書いていく練習としてこの教材を活用してください。
・設計に沿った製作作業 ・アセットストアからインポートしたアセットの利用方法について ・Canvas内のみでゲーム画面を作成(ワールド空間は使用しない) ・Raycast Target 機能について自分で調べる ・CanvasRenderer コンポーネントの Cull Transparent Mesh 機能 ・キャラモデルをUI(Canvas)上に表示する方法(RawImage コンポーネント、RenderTextureの活用) ・セーブのショートカットボタン ・RequireComponent属性 ・Transform.right 変数 ・Rigidbody2D.AddForce メソッド ・Header属性 ・Transform.up 変数 ・Destroy メソッド ・Summary（サマリー）機能 ・プレファブの作成 ・Instantiate メソッド� 欅�数の種類と内容− ・Instantiate メソッド�◆ 写瓩蠱佑粒萢僉� ・ピリオドによる処理の読み解き方 ・Input.mousePosition 変数 ・Camera.ScreenToWorldPoint(Vector3 position) メソッド ・Vector3.Scale メソッド ・Vector3.normalized 変数を利用した正規化処理 ・Transform.Translate メソッド ・OnTriggerEnter2D メソッド ・Tag の設定 ・処理のメソッド化 ・TryGetComponent メソッドと out キーワード宣言 ・OnTriggerEnter2D メソッド、Tag の復習を行う ・TODO 機能 ・アンカー設定 ・親子関係の利用方法 ・SerializeField属性 ・アタッチとアサインについて ・Mathf.Clamp メソッド ・DOTweenの補間機能と実装例� �DOValue メソッドー ・キャスト処理 ・復習しながら、自分で処理を書いてみる ・Start メソッドの役割を持つメソッドを作成して利用する方法 ・複数行の処理を１行にまとめて記述する方法 ・スクリプトの参照利用方法 ・条件式時のbool型の省略記法 ・学習内容の復習（手順２０まで） ・問題点の切り分けを行う方法 ・Transform.SetParent メソッド ・復習を兼ねて、教材を見る前にエフェクト用のゲームオブジェクトを作成してプレファブにする処理に挑戦する ・static クラスと static 変数の宣言 ・static メソッドの利用方法 ・プロパティ ・Debug.Log メソッドを利用した処理の流れの確認方法 ・StartCoroutine メソッド ・引数を利用して外部のスクリプトから情報を取得して利用する方法 ・省略可能な引数を持つメソッドを定義する方法と使用方法 ・DOTweenの補間機能と実装例�◆ �DOLocalMoveY メソッドー ・CanvasGroup コンポーネントの機能について ・DOTweenの補間機能と実装例�� −DOFade メソッド− ・DOTweenの補間機能と実装例�ぁ �DOText メソッド− ・Start メソッドと Update メソッドの利用方法を考える ・Start メソッドに依存しない設計
発展編として、以下の技術についても学習します。
・リファクタリングを行い、関連する処理を１つのスクリプトにまとめる方法 ・スクリプトを経由して別のスクリプトの処理を実行していく方法 ・enum だけのスクリプト・ファイルの作成 ・スクリプタブル・オブジェクトの作成とデータの登録 ・クラス内に別のクラスを作成する(入れ子クラス) ・[System.Serializable（シリアライザブル）]属性 ・List の初期化 ・入れ子クラスを外部のクラスで宣言する方法 ・スクリプタブル・オブジェクトを利用する方法 ・スクリプトを活用して１つのゲームオブジェクトの振る舞いを変えて、異なる役割を与える方法 ・引数と戻り値を使った処理の実装例 ・enum を条件に利用した switch 文の実装例 ・Listの使い方� �Add メソッドー ・入れ子クラスを外部のクラスで利用する方法 ・スクリプタブル・オブジェクトに新しい情報を追加する ・シングルトンデザインパターンによるクラスの作成と活用 ・複数のスクリプトを経由して処理を実行していくロジックの考え方と設計方法 ・ゲームの設定関連の値を１つのスクリプトに集約し利用する方法 ・DOTweenの補間機能と実装例�ァ �DOLocalMoveX メソッド、SetLoops メソッド、SetEase メソッドー ・DOTweenの補間機能と実装例�Α �OnComplete メソッドー ・DOTweenの補間機能と実装例�А �Sequence 機能、Append メソッド、AppendInterval メソッドー ・スクリプタブル・オブジェクトの新しい使い方 ・UnityAction(デリゲート)の使い方 ・エネミーとプレイヤーで同じスクリプトを利用する ・コルーチンメソッドを利用した while 文の実装例 ・共通する処理を複数かかないように考えて記述する ・戻り値と引数を利用した処理の実装例 ・GameObject型以外のインスタンスの方法 ・Listの使い方�◆ �Count 変数、Clear メソッド− ・引数と戻り値を利用して処理の内容を自動分岐する処理の実装例 ・１つのゲームオブジェクトを複数の目的に利用する方法 ・自分でロジックを考えて組み立てる ・Grid Layout Group コンポーネントの使用方法 ・for 文と Grid Layout Group コンポーネントを利用したインスタンシエイト処理の実装例 ・ゲームの世界観を構築する ・クラス内に入れ子として enum を宣言して利用する方法 ・処理の全体像から、ロジックを組み立てて実装を行う ・DOTweenの補間機能と実装例�А �DOFillAmount メソッドー ・foreach 文を利用した処理の実装例 ・Selectable.interactable プロパティ ・Startメソッドの戻り値を void から IEnumerator 型にして使用する処理 ・yield return StartCoroutine メソッドによる待機処理 ・if文の条件式に戻り値を持つメソッドを利用する場合の実装例 ・引数に条件式を利用する方法 ・プロパティを自作する ・switch 文の実装例 ・配列の活用方法の実装例 ・GameObject.FindGameObjectsWithTag メソッド ・Vector3.MoveTowards メソッド ・パーティクルのエフェクトを Canvas 上で再生する方法 ・Color32 ・ParticleSystem.MinMaxGradient 構造体 ーパーティクルのエフェクトの色をランダムで変更するー ・DOTweenの補間機能と実装例�─ �DOPunchScale メソッドー ・DOTweenの補間機能と実装例�� ーDOShakeScale メソッドー ・Block Raycast プロパティ ・DOTweenの補間機能と実装例�� ーDOLocalJump メソッドー ・順序立てた処理の制御の実装例 ・順序立てた処理のロジックを自分で考えて実装を行う ・今までの処理を復習し、自分の設計でスクリプタブル・オブジェクトや static クラスを新しく作成する ・戻り値を持つメソッドの処理の実装例 −if 文の条件式、引数への指定、戻り値後の型に対して続けて記述する処理− ・タプル型の実装例 ・戻り値を持つメソッドの自作 ・List を利用したスクリプタブル・オブジェクト内のデータの抽出処理の自作 ・BulletData の情報をどのようにすれば利用できるようになるか、ロジックを考える ・BGMを鳴らす場面・シーンを考える ・AudioSource.Playメソッド、AudioSource.Stopメソッド、AudioSource.clip 変数 ・DOTweenの補間機能の実装例�� ーAudioSource.DOFadeメソッドを利用したBGMのクロスフェード演出処理ー ・AddComponent メソッド ・オーディオファイルの容量圧縮やメモリ使用の設定 ・自分で処理全体の設計ロジックを考えて１つずつ処理を実装する
拡張編として、以下の技術についても学習します。
・ブロック記号({ })の省略書式
・処理のコメントをなるべくゲーム上の動きで記述する
・DOTweenの補間機能の実装例�� ーDOTween.TO メソッドを利用した数字の変動アニメ演出処理ー
・処理を組み合わせた演出を考えて実装する
・Any State を利用したステートの遷移処理の実装例
・Animator.ResetTrigger メソッド
重点学習箇所
１．アセット(インポートしたゲームオブジェクトやスクリプト)の利用方法
多くはプレファブとしてすぐに利用できる形でゲームオブジェクトやパーティクルシステムの再生されるエフェクトを提供しています。
またGithubに公開されている無料のスクリプトがゲームの演出をサポートしてくれます。
フォントやロゴ、オーディオファイル、イラストなどについても無料のサイトがあります。
それらを上手くゲーム内に活用していく方法を学習します。
GameStart のロゴの例
数字のフォントとアウトラインによる文字装飾の例
２．DOTweenの使い方
DOTweenの基本的な使用方法と応用方法について学習します。
・ゲームスタート時の演出（真っ黒い画面が徐々に薄くなってゲーム画面が見えてくる。その後、GameStartの画像が飛び跳ねながら画面内に入ってきて、一時停止して、また画面外に出ていく） ・バレットの残り時間の演出（残り時間に合わせてゲージが時計回りで減少していく） ・拠点の耐久力やエネミーの上部に表示されるHPゲージの演出（ゲージが徐々に動く） ・選択可能になったバレットの演出（EXPが規定値を超えたバレットが１回だけアニメしてタップ出来る状態であることを促す） ・宝箱出現時の演出（生成時に光の柱の中から徐々に宝箱が出現するように見せる） ・宝箱獲得時の演出（タップして獲得した際に、画面左上の宝箱アイコンに向かって移動していく） ・エネミーの移動処理（垂直移動、水平移動、ジグザグ移動（垂直＋水平移動のループ処理））
＜動画 ゲームスタート時の演出（真っ黒い画面が徐々に薄くなってゲーム画面が見えてくる。
その後、GameStartの画像が飛び跳ねながら画面内に入ってきて、一時停止して、また画面外に出ていく）＞
https://gyazo.com/e6d3349c1301a6295e944dd97f6a6489
＜動画 バレットの残り時間の演出（バレットのボタンの位置に青いゲージが出現し、残り時間に合わせてゲージが時計回りで減少していく）＞
https://gyazo.com/d180eaca917454ecee9b7ce4c947971c
＜動画 拠点の耐久力やエネミーの上部に表示されるHPゲージの演出（ゲージが徐々に動く）＞
＜動画 宝箱出現時の演出（生成時に光の柱の中から徐々に宝箱が出現するように見せる）＞
https://gyazo.com/279a431f3dd8c6ed109e4768a28ae5a8
＜動画 選択可能になったバレットの演出（EXPが規定値を超えたバレットが１回だけアニメしてタップ出来る状態であることを促す）＞
https://gyazo.com/3cc5d79a26e8cb9c9f2e3913c96519ad
＜動画 エネミーの移動処理（垂直移動、水平移動、ジグザグ移動（垂直＋水平移動のループ処理））＞
＜動画 宝箱獲得時の演出（タップして獲得した際に、画面左上の宝箱アイコンに向かって移動していく）＞
https://gyazo.com/dc8343f01e1615b7df36f0ad128d4a40
このように演出を加えると画面が華やかになるとともに、一気にゲームの見た目のレベルがアップします。
３．１つのプレファブから、異なる内容の同種類のゲームオブジェクトを作成する
バレットのボタンが画面の下部に４種類並んでいますが、これはボタンを４種類別々に用意しているのではなく、
１つのプレファブから、用意してあるデータを反映して、それぞれが別のボタンになるよう、異なるゲームオブジェクトとして振る舞わせています。
バレットのボタンのプレファブ
↓
＜動画 生成時にデータを反映して、異なるバレットのボタンとして振る舞わせる＞
https://gyazo.com/c17627aa74b77f40856e47029cfa44ff
これはエネミーや、打ち出されるバレットにも同じ処理を利用しています。
エネミー用のプレファブは１つしかありませんが、そのプレファブに用意してあるデータを反映して、異なる種類のエネミーとして振る舞うように設計しています。
４．スクリプタブル・オブジェクトの活用
Unity にはスクリプタブル・オブジェクトという、データベースを作成して利用する機能があります。
今回のゲームは、この機能を活用することによって、【３】のプレファブの振る舞いを変更する処理を実行しています。
バレットのデータを管理しているスクリプタブル・オブジェクトのインスペクター画像
スクリプタブル・オブジェクトの内容はインスペクターから変更が可能です。
Unityの持つ機能を上手く活用していくことで、こういったゲーム内の処理を実装することが出来ます。
以上でこの手順は終了です。
=> 次は 設計を考える です。
コメントをかく