【Unity】シーン移動時にトランジションで演出する

2019/6/5 コードハイライト修正
2022/02/14 version2020.2.3f1にて動作確認・内容追記




2022/10/1 FadeCamera2の新記事を立ち上げました。
      この記事の内容では、動作が不安定な為、
      新しく処理を作り直しております。

      つきましては、
      FadeCamera2 シーン遷移の演出
クリックすると新ページが開きます。
       新ページの方へ移動してもらえると助かります。

      なお、このページは時期を見て削除予定です。
      いろいろとコメントを頂いた事で、勉強する事ができました。
      コメント頂いた方々には感謝しております。m(_ _)m







前回、フェードイン・アウトを作ってみたのですが、
場面転換時に、アプリによっていろいろ演出がされています。
かっこいいのですが、どうすればいいのか分かりません(T^T) ヒック

そんなスクリプト情弱にも使える便利なアイテムが公開されています。


テラシュールブログさんの
【Unity】Unityでトランジションを使用した綺麗な場面転換(uGUI対応版)


ここで公開されているFadeCamera2がすごく使いやすくて便利です。

AssetをインポートしてFade用のPrefabをセットするだけです。
フェードだけでなくルール画像を使ったトランジションが可能で
カッコイイ演出も可能です。

実際にインポートしながら設定してみたいと思います。

https://github.com/tsubaki/FadeCamera2/blob/master/FadeCamera2.unitypackage?raw=true
からFadeCamera2をUnityにインポートします。

Unityを開いた状態で上記URLをクリックします。
フェード4.jpg
Windows10でクリックするとDLメッセージが画面下に表示されます。
win7や8でも同じかと思います。

ファイルを開くを押すと
フェード5.jpg
セキュリティ画面が開くので”許可する”をクリックすると
フェード6.jpg
Unity上にインポート画面が表示されるのでImportします。

フェード7.jpg
インポートができるとAssetにFadeフォルダが追加されると思います。

このフォルダ内のFadeCanvasのプレハブをSceneに追加するだけで
フェードが使える優れものでっす。


続いて、トランジション用のルール画像を入手します。


For Youさんが公開されている
ルール画像

ここから一括ダウンロード(16:9)をDLして解凍します。
解凍が終わると画像データが収録されているので
好きな画像をUnityにインポートします。

今回は083の画像を使ってみます。

ルール画像は、そのままでは適用されないのでUnity上で設定します。
ここからの設定は2Dメインなので3Dには対応していません。

まずインポートした083画像のInspectorを表示します。
フェード10.jpg
textureTypeをSingleChannel
AlphaSourceをFromGrayScale
AlphaIsTransparencyにチェックを入れる

三つの設定ができたらApplyで設定を反映します。

これで画像の準備ができたので、
FadeCameraの準備に移ります。

Fadeフォルダ内のFadeCanvasをクリックしてInspector表示します。
フェード14.jpg
FadeImage(Script)があるので、ここの3項目をイジリます。

collarは、お好みの色でOKです。
MaskTextureは、先ほどの083画像をアタッチします。

最後に重要なのですが、CutoutRangeの値を1にします。

これが1になってないとフェードインの時に悩む事になります。

FadeCanvasプレハブの準備ができたので、
このプレハブをSceneにアタッチします。
フェード8.jpg


エディターの準備ができたのでスクリプトを修正していきます。
public Fade fade; //フェードキャンバス取得

//トランジションを掛けてシーン遷移する
fade.FadeIn(1f, () =>
{
SceneManager.LoadScene("SelectScene");
});
フェードキャンバスの取得用変数を追加して
スタートボタン内にトランジションを掛けてからシーン遷移を追加して
エディター上からfade変数にFadeCanvasをアタッチします。

