유니티 Fade In Out 효과

 

 

Fade In Out을 만들었습니다.

Panel UI를 이용하였고 애니메이션의 color alpha 값 조정으로 구현하였습니다.

 

JustKnight/Assets/Scripts/GameManager.cs at main · znlsnel/JustKnight

 

Fade In Out은 항상 쓰이는 효과이기 때문에 Singleton으로 구현한 GameManager에서 관리하도록 하였습니다.

[SerializeField] GameObject _fadePanelPrefab;  
GameObject _fadeCanvas;
FadePanelManager _fadePanelManager;

void Start() 
{
    _fadeCanvas = Instantiate<GameObject>(_fadePanelPrefab);
    _fadePanelManager = _fadeCanvas.transform.Find("FadePanel").GetComponent<FadePanelManager>();
    DontDestroyOnLoad(_fadeCanvas); 
}

 

Fade In Out 효과가 쓰이는 곳은 Scene을 불러올 때, 그리고 그 이후입니다.

public void LoadScene(string sceneName)
{
    _fadePanelManager.PlayFadeOut();
    _fadePanelManager._onFadeOutComplete = null; 
    _fadePanelManager._onFadeOutComplete += () =>
    {
        SceneManager.LoadScene(sceneName);
        SceneManager.sceneLoaded += InitGameScene; 
    }; 
}

 

FadePanelManager로 Fade In Out 애니메이션을 실행시키고 

Scene을 불러오는 코드는 Event를 이용하여 Fade Out 애니메이션이 종료된 이후에 실행되게 만들었습니다.

 

private void InitGameScene(Scene scene, LoadSceneMode mode)
{
    GameObject gen = GameObject.FindWithTag("PlayerGenPos");
    gen.GetComponent<SpriteRenderer>().sortingOrder = -1; 

    if (_player == null)
    {
        _player = Instantiate<GameObject>(_playerPrefab);
        DontDestroyOnLoad(_player); 
    }
    _player.transform.position = gen.transform.position;
    _fadePanelManager.PlayFadeIn(); 
}

Scene이 불러와지면 PlayFadeIn 애니메이션을 실행하여 Fade In Out을 마무리합니다.

 

 

JustKnight/Assets/Scripts/FadePanelManager.cs at main · znlsnel/JustKnight

Fade In Out을 관리하는 Manager Script입니다.

 

Animator _anim;
public Action _onFadeOutComplete;
Canvas _canvas;

private void Awake() 
{

    _anim = GetComponent<Animator>();
    _canvas = GetComponentInParent<Canvas>();
}

animation과 Canvas를 가지고 있는 상태로 시작하게 하였습니다.

canvas를 가지고 있는 이유는 Fade In Out 애니메이션이 실행될때는 sortingOrder를 높게 설정하여

모든 UI 위에 있게 하고 종료될때 낮게 설정하여 다른 UI에 간섭이 없게 하기 위함입니다.

이 글을 쓰면서 생각해보니 애니메이션을 만드는 부분에서 설정해줄 수 도 있지 않을까 생각이 드네요...

 

public void PlayFadeIn()
{
    _anim.Play("FadeIn"); 
}

public void PlayFadeOut()
{
    _canvas.sortingOrder = 100;
    _anim.Play("FadeOut");
}

Fade Out이 실행될때 sortingOrder를 100으로 설정하여 모든 UI 위에 있게 해주었습니다. 

 

void AE_EndFadeIn()
{

    _anim.Play("Idle");
    _canvas.sortingOrder = -1; 
}

void AE_EndFadeOut()
{
    if (_onFadeOutComplete != null)
    {
        _onFadeOutComplete.Invoke();
        _onFadeOutComplete = null;
    }
}

 

Animation이 종료될 시점에 실행되는 Event 함수들입니다. 

EndFadeIn 함수에서 Play ("Idle")을 해주고 있는데 (아무 애니메이션이 없는 상태입니다.)

애니메이션이 종료될 때 0.01초 잠깐 다시 처음부터 실행되었다가 종료되는 문제가 있어서 그렇게 해주었습니다.

 

Fade Out 이 종료될 때 _onFadeOutcomplete Evnet를 실행시켜주는 로직을 만들어서

GameManager에서 람다로 세팅한 코드가 실행되게 하였습니다.