TopDown Engine 入門 Part 11 ～ルーム編～

ルームによってレベルを分ける

Part 6 にて、レベル 1 を拡張し、2 つ目の部屋を作りました。その際、カメラの撮影範囲も広げたわけですが、現状だと片方の部屋からもう片方の部屋が見えてしまいます。

隣の部屋が見えないようにするには、スクリプトを書いて部屋を移動する際にコンファイナを動的に変化させるなどといった対策が考えられますが、少々面倒です。また、例えば「初めて部屋に入ったときのみ、会話イベントを発生させる」といったようなことをやりたい場合もあるでしょう。そんな時に役立つのが、TopDown Engine の【ルーム】システムです。

ルームを準備する

ルームの作り方は簡単です。まずはセクション 1 のルームから作っていきます。

空の GameObject を作成して「Room1」とリネームし、Add Component から「Room」と「Box Collider 2D」をアタッチします。

ルームには、ルーム用のバーチャルカメラとコンファイナが必要です。まず、Part 5 で行ったのと同じように、メニューバーの Cinemachineから「Create 2D Camera」をクリックし、バーチャルカメラを生成します*1。生成されたバーチャルカメラに「Cinemachine Camera Controller」をアタッチし、さらに CinemachineVirtualCamera の「Add Extension」から「CinemachineConfiner」を選択して Cinemachine Confiner をアタッチします。

次はコンファイナです。空の GameObject を作成し、「Confiner」とリネーム、そして Box Collider をアタッチしましょう。*2

最後に、VirtualCamera と Confiner を Room1 の子にします。

これで、ルームの準備ができました。

ルームの設定をする

次に、ルームの設定をしていきます。以下の手順に従ってください。

Room1

1. Room の「Camera」グループにある各項目を、以下のように設定する。
   1. 「Virtual Camera」に、子の VirtualCamera を設定する。
   2. 「Confiner」に、子の Confiner を設定する。
   3. 「Cinemachine Camera Confiner」に、子の VirtualCamera を設定する。
2. Box Collider 2D の「Is Trigger」にチェックを入れる。
3. Box Collider 2D の「Size」が部屋の範囲になるように調整する。

VirtualCamera

1. Cinemachine Camera Controller の「Confine Camera To Level Bounds」のチェックを外す。
2. Cinemachine Confiner の「Confine Mode」を「Confine 3D」に設定する。
3. Cinemachine Confiner の「Bounding Volume」に、同階層の Confiner を設定する。

Confiner

1. Box Collider の「Is Trigger」にチェックを入れる。*3
2. Box Collider の「Size」がカメラの映せる範囲になるように調整する。

以上で設定は完了です。

2 つ目のルームを作る

2 つ目以降は、Room1 を複製して作成すると楽です。Room1 を複製して「Room2」とリネームし、位置と範囲を 2 部屋目に合わせましょう。

ルーム間の移動

さて、これでそれぞれのルームが作成できたわけですが、まだルーム間の移動を実装できていません。と言っても、すでに Part 6 でテレポーターを作成していますので、これに少々設定を加えるだけで OK です。以下の手順で行ってください。

1. 各テレポーターを、該当の Room の子にする。
   1. 「Room1」の子が「TeleporterToSection2」、「Room2」の子が「TeleporterToSection1」です。逆にしないよう注意してください。
2. TeleporterToSection2 にアタッチされた Teleporter コンポーネントの「Rooms」グループ内にある「Camera Mode」を「Ciniemachine Priority」に設定する。
3. 同じく「Rooms」グループ内にある「Target Room」に Room2 を設定する。*4
4. 同様に、TeleporterToSection1 の「Camera Mode」を「Ciniemachine Priority」に、「Target Room」に Room1 を、それぞれ設定する。

これで、テレポーターによって移動した時に、各ルームにそれが伝わるようになりました。

その他の手順

各ルームにバーチャルカメラとコンファイナを設定したので、今まで使用していたバーチャルカメラとコンファイナは使用しなくなります。古い方のバーチャルカメラ（CM vcam1）は削除し、Level Manager の「Use Level Bounds」のチェックを外しておきましょう（Box Collider も削除してしまって大丈夫です）。

