２Ｄトップビューアクション 学習内容
最終更新：
orika_ex_miyako 2023年12月31日(日) 12:36:36履歴
製作物の概要 
Unity の機能を活用した２Ｄアクションゲームを制作しながら学習を行います。
「タイルマップ(TileMap)」を活用したステージ製作、「シネマシン(Cinemachine)」を活用したカメラ制御などを学習して
上から見下ろし画面(トップビュー)型のゲームのベース部分を製作します。
また制作で広く利用されている「DOTween(ドットゥイーン)」を活用した補間機能の学習も行います。
動画ファイルへのリンク
本教材の制作には Unity 公式のチュートリアル教材の素材を利用しています。
Unity 公式チュートリアル
Ruby's Adventure：2D 入門(日本語)
https://learn.unity.com/project/ruby-s-2d-rpg-jp
学習内容としましても、上記のチュートリアルの復習部分も多くありますので、
まずは公式チュートリアルで２Ｄゲームの学習を行ってから、こちらの学習を進めていくことをお勧めいたします。
ゲームのルールは発展編にて肉付けします。この手順では、ゲームの土台となる部分を作成します。
なお、アクションゲームをイメージしていますが、アクションロールプレイングゲーム、アドベンチャーゲームなどにも問題なくベースとして利用できます。
ゲーム画面は、タイルマップという機能を利用して、２Ｄ用の画像を敷き詰めてゲームのフィールドとなる画面を作成します。
複数のタイルマップを利用することで、侵入できる地形と侵入できない地形の制御を実装します。
画面をスワイプするとキャラが８方向に移動します。
カメラはキャラを中心に追従するように制御し、ゲーム画面外の作りこんでいない部分を見せないようにも制御を行います。
この教材ではこれらのシステム的な実装を目的としています。
そのため、完成したからといってゲームとして完全に遊べたり、クリアできるような状態になる訳ではありません。
ですが、ここでしっかりと土台を作成することができれば、あとは自分のアイディアを元にして
ロールプレイングゲーム、あるいいアクション・ロールプレイングゲームを作っていくことが可能です。
このゲームの素材にはぴぽや様とイラストAC様の素材を利用させていただいております。
ぴぽや様
https://pipoya.net/sozai/
イラストAC様
https://www.ac-illust.com/
＜動画� ．�ャラの移動。ブレンドツリーを利用して移動用のアニメーションを制御＞
＜動画�◆�Cinemachine によるカメラのキャラ追従・ゲーム画面の制御＞
＜動画�� キャラとエネミーが接触すると自動的にバトルを行う(HP ゲージが自動的にアニメ表示/非表示)＞
＜動画�ぁ．丱肇觸�了時にアイテム取得＞
システムとルール
汎用的な２Ｄのアクションゲームを製作するためのツール教材になっています。
そのため実装しているのはシステム面のみで、そのほかのルールはありません。
＜実装するシステム＞
・タイルマップを利用したゲーム画面製作 ・プレイヤーキャラの移動 ・プレイヤーキャラのアニメーションの管理 ・オートバトル ・カメラの制御処理(キャラの追従、ゲーム画面外を映さないようにする、バトル時のズームイン/ズームアウト) ・アイテムのドロップ機能 ・装備品の機能
以上の部分における、ロジックの考え方や、実装の方法などを学習します。
簡単に解説しておきます。
＜タイルマップを利用したゲーム画面製作＞
Unity の機能の１つであるタイルマップという機能を利用して、２Ｄ用の画像を敷き詰めてゲームのフィールドとなる画面を作成します。
複数のタイルマップをレイヤー構造にして重ねて利用することで、侵入できる地形と侵入できない地形の制御を実装します。
今回は２つのタイルマップを重ねて１つのタイルマップとしています。(他にも製作方法はありますので、あくまでも１つの手法です)
＜移動できるタイルマップ＞
＜移動できないタイルマップ＞
＜複数のタイルマップを一緒に表示して合成＞
＜プレイヤーキャラの移動＞
プレイヤーキャラの移動は上下左右と斜めによる８方向移動です。
実装しているのはアナログ移動であるため、ファミコンのように１マス単位での移動ではありません。
キーボード入力するとキャラが８方向に移動します。
スワイプ入力に対応するには別の実装が必要になります。
＜プレイヤーキャラのアニメーションの管理＞
プレイヤーキャラやNPCなどのキャラをアニメーションさせます。
プレイヤーキャラには４方向の向きがありますので、各方向ごとに移動用のアニメーションを作成します。
ゲーム内では現在のキャラの移動方向に合わせて、この移動アニメーションの向きを同期させます。
こちらには BlendTree（ブレンドツリー）という機能を利用します。
BlendTree
BlendTree インスペクター画像
キー入力とアニメーションを同期
動画ファイルへのリンク
＜オートバトル＞
プレイヤーキャラと障害物(敵や木などのオブジェクト)と接触することで、自動的にバトルが発生します。
交互に攻撃を繰り返し、どちらかの体力(Hp)が 0 になるまでバトルを続けます。
バトルが開始されると HPゲージが自動的に表示されて、バトルの状況に合わせてゲージが変動します。
バトルが終了すると HPゲージは自動的に非表示になります。
こちらの実装には DOTween の機能を利用し、HPゲージの移動処理をアニメーションしているように制御しています。
他にもバトル用のエフェクトを生成したり、減少しているHP を表示したり、カメラのズームイン/ズームアウトなど、複数の機能を利用しています。
オートバトル機能��
動画ファイルへのリンク
オートバトル機能�◆‐祿科�であればバトル可能
動画ファイルへのリンク
HPゲージと演出
＜カメラの制御処理(キャラの追従、ゲーム画面外を映さないようにする、バトル時のズームイン/ズームアウト)＞
カメラの制御については、Cinemachine（シネマシン） という Unity の機能を利用します。
この機能を利用することにより、カメラをプレイヤーキャラに追従させて、常にゲーム画面の中央にプレイヤーキャラを映すように制御します。
また、ゲーム画面を作っていない部分は表示物がない状態になり(真っ黒であったりする）、プレイヤーにゲーム画面がないことが伝わってしまいます。
ファミコンの画面のようにそれを仕様として採用するのであれば問題ありませんが、本来であれば製作していない部分は見せないようにする必要があります。
そちらも Cinemachine の機能を利用して、Sceneビューにおいて作成してあるゲーム画面内のみをゲーム内に映すように制御を行います。
以上のことから、カメラはキャラを中心に追従するように制御し、ゲーム画面外の作りこんでいない部分を見せないようにも制御を行います。
また、オートバトルの際には自動的にバトルしている場所にズームインし、バトル終了後には元の位置にズームアウトする機能も制御しています。
＜アイテムのドロップ機能＞
障害物とバトルを行い勝つことができると、障害物を破壊できます。
その際には回復アイテムや装備品といったものをランダムな確率でドロップ(ここでは出現の意)させる機能を実装します。
＜装備品の機能＞
ローグライク系のゲームのように、ランダムでドロップした装備品を取得することで、現在の装備品と取得したアイテムを選択して装備する選択ウインドウ機能を実装します。
選択ウインドウ
なお、選択ウインドウが開いている間は、ゲーム内の残り時間の経過や敵の移動が一時停止します。
こういった他の処理に付随して制御が必要になる機能も実装します。
選択ウインドウ表示中は他の機能が停止する
動画ファイルへのリンク
普段遊んでいるゲームにも実装されている機能ではありますが、こういった部分も１つ１つ丁寧に製作していくことが必要です。
発展編ではこのシステムをベースに、どのようなゲームにするのかを考えて肉付けしていきます。
自分で考えたアイディアを実装していくことで、色々な楽しみ方を設計出来ます。
完成図
今回は Main というフィールド画面のシーンのみでゲームを作成しています。
また Title シーンもありませんので、必要であれば、タイトルについては自分で考えて楽しいイメージの設計を行って実装をしてみてください。
ゲームを実行すると、メインとなるフィールドの画面からゲームがスタートします。
プレイヤーキャラは自由に移動が行えます。
その中で実装されている各システムの確認を行っていくようになります。
また、どのような仕様を追加していくかも一緒に検討を行うようにします。
学習内容
２Ｄトップビュー視点のアクションゲームを製作していくことで、習得することを目標とする技術を記載しておきます。
また、スクリプトに関しては、たくさん書いて覚える、ということを主軸として記述を行っています。
一見、合理的・機能的には見えない処理もありますが、あくまでも書いて覚えるための手順書になっています。
そのため、学習状況によっては、もっとスマートに書けるのでは？ と感じる方もいると思いますが
そうした「気づき」を感じた方は自分なりの記述方法を考えて、よりよいスクリプトを書いていく練習としてこの教材を活用してください。
・設計に沿った製作作業 ・アセットストアからインポートしたアセットの利用方法について ・Sprite Editor機能 ・Tile Pallete を利用した Tilemap の作成方法 ・Sorting Layer の設定 ・TileMap によるステージ作り、コライダーの設定方法、レイヤー分けによる重複構造 ・RequireComponent 属性 ・Header 属性 ・Rigidbody2D.velocity を利用した移動 ・Summary（サマリー）機能 ・InputManagerによるキー入力の設定 ・アニメーション関連（Animatorビュー、アニメーションのステート、トランジション、パラメータ） ・Blend Tree によるプレイヤーの移動と移動アニメーションとの同期処理について ・Mathf.Approximately メソッド ・Vector2.Set メソッド ・Vector2.Normalize メソッド ・Animator.SetFloat メソッド ・Tilemap Collider 2D コンポーネント ・Composite Collider 2D コンポーネント ・Cinemachine（シネマシン）の導入 ・Virtual Cameraの実装方法(配置・Chinemachine Virtual Camera コンポーネントの設定) ・Layer Collision Matrix の設定 ・Polygon Collider 2D コンポーネント ・Chinemachine Confiner コンポーネント ・RaycastHit2D 型と Physics2D.Raycast メソッド ・Debug.DrawRay メソッド ・LayerMask.GetMask メソッド ・TryGetComponent メソッドと out キーワード宣言 ・CanvasGroup コンポーネント ・GetComponentInChildren メソッド ・スクリプタブル・オブジェクトの作成とデータの登録 ・クラス内に enum を作成する(入れ子構造) ・[System.Serializable（シリアライザブル）]属性 ・List の初期化 ・[Multiline（マルチライン）]属性 ・シングルトンデザインパターンによるクラスの作成 ・スクリプタブル・オブジェクトをゲーム内で利用できるようにする方法 ・シングルトンデザインパターンによるクラスの活用 ・スクリプタブル・オブジェクトを利用する方法 ・引数と戻り値を使った処理の実装例 ・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の基本的な使用方法と応用方法について学習します。
・HP ゲージの表示/非表示 ・ポップアップウインドウの表示/非表示 ・残り時間などの数字のカウント表示
＜動画 HP ゲージの表示/非表示＞
動画ファイルへのリンク
＜動画 ポップアップウインドウの表示/非表示＞
動画ファイルへのリンク
＜動画 残り時間などの数字のカウント表示＞
動画ファイルへのリンク
このように演出を加えると画面が華やかになるとともに、一気にゲームの見た目のレベルがアップします。
３．．スクリプタブル・オブジェクトの活用
Unity にはスクリプタブル・オブジェクトという、データベースを作成して利用する機能があります。
スクリプタブル・オブジェクトの内容はインスペクターから変更が可能ですので、保全管理することも容易になっています。
また手動で入力していく以外にもスプレッドシートに用意したデータベースを取り込んで利用する機能も実装可能です。
Unityの持つ機能を上手く活用していくことで、こういったゲーム内の処理を実装することが出来ます。
以上でこの手順は終了です。
=> 次は 設計を考える です。
コメントをかく