スクリプトの完成版は以下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class TitleManager : MonoBehaviour {

public GameObject ImgEnd;   //終了ダイアログ

public Fade fade; //フェードキャンバス取得

// Use this for initialization
void Start () {

}

// Update is called once per frame
void Update () {

//スマホの戻るボタンが押されたら
if (Application.platform == RuntimePlatform.Android)
{
if (Input.GetKeyDown(KeyCode.Escape))
{
ImgEnd.SetActive(true);  //終了ダイアログ呼び出し
}
}
}

//ゲーム終了メニューの操作
public void EndDialog(int Bt)
{
if (Bt == 0)
{
Application.Quit();
}
else
{
ImgEnd.SetActive(false);
}
}

//ゲームスタート
public void StartBt()
{
if (ImgEnd.activeSelf)
{
return;
}

//トランジションを掛けてシーン遷移する
fade.FadeIn(1f, () =>
{
SceneManager.LoadScene("SelectScene");
});
}
}
これでトランジションが掛かってからセレクト画面に移動するようになりました。


続いて、セレクト画面に移ったときにフェードインするようにします。
まず、セレクトシーンを開いてFadeCanvasをアタッチします。
この時、FadeCanvasプレハブのCutoutRangeが0に戻っているので、
1にしてからシーンにアタッチして下さい。

FadeCanvasが準備できたらスクリプトを修正します。


FadeCanvasは立ち上がり時にCutoutRangeが0になるように設定されているので
このままではトランジションが働かないので、
Fadeスクリプトを修正します。
フェード12.jpg
Assets→Fade→Scripts→Fade.csを開きます。

void Start ()
{
Init ();
fade.Range = cutoutRange;
}
FadeスクリプトのスタートでCutoutRangeの設定が読み込まれているので
ここのRangeを1にしてやるとFadeCanvasが色で塗りつぶされて表示されるようになります。

ただRangeを1に固定するとタイトルもフェードインしてしまうので都合が悪いです。
なので必要な画面のみRangeを1にするようにします。
public bool StartFade; //トランジション用変数

