フェードイン・アウトを実装する
前回、テレポーターによるセクション間の移動を実装しました。しかし、画面の切り替わりが一瞬で行われるため、少々見栄えが悪いです。そこで今回は、セクション間の移動時に画面をフェードさせてみたいと思います。
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 の子として空の 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 ～テレポーター編～
