Unityに関連する記事です

製作物の概要


 Unity の機能の1つである「タイルマップ(TileMap)」を活用した、上から見下ろし画面(トップビュー)型のゲームのベース部分を製作します。

 キー入力については、従来の InputManager による機能を実装後、新しいインプットの機能である InputSystem の実装方法を学習します。
 
 カメラの制御について Cinemachine の機能を学習します。
 
 また会話シーンにおいては有料アセットである「宴(うたげ)」を利用した実装方法を学習します。


Gameビュー画像




 ゲームのルールは発展編にて肉付けします。この手順では、ゲームの土台となる部分を作成します。
なお、アドベンチャーゲームをイメージしていますが、アクションロールプレイングゲーム、ロールプレイングゲームなどにも問題なくベースとして利用できます。

 ゲーム画面は、タイルマップという機能を利用して、2D用の画像を敷き詰めてゲームのフィールドとなる画面を作成します。
複数のタイルマップを利用することで、侵入できる地形と侵入できない地形の制御を実装します。

 画面をスワイプするとキャラが8方向に移動します。

 プレイヤーの向きの概念があり、向いている方向にNPC(ノン・プレイヤー・キャラクター。町の住人など)がいたり、宝箱があったり、何かアイテムが落ちている場合には
共通のボタン操作で、これらのイベントを発生させるように制御します。ドラクエの便利ボタン、FF式のアクション方式とも言えます。

 カメラはキャラを中心に追従するように制御し、ゲーム画面外の作りこんでいない部分を見せないようにも制御を行います。



 この教材ではこれらのシステム的な実装を目的としています。
そのため、完成したからといってゲームとして完全に遊べたり、クリアできるような状態になる訳ではありません

 ですが、ここでしっかりと土台を作成することができれば、あとは自分のアイディアを元にして
ロールプレイングゲーム、あるいいアクション・ロールプレイングゲームを作っていくことが可能です。

 このゲームの素材にはぴぽや様とイラストAC様の素材を利用させていただいております。
ぴぽや様
https://pipoya.net/sozai/
イラストAC様
https://www.ac-illust.com/


<動画 .廛譽ぅ筺爾慮いている方向に対してアクションを実行する。今回はその結果として、宴により会話イベントが発生している>

<動画◆.メラのキャラ追従。ゲーム画面外を映さないように制御>

<動画 キャラの移動に合わせてランダムエンカウントの判定。バトル発生時にはバトルシーンへ遷移。バトル終了後はフィールド画面へ戻り、以前と同じ位置と方向を向いてキャラを設置>

<動画ぁ.▲ぅ謄爐離ぅ鵐戰鵐肇蟯浜画面。タップ操作対応>

<動画ァ.▲ぅ謄爐離ぅ鵐戰鵐肇蟯浜画面。キーボードからの入力にも対応>

<動画Α.ャラの移動。ブレンドツリーを利用して移動用のアニメーションを制御>

システムとルール


 汎用的な2Dのトップビューゲームを製作するためのツール教材になっています。
そのため実装しているのはシステム面のみで、そのほかのルールはありません。

<実装するシステム>
 ・タイルマップを利用したゲーム画面製作
 ・プレイヤーキャラの移動
 ・プレイヤーキャラのアニメーションの管理
 ・プレイヤーキャラの向いている方向に対しての1ボタンによるアクション(会話や調べる動作が発生する)
 ・カメラの制御処理(キャラの追従、ゲーム画面外を映さないようにする)
 ・アイテムの管理画面(マウスクリック、タップ、キーボード入力に対応)
 ・宴による会話イベント

 以上の部分における、ロジックの考え方や、実装の方法などを学習します。
簡単に解説しておきます。


<タイルマップを利用したゲーム画面製作>


 Unity の機能の1つであるタイルマップという機能を利用して、2D用の画像を敷き詰めてゲームのフィールドとなる画面を作成します。
複数のタイルマップをレイヤー構造にして重ねて利用することで、侵入できる地形と侵入できない地形の制御を実装します。

 今回は3つのタイルマップを重ねて1つのタイルマップとしています。

<ベース部分>



<移動できる地形>



<移動できない地形>



<3つのタイルマップを一緒に表示して合成>




<プレイヤーキャラの移動>


 プレイヤーキャラの移動は上下左右と斜めによる8方向移動です。