void Start ()
{
Init ();
//シーン立ち上げ時にトランジションを掛けるか
if (StartFade == true)
{
cutoutRange = 1;
}
fade.Range = cutoutRange;
続いてエディター上のセレクトシーンにあるFadeCanvasを見ると
フェード13.jpg
追加した変数が表示されているのでチェックを入れます。


セレクトシーンのスクリプトを修正します。
public Fade fade; //フェードキャンバス取得

// Use this for initialization
void Start () {
fade.FadeOut(1f);
}
FadeCanvasの取得とスタート時にフェードアウトコマンドを呼び出します。

ここまでできればセレクトシーンのFadeCanvasをスクリプトにアタッチして、
実行してみます。

タイトル画面をFadeOutしてセレクト画面でFadeInするようになりました。

なかなかカッコイイ演出ができるのでゲームに合わせて
画像を変えると面白いと思います。


余談なんですが、
シーン遷移先の冒頭でトランジションを掛けられなくて苦労しました。

FadeCanvasプレハブをSceneにアタッチする所で躓いて
何も起こらないの繰り返しでした。

まさか全てのプレハブをCutoutRange1でアタッチしないといけないとは…

まだまだ勉強不足でっす。
これからも精進しなくては…  <(; ^ ー^) マイッタマイッタ




2022/02/14 Version2020.2.3f1にて動作確認
この記事は、3年前に書いた記事なので、
Unityのバージョンが変わると動くかの検証をしてみました。

バージョンは、2020.2.3f1の新規プロジェクトで作成しています。

このバージョンのUnityでも動作させる事ができました。

シーンの構成は、Fade1とFade2の二つを用意して、
画面センターに設置したボタンを押す事で、
それぞれのシーンに遷移するようにしています。

作成していて結構悩んだ部分がありました。
ボタンを配置して、コントロール用のFadeTestオブジェクトを配置
トランジション⑪.jpg
最後にFadeCanvasの複製を作成しました。

Fade1は、シーン開始時にトランジションは問題なく働いたのですが、
Fade2は、働いてくれませんでした。
トランジション⑫.jpg
最終的に階層を3段目にした所で機能しました。
階層は、ドラッグで移動させたわけでなく、
機能しないFadeCanvasを削除して、作り直す事で対応しています。

なぜ階層を変えると機能したのかは、勉強不足で説明できません (ToT)>゛スンマセン

注意点としては、
FadeCanvasのCanvasコンポーネントにオーバーレイのエラー表示が出ています。
今後のVersionでは、使えなくなるかもしれないので、
その辺りは注意が必要かなと思います。

機能しないとお困りのコメントを頂いたので、
チェックしておくポイントをまとめておきます。

・開始トランジションは、Startでfade.FadeOut関数を設定しておく
・Fadeスクリプトのbool変数を追加したので、チェックを入れてるか確認する
・コントロールするスクリプトに複製したFadeCanvasをアタッチしておく


実は、FadeCanvasを作り直してる時に忘れていて動かない事が多々ありました。
(;^o^) \(ToT )あんたほんとにそれでいいの

最後に今回作成したスクリプトを書いておきます。
FadeTest

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class FadeTest : MonoBehaviour
{
[SerializeField]
private Fade fade; //FadeCanvas取得
[SerializeField]
private float fadeTime; //フェード時間

// Start is called before the first frame update
void Start()
{
//シーン開始でトランジションを入れる場合
fade.FadeOut(fadeTime);
}

public void SceneTransition(int destination)
{
//トランジションを掛けてシーン遷移する
fade.FadeIn(fadeTime, () =>
{
SceneManager.LoadScene("Fade" + destination);
});
}
}

変数のfadeとfadeTimeは、Inspectorで設定します。
SceneTransition関数は、ボタンから呼び出しています。
引数destinationは、ボタンにスクリプトを割り当てた所で設定します。

以上が動作確認の追記となります。
トランジションの参考にしていただければ幸いでっす。

この記事へのコメント

  • 通りすがり

    テラシュールブログさんの「FadeCamera2」
    を絡めてシーンチェンジするときに悪戦苦闘していました。
    なかなか情報が見当たらず、困っていたところ、こちらにページにたどり着き、無事解決できました!
    助かりました!
    2019年09月24日 13:37
  • Kero

    コメントありがとうございますm(_ _)m

    シーン遷移後のフェードインは悪戦苦闘しました。
    たまたま出来たので再現しようとしたら失敗続きで
    2時間半くらい格闘しました(;^_^AA

    記事がお役に立てて何よりでっす。
    今後ともよろしくお願いいたします。
    2019年09月24日 15:49
  • 詰まってます・・・
    タイトルとゲーム終了時のフェードアウトが仕事してくれなくて、なにも見えない状態でタイトルが開始されてしまいます・・・解決策などあったら教えて下さい。
    2022年02月12日 05:55
  • kero

    返信が遅くなって申し訳ないです。_(._.)_ ユルシテ
    機能しないとの事ですが、Unityのバージョンが違っても機能しない事もあるので、
    2020.2.3f1のバージョンで機能するか検証してみます。
    暫くお待ち下さい。
    2022年02月14日 12:43
  • kero

    動作確認しました。
    追記にてまとめたので読んでみてください。

    追記内容で対応できた場合は、コメント頂けると幸いです。
    もし上手くいかないようでしたら、詳しい内容が知りたいので、
    内容をメールして頂ければ、一緒に対処方法を考えてみようと思います。
    kerotanfactory@gmail.com
    2022年02月14日 23:54
  • sin

    自分も色々困っていました。
    うまくいったと思っていたらいつの間にか動作しなかったり、WindowsのUnityEditorではうまくいってたのにAndoroidだとうまくいかなかったり。。。
    うまくいかないと言うのはcutoutRangeが0で止まっていたりcutoutRangeが1で止まっていたりしました。
    よくわかりませんが、FadeCanvasを作り直したりcutoutRangeをいじっているといつの間にか直っていました。
    でも、また壊れるかも。。。
    記事に書いてあった「階層を3段目」と言うのは何か意味があるのでしょうか?
    自分はうまくいかなかった時に階層を3段目をしてみたのですがやっぱりうまくいかず、何かイジっているうちに直りました。
    Unity2020.3.25で作成しています。
    何かヒントになる事がわかったら教えて下さい。
    2022年04月17日 04:01
  • Kero

    sinさん、コメントありがとうございます。
    返信が遅くなって申し訳ないです。

    Android実装で機能しなくなると悩みますね(;´・ω・)
    復旧できて何よりです。

    質問の”階層3”についてですが、
    検証記事を書く為に新規プロジェクトを立ち上げて、
    実際に組んだ所、すんなりと機能してくれました。

    ただ、記事用のスクショを撮ってなかったので、
    FadeCanvasを削除したりする内に、全然機能しなくなりました。

    何度かFadeCanvasを作り直しても機能しないので、
    Scene事、作り直したり。

    繰り返してる内に階層を変えると機能する事に気が付いて、
    記事にまとめた内容になります。

    どうも、Scene毎で機能する階層があるようです。
    原因は分かってないです。(ToT)>゛スンマセン

    これに関連するかは分からないのですが、

    Qiita
    Unity FadeCamera2のUIトランジションの不具合修正
    https://qiita.com/Brain-SugarEqualMe/items/a07efb60eddb4ed01e9d

    テクスチャーの不具合対策がまとめられています。
    この当りが原因になってるかもしれないので、
    一読されてみると良いかと思います。

    ケロは勉強不足で読めませんでした(;^_^A
    何かの参考になれば幸いです。

    もし原因等わかりましたらコメント頂けるとうれしいです。
    2022年04月20日 15:59
  • sin

    わかりました。
    自分も勉強します。
    2022年04月20日 16:20
  • sin

    『FadeCamera2』が不安定でした。
    Windowsでは良かったのにAndoridでは止まってしまいました。
    よくわからないなと思って色々試していた所、動く様になりました。
    それはスクリプトの順番を設定しました。
    メニューバーから、Edit > Project Settings を開き、サイドバーから「Script Execution Order」を選択します。
    自分はタイトルシーン、ゲームシーンを作成しており、そこで
    Fade -60
    TitleScript -40
    GameScript -30
    と設定した所、動きました。
    Unityのスクリプトは順番が決まっていないらしいです。
    今までたまたま順番通りに動いていたのだけど、それが何かの拍子で狂ってしまったのかもしれません。
    「Script Execution Order」を設定する事により決まった順番になって動いたのだと思います。
    もしかしたら違うかもしれませんが参考になったら幸いです。
    2022年09月03日 10:25
  • kero

    sinさんお久しぶりです。
    かなり貴重な情報有難うございます。

    たしかにスクリプトが多いと実行順は効果ありそうですね。
    実際に効果を確認されてるようなので、たいへん貴重な情報でありがたいです。こちらでも検証してみようと思います。

    このページに訪れる方の参考にもなると思うので、
    コメント頂き感謝しております。

    実行順で、お!となったのが、
    Fadeを最後に読み込む部分ですね。
    最初に読み込む必要があると勘違いしておりました。
    この情報は大きいです。
    2022年09月03日 15:14
  • sin

    あと、
    yield return null;
    fade.FadeOut(2, () =>
    {
    //フェードアウト後の処理
    });
    この様にしました。
    色々、やっていて何が良いのかわかりませんが、自分は最終的にこの様になっています。
    もし、うまくいかなかったら試した方が良いかもしれません。
    2022年09月04日 20:17
  • sin

    『FadeCamera2』ではないのですが、オブジェクトの名前を変更しようとしました。
    GameObject.name = "abc";
    と。
    ですが、何故か変更出来ませんでした。
    テストのプロジェクトを作成してやってみた所、問題なく変更出来ました。
    そこで
    yield return null;
    を入れてみたら変更出来ました。
    ですので、困ったら
    yield return null;
    なのかと思って来ています。
    Unityは難しいですね。
    2022年09月04日 20:23
  • kero

    yield return null を入れると言う事は、コルーチンを使うと考えればいいでしょうか。

    正直、勉強不足でyield return ってコルーチンにしか対応してないと思っていました。

    コルーチンなら、1フレーム待機させてから次の処理に進むと認識しているので、同じ効果があるって事ですかね。
    2022年09月05日 03:29