【1作目アップデート計画】記事一覧
【1作目アップデート計画】 前回の記事
シームレスなトランジション
最近やってみたいと思っていたのが、シーンの切り替えを感じさせないようなシームレスなトランジション。
1つのシーンに全てまとめれば簡単にできるのですが、開発や管理がしにくいのでそれは避けたい。
ということで、シーンは分けつつもシーンの切り替え時にシームレスになるように工夫しました。
作成したトランジション
作成したものがこちら。
いい感じ！
背景のみのシーンを作成
シームレスなトランジションを目指すということで、シェーダーで動きをつけている背景は切り替えが目立ってしまうという問題に当たりました。
そこで、背景のみのシーンを作成し、タイトル画面やセレクト画面、パズル画面の全ての画面で「背景シーン + それぞれのシーン」という状態にすることにしました。
タイトル画面からセレクト画面
まずはタイトル画面からセレクト画面に遷移する際のトランジション。
プレイボタンを押下すると、再生アイコンがフェードアウトしたあとにボタンが横に引き延ばされ、少し下に移動します。
そして、セレクト画面のボタンになります。
ちなみにこのボタンは、解放されているパズルの中で一番新しいもの（プレイヤーが最もやるべきもの）のボタンです。
「セレクト画面のボタンになる」と書きましたが、正確には実際にタイトル画面のプレイボタンがセレクト画面のボタンになるわけではありません。
セレクト画面のボタンに大きさを合わせ、セレクト画面のボタンの位置にプレイボタンを移動した後で、シーンを切り替えています。
このようにすることでタイトル画面のプレイボタンとセレクト画面のボタンの差し替えを気づかれなくしています。
そうなるとシーン遷移の処理時間が気になりますが、非同期ロードを駆使して解決しています。
ボタン押下直後に非同期ロードを開始しておき、トランジションが終了したときに遷移するようにしました。
private bool isAllowTransition = false;
private Scene currentScene;
public bool IsAllowTransition = false;
public void PreLoad(string sceneName)
{
IsAllowTransition = false;
SceneManager.sceneLoaded += OnLoadedScene;
StartCoroutine(PreLoadCoroutine(sceneName));
}
private IEnumerator PreLoadCoroutine(string sceneName)
{
var currentScene = GetCurrentScene();
var asyncLoad = SceneManager.LoadSceneAsync(scene, LoadSceneMode.Additive);
asyncLoad.allowSceneActivation = false;
yield return new WaitUntil(() => { return asyncLoad.progress >= 0.9f; });
yield return new WaitUntil(() => { return isAllowTransition; });
asyncLoad.allowSceneActivation = true;
IsAllowTransition = false;
SceneManager.UnloadSceneAsync(currentScene);
}
private void OnLoadedScene(Scene scene, LoadSceneMode mode)
{
SceneManager.sceneLoaded -= OnLoadedScene;
SceneManager.SetActiveScene(scene);
currentScene = scene;
}
このコードで言うと、ボタン押下時にPreLoad(sceneName)を呼び出し、トランジション完了後にIsAllowTransitionをtrueにします。
セレクト画面からパズル画面
こちらの遷移はもっと単純で、セレクト画面でパズルのボタンを押下した時には背景以外の全てのUI要素を画面外に移動させ、普通にパズル画面に遷移しています。
一度全てのUI要素を画面から消すことで、パッと切り替わった感の少ない（シームレス感のある）トランジションになっていると思います。
押下したボタンは一度強調表示してから右にスライドし、パズル画面で同じようなタイトル表示部分を左からスライドさせています。
右に抜けたものがそのまま左から入ってくるようなイメージで作成しました。
戻るときのトランジション
逆に「パズル画面からセレクト画面」「セレクト画面からタイトル画面」のように戻るトランジションについてですが、これはかなり簡素なものにしました。
戻る操作は遷移時間が短くパッと戻れた方がプレイ感良いと思うので、凝ったトランジションはしないように＆トランジション時間を短くしました。
コメント