動作確認

ここまでできたら、シーンを再生し、隣の部屋が見えなくなっていることを確認しましょう。

ルーム移動に掛かる時間

ルームを移動する際に掛かる時間は、各テレポーターにアタッチされている Teleporter コンポーネントの「Teleport Sequence」グループで設定します。

一方、カメラの移動に掛かる時間は、Main Camera にアタッチされている CinemachineBrain コンポーネントの「Default Blend」に設定された秒数になります。

初期状態だとカメラの移動に 2 秒も掛かってしまうため、「Default Blend」の数字を低くしたくなりますが、ここでは代わりに Main Camera に「Chinemachine Brain Controller」をアタッチしましょう。こうすることで、移動時に自動で Teleport Sequence と同じ値を設定してくれるようになります。

コールバック

Room コンポーネントの「Actions」グループで、ルームに入った時や出た時に実行されるコールバック関数を設定できます。なお、同様のものがテレポーターや GoToLevelEntryPoint にもあります。

---

NEXTTopDown Engine 入門 Part 12 ～ダイアログ編～

PREVTopDown Engine 入門 Part 10 ～初期位置編～

---

*1:「CM vcam{数字}」という名称になっていると思いますが、「VirtualCamera」などにリネームしておくと良いでしょう。数字はあとで邪魔になります。

*2:Part 5 と同様、Box Collider "2D" ではないことに注意してください。

*3:Part 5 同様、入れなくても構いません。

*4:Current Room には Room1 が入りますが、ゲーム実行時に親の Room が自動で設定されるため、手動で設定する必要がありません。

TopDown Engine 入門 Part 10 ～初期位置編～

プレイヤーキャラクターの初期位置を変える

現状では、プレイヤーキャラクターの初期位置を指定していないので、シーンを再生すると (0, 0, 0) の位置に生成されます。今回は、初期位置を任意の座標に変更していきます。

レベル 1 とレベル 2 のそれぞれで、以下の地点を初期位置にします。

チェックポイントを設置

初期位置を任意の座標に設定するためには、その座標にチェックポイントを置く必要があります。

レベル 1 の初期位置は前回作成した PointOfEntry0 と同じ場所ですので、これをそのままチェックポイントにします。Add Component から「Checkpoint」をアタッチしましょう。その後、LevelManager の「Checkpoints」グループ内にある「Initial Spawn Point」に、PointOfEntry0 を設定します。

完了したら、シーンを再生し、プレイヤーキャラクターが PointOfEntry0 の位置に生成されることを確認してください。

レベル 2 の初期位置には何も無いので、新規に GameObject を作成し、「InitialSpawn」とリネームします。その後はレベル 1 と同じです。

補遺

なお、GoToLevelEntryPoint の「Use Entry Points」のチェックを外すと、「Point Of Entry Index」の値が無視され、常に Initial Spawn Point に移動するようになります。

---

NEXTTopDown Engine 入門 Part 11 ～ルーム編～

PREVTopDown Engine 入門 Part 9 ～シーン遷移編 2～

---

TopDown Engine 入門 Part 9 ～シーン遷移編 2～

レベル同士のシーン遷移

今回は、異なるシーンで作られたレベル同士を移動できるようにしてみましょう。

「sandbox_level2」というシーンを新しく用意し、以下のようなレベルを作りました。シーンは Build Settings にも忘れずに追加しておきます。

これを「レベル 2」とし、今までのレベルは「レベル 1」として扱います。レベル 1 のシーン名を、「sandbox_level1」に変更しておきましょう。

Point of Entry を設置する

レベル 2 にはレベル 1 へ繋がる洞穴が 2 つ存在し、それぞれ入るとレベル 1 の別の場所に出るようにします。

レベル同士の移動を実現するためには、まず移動先のレベルに【Point of Entry】を設置する必要があります。レベル 1 の Point of Entry は、下端中央の扉と上端中央の扉の 2 つです。それぞれの位置に空の GameObject を作成し、「PointOfEntry0」「PointOfEntry1」とリネームしましょう*1。これらは重要な地点なので、分かりやすいようにラベルアイコンを設定しておくのをおすすめします。

