スマホアプリやゲームを作っていると、画面遷移時の演出に悩むことがあります。
単純なフェードイン・フェードアウトも悪くありませんが、もう少し印象に残る演出を入れることで、アプリ全体のクオリティを大きく向上させることができます。
今回は「円が広がるように画面が切り替わる演出」「黒い画面を経由しないフェード」を紹介します。
2Dアクションゲームと、特に相性が良いと考えています。
完成イメージ
画面遷移時に以下のような流れで演出を行います。
- 遷移直前の画面を画像として保存
- 次のシーンを読み込む
- 保存した画像を画面全体に表示
- プレイヤーのスタート地点から円形に画像を消していく
- 円が広がるにつれて新しいシーンが見えてくる
これにより、
- 前の画面から繋がっている感覚がある
- 単純なフェードより印象に残る
- プレイヤーの出現位置を自然に強調できる
というメリットがあります。
円形に画像を消していくのではなく、透明度を全体で下げていく事で、「黒い画面を経由しないフェード」も実現可能です。
なぜ綺麗に見えるのか
通常の演出付きシーン切り替えでは、
前の画面
↓
真っ黒(or Loading画面)
↓
次の画面
となります。
一方、この方式では、
前の画面
↓
前の画面の画像を保持
↓
遷移後のキャラの初期地点から円形に消える
↓
次の画面が見える
という流れになります。
ユーザー視点では、
「前の場所から新しい場所へ移動した」
という感覚を得やすくなります。
特にアクションゲームや探索ゲームとの相性が良い演出です。
この実装のメリット
この実装のメリットは、フェードが綺麗に見える事よりも、2つのシーンを同時に読み込む必要がない点にあります。
前後の画面を同時に読み込む方式ではメモリ使用量増加の懸念がありますが、本手法ではシーン遷移を完了してから次の画面を表示するため、メモリ消費を抑えることができます。
実装の概要
実装自体はそれほど難しくありません。
① 遷移前にスクリーンショットを保存
シーン遷移前に現在画面を RenderTexture や Texture2D として保存します。
② 次のシーンを読み込む
通常通りシーンをロードします。
③ 保存画像を全画面表示
Canvas や SpriteRenderer で保存画像を表示します。
④ シェーダーで円形マスク
プレイヤーのスタート地点を中心として、
半径 0
↓
半径 50
↓
半径 100
↓
半径 200
↓
画面全体
という形でマスクを広げます。
⑤ アニメーション終了後に画像を削除
保存画像を削除して演出完了です。
Unityアセットとして公開しています
私はこの仕組みを Unity の無料アセットとして公開しています。
このアセットのように、この手法によるシーン遷移を実現する public static メソッドを作ってしまうのが賢いと思います。
そうする事で、メソッドを実行するだけで遷移できます。
もちろん自作可能な範囲の機能ですが、
- シーン切り替え処理
- スクリーンショット保存
- 円形マスク演出
- 各種調整機能
などをまとめて実装しているため、すぐ試したい方は利用してみてください。
まとめ
画面遷移はユーザーが必ず目にする部分です。
どれだけゲーム内容が良くても、遷移が味気ないと全体の印象も弱くなってしまいます。
今回紹介した「前画面を保持して円形に消していく演出」は、
- 実装難易度が比較的低い
- 見栄えが良い
- プレイヤーの位置を自然に強調できる
というメリットがあります。
画面遷移のクオリティに悩んでいる方は、ぜひ一度この仕組みを試してみてください。