２Ｄタワーディフェンス 学習内容
最終更新：
orika_ex_miyako 2021年05月24日(月) 15:58:44履歴
製作物の概要 
Unity の機能の１つである「タイルマップ(TileMap)」を活用して、上から見下ろし画面(トップビュー)型のタワーディフェンスゲームを製作します。
Sceneビュー画像
Gameビュー画像
ゲームのルールは発展編にて肉付けします。この手順では、ゲームの土台となる部分を作成します。
ゲーム画面は、タイルマップという機能を利用して、２Ｄ用の画像を敷き詰めてゲームのフィールドとなる画面を作成します。
画面はタップのみで制御を行い、複数のタイルマップを利用することで、タップした地点にキャラを配置できる地形と配置できない地形の制御を実装します。
時間の経過によってカレンシー(キャラを配置するためのコストの支払いに利用できる数値)が加算され、敵が自動的に次々に生成されます。
拠点を防衛するためにカレンシーを支払ってキャラを配置し、経路を移動してくる敵を倒しながら最後まで拠点を防衛することがゲームの目的になります。
スマホで遊ぶことを前提とし、ゲーム画面は固定になっており、スクロールは行いません。
広いマップを作ってスクロールさせたい場合には自分で挑戦してみましょう。
この教材ではこれらのシステム的な実装を目的としています。
そのため、完成したからといってゲームとして完全に遊べる状態になる訳ではありません。
ですが、ここでしっかりと土台を作成することができれば、あとは自分のアイディアを元にして
タワーディフェンスゲームを作っていくことが可能です。
このゲームの素材にはぴぽや様とイラストAC様の素材を利用させていただいております。
ぴぽや様
https://pipoya.net/sozai/
イラストAC様
https://www.ac-illust.com/
＜動画� ．押璽爛好拭璽箸留藹个判亳修垢訶┐侶佻�の表示。敵の出現する位置に応じて、経路を自動的に生成し、自動的に敵を移動する。カレンシー(キャラの配置に必要なお金)が時間の経過に合わせて自動加算される＞
＜動画�◆’枌峅椎修淵織ぅ襪涼賄世鬟織奪廚垢襪海箸杷枌屬任�るキャラの一覧が表示され、選択するとタップした地点に配置できる＞
＜動画�� 敵は経路に沿って移動し防衛拠点を目指してくるため、キャラを配置して防衛する。経路上にキャラは配置できないので、経路の周囲に配置する。敵の侵入を感知して自動的に攻撃を行う＞
＜動画�ぁ．押璽狷發貿枌屬任�るキャラ数には制限があり、また、キャラには攻撃できる回数がある。そのため配置済のキャラをタップすることで選択したキャラの配置を解除し、戦略を練ることができる＞
＜動画�ァ．好董璽庫茲棒瀋蠅靴針姫匍鯏世愿┐�侵入すると拠点の耐久力ゲージが減少し、0 になると破壊されてゲームオーバーになる＞
＜動画�Α．好董璽犬謀仂譴垢訶┐�すべていなくなり、拠点の耐久力が残って入ればゲームクリア＞
＜動画�А’枌屬垢襯�ャラを選択している間は敵の移動と敵の生成とキャラの攻撃とカレンシー(配置に必要なお金)の加算が一時停止する＞
システムとルール
汎用的な２Ｄのタワーディフェンスゲームを製作するためのツール教材になっています。
そのため実装しているのはシステム面のみで、そのほかのルールはありません。
＜実装するシステム＞
・タイルマップを利用したゲーム画面製作 ・画面の指定したタイルのタップを感知する処理と位置の判定処理 ・敵キャラの自動配置 ・敵キャラの移動経路表示の自動生成 ・敵キャラの経路に沿った自動移動 ・プレイヤーキャラと敵キャラのアニメーションの管理 ・タップした地点を感知し、プレイヤーキャラを配置するポップアップを生成。選択したキャラをタイルマップ上に配置する処理 ・プレイヤーキャラの攻撃範囲と攻撃回数の管理による敵キャラへの自動攻撃処理 ・配置するキャラを選択している間はゲーム内の処理を一時停止する(敵の移動、敵の自動生成、プレイヤーキャラの攻撃、カレンシーの加算) ・プレイヤーキャラのデータベースによる管理と運用。所有しているプレイヤーキャラのみ選択可能にする ・敵キャラのデータベースによる管理と運用 ・ステージのデータベースによる管理と運用 ・エフェクトや UI アニメの演出処理
以上の部分における、ロジックの考え方や、実装の方法などを学習します。
簡単に解説しておきます。
＜タイルマップを利用したゲーム画面製作＞
Unity の機能の１つであるタイルマップという機能を利用して、２Ｄ用の画像を敷き詰めてゲームのフィールドとなる画面を作成します。
複数のタイルマップをレイヤー構造にして重ねて利用することで、タップを感知してキャラを配置できる地形と配置できない地形の制御を実装します。
今回は２つのタイルマップを重ねて１つのタイルマップとしていますが、３つ以上のタイルマップに分けることも可能です。
＜ベース部分(配置できるタイルマップ)＞
＜配置できないタイルマップ＞
＜２つのタイルマップを一緒に表示して合成＞
＜画面の指定したタイルのタップを感知する処理と位置の判定処理＞
ゲームのベースとなる部分の１つです。
カメラやタイルマップに関連するコンポーネントが持つメソッドを利用して、画面のタップを感知し、
その位置にあるタイルマップの情報を取得する処理を実装します。タイルマップの情報を取得することにより、この位置情報を利用して
タップした地点にキャラのゲームオブジェクトを生成して配置する処理が実装出来るようになります。
・Grid.WorldToCell メソッド ・Camera.ScreenToWorldPoint メソッド ・Tilemap.GetColliderType メソッド
＜敵キャラの自動配置＞
時間の経過により、ステージに登録されている出現ポイントより自動的に敵を生成します。
出現ポイントや敵の種類はランダム化することも、固定化することも出来るような設計を考えます。
＜敵キャラの移動経路表示の自動生成＞
演出でもあり、ゲームのシステム的な部分でもある機能です。
自動生成された敵の出現ポイントを起点に、防衛拠点までの敵の移動経路を画面に自動生成します。
一方向のみの矢印を複数生成してルート表示を行うような設計にします。これには LineRenderer コンポーネントを利用します。
矢印にも一度にすべてを生成するのではなく、１つずつ順番に時間差を利用して生成し、削除する際にも１つずつ順番に消していきます。
こういったテクニックがゲームを引き立たたせることが出来ます。
移動先がわかりやすいように矢印の画像を設定していますが、画像は任意に設定できます。
＜矢印で移動経路を表示＞
＜動画＞
動画ファイルへのリンク
＜敵キャラの経路に沿った自動移動＞
ゲームのベースとなる部分の１つです。
経路の表示が終了するのを待って、敵の移動を開始するように制御を行います。
経路に沿った移動処理は DOTween の DOPath メソッドを利用して実装を行います。
＜プレイヤーキャラと敵キャラのアニメーションの管理＞
複数のスプライト画像を利用して移動用のアニメーションを作成し、そちらを制御します。
各キャラや敵キャラごとに用意しておくことにより、そのキャラのアニメを再生するようにします。
＜タップした地点を感知し、プレイヤーキャラを配置するポップアップを表示。選択したキャラをタイルマップ上に配置する処理＞
ゲームのベースとなる部分の１つです。
タップした地点がキャラを配置できる地点であった場合には、プレイヤーキャラを選択して配置を行うためのポップアップを表示します。
こちらのポップアップは毎回新しく生成するのではなく、表示/非表示を切り替えて表示するようにします。
配置するためにはキャラごとに設定されている配置コストが必要になります。
こちらをカレンシー(コスト支払い用のお金のようなもの)と比較して、選択可能なキャラのみを選択できる制御も行います。
ポップアップは表示の切り替えを行っているため、この制御を行わないと現在のカレンシーと配置できるキャラにズレが生じてしまうためです。
選択したキャラはタップした地点に生成されるように制御を行います。
＜動画 タップ地点にキャラを生成＞
動画ファイルへのリンク
＜プレイヤーキャラの攻撃範囲と攻撃回数の管理による敵キャラへの自動攻撃処理＞
配置されたキャラには敵を攻撃可能な範囲と攻撃できる回数が設定されています。攻撃回数は画面上でも表示されるようにしています。
攻撃範囲内に敵が侵入した場合、攻撃の準備時間を経て敵を自動的に攻撃します。残りの攻撃回数が 0 になったキャラは破壊されます。
＜攻撃範囲と攻撃回数＞
攻撃範囲内に敵がいなくなった場合には攻撃を停止する処理も実装します。
そのためキャラの性能差としては、攻撃の準備時間、攻撃力、配置のコスト、攻撃範囲、攻撃回数などがあります。
これを上手く活用して敵キャラを倒して拠点を防衛することがゲームの目的になります。
＜配置するキャラを選択している間はゲーム内の処理を一時停止する(敵の移動、敵の自動生成、プレイヤーキャラの攻撃、カレンシーの加算)＞
配置するキャラを選択している間もゲーム内の処理を動かしておくことも出来ますが、今回は一時停止する機能を実装します。
敵の移動、敵の自動生成、プレイヤーキャラの攻撃、カレンシーの加算については処理を一時停止して、キャラ選択のポップアップが閉じてから各処理を再開させます。
こちらはゲームのプレイモード選択を用意して、ユーザーに選択をさせるという手法をゲームのシステムとして検討をしてもいい部分です。
例えばアクティブモードならば常にゲーム内の時間は動いていて、パッシブモードならばキャラ選択時のみ一時停止する、という機能分けが可能です。
＜プレイヤーキャラのデータベースによる管理と運用。所有しているプレイヤーキャラのみ選択可能にする＞
スクリプタブル・オブジェクトという Unity の持つクラスをデータベース化できる機能を利用して、キャラのデータを事前に登録しておきます。
＜キャラのデータのデータベース＞
この手法によりキャラの運用管理や保守(数字の修正)を簡便化し、複数のキャラのプレファブを用意せずにキャラを生成出来るようにします。
プレイヤーには情報として所有しているキャラを設定できるようにします。所有しているキャラのみが配置の選択可能なキャラになる制御も実装します。
このような機能を実装しておくことで、ゲーム内で新しいキャラをアンロックしていくモードを実装することが可能になります。
＜敵キャラのデータベースによる管理と運用＞
プレイヤーの配置できるキャラと同じように敵キャラについてもスクリプタブル・オブジェクトを作成してデータベースによる管理を行うようにします。
＜敵キャラのデータのデータベース＞
＜ステージのデータベースによる管理と運用＞
ステージも同様です。こちらはタイルマップで作成したステージをプレファブ化して登録しておきます。
そちらに、ステージの名前や拠点の耐久力、出現する敵などを設定できるようにします。
＜ステージのデータのデータベース＞
＜エフェクトや UI アニメの演出処理＞
DOTwenn アセットやその他のアセットを利用して、画面の演出を行います。
敵が破壊された場合には 2D 用のパーティクルを生成して、破壊されたことを伝えるようにしています。
拠点の耐久力についてはゲージがアニメ演出しながら減少するように制御を行っています。
＜動画＞
動画ファイルへのリンク
発展編ではこのシステムをベースに、どのようなゲームにするのかを考えて肉付けしていき、色々な楽しみ方を設計出来ます。
完成図
今回は Main というタワーディフェンスゲーム画面のシーンのみで作成しています。
Title シーンもありませんので、必要であれば、タイトルについては自分で考えて楽しいイメージの設計を行って実装をしてみてください。
ゲームを実行すると、メインとなるタワーディフェンスの画面からゲームがスタートします。
その中で実装されている各システムの確認を行っていくようになります。
また、どのような仕様を追加していくかも一緒に検討を行うようにします。
学習内容
２Ｄタイルマップのタワーディフェンスゲームを製作していくことで、習得することを目標とする技術を記載しておきます。
また、スクリプトに関しては、たくさん書いて覚える、ということを主軸として記述を行っています。
一見、合理的・機能的には見えない処理もありますが、あくまでも書いて覚えるための手順書になっています。
そのため、学習状況によっては、もっとスマートに書けるのでは？ と感じる方もいると思いますが
そうした「気づき」を感じた方は自分なりの記述方法を考えて、よりよいスクリプトを書いていく練習としてこの教材を活用してください。
・設計に沿った製作作業 ・アセットストアからインポートしたアセットの利用方法について ・Sprite Editor機能 ・Tile Pallete を利用した Tilemap の作成方法 ・Sorting Layer の設定 ・TileMap によるステージ作り、コライダーの設定方法、レイヤー分けによる重複構造 ・Grid.WorldToCell メソッド ・Camera.ScreenToWorldPoint メソッド ・Tilemap.GetColliderType メソッド ・LineRenderer による経路の自動生成処理 ・RequireComponent 属性 ・Header 属性 ・Summary（サマリー）機能 ・アニメーション関連（Animatorビュー、アニメーションのステート、トランジション、パラメータ） ・Mathf.Approximately メソッド ・Animator.SetFloat メソッド ・DOPath メソッド ・Layer Collision Matrix の設定 ・Debug.DrawRay メソッド ・LayerMask.GetMask メソッド ・TryGetComponent メソッドと out キーワード宣言 ・CanvasGroup コンポーネント ・スクリプタブル・オブジェクトの作成とデータの登録 ・クラス内に enum を作成する(入れ子構造) ・[System.Serializable（シリアライザブル）]属性 ・List の初期化 ・シングルトンデザインパターンによるクラスの作成 ・スクリプタブル・オブジェクトをゲーム内で利用できるようにする方法 ・シングルトンデザインパターンによるクラスの活用 ・スクリプタブル・オブジェクトを利用する方法 ・引数と戻り値を使った処理の実装例 ・Vector2.magnitude 変数 ・引数を利用して処理の振る舞いを変更する実装例 ・引数を利用して外部のクラスの情報をスクリプト内に取得する方法の実装例 ・Debug.Log メソッドの活用方法 ・Button.onClick.AddListenerメソッド ・Canvas 内にゲームオブジェクトを自分で考えて配置する ・enum だけのスクリプト・ファイルの作成 ・クラス内に別のクラスを作成する(入れ子クラス) ・プレファブの解除(アンパック)方法 ・ItemData クラスの情報を参照する方法 ・Behaviour.enabled 変数 ・Selectable.interactable 変数 ・複数のスクリプトを経由する処理を読み解く ・Linqの機能の実装例� �FirstOrDefault メソッド〜 ・string.IsNullOrEmpty メソッド ・Enum.GetNames メソッド ・OneLine アセット ・OneLine 属性、OneLineWithHeader 属性 ・PlayerPrefs クラス ーSetStringメソッド、Save メソッド、HasKey メソッド、GetString メソッドー ・String.Split メソッド ・コンストラクタ ーインスタンスしたクラスにコンストラクタを利用して値を代入する方法ー ・Linqの機能の実装例�◆ �OrderBy メソッド〜 ・Enum.Parse メソッド ・int.Parse メソッド ・foreach 文による処理の流れを把握する ・作成したメソッドを自由にデバッグする方法を覚える
発展・応用編として、以下の技術についても学習します。
・実装内容による
重点学習箇所
１．タイルマップの利用方法
２Ｄ用の画像データを Unity にインポートし、それを活用してタイルマップを作成します。
ベースとなる部分を作成してから、別のタイルマップ上に地形を配置していく手法を学習します。
また画面のタップ（マウスクリック）を感知して、どの位置のタイルマップをタップしたのかを判定する方法も学習します。
２．DOTweenの使い方
DOTweenの基本的な使用方法と応用方法について学習します。
・経路に沿った敵の移動 ・ゲームスタート演出やゲームクリア演出
＜動画 経路に沿った敵の移動＞
動画ファイルへのリンク
＜動画 ゲームスタート演出＞
動画ファイルへのリンク
DOTween ではこのように移動関連の処理や演出関連の処理を実装することができます。
画面が華やかになるとともに、一気にゲームの見た目のレベルがアップします。
３．データベースを活用し、１つのプレファブから、異なる内容の同種類のゲームオブジェクトを作成する
配置するキャラを作成する際に、複数の異なるプレファブを作成するのではなく、予めデータベースを作成して キャラの情報を登録しておいて
１つのプレファブから、用意してあるデータを反映して、それぞれが別のキャラになるよう、異なるゲームオブジェクトとして振る舞わせています。
合わせて敵キャラやステージのデータなどもデータベース化し、そのデータを読み込むようなロジックの設計を学習します
４．スクリプタブル・オブジェクトの活用
Unity にはスクリプタブル・オブジェクトという、データベースを作成して利用する機能があります。
今回のゲームは、この機能を活用することによって、【３】のプレファブの振る舞いを変更する処理を実行しています。
スクリプタブル・オブジェクトの内容はインスペクターから変更が可能ですので、保全管理することも容易になっています。
Unityの持つ機能を上手く活用していくことで、こういったゲーム内の処理を実装することが出来ます。
以上でこの手順は終了です。
=> 次は 設計を考える です。
コメントをかく