実装しているのはアナログ移動であるため、ファミコンのように1マス単位での移動ではありません
キーボード入力するとキャラが8方向に移動します。この際、ランダムエンカウントを発生するように制御もできます。

 スワイプ入力に対応するには別の実装が必要になります。


<プレイヤーキャラのアニメーションの管理>


 プレイヤーキャラやNPCなどのキャラをアニメーションさせます。
プレイヤーキャラには4方向の向きがありますので、各方向ごとに移動用のアニメーションを作成します。
ゲーム内では現在のキャラの移動方向に合わせて、この移動アニメーションの向きを同期させます。

 こちらには BlendTree(ブレンドツリー)という機能を利用します。


BlendTree



キー入力とアニメーションを同期
動画ファイルへのリンク



<プレイヤーキャラの向いている方向に対しての1ボタンによるアクション(会話や調べる動作が発生する)>


 プレイヤーキャラの向いている方向という情報を管理するように設計し、向いている方向に対して Ray を発射し、
Ray に接触したコライダーの情報を Tag で判定して、アクションの対象物がどれであるかを判定した後に、その対象物に対応するアクションを発生させます。
例えば、Tag に NPC、Treasure、SecretItem のような情報を登録しておき、それを判定することにより、 NPC というゲームオブジェクトに Ray が接触した場合には、会話のイベントを発生させます。
これを自動的に判別することで、1つのボタンで複数のアクションに派生できるようなロジックを組みます

 短距離に Ray を発射しますので、遠くにいる NPC と会話したり、調べたりということはできないように制御します。

 会話については、有料アセットである宴の機能を利用して NPC と会話イベントを発生させる仕組みになっています。


会話ウインドウの制御





<カメラの制御処理(キャラの追従、ゲーム画面外を映さないようにする)>


 カメラの制御については、Cinemachine(シネマシン) という Unity の機能を利用します。
この機能を利用することにより、カメラをプレイヤーキャラに追従させて、常にゲーム画面の中央にプレイヤーキャラを映すように制御します。

 また、ゲーム画面を作っていない部分は表示物がない状態になり(真っ黒であったりする)、プレイヤーにゲーム画面がないことが伝わってしまいます。
ファミコンの画面のようにそれを仕様として採用するのであれば問題ありませんが、本来であれば製作していない部分は見せないようにする必要があります。

 そちらも Cinemachine の機能を利用して、Sceneビューにおいて作成してあるゲーム画面内のみをゲーム内に映すように制御を行います。

 以上のことから、カメラはキャラを中心に追従するように制御し、ゲーム画面外の作りこんでいない部分を見せないようにも制御を行います。


<アイテムの管理画面(マウスクリック、タップ、キーボード入力に対応)>


 専用のボタンを用意し、そちらを操作することでアイテムの管理画面を表示します。
現在プレイヤーキャラが所持しているアイテムのみをインベントリ内に表示します。

 これはマウスクリック、タップ、キーボード入力のいずれにも対応するようにロジックを考えます。

 アイテムの使用や詳細ウインドウなどは作成しませんが、発展編としてポートフォリオ用に自作してもいいでしょう。

 また移動のキー入力については従来の InputManager から InputSystem による実装を行います。


<フィールド間の移動>


 ゲームのマップが複数ある場合、例えば、ワールドマップで移動後、街やダンジョンなどに入った場合には、フィールド間の移動を行う制御が必要になります。

 フィールド間の移動後は、フィールドと同シーン内に移動先のフィールドマップを表示するのか、
あるいは、専用のシーンを作成するのかにより仕様設計が大きく異なりますので、そういった部分も合わせて考えていく必要があります。

 今回は一般的な、フィールド画面で別のフィールド先に移動したら、そのときのプレイヤーキャラの位置と向いている方向を記録しておき、
次のシーンへと遷移させます。位置などを記録しているのはシーン遷移が伴うためです。
なぜなら、Unity ではシーン遷移を行うと、以前のシーン(フィールド画面)の情報がすべて失われるためです。
そのため、記録をする方法も考えて設計していく必要があります。

 遷移先のフィールドシーンからワールドマップに移動が発生した際、再度、ワールドマップ用のフィールド画面のシーンに遷移します。
