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をクリックします。

Windows10でクリックするとDLメッセージが画面下に表示されます。
win7や8でも同じかと思います。
ファイルを開くを押すと

セキュリティ画面が開くので”許可する”をクリックすると

Unity上にインポート画面が表示されるのでImportします。

インポートができるとAssetにFadeフォルダが追加されると思います。
このフォルダ内のFadeCanvasのプレハブをSceneに追加するだけで
フェードが使える優れものでっす。
続いて、トランジション用のルール画像を入手します。
For Youさんが公開されている
ルール画像
ここから一括ダウンロード(16:9)をDLして解凍します。
解凍が終わると画像データが収録されているので
好きな画像をUnityにインポートします。
今回は083の画像を使ってみます。
ルール画像は、そのままでは適用されないのでUnity上で設定します。
ここからの設定は2Dメインなので3Dには対応していません。
まずインポートした083画像のInspectorを表示します。

textureTypeをSingleChannel
AlphaSourceをFromGrayScale
AlphaIsTransparencyにチェックを入れる
三つの設定ができたらApplyで設定を反映します。
これで画像の準備ができたので、
FadeCameraの準備に移ります。
Fadeフォルダ内のFadeCanvasをクリックしてInspector表示します。

FadeImage(Script)があるので、ここの3項目をイジリます。
collarは、お好みの色でOKです。
MaskTextureは、先ほどの083画像をアタッチします。
最後に重要なのですが、CutoutRangeの値を1にします。
これが1になってないとフェードインの時に悩む事になります。
FadeCanvasプレハブの準備ができたので、
このプレハブをSceneにアタッチします。

エディターの準備ができたのでスクリプトを修正していきます。
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スクリプトを修正します。

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を見ると

追加した変数が表示されているのでチェックを入れます。
セレクトシーンのスクリプトを修正します。
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オブジェクトを配置

最後にFadeCanvasの複製を作成しました。
Fade1は、シーン開始時にトランジションは問題なく働いたのですが、
Fade2は、働いてくれませんでした。

最終的に階層を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は、ボタンにスクリプトを割り当てた所で設定します。
以上が動作確認の追記となります。
トランジションの参考にしていただければ幸いでっす。
この記事へのコメント
通りすがり
を絡めてシーンチェンジするときに悪戦苦闘していました。
なかなか情報が見当たらず、困っていたところ、こちらにページにたどり着き、無事解決できました!
助かりました!
Kero
シーン遷移後のフェードインは悪戦苦闘しました。
たまたま出来たので再現しようとしたら失敗続きで
2時間半くらい格闘しました(;^_^AA
記事がお役に立てて何よりでっす。
今後ともよろしくお願いいたします。
タイトルとゲーム終了時のフェードアウトが仕事してくれなくて、なにも見えない状態でタイトルが開始されてしまいます・・・解決策などあったら教えて下さい。
kero
機能しないとの事ですが、Unityのバージョンが違っても機能しない事もあるので、
2020.2.3f1のバージョンで機能するか検証してみます。
暫くお待ち下さい。
kero
追記にてまとめたので読んでみてください。
追記内容で対応できた場合は、コメント頂けると幸いです。
もし上手くいかないようでしたら、詳しい内容が知りたいので、
内容をメールして頂ければ、一緒に対処方法を考えてみようと思います。
kerotanfactory@gmail.com
sin
うまくいったと思っていたらいつの間にか動作しなかったり、WindowsのUnityEditorではうまくいってたのにAndoroidだとうまくいかなかったり。。。
うまくいかないと言うのはcutoutRangeが0で止まっていたりcutoutRangeが1で止まっていたりしました。
よくわかりませんが、FadeCanvasを作り直したりcutoutRangeをいじっているといつの間にか直っていました。
でも、また壊れるかも。。。
記事に書いてあった「階層を3段目」と言うのは何か意味があるのでしょうか?
自分はうまくいかなかった時に階層を3段目をしてみたのですがやっぱりうまくいかず、何かイジっているうちに直りました。
Unity2020.3.25で作成しています。
何かヒントになる事がわかったら教えて下さい。
Kero
返信が遅くなって申し訳ないです。
Android実装で機能しなくなると悩みますね(;´・ω・)
復旧できて何よりです。
質問の”階層3”についてですが、
検証記事を書く為に新規プロジェクトを立ち上げて、
実際に組んだ所、すんなりと機能してくれました。
ただ、記事用のスクショを撮ってなかったので、
FadeCanvasを削除したりする内に、全然機能しなくなりました。
何度かFadeCanvasを作り直しても機能しないので、
Scene事、作り直したり。
繰り返してる内に階層を変えると機能する事に気が付いて、
記事にまとめた内容になります。
どうも、Scene毎で機能する階層があるようです。
原因は分かってないです。(ToT)>゛スンマセン
これに関連するかは分からないのですが、
Qiita
Unity FadeCamera2のUIトランジションの不具合修正
https://qiita.com/Brain-SugarEqualMe/items/a07efb60eddb4ed01e9d
テクスチャーの不具合対策がまとめられています。
この当りが原因になってるかもしれないので、
一読されてみると良いかと思います。
ケロは勉強不足で読めませんでした(;^_^A
何かの参考になれば幸いです。
もし原因等わかりましたらコメント頂けるとうれしいです。
sin
自分も勉強します。
sin
Windowsでは良かったのにAndoridでは止まってしまいました。
よくわからないなと思って色々試していた所、動く様になりました。
それはスクリプトの順番を設定しました。
メニューバーから、Edit > Project Settings を開き、サイドバーから「Script Execution Order」を選択します。
自分はタイトルシーン、ゲームシーンを作成しており、そこで
Fade -60
TitleScript -40
GameScript -30
と設定した所、動きました。
Unityのスクリプトは順番が決まっていないらしいです。
今までたまたま順番通りに動いていたのだけど、それが何かの拍子で狂ってしまったのかもしれません。
「Script Execution Order」を設定する事により決まった順番になって動いたのだと思います。
もしかしたら違うかもしれませんが参考になったら幸いです。
kero
かなり貴重な情報有難うございます。
たしかにスクリプトが多いと実行順は効果ありそうですね。
実際に効果を確認されてるようなので、たいへん貴重な情報でありがたいです。こちらでも検証してみようと思います。
このページに訪れる方の参考にもなると思うので、
コメント頂き感謝しております。
実行順で、お!となったのが、
Fadeを最後に読み込む部分ですね。
最初に読み込む必要があると勘違いしておりました。
この情報は大きいです。
sin
yield return null;
fade.FadeOut(2, () =>
{
//フェードアウト後の処理
});
この様にしました。
色々、やっていて何が良いのかわかりませんが、自分は最終的にこの様になっています。
もし、うまくいかなかったら試した方が良いかもしれません。
sin
GameObject.name = "abc";
と。
ですが、何故か変更出来ませんでした。
テストのプロジェクトを作成してやってみた所、問題なく変更出来ました。
そこで
yield return null;
を入れてみたら変更出来ました。
ですので、困ったら
yield return null;
なのかと思って来ています。
Unityは難しいですね。
kero
正直、勉強不足でyield return ってコルーチンにしか対応してないと思っていました。
コルーチンなら、1フレーム待機させてから次の処理に進むと認識しているので、同じ効果があるって事ですかね。