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

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

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

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

f:id:Gigacee:20200702130910p:plain

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

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

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

f:id:Gigacee:20200702130925p:plain

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");
        }
    }
}

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

f:id:Gigacee:20200702130942g:plain

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

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

f:id:Gigacee:20200702131001p:plain

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 のみを映すようになります。その他の設定は、作っているゲームに合わせて適宜変更してください。ここでは一例を紹介します。

f:id:Gigacee:20200702003045p:plain
Canvas の設定

f:id:Gigacee:20200702003149p:plain
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」という設定項目がありますので、これにチェックを入れます。これで、フェードが実行されるようになりました。

f:id:Gigacee:20200702003130p:plain

動作確認

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

f:id:Gigacee:20200702003024g:plain

補遺

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

f:id:Gigacee:20200702003103p:plain

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


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」を広げておきます。

f:id:Gigacee:20200702122646p:plain

テレポーターを設置

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

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

f:id:Gigacee:20200702122739p:plain

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

f:id:Gigacee:20200701215831p:plain

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

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

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

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

f:id:Gigacee:20200702122753g:plain

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

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

f:id:Gigacee:20200701215413g:plain


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 を設定する。

TopDown Engine 入門 Part 5 ~カメラ編~

カメラの作り方は自由

このままだとキャラクターが移動しても画面が動かないので、キャラクターの動きに合わせてカメラも動くようにしてみましょう。と言っても、カメラに関しては TopDown Engine 特有の決まりはありません。単純にキャラクターに追随させるだけなら、Main Camera を Player の子にしてしまえば OK です。

より高機能なカメラを実装したい場合は、Unity 公式のパッケージである「Cinemachine」を使います。最初に TopDown Engine をインストールしたときに、Cinemachine も自動でインポートされていますので、使い始めるのに追加の操作は必要ありません。早速使ってみましょう。

Cinemachine 入門

Virtual Camera と Brain

メニューバーに「Cinemachine」という項目があるので、その中にある「Create 2D Camera」をクリックします。

f:id:Gigacee:20200701024024p:plain

すると、「CM vcam1」という GameObject が作られるとともに、Main Camera に「CinemachineBrain」というコンポーネントがアタッチされます。CM vcam1 には「CinemachineVirtualCamera」というコンポーネントがアタッチされていて、この CinemachineVirtualCamera が CinemachineBrain を制御するという関係になります。

Follow の設定

CinemachineVirtualCamera の「Follow」にオブジェクトを設定することで、そのオブジェクトをカメラが追うようになります。

f:id:Gigacee:20200701024019p:plain

なので、ここに Player を設定すれば良いわけですが、前回の補遺にもあるように、実際には Player が Hierarchy に居ない場合も多いでしょう。ですが心配はいりません。TopDown Engine は、その点もカバーしています。

CM vcam1 に、「Cinemachine Camera Controller」というスクリプトをアタッチしましょう。「Add Component」ボタンを押して、検索ボックスにワードを打ち込んで見つけてください。*1

f:id:Gigacee:20200701024012p:plain

完了したら、シーンを再生し、キャラクターを動かしてみてください。カメラがキャラクターを追うようになりましたか?

f:id:Gigacee:20200701024052g:plain

Cinemachine Camera Controller は何をしているのか

次に進む前に、Cinemachine Camera Controller が実際には何をしているのかを解説します。

先程、CinemachineVirtualCamera の Follow に設定された対象をカメラが追うと説明しましたが、シーン再生中にこの項目を見てみると、「CameraTarget」というオブジェクトが自動で設定されることが分かるでしょう。そしてその CameraTarget は、Player の子の GameObject です。

f:id:Gigacee:20200701024107p:plain

どういうことかと言うと、

  • Part 3 で Player にアタッチした Character が、初期化時に自身の子として CameraTarget を生成
  • それを Cinemachine Camera Controller が受け取って、CinemachineVirtualCamera の Follow に設定

という処理がゲーム中に実行され、カメラが Player を追うようになるのです。

カメラの映る範囲を制限する

さて、これでカメラが動くようになったわけですが、キャラクターがマップの端に移動すると、マップの外側が見切れてしまいます。

f:id:Gigacee:20200701024027p:plain

これを防ぐには、【コンファイナ】というものを作成・設定する必要があります。これは以下の手順で行います。

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

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

LevelManager にコライダーをアタッチ

  • LevelManager に Box Collider をアタッチする。*3
  • 「Is Trigger」にチェックを入れる。*4
  • 「Size」をレベルに合うように調整する。

f:id:Gigacee:20200701122609p:plain

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

  • CM vcam1 にアタッチされた CinemachineVirtualCamera の一番下にある「Add Extension」から「CinemachineConfiner」を選択する。「Cinemachine Confiner」がアタッチされる。

f:id:Gigacee:20200701103526g:plain

  • アタッチされた Cinemachine Confiner の「Confile Mode」を「Confine 3D」に設定する。

ここまで正しく設定できたら、カメラに映る範囲が LevelManager にアタッチされた Box Collider の範囲内に制限されるようになります。

f:id:Gigacee:20200701024032g:plain


NEXTTopDown Engine 入門 Part 6 ~テレポーター編~

PREVTopDown Engine 入門 Part 4 ~ステージ編~


*1:Cinemachine 関連のスクリプトは「TopDown Engine」の項目の中には無いので、検索して見つけるか、Project から直接アタッチする必要があります。

*2:こうすることで、カメラから遠近感が無くなり、景色が常に平行に映るようになります。

*3:Box Collider "2D" ではないことに注意してください!

