もちっとメモ

もちっとメモ

管理人のホームページで書ききれていない調べ物のメモページです

【Unity】シーンの切り替えエフェクト

【2018/7/14追記】作成したスクリプトにFadeCanvasをアタッチする部分が抜けていたので追記しました。

RPGでマップ画面から戦闘画面に切り替わるときとかにあるあれです。既にたくさんの方が書かれているので今さらですが、個人的にはまったので、備忘録として書いておきます。

手っ取り早くやりたいなら

github.com

bibinbaleo.hatenablog.com

複雑なエフェクトをかけたいなら

tsubakit1.hateblo.jp

使い方の例:ボタンクリックでエフェクトをかけながら次のシーンに移る

  1. シーンを2つ用意する
  2. ルール画像を取得する4you.bz

  3. 取得したルール画像をUnityのProjectにインポートする。フォルダー構成は任意。
  4. ルール画像のInspectorを変更する。TextureType=Default,TextureShape=2D,sRGB=on,AlphaSource=FromGrayScale,AlphaIsTransparency=on
    にしてApplyを押す。
  5. シーン切り替えエフェクト用のパッケージを取得する。

    github.com

  6. ダウンロードしたパッケージを[Assets]->[Import Package]->[Custom Package]からインポートする。インポート対象はallで良い。
  7. シーン移動する前のシーンにインポートしたパッケージフォルダ[Fade]->[FadeCanvas]のプレハブをシーンに置く
  8. FadeCanvasにアタッチされている[FadeImage]でエフェクトの様子を調整できる。Materialを変更することで変化の様子を調整する。[UI-Fade-Cutout]にすると円を描くようなエフェクトになる。MaskTextureを変更するとエフェクトの模様を変更できる。ここに3.でインポートしたルール画像をアタッチする。
  9. Canvas下に[UI]->[Button]を置く。
  10. ButtonにFade用のスクリプトをアタッチする。今回は以下のようなスクリプトを自作して与えた。
    using System.Collections;
    
    using System.Collections.Generic;
    
    using UnityEngine;
    
    using UnityEngine.SceneManagement;
    
    
    
    public class FadePractice : MonoBehaviour {
    
    	[SerializeField]
    
    	Fade fade = null;
    
    
    
    	public void Fadeout()
    
    	{
    
    		//fade.FadeIn (1, () => {
    
    		//	fade.FadeOut (1);
    
    		//});
    
    		fade.FadeIn (1, () => {
    
    			Invoke("LoadScene",0.5f);
    
    		});
    
    	}
    
    	public void LoadScene(){
    
    		SceneManager.LoadScene ("NextScene");
    
    	}
    
    }
  11. ButtonのOnClickに先ほどButtonにアタッチした[FadePractice]をアタッチする。この時[FadePractice]はInspector上のものをアタッチすること。アタッチできたら、[Runtime Only],関数名:[FadePractice.Fadeout]を選択する。
  12. FadePracticeにシーン上のFadeCanvasをアタッチする
  13. シーンをSaveしてゲームを実行する。ボタンをクリックして、フェードアウトエフェクトがかかりながら次のステージに遷移できたら完成。

あとはお好みのエフェクトに変更したり、ステージの遷移になるように調整してください。

FadeCanvasのSortingLayerをいじることで描画順序も調整できるようです。Materialによっても見え方がことなるので適宜変更してください。デフォルトだと[UI-Fade-Alpha]になっているので下にobjectがあると透過して下のobject見えるっぽいです。[UI-Fade-Cutout]に変更したら透過しなくなりました。