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 に入っています。

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

2020 GIGA CREATION