*4:実際には、2D 世界のオブジェクトと 3D 世界のオブジェクトが影響しあうことはないため、チェックを入れる必要はありません。自分の場合は、Inspector をパッと見た時に衝突判定が残っていると勘違いしてしまうのを防ぐため、チェックを入れています。

TopDown Engine 入門 Part 4 ~ステージ編~

ステージ? いいえ、レベルです

キャラクターの次はステージを作っていきましょう。なお、TopDown Engine では、ステージのことを【レベル】と呼んでいますので*1、このブログでも以降はレベルと呼ぶことにします。

TopDown Engine のレベルは Unity の標準的な機能を使うように作られていますので、どのように作っても構いません。単純に Sprite Renderer を配置しても良いですし、2D Tilemap を使っても良いでしょう(デモの「KoalaDungeon」のレベルは 2D Tilemap で作られています)。Asset Store にあるような他社製のレベル制作ツールも、おそらく使うことができるかと思います。

ここでは簡便のため、以下の数枚の画像のみを使ってレベルを作っていきます。

f:id:Gigacee:20200630162909p:plain
日本を代表するトップダウンビューゲームのダンジョン

地面や壁を置く

各スプライトをシーンに配置し、コライダーを設定します。普通の Box Collider 2D などで大丈夫です。

f:id:Gigacee:20200630162035p:plain
Hierarchy の区切り線やフォルダ用の GameObject は適宜追加してください

レイヤー

TopDown Engine では、レベルの各要素をレイヤーで判別しています。付与すべきレイヤーは TopDown Engine をインポートした時点で自動で追加されていますので、自分で新しく追加したりする必要はありません。以下のように設定していきましょう。

  • 地面:「Ground」
  • 壁・障害物:「Obstacles」

f:id:Gigacee:20200630162056p:plain

プレイヤー

また、プレイヤーキャラクターにも「Player」というレイヤーを設定する必要があります。Part 3 で実行した AutoBuild Player Character 2D によって、親の GameObject には「Player」レイヤーが設定されていますが、子の View はそのままなので、こちらにも「Player」レイヤーを付与しておきましょう。

必要があれば、コライダーも調整してください。TopDown Engine の作者さんによると、キャラクターの下半分を囲むようにするのが良いそうです。そうすることで、キャラクターの頭が壁の前に来るようになり、良い感じの見た目になるとのこと。

f:id:Gigacee:20200630162047p:plain
こんな感じで下半分を囲む

Level Manager

最後に、レベル全体を制御するマネージャーを作成します。空の GameObject を作成して「LevelManager」とリネームし、Add Component から TopDown Engine > Managers と進んで「Level Manager」をアタッチしましょう。

そして、Inspector の「Scene Characters」に、Player を設定します。

f:id:Gigacee:20200701114445p:plain

動作確認

最後にゲームを再生して、キャラクターが壁や障害物にぶつかって止まるかどうかを確認しましょう。

f:id:Gigacee:20200630164143g:plain

補遺

なお、テスト中はプレイヤーキャラクターが最初から存在していても問題ありませんが、実際には、キャラクターがどのマップから移動してきたかや、どのセーブデータをロードしたかなどによって、初期位置や出現タイミングが定まっていないことが多いでしょう。そのため TopDown Engine では、Hierarchy に Player を直接置かずに、Player の Prefab を Level Manager の「Player Prefabs」に設定することが推奨されています。

f:id:Gigacee:20200630165634p:plain

こうすることで、ゲームの実行中に Level Manager がキャラクターを生成するようになります。


NEXTTopDown Engine 入門 Part 5 ~カメラ編~

PREVTopDown Engine 入門 Part 3 ~最小構成編~


*1:海外では一般的な用語で、例えばステージクリアのことを「Level Complete」と言ったりします。日本語でも「レベルデザイン」などと言いますね。

TopDown Engine 入門 Part 3 ~最小構成編~

最小構成のシーンを作成

いよいよ自分でシーンを作成し、キャラクターを動かしてみましょう。適当な名前でシーンを新規作成します(ここでは「sandbox」という名称にします)。

f:id:Gigacee:20200629141016p:plain
親の顔より見たデフォルトの Skybox

各種マネージャーを配置

シーンを用意できたら、空の GameObject を作成し、「GameManager」とリネームします。そして、Add Component から TopDown Engine > Managers と進み、「Game Manager」をアタッチします。

f:id:Gigacee:20200629141036g:plain

次に Main Camera を選択し、同じように Add Component から TopDown Engine > Managers と進んで「Input Manager」をアタッチします。

キャラクターを配置

今度はキャラクターを配置します。空の GameObject を作成して「Player」とリネーム、そしてさらにその子となる GameObject も作成して「View」とリネームします。この View が、キャラクターの見た目となる GameObject です。Sprite Renderer などをアタッチして、好きな画像を設定してください。

f:id:Gigacee:20200629141131p:plain

Player に戻り、Add Component から TopDown Engine > Character > Core と進んで「Character」をアタッチします。Inspector 内の Character コンポーネントの一番下に「AutoBuild ~」という複数のボタンがあるので、その中の「AutoBuild Player Character 2D」をクリックしましょう。すると、Rigidbody 2D や Box Collider 2D など、キャラクターに必要なコンポーネントが自動でアタッチ・設定されます。

キャラクターを操作できるか確認

ここまで出来たら、シーンを再生して、WASD キーでキャラクターを操作できるか確かめてみましょう。

f:id:Gigacee:20200629141230g:plain

ちゃんと操作ができれば成功です!✨


NEXTTopDown Engine 入門 Part 4 ~ステージ編~

PREVTopDown Engine 入門 Part 2 ~デモシーン編~


The coloring of this site is Dracula PRO🧛🏻‍♂️
This website uses the FontAwesome icons licensed under CC BY 4.0.

2020 GIGA CREATION