【Unity/Feel】Feelで簡単にロード画面を作ろう

はじめに

　Unityアセット「Feel」の機能の一つに、任意のシーンをロード画面として経由し、目的のシーンに遷移することができるというものがございます。
　本記事ではFeelを用いたロード画面の作り方について解説します。なおFeelの基本的な使い方（フィードバックの作り方や実行方法）については把握していることを前提とします（わからないという方は公式ドキュメントを確認してください）。

作り方

　遷移元のシーン（BeforeLoadScene）、ロード画面になるシーン（LoadingScene）、遷移先のシーン（AfterLoadScene）の3つが必要です。いずれもUnityのBuild Profilesからシーンリストに追加しておくことを忘れないでください。

　全体の構成を図で表すと以下のようになります。

ロード画面

　まずは以下のものを配置します：

• MMAdditiveSceneLoadingManagerコンポーネントをアタッチしたGameObject。この中でロードの進捗をひろって何かの処理（読み込み具合のバーを伸ばすなど）を行う関数を指定したり、ロード開始・終了などのタイミングで起こるイベントを指定することができます。
• Canvas内に、MMFaderDirectionalコンポーネントをアタッチしたImage。MMAdditiveSceneLoadingManagerはこれらと連動するようになっており、指定さえしておけばロード開始時・終了時の画面フェードイン・フェードアウトを自動的に行なってくれます。

MMAdditiveSceneLoadingManagerの設定項目

• Settings
  • Fader IDに適当な数値を指定します。この値は後で使うのでメモしておいてください。
• Progress Events
  • ロードの進捗をメソッドで拾い、それに応じた処理を行うことができます。
  • MonoBehaviourスクリプトを作成し、publicでfloat値を引数にとるメソッドを作りましょう。ここではLoadingManagerというスクリプトを同名のGameObjectにアタッチし、SetProgressというメソッドで進捗を拾うものとします。
  • Progress EventsのSet Interpolated Progress Valueの+ボタンを押し、「None (Object)」となっている欄にLoadingManagerのGameObjectをドラッグします。その後右のメニューからLoadingManager > Dynamic float下のSetProgressを選択します。
    
  • これでSetProgressに読み込みの進捗状況が0.0~1.0で渡されますので、値に応じて行いたい処理を実装します。
  • 進捗に応じて読み込みバーの長さを変化させる、というようなときはMMMaths.Remapを用い、0.0~1.0を任意の範囲に変換してから使うのがおすすめです。例えば以下のようにコードを書けます。

using UnityEngine.UI;
// これをインポート
using MoreMountains.Tools;

public class LoadingManager: MonoBehaciour
{
    public Image _loadingBar;

    ...

    // ロード進捗を受け取るメソッド
    public virtual void SetProgress(float newValue)
    {
        //　0.0-1.0の値（第2,3引数で元の範囲を指定）を
        //　0.0-1280.0に変換（第4,5引数で変更先の範囲を指定）
        float remappedValue = MMMaths.Remap(newValue, 0.0f, 1.0f, 0.0f, 1920.0f);
        //　これでそのまま読み込みバーの長さに反映できる
        _loadingBar.GetComponent<RectTransform>().sizeDelta = new Vector2(
            100.0f, remmappedValue);
    }
}

• State Events
  • ロード開始時など、特定のタイミングで実行するメソッドを指定できます。
    • フェードインに伴ってなにかアニメーションを実行したい、ロード完了を音で通知したい、という場合はこれらが使えます。
  • 指定の仕方は上記Progress Eventで行ったものと同じですが、変数が渡されることはありません。主に使いそうなものを紹介します。
    • OnLoadStarted(): ロード開始時に実行するメソッド。
    • OnBeforeEntryFade(): ロード開始後のフェードインの開始を待つときに実行するメソッド。
    • OnEntryFade(): ロード開始後のフェードインが開始すると実行されるメソッド。
    • OnUnloadOriginScene(): 遷移前のシーンが破棄されると実行されるメソッド。
    • OnLoadDestinationScene(): 遷移後のシーンの読み込みが始まると実行されるメソッド。
    • OnInterpolatedLoadProgressComplete(): 遷移後のシーンの読み込みが終わると実行されるメソッド。
    • OnExitFade(): ロード終了時のフェードアウトが開始すると実行されるメソッド。

MMFaderDirectional

• 縦横方向へのフェードイン・フェードアウトを行うためのコンポーネントです。別途MMFaderRoundというものも用意されており円形も扱えるようですが……今後時間があれば取り扱いたいと思います。

• Canvas直下に、MMFaderDirectionalをアタッチしたImageを配置してください。この上に表示したい要素（読み込みバーなど）を置いていきます。

• MMFaderDirectionalの設定要素は以下のとおりです（とりあえず使うもののみ）。

  • Identification: 先ほどMMAdditiveSceneLoadingManagerで指定したIDをここに記入してください。
  • Directional Fader: フェードイン、フェードアウトをどの向きからどの向きに行うかをそれぞれ指定することができます。
  • Timing
    • Default Duration: フェードイン・フェードアウトにかける時間を指定します。
    • Default Tween: これの上側のプルダウンは無視して構いません。下側のプルダウンでイージング（フェードイン・アウト時の変化の仕方）を選択します。

遷移元のシーン

• シーン遷移のためのフィードバックを作ります。フィードバック用のGameObjectを作成してMMFPlayerをアタッチし、最下部の「Add new feedback...」から「Scene」→「Load Scene」を選択してフィードバックを追加してください。
• ここで設定すべき項目は以下のとおりです。
  • Loading Scene Name: ロード画面になっているシーンの名前。例えば今回の場合なら"LoadScene"。
  • Destination Scene Name: 遷移先にしたいシーンの名前。今回の場合なら"AfterLoadScene"。
  • Loading Mode: 今回はMM Additive Scene Loading Managerを選択。
• あとは任意のスクリプトからこのフィードバックを参照しPlayFeedbacks()を実行すれば、ロード画面を挟んでシーン遷移が行われます。

最後に

　以上、Feelを用いたロード画面・シーン遷移に関する解説となります。
　Feelは非常に多機能なアセットですが、突っ込んだで解説した日本語資料がまだあまりないようなので、今後自身の勉強も兼ねて解説記事を書いていきたいと思います。