初めに
"FadeCamera2" というパッケージを紹介します。これを用いると uGUI で場面転換時のフェード演出を簡単に実装できます。
インポート・準備
インポート
"FadeCamera2.unitypackage" をUnity プロジェクトにインポートします。インポートしたいプロジェクトを開いた状態で開くと、インポートすることができます。Assets 内に下のように Fade フォルダが作られればok.
準備
フェードに使用する画像ファイルを用意します。マスク画像は自分で作ってもよいですが、フリーで公開されているものもあります。今回は下記サイトで配布してくださっているものを使用します。
ダウンロード後は、圧縮ファイルを展開し、Unity プロジェクトへ追加してください。
実装
場面転換時のフェードを実装していきます。
マスク画像の設定
マスク画像の Texture Type を下のように変更しましょう。
Texture Type | Single Channel |
---|---|
Alpha Source | From Gray Scale |
Alpha Is Transparency | true |
※今回は透明度(α値)のみ考慮できればよいので、チャンネルが1つでよい。そのため Single Channel にします。
Texture Type については、公式のドキュメントをご覧ください。
キャンバスの配置
Fade フォルダ内の "FadeCanvas" を配置します。
"FadeCanvas" の Inspector から Mask Texture を設定しましょう。
実行
今回は "A" が押されたらフェードイン、"Z" が押されたらフェードアウトするようにしてみます。
次のスクリプトを Game Object につけ、実行してみましょう。
using System.Collections; using System.Collections.Generic; using UnityEngine; public class FadeTest : MonoBehaviour { public Fade fade; //FadeCanvasをアタッチする void Update() { if ( Input.GetKeyDown( KeyCode.A ) ) { fade.FadeIn( 0.5f, () => print( "フェードイン完了" ) ); } else if ( Input.GetKeyDown( KeyCode.Z ) ) { fade.FadeOut( 0.5f, () => print( "フェードアウト完了" ) ); } } }
色の変更
FadeCanvas の Inspector から FadeImage の Color を変更することで、色を変更できます。なお、デフォルトは黒になります。
演出の見た目を変更
FadeCanvas の Inspector から FadeImage の Material から演出の見た目を変更できます。
(UI-Fade-Alpha)
(UI-Fade-Cutout)
最後に
FadeCanvas ではなく、FadeMask を使うと一部の UI 自体をフェードさせることもできます。詳しくは上記参考サイトをご覧ください。