3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Unity始めた頃の自分に教えたい ゲーム開発のテクニック【スタジオしまづ 】Advent Calendar 2021

Day 15

もしかしてシーン切り替え時にフェードしたいのかい?

Last updated at Posted at 2021-12-01

#はじめに
今回は良ゲームにフェードアリということでフェードインフェードアウトのやり方を何種類か紹介しようと思います。
(今回も含めてですが、Qiitaを使うのが久しぶりでかなり読みにくくなってるかも知れません。)
#目爺(目次)

1.コードを書いてやる
2.GitHubから落としてやる(一番楽)
3.おしゃれにフェードする(2番目に楽)

#1.コードを書いてやる
いきなりコード書くのかよって感じですけど、書きます。
まずフェードするために、UIからPanelを作成し、Imageのチェックボックスは外しておいてください。
できたらそのオブジェクトにスクリプトを作成して、適当に名前をつけておいてください。今回は「FadeManager」にしました。
できたら下のように記述すればOkです。
シーンを跨ぐにはここから少し改良が必要ですが基本的なフェードのやり方はこれでいけます。
Inにチェックを入れるとフェードインして、Outにチェックを入れるとフェードアウトします。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class FadeManager : MonoBehaviour
{
	float Speed = 0.02f;        //フェードするスピード
	float red, green, blue, alfa;   

	public bool Out = false;  
	public bool In = false;   

	Image fadeImage;                //パネル

	void Start()
	{
		fadeImage = GetComponent<Image>();
		red = fadeImage.color.r;
		green = fadeImage.color.g;
		blue = fadeImage.color.b;
		alfa = fadeImage.color.a;
	}

	void Update()
	{
		if (In)
		{
			FadeIn();
		}

		if (Out)
		{
			FadeOut();
		}
	}

	void FadeIn()
	{
		alfa -= Speed;                
		Alpha();                    
		if (alfa <= 0)
		{
			In = false;
			fadeImage.enabled = false;  
		}
	}

	void FadeOut()
	{
		fadeImage.enabled = true;  
		alfa += Speed;         
		Alpha();               
		if (alfa >= 1)
		{
			Out = false;
		}
	}

	void Alpha()
	{
		fadeImage.color = new Color(red, green, blue, alfa);
	}
}


#2.GitHubから落としてやる
コードを書くのがめんどくさい人は、GitHubから他の人が作成したものを流用するのが手っ取り早いと思います。
今回はおすすめのものを一つ紹介します。
UnityRoomで有名なnaichiさんが作成したフェードインフェードアウトを数行で実現するものです。
特殊なフェードはできないもののフェードするときの色などは変更可能でなんと言っても少ない数のコードで実行できるということです。詳しいライセンスはGitHubのところからご覧になってください。

GitHubURL:https://github.com/naichilab/Unity-FadeManager

change-fadecolor.gif
↑GitHubから引用

#3.おしゃれにフェードする
先ほど紹介した方法のフェードだと簡単だけど、おしゃれさが足りないという人向けのものです。
(※Sceneを跨いでのフェードは若干癖があって私は苦戦したので初心者の方などはあまりお勧めしないかもしれないです。。)
紹介するやつは同じように他の方が既に作成したものを流用する形で実装します。
ルール画像というものを使って自分の好きなようにフェードインフェードアウトすることができます。ルール画像はForYouさんから既存のものを落とすことができます。かなり種類が多いのでおすすめです。気に入ったものがない場合は既存のルール画像をもとに自分でお絵描きソフトなどで作成するのもいいと思います。(私はそれをしようとしましたがあまりうまくいきませんでしたw)
参考サイトからフェードようのunitypackageを落として自分のプロジェクトに追加してください。
参考サイト:https://tsubakit1.hateblo.jp/entry/2015/11/04/015355

20151104004515.gif
↑参考サイトから引用

こんな感じでめちゃくちゃルール画像があります。一括ダウンロードして気になったものを試していくのがいいと思います。
Screen Shot 2021-12-01 at 21.37.19.png

シーンを跨いでのフェードがうまくいかない方はこちら

#最後に
今回はフェードについてまとめてみました。私的にはおしゃれにやらないのであればnaichiさんのが一番いいと思います。
参考になれば嬉しいです!

3
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?