シーン切り替え時のエフェクトを
無料で簡単に実装するにはどうすれば良いか
考えてみました。
考えた結果シーン切り替え時の
エフェクト用のアセットを作成する事にしました。
成果物は下記の URL からダウンロードできます。
無料で使用できます。
Unity Asset Store でダウンロード
Google Drive でダウンロード
BOOTH でダウンロード
BOOTH のページに飛ぶと
紹介動画があります。
紹介動画を見ると
どんなアセットか分かりやすいと思います
容量が大きいように見えますが
ほとんどがサンプルグレースケール画像の容量です。
サンプルグレースケール画像と HowToUse.pdf を削除すれば
unitypackage で 600KB 程度です。
説明
アプリケーションにおけるシーン遷移エフェクトは、ユーザー体験に大きな影響を与える重要な要素です。
SephirothSceneSwitchingEffects は、以下の 4 種類の遷移エフェクトを提供します：
- 最後にタッチした地点から円が広がるようにシーン遷移
- 任意の一点から円が広がるようにシーン遷移
- シンプルなフェードによるシーン遷移
- グレースケール画像に基づくカスタムシーン遷移
これらはすべて、黒い画面を挟まずシームレスに画面遷移します。
＜グレースケール画像によるカスタム遷移＞
グレースケール画像を使用することで、自分だけの遷移エフェクトを簡単に作成できます。
画像を作成できるスキルがある方は、自由にオリジナルエフェクトを追加できます。
スキルがなくてもご安心ください。多数のサンプル画像が付属しており、それだけでも豊富な演出が可能です。
＜使用方法の概要＞
基本的な使用方法は非常にシンプルです。例えば、最後にタッチした位置から円状に広がる遷移を行いたい場合は、以下のメソッドを使用します：
SephirothTools.SephirothSceneSwitchingEffects.CircleWipeSceneSwitchAtLastTouchPoint(string sceneName);
Unity の SceneManager.LoadScene の代わりに上記メソッドを使用してください。
speed パラメータを調整すれば、遷移速度も自由に変更可能です：
SephirothTools.SephirothSceneSwitchingEffects.CircleWipeSceneSwitchAtLastTouchPoint(string sceneName, float speed = 1f);
＜グレースケール画像を使用したフェード＞
「グレースケール画像に基づくフェード」エフェクトを使用するには、グレースケール画像を以下のフォルダに保存してください：
Assets/SephirothSceneSwitchingEffects/GrayScale/GrayScaleImage
ここに保存された画像は、StreamingAssets フォルダに配置され、実行時に参照されます。
画像の回転が必要な場合は、以下のメニューコマンドを実行できます：
Tools > SephirothSceneSwitchingEffects > ExecSephirothGrayScaleRotateFunction
＜メモリ効率にも配慮＞
このアセットは、前後のシーンを同時に読み込むことがありません。
そのため、メモリの使用量が多いシーン間の遷移でも問題なく動作します。
例えば円が広がるシーン遷移の処理は、以下の手順で行われます：
step1: 現在の画面を Texture2D に変換します
step2: 現在のシーンをアンロードします
step3: 次のシーンをロードします
step4: step1 で用意した Texture2D を画面全体に表示し、指定した地点から円が広がるように徐々に非表示にします
＜カスタマイズオプション＞
境界線を暗くしたい場合は、参考動画をご覧ください。
シェーダーのコメントアウトを解除することで、暗い枠線を表示できます。
＜推奨・補足事項＞
このアセットをインポートすると SephirothSceneSwitchingEffects フォルダが Assets 直下に配置されますが、このフォルダは他の場所へ移動しても正常に動作します。
フェード処理の重複は自動的に制御されます。
フェード中に新たなフェードを実行した場合は、1 回のみ予約され、先行するフェードが完了した後に実行されます。
この仕様は、「自動で 1 回だけフェードを実行する」ようなケースで、フェード中に処理がスキップされてしまい、アプリがフリーズする問題を回避するために、本アセットの設計段階で導入されました。
グレースケール画像のサンプルは以下のフォルダにあります：
Assets/SephirothSceneSwitchingEffects/RecommendedImages
必要なものだけをコピーし、不要なファイルは削除してプロジェクトを軽量化してください。
グレースケール画像は引き伸ばされて使用されます。
違和感のないデザインの画像を使用してください。
縦画面で使用する場合は、縦長の画像を用意することを推奨します。
グレースケール画像生成ツールも付属しています。詳細は以下を参照してください：
Assets/SephirothSceneSwitchingEffects/RecommendImages/Generator/Memo.txt
＜セットアップ手順＞
アセットを使用するには、UseScene フォルダ内のシーンを Build Settings > Scenes In Build に追加してください。
インポート時に自動で設定されますが、削除してしまった場合は再追加をお願いします。
サンプルの DemoScene を試す場合も、Build Settings に含める必要があります。
＜動作環境＞
Android および iOS にて動作確認済み。
以上シーン切り替え時のエフェクトを
簡単に実装する方法について紹介しました。
シーン切り替え時にエフェクトがあると
見栄えが良くなるハズなので
是非取り入れて頂けると嬉しいです。
皆さんの開発の助けになれますように
閲覧ありがとうございました。