ただしこのシーンは新しく作成されたシーンになるため、以前のプレイヤーキャラの位置や向きは保持されておらず、初期状態に戻されます。

 そのため、ワールドマップのフィールド画面のシーン読み込み時に制御を行い、もしもプレイヤーキャラの位置や向きの情報が記録されている場合には、
初期位置ではなく、その記録されている位置から、フィールド画面のシーンが始まるようにします。
この制御を行わないと、ワールドマップのフィールドシーンに遷移しても、フィールド画面に戻ってくるたびに
常にプレイヤーキャラの位置が初期位置になってしまうため、ゲームとして成立しなくなります。

 なお、この位置の記憶については、RPG におけるバトルシーンを実装する場合にも応用が可能な機能になります。



 発展編ではこのシステムをベースに、どのようなゲームにするのかを考えて肉付けしていきます。
アイテムの取得方法や、バトルシーンの内容などを用意したりと、色々な楽しみ方を設計出来ます。
 

完成図


 今回は Main というフィールド画面のシーンでゲームを作成しています。こちらを参考にして、別のフィールド用のシーンを自分で作成していただきます。
また Title シーンもありませんので、必要であれば、タイトルについては自分で考えて楽しいイメージの設計を行って実装をしてみてください。



 ゲームを実行すると、メインとなるフィールドの画面からゲームがスタートします。

 プレイヤーキャラは自由に移動が行えます。
その中で実装されている各システムの確認を行っていくようになります。

 また、どのような仕様を追加していくかも一緒に検討を行うようにします。


学習内容


 2Dタイルマップのトップビューゲームを製作していくことで、習得することを目標とする技術を記載しておきます。

 また、スクリプトに関しては、たくさん書いて覚える、ということを主軸として記述を行っています。
一見、合理的・機能的には見えない処理もありますが、あくまでも書いて覚えるための手順書になっています。

 そのため、学習状況によっては、もっとスマートに書けるのでは? と感じる方もいると思いますが
そうした「気づき」を感じた方は自分なりの記述方法を考えて、よりよいスクリプトを書いていく練習としてこの教材を活用してください。

 ・設計に沿った製作作業
 ・アセットストアからインポートしたアセットの利用方法について
 ・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 文による処理の流れを把握する
 ・作成したメソッドを自由にデバッグする方法を覚える



発展・応用編として、以下の技術についても学習します。

 ・実装内容による



重点学習箇所

1.タイルマップの利用方法


 2D用の画像データを Unity にインポートし、それを活用してタイルマップを作成します。
ベースとなる部分を作成してから、別のタイルマップ上に地形を配置していく手法を学習します。
合わせて、コライダーの付け方も学習し、川や山などの移動不可の地形の設定方法も学習します。


2.DOTweenの使い方


 DOTweenの基本的な使用方法と応用方法について学習します。

 ・ウインドウを徐々に表示する
 ・文字を1文字ずつ順番に表示する


<動画 ウインドウを徐々に表示する、文字を1文字ずつ順番に表示する>
動画ファイルへのリンク


 このように演出を加えると画面が華やかになるとともに、一気にゲームの見た目のレベルがアップします。


3.データベースを活用し、1つのプレファブから、異なる内容の同種類のゲームオブジェクトを作成する


 NPC キャラを作成する際に、10体の異なるプレファブを作成するのではなく、予めデータベースを作成して NPC の情報を登録しておいて
1つのプレファブから、用意してあるデータを反映して、それぞれが別の NPC になるよう、異なるゲームオブジェクトとして振る舞わせています

 合わせて会話のデータなどもデータベース化し、そのデータを読み込むようなロジックの設計を学習します


4.スクリプタブル・オブジェクトの活用


 Unity にはスクリプタブル・オブジェクトという、データベースを作成して利用する機能があります。
今回のゲームは、この機能を活用することによって、【3】のプレファブの振る舞いを変更する処理を実行しています。

 スクリプタブル・オブジェクトの内容はインスペクターから変更が可能ですので、保全管理することも容易になっています。


5.宴アセットの活用


 インポートを行い、ゲーム内に組み込む部分までを学習します。



 Unityの持つ機能を上手く活用していくことで、こういったゲーム内の処理を実装することが出来ます。


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

 => 次は 設計を考える です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます