今回は、ゲーム開発ではお馴染みのフェードイン・アウト機能を「Canvas」とUIの「Image」を使って実装したいと思います。
【Unity】CanvasとImageを使ってフェードを実装する
実装手順
まずは、CanvasとImageを作成します。
Imageを選択して「Left」「Top」「Pos Z」「Right」「Bottom」の値を全て0にします。
アンカーは「Stretch」にしておきます。
Imageの色を好きな色に設定しておきます。私の場合は黒にしてますが、フェードアウトした時の色を他の色に変えたい場合は適宜変更してください。
フェード用のスクリプトを作成
スクリプト「FadeManager」を作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
using UnityEngine; using UnityEngine.UI; using System.Collections; public class FadeManager : MonoBehaviour { // フェード用のImage (Canvas内のImageオブジェクトを指定する) [SerializeField] private Image fadeImage; // フェードの所要時間（秒） [SerializeField] private float fadeDuration = 1.0f; // フェードイン処理 (アルファ値を1から0に変更) public void FadeIn() { // コルーチンを開始して非同期で処理を行う StartCoroutine(Fade(1, 0)); } // フェードアウト処理 (アルファ値を0から1に変更) public void FadeOut() { // コルーチンを開始して非同期で処理を行う StartCoroutine(Fade(0, 1)); } // 実際のフェード処理 (startAlphaからendAlphaに徐々に変化) private IEnumerator Fade(float startAlpha, float endAlpha) { float time = 0f; // 経過時間を追跡する変数 Color fadeColor = fadeImage.color; // 現在のImageの色を取得 // 指定した時間（fadeDuration）が経過するまでループ while (time < fadeDuration) { time += Time.deltaTime; // 経過時間を加算 float t = time / fadeDuration; // 時間の進行割合 (0.0～1.0) fadeColor.a = Mathf.Lerp(startAlpha, endAlpha, t); // アルファ値を線形補間で計算 fadeImage.color = fadeColor; // 計算結果のアルファ値をImageに適用 yield return null; // 次のフレームまで処理を一時停止 } // 最終的なアルファ値を正確に設定 fadeColor.a = endAlpha; fadeImage.color = fadeColor; } } |
スクリプトを作成したら、空のオブジェクト（FadeController等）を作ってそこへアタッチします。
後は、好きなタイミングでFadeIn()及びFadeOut()を呼べばOKですね。
サンプルとしてボタンを用意して、ボタンがクリックされたらフェードアウトするようにします。
呼び出す側の処理を準備
シーンを管理するために新しいスクリプト「SceneController」スクリプトを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
using UnityEngine; public class SceneController : MonoBehaviour { [SerializeField] private FadeManager fadeManager; private void Start() { fadeManager.FadeIn(); } public void OnButtonPress()//ボタンが押されたらフェードアウト { fadeManager.FadeOut(); } } |
このスクリプトをアタッチするために空のオブジェクト（SceneController等）を作ってこのスクリプトをアタッチしておきましょう。
折角フェードイン・アウト出来るので、スタートメソッドでフェードインを実行するようにしています。フェードアウトは、ボタンが押されたタイミングで実行します。
SceneControllerのFade ManagerにヒエラルキーからFadeControllerオブジェクトを設定します。
続いて、ボタンを1つ作成します。
ボタンのOnClickにSceneControllerオブジェクトを設定して「SceneController.OnButtonPress」を実行するようにします。
ここまで出来たら、ゲームを実行してみましょう。
こんな感じで、フェードインから始まりボタンがクリックされた際にフェードアウトすると思います。
