【２Ｄ】マス目ごとにイベントが発生するシステムの実装例��
最終更新：
orika_ex_miyako 2023年10月31日(火) 11:04:54履歴
ローグライト系のゲーム(Sly The Spire、ファントムローズなど)に見られる、プレイヤーが１マスずつ移動してゴール地点へ向かいながら、
各マスごとに分岐(選択肢)があり、任意のイベントを実行しながら進行するタイプのゲームシステムの実装例です。
ここでは各マス目に複数の分岐処理がある形で１マスずつイベントを進行させていく方法を実装します。
最初のマスは分岐なし、次のマスは２つの分岐がある、といったようなローグライト系のゲームでよくみられるイベントシステムです。
＜実装動画＞
動画ファイルへのリンク
１．設計
各マスでは色々なイベントが発生するため、イベントについてはインターフェースと抽象クラスを利用して設計します。
そしてサブクラスで「バトル」「探索」「休息」「ショップ」といった各マスでのイベントを作成するようにします。
処理を抽象化することにより、イベントの実行命令を行うことに特化し、イベントの詳細までは関与しない形で実装します。
なお具体的なイベントの内容についてはこの教材では実装はしていません。
あくまでも、イベント処理のゲームサイクル化(ゲームロジックの制作)が目的です。
合計４回の手順に分けて実装を行います。
今回は【１．UI 制作】を行います。
プレイヤーのルートとなるマス目を Canvas で作成します。
２．UI 作成
１．完成図
プレイヤーの現在地点を示すためのマス目を表示するための Canvas ゲームオブジェクト群を配置します。
Canvas ゲームオブジェクトを含めて、合計６個の UI 用のゲームオブジェクトを作成し、設定を行うことで
マス目上のルートを表示し、その上をプレイヤーのアイコンが移動する機能を実装できる状態にします。
ただし、これはあくまでも実装例です。実際には自分のプロジェクトに応じて適宜調整してください
＜構成例＞
下記のヒエラルキー画像のような状態になることを目的とします。
UI の配置には親子関係が重要になりますので、下記の画像を見直しながら、間違えないように作成してください。
ヒエラルキー画像
Canvas
ルート管理のマス目用表示用の Canvas です。
複数の Canvas を作成する可能性がありますので、名前については適宜変更してください。
また Canvas Scaler コンポーネントの設定を忘れずに行ってください。
この教材の値は参考値です。ご自分のプロジェクトの画面解像度に合わせてください。
RouteUI
UI 部品の管理役のゲームオブジェクトです。
Create Empty で作成し、フォルダのように利用します。
この子オブジェクトに UI 用のゲームオブジェクトを配置します。
imgBackground
背景表示用のゲームオブジェクトです。Image ゲームオブジェクトを黒くして、画面下半分を覆うように作成しています。
画像設定・サイズなどについては、ご自分のプロジェクトに基づいて適宜調整してください。
タップを阻害しないように Raycast Target のスイッチはオフにしておきます。
RouteSet
このゲームオブジェクトの子オブジェクトとして、マス目のゲームオブジェクトを生成します。
生成時に水平方向に自動整列するように HorizontalLayoutGroup コンポーネントを利用しています。
レベル(ステージ)により、移動マスの総数が変わることもあるため、水平方向の配置位置が伸縮するようになっています。
LayoutGroup の代わりにソースコード内で制御しても構いません。
EventButtonSet
このゲームオブジェクトの子オブジェクトとして、分岐用のイベントのボタンを生成します。
生成時に水平方向に同じサイズで自動整列するように GridLayoutGroup コンポーネントを利用しています。
LayoutGroup の代わりにソースコード内で制御しても構いません。
PlayerIcon
ここでは Image ゲームオブジェクトを回転させて色を変えて利用しています。
実際にはアイコン用の画像を適用するようにしてください。
初期位置をゲーム画面外に配置しておくことで、最初のイベントを選択したあとからゲーム画面に登場する形で利用できます。
３．プレハブ作成
RouteSet ゲームオブジェクトの子オブジェクトとして、マス用のゲームオブジェクトを作成し、プレハブにし、ゲーム内で動的に生成します。
最初からマスを配置してしまうと、レベル(ステージ)の情報を反映したルート配置が行えない(常に同じルートになってしまう)ためです。
＜構成＞
下記のヒエラルキー画像のような状態になることを目的とします。
UI の配置には親子関係が重要になりますので、下記の画像を見直しながら、間違えないように作成してください。
ヒエラルキー画像
RouteBaseSet
マスの管理用のゲームオブジェクトです。RouteSet ゲームオブジェクトの子オブジェクトとして生成します。
このゲームオブジェクトの数だけ、レベル(ステージ)内にルートが作成されることになります。
作成したらプレハブにしてください。
Route
マスのゲームオブジェクトです。RouteBaseSet ゲームオブジェクトの子オブジェクトとして生成します。
分岐の数だけ生成されます。分岐なしなら１つ、分岐があるなら２つ生成されます。
こちらも作成したらプレハブにしてください。
親である RouteBaseSet ゲームオブジェクトとは別の、独立したプレハブにしてください。
(RouteBaseSet ゲームオブジェクトとセットでプレハブにしない)
４．配置確認
RouteSet ゲームオブジェクトの子オブジェクトにあるプレハブの RouteBaseSet ゲームオブジェクトを複製し、たくさん並べてください。
RouteBaseSet ゲームオブジェクトを選択した状態で Ctrl + D ボタンを押せば複製できます。
下記のサンプル画像のようにたくさん並べてください。
RouteSet ゲームオブジェクトにアタッチされている HorizontalLayoutGroup コンポーネントの設定により、
水平方向に自動整列されます。
次に、各 RouteBaseSet ゲームオブジェクトの子オブジェクトである Route ゲームオブジェクトも同じように複製してください。
こちらは RouteBaseSet ゲームオブジェクトにアタッチされている VerticalLayoutGroup コンポーネントの設定により、
垂直方向に自動整列されます。
このようにして実際に複数の Route ゲームオブジェクトを事前に並べて検証することにより、
１つ辺りのサイズの調整や、ゲームオブジェクト同士のスペースを検討します。
Route ゲームオブジェクトのサイズはヒエラルキー上で調整出来ます。
上下左右のスペースの空き具合なども併せて確認し、レイアウトが問題ないかチェックしてください。
調整した場合には、プレハブの Override を行い、ヒエラルキーの設定を反映してください。
５．プレハブをヒエラルキーから削除する
配置確認が済みましたので RouteSet ゲームオブジェクト内にある
複数のプレハブの RouteBaseSet ゲームオブジェクトをすべて削除してください。
子オブジェクトである Route ゲームオブジェクトもまとめて削除されます。
ヒエラルキー画像
ヒエラルキーについては、上記の画像のように、プレハブのない状態に戻っていることを確認してください。
以上でこの手順は終了です。
=> 次は 【２Ｄ】マス目ごとにイベントが発生するシステムの実装例�� です。
各マスごとに分岐(選択肢)があり、任意のイベントを実行しながら進行するタイプのゲームシステムの実装例です。
ここでは各マス目に複数の分岐処理がある形で１マスずつイベントを進行させていく方法を実装します。
最初のマスは分岐なし、次のマスは２つの分岐がある、といったようなローグライト系のゲームでよくみられるイベントシステムです。
＜実装動画＞
動画ファイルへのリンク
１．設計 
各マスでは色々なイベントが発生するため、イベントについてはインターフェースと抽象クラスを利用して設計します。
そしてサブクラスで「バトル」「探索」「休息」「ショップ」といった各マスでのイベントを作成するようにします。
処理を抽象化することにより、イベントの実行命令を行うことに特化し、イベントの詳細までは関与しない形で実装します。
なお具体的なイベントの内容についてはこの教材では実装はしていません。
あくまでも、イベント処理のゲームサイクル化(ゲームロジックの制作)が目的です。
合計４回の手順に分けて実装を行います。
◇１．UI 制作 ２．イベント用のクラス制作 ３．データベース制作 ４．管理クラス制作
今回は【１．UI 制作】を行います。
プレイヤーのルートとなるマス目を Canvas で作成します。
２．UI 作成
１．完成図
プレイヤーの現在地点を示すためのマス目を表示するための Canvas ゲームオブジェクト群を配置します。
Canvas ゲームオブジェクトを含めて、合計６個の UI 用のゲームオブジェクトを作成し、設定を行うことで
マス目上のルートを表示し、その上をプレイヤーのアイコンが移動する機能を実装できる状態にします。
ただし、これはあくまでも実装例です。実際には自分のプロジェクトに応じて適宜調整してください
＜構成例＞
Canvas 専用の Canvas です。 RouteUI UI 部品の管理役のゲームオブジェクト。この子オブジェクトに UI 用のゲームオブジェクトを配置します。 imgBackground 背景表示用のゲームオブジェクト。画面下半分を覆うように作成します。 RouteSet ルート用ゲームオブジェクトの管理役のゲームオブジェクト。この子オブジェクトとして各ルート用のゲームオブジェクトを生成します。 EventButtonSet イベント分岐用のゲームオブジェクトの管理役のゲームオブジェクト。この子オブジェクトとしてイベント選択用のボタンを生成します。 PlayerIcon プレイヤーの現在位置を示すアイコン用ゲームオブジェクト。イベント選択時にマス目を移動します。
下記のヒエラルキー画像のような状態になることを目的とします。
UI の配置には親子関係が重要になりますので、下記の画像を見直しながら、間違えないように作成してください。
ヒエラルキー画像
Canvas
ルート管理のマス目用表示用の Canvas です。
複数の Canvas を作成する可能性がありますので、名前については適宜変更してください。
また Canvas Scaler コンポーネントの設定を忘れずに行ってください。
この教材の値は参考値です。ご自分のプロジェクトの画面解像度に合わせてください。
RouteUI
UI 部品の管理役のゲームオブジェクトです。
Create Empty で作成し、フォルダのように利用します。
この子オブジェクトに UI 用のゲームオブジェクトを配置します。
imgBackground
背景表示用のゲームオブジェクトです。Image ゲームオブジェクトを黒くして、画面下半分を覆うように作成しています。
画像設定・サイズなどについては、ご自分のプロジェクトに基づいて適宜調整してください。
タップを阻害しないように Raycast Target のスイッチはオフにしておきます。
RouteSet
このゲームオブジェクトの子オブジェクトとして、マス目のゲームオブジェクトを生成します。
生成時に水平方向に自動整列するように HorizontalLayoutGroup コンポーネントを利用しています。
レベル(ステージ)により、移動マスの総数が変わることもあるため、水平方向の配置位置が伸縮するようになっています。
LayoutGroup の代わりにソースコード内で制御しても構いません。
EventButtonSet
このゲームオブジェクトの子オブジェクトとして、分岐用のイベントのボタンを生成します。
生成時に水平方向に同じサイズで自動整列するように GridLayoutGroup コンポーネントを利用しています。
LayoutGroup の代わりにソースコード内で制御しても構いません。
PlayerIcon
ここでは Image ゲームオブジェクトを回転させて色を変えて利用しています。
実際にはアイコン用の画像を適用するようにしてください。
初期位置をゲーム画面外に配置しておくことで、最初のイベントを選択したあとからゲーム画面に登場する形で利用できます。
３．プレハブ作成
RouteSet ゲームオブジェクトの子オブジェクトとして、マス用のゲームオブジェクトを作成し、プレハブにし、ゲーム内で動的に生成します。
最初からマスを配置してしまうと、レベル(ステージ)の情報を反映したルート配置が行えない(常に同じルートになってしまう)ためです。
＜構成＞
RouteBaseSet ルート用のマス管理のゲームオブジェクトです。この子オブジェクトとして Route ゲームオブジェクトを配置します。 Route 分岐のマスのゲームオブジェクトです。分岐の数だけ生成されます。分岐なしなら１つ、分岐があるなら２つ生成されます。
下記のヒエラルキー画像のような状態になることを目的とします。
UI の配置には親子関係が重要になりますので、下記の画像を見直しながら、間違えないように作成してください。
ヒエラルキー画像
RouteBaseSet
マスの管理用のゲームオブジェクトです。RouteSet ゲームオブジェクトの子オブジェクトとして生成します。
このゲームオブジェクトの数だけ、レベル(ステージ)内にルートが作成されることになります。
作成したらプレハブにしてください。
Route
マスのゲームオブジェクトです。RouteBaseSet ゲームオブジェクトの子オブジェクトとして生成します。
分岐の数だけ生成されます。分岐なしなら１つ、分岐があるなら２つ生成されます。
こちらも作成したらプレハブにしてください。
親である RouteBaseSet ゲームオブジェクトとは別の、独立したプレハブにしてください。
(RouteBaseSet ゲームオブジェクトとセットでプレハブにしない)
４．配置確認
RouteSet ゲームオブジェクトの子オブジェクトにあるプレハブの RouteBaseSet ゲームオブジェクトを複製し、たくさん並べてください。
RouteBaseSet ゲームオブジェクトを選択した状態で Ctrl + D ボタンを押せば複製できます。
下記のサンプル画像のようにたくさん並べてください。
RouteSet ゲームオブジェクトにアタッチされている HorizontalLayoutGroup コンポーネントの設定により、
水平方向に自動整列されます。
次に、各 RouteBaseSet ゲームオブジェクトの子オブジェクトである Route ゲームオブジェクトも同じように複製してください。
こちらは RouteBaseSet ゲームオブジェクトにアタッチされている VerticalLayoutGroup コンポーネントの設定により、
垂直方向に自動整列されます。
このようにして実際に複数の Route ゲームオブジェクトを事前に並べて検証することにより、
１つ辺りのサイズの調整や、ゲームオブジェクト同士のスペースを検討します。
Route ゲームオブジェクトのサイズはヒエラルキー上で調整出来ます。
上下左右のスペースの空き具合なども併せて確認し、レイアウトが問題ないかチェックしてください。
調整した場合には、プレハブの Override を行い、ヒエラルキーの設定を反映してください。
５．プレハブをヒエラルキーから削除する
配置確認が済みましたので RouteSet ゲームオブジェクト内にある
複数のプレハブの RouteBaseSet ゲームオブジェクトをすべて削除してください。
子オブジェクトである Route ゲームオブジェクトもまとめて削除されます。
ヒエラルキー画像
ヒエラルキーについては、上記の画像のように、プレハブのない状態に戻っていることを確認してください。
以上でこの手順は終了です。
=> 次は 【２Ｄ】マス目ごとにイベントが発生するシステムの実装例�� です。
コメントをかく