設置ができたら、それらを Level Manager の「Points of Entry」に設定します。

このとき、順番が

1. PointOfEntry0
2. PointOfEntry1

になるよう注意してください。

Go To Level Entry Point を設置する

次に、移動元となる地点にそれぞれ空の GameObject を作成し、「GoToLevelEntryPoint0」「GoToLevelEntryPoint1」とリネームした後、GoToLevelEntryPoint と Box Collider 2D をアタッチします。これらにも、ラベルアイコンを設定しておくと良いでしょう。

コンポーネントの設定は、以下のようにしてください。

1. GoToLevelEntryPoint の「Activation Conditions」グループにある「Auto Activation」にチェックを入れる。
2. 「Finish Level」グループにある「Level Name」に「sandbox_level1」と入力する。
3. 「Points of Entry」グループにある「Use Entry Points」にチェックを入れる。
4. 同じくの「Points of Entry」グループにある「Point Of Entry Index」に、それぞれ「0」「1」と入力する。
5. Box Collider 2D の「Is Trigger」にチェックを入れる。

これで設置完了です。シーンを再生し、レベルを移動できるかどうかを確認してください。

Point Of Entry Index

Level Manager の「Points of Entry」に設定された順番が、GoToLevelEntryPoint の「Point Of Entry Index」に対応しています。なので、順番に気をつける必要があったのですね。これは配列なので、名称を 0 オリジンにしたのもそれが理由です。

補遺

レベル 2 → 1 の移動を実装できたら、逆のレベル 1 → 2 の移動も同じように実装します。このとき、Point of Entry と Go To Level Entry Point が重なっていると、移動完了直後に勝手に移動処理が走ってしまうので、ある程度離しておきましょう。

---

NEXTTopDown Engine 入門 Part 10 ～初期位置編～

PREVTopDown Engine 入門 Part 8 ～シーン遷移編 1～

---

*1:「～1」「～2」じゃないの？　と思われるかもしれませんが、それは後ほど説明します。

TopDown Engine 入門 Part 8 ～シーン遷移編 1～

異なるシーン間を移動する

今まではずっと単一のシーンで制作してきましたが、タイトル画面や違うレベルの画面（フィールド←→ダンジョンなど）を制作する場合、別のシーンにすることが多いでしょう。今回は、こうしたシーン間の遷移を実装していきます。

というわけで、仮のタイトル画面を用意しました。タイトル画面で何かキーが押されたら、レベル画面へ遷移させます。

シーン名は以下のようにしておきます。

• 今まで作ってきたレベル画面：sandbox_level
• タイトル画面：sandbox_title

また、Build Settings にこれらのシーンを追加しておくのを忘れないでください。

Loading Scene Manager

ここで、本講座で初めて、スクリプトが出てきます！　以下のようなスクリプトを書いてみましょう。

// SceneTransition.cs

using UnityEngine;

public class SceneTransition : MonoBehaviour
{
    void Update()
    {
        if (Input.anyKeyDown)
        {
            // ここでシーン遷移
        }
    }
}

そして、タイトル画面に空の GameObject を作成し、スクリプトをアタッチしてください。

スクリプト中のコメントにもあるように、Input.anyKeyDownが true になったらシーンを遷移させるようにします。Unity 標準のSceneManager.LoadSceneを使うこともできますが、ここでは TopDown Engine に備わっている機能を使ってみます。と言っても使い方は簡単で、以下の関数を実行するだけです。

MoreMountains.Tools.LoadingSceneManager.LoadScene("scene_name");

MoreMountains.Tools とは、More Mountains 製の Unity アセットで共通して使われている、様々な汎用的な機能のことです。シーン遷移はトップダウンビューのゲームに限らずあらゆるゲームで使われる機能なので、TopDownEngine ではなく MoreMountains.Tools にまとめられているのですね。

では、上記のスクリプトを SceneTransition.cs に追記しましょう。

// SceneTransition.cs

using MoreMountains.Tools;
using UnityEngine;

public class SceneTransition : MonoBehaviour
{
    void Update()
    {
        if (Input.anyKeyDown)
        {
            // ここでシーン遷移
            LoadingSceneManager.LoadScene("sandbox_level");
        }
    }
}

それができたら、タイトル画面のシーンを再生して、シーン遷移ができるかどうか確認してみてください。

Unity 標準の SceneManager と、More Mountains の LoadingSceneManager の違い

再生してみたら分かるとおり、特に何もしなくてもシーン遷移中にローディング画面が挿入されます。

Unity 標準の SceneManager を使う場合は自分でローディング画面を実装する必要がありましたが、LoadingSceneManager を使えばその必要も無いわけですね。

もちろん、ローディング画面をカスタマイズすることも可能です。ローディング画面のシーンは ThirdParty/MoreMountains/MMTools/Tools/SceneLoading/LoadingScreen.unity にありますので、ロゴをオリジナルのものにしたり、プログレスバーを好みのデザインに変えたりしても良いでしょう。

---

NEXTTopDown Engine 入門 Part 9 ～シーン遷移編 2～

PREVTopDown Engine 入門 Part 7 ～UI 編～

---

TopDown Engine 入門 Part 7 ～UI 編～

フェードイン・アウトを実装する

前回、テレポーターによるセクション間の移動を実装しました。しかし、画面の切り替わりが一瞬で行われるため、少々見栄えが悪いです。そこで今回は、セクション間の移動時に画面をフェードさせてみたいと思います。

Canvas と、UI 用のカメラを追加する

フェードのグラフィックは uGUI で実装します。Hierarchy ウィンドウ左上のプラスボタンを押し、UI > Canvas と選択します（このとき、EventSystem が同時に追加されます）。

Canvas を映すカメラも用意します。空の GameObject を作成して「UiCamera」とリネームし、Add Component から Camera を追加してください*1。UiCamera の位置はどこでも構いませんが、レベルと重なっていると見づらいですので、遠いところに移動させると良いでしょう。

また、Main Camera にアタッチされている Input Manager を、UiCamera に移動させておきましょう。こうしておけば、もし UI しか存在しないシーン（タイトル画面など）があったとしても、UiCamera さえあれば Input Manager を別に用意する必要が無くなります（UiCamera を Prefab にしておきましょう）。

ここで、Canvas のレイヤーが「UI」になっていることを確認してください。確認ができたら、Camera の「Culling Mask」が「UI」のみになるよう設定します。こうすることで、UiCamera が Canvas のみを映すようになります。その他の設定は、作っているゲームに合わせて適宜変更してください。ここでは一例を紹介します。

Canvas の設定

UiCamera の設定

フェーダーを追加

Canvas の子として空の GameObject を作成し、「Fader」とリネームします。そして、Add Component を More Mountains > Tools > GUI と進み、「MMFader」を選択します*2。すると、Canvas Group と Image、MMFader がアタッチされます。これが、フェードに用いるグラフィックになります。RectTransform を縦横ともに Streach にして画面全体を覆うようにし、Image の「Color」を黒色に、Canvas Groupの「Alpha」を「0」に設定しましょう。

トランスポーターのフェードを有効にする

前回作成した TeleporterToLevel2、TeleporterToLevel1 にアタッチされている Teleporter コンポーネントに、「Trigger Fade」という設定項目がありますので、これにチェックを入れます。これで、フェードが実行されるようになりました。

動作確認

最後にシーンを再生し、セクション間を移動する時に画面がフェードすることを確認しましょう。

補遺

Teleporter コンポーネントの「Trigger Fade」の下に「Fader ID」という項目があり、デフォルトでは「0」が設定されています。これはその名の通りフェーダーの ID 番号で、MMFader の ID に対応しています。

両者の番号を異なるものにすると、フェードが実行されなくなることが確認できます。

---

NEXTTopDown Engine 入門 Part 8 ～シーン遷移編 1～

PREVTopDown Engine 入門 Part 6 ～テレポーター編～

---

*1:Hierarchy ウィンドウのプラスボタンや右クリックから直接 Camera を追加しても良いのですが、その場合 Audio Listener がアタッチされた状態で追加されるので、忘れずに削除しておきましょう。

*2:「More Mountains」とは、TopDown Engine の開発元のことです。More Mountains は TopDown Engine の他にもいろいろなアセットを開発しており、それらに共通して使われているツールが More Mountains > Tools に入っています。

TopDown Engine 入門 Part 6 ～テレポーター編～

異なるセクション間を移動できるようにするには

レベルの中に扉や階段を配置して、別のセクションへ移動できるようにしたいという場合も多いでしょう。今回は、TopDown Engine にある【テレポーター】という機能を使い、セクション間の移動を実装していきます。

というわけで、移動先となるセクション 2 を用意しました。セクション 1 とはドアを介して移動できるようにします。また、カメラがセクション 2 も撮影できるように、LevelManager にアタッチされている Box Collider の「Size」を広げておきます。

テレポーターを設置

まず、セクション 1 → 2 へ移動するためのテレポーターを設置します。以下の手順に従ってください。

• 空の GameObject を作成し、「TeleporterToSection2」とリネームする。
• テレポーターを設置したい場所（この場合はドアの前）に移動させる。
• Box Collider 2D と Teleporter*1 をアタッチする。*2

• Box Collider 2D の「Is Trigger」にチェックを入れる。
• Box Collider 2D の「Size」を調整する。
• Teleporter の「Auto Activation」にチェックを入れる。

ここまで完了したら、セクション 2 → 1 へ移動するためのテレポーターも用意しましょう。TeleporterToSection2 を複製して「TeleporterToSection1」とリネームし、セクション 2 のドアの前に移動させます。

テレポーターの移動先を設定

テレポーターの設置が完了したら、今度は相互に移動できるよう移動先を設定します。

• TeleporterToSection2 の Teleporter コンポーネント内にある「Destination」に、TeleporterToSection1 を設定する。

• 同様にして、TeleporterToSection1 の「Destination」に TeleporterToSection2 を設定する。

これで、セクション間を移動できるようになりました！　シーンを再生して、テレポーターでセクションを移動できるかどうか確かめてみましょう。

---

NEXTTopDown Engine 入門 Part 7 ～UI 編～

PREVTopDown Engine 入門 Part 5 ～カメラ編～

---

*1:このコンポーネントだけ、「TopDown Engine」の中ではなく「Corgi Engine > Enviromnent」にあります（Ver. 1.8 時点）。おそらくエンジン側のミスで、作者さんには連絡しておいたので、じきに修正されるかと思います。

*2:Sprite Renderer や Particle System をアタッチし、扉や階段の画像、ワープホールのエフェクトなどを設定することもできます。

Cinemachine にコンファイナを設定してカメラの動きを制限する

TopDown Engine 入門 Part.5 ～カメラ編～ にて、TopDown Engine 用のコンファイナのセッティングをしましたが、TopDown Engine の機能を使わず Cinemachine の標準機能だけで設定する方法も紹介します。

カメラを 2D 用の設定に変更

1. 「Main Camera」を選択し、Camera コンポーネントの「Projection」を「Orthographic」に変更する。

コンファイナとなる GameObject を作成

1. 空の GameObject を作成し、「Confiner」とリネームする。
2. Composite Collider 2D をアタッチする。
   1. このとき、同時に自動で RigidBody 2D がアタッチされます。
3. Composite Collider 2D の「Is Trigger」にチェックを入れる。
4. Composite Collider 2D の「Geometry Type」を「Polygons」に設定する。
5. Rigidbody 2D の「Body Type」を「Static」に設定する。
6. Add Component から Box Collider 2D をアタッチする。
7. Box Collider 2D の「Used by Composite」にチェックを入れる。
8. Box Collider 2D の「Size」をステージに合うように調整する。

Virtual Camera にコンファイナを設定

1. CM vcam1 にアタッチされた CinemachineVirtualCamera の一番下にある「Add Extension」から「CinemachineConfiner」を選択する。「Cinemachine Confiner」がアタッチされる。
2. 「Bounding Shape 2D」に、先程作成した Confiner を設定する。