유니티 Scene 상에서 Fade In&Fade Out 연출효과 구현하기(+ 메타 퀘스트 VR 환경에서 FI/FO 구현)

Fade In & Fade Out 연출효과

영화 연출효과 중 하나인 Fade in/out 효과를 구현해보려고 한다.

- Fade in : 광량을 점차 늘려 화면이 나타나게 하는 기법

- Fade out : 광량을 점차 줄요 화면이 사라지게 하는 기법

- Desolve : Fade out 하면서 화면이 사라지는 동시에 Fade in하는 화면이 나타나게 하는 기법

기본적인 세팅은 UI - Image 생성 후 AnchorPresets을 Stretch/Stretch로 바꾼 후 Color을 black로 설정해 주었다.

 

유니티 환경에서 FI/FO 코드 구현하기

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

public class FadeIntest : MonoBehaviour
{
    Image TestImage;
    Color tmpColor;
    void Start()
    {
        tmpColor = Color.black;
        tmpColor.a = 1f;  //255값
        TestImage = GetComponent<Image>();
        TestImage.color = tmpColor;
    }
    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            tmpColor.a -= 0.01f;
            TestImage.color = tmpColor;
        }
    }
}

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

public class FadeOuttest : MonoBehaviour
{
    Image TestImage;
    Color tmpColor;
    void Start()
    {
        tmpColor = Color.black;
        tmpColor.a = 0f;
        TestImage = GetComponent<Image>();
        TestImage.color = tmpColor;
    }
    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            tmpColor.a += 0.1f;
            TestImage.color = tmpColor;
        }
    }
}

Image에 매핑한 Fade in/out 스크립트이다. RGB 0~255(1)값임을 바탕으로 Color의 알파값(a)가 0(흰색)인 경우 +0.01f씩 어두워지게, 반대로 1(검정색)인 경우 -0.01f씩 밝아지게 했다. 플레이 모드에서 왼쪽 마우스를 클릭하면 다음 효과가 발생하게 된다.

 

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

public class fadeinout : MonoBehaviour
{

	public Image fadeOutUIImage;
	public float fadeSpeed =1f;

	bool FadeDir;      // true -> Alpha = 1  , false -> Alpha = 0	

    private void Start()
    {
		FadeDir = true;
    }

    private void Update()
    {
        if(Input.GetMouseButtonDown(0))
        {
			FadeDir = false;
			StartCoroutine(Fade(FadeDir));
		}
		if (Input.GetMouseButtonDown(1))
		{
			FadeDir = true;
			StartCoroutine(Fade(FadeDir));
		}
	}

    private IEnumerator Fade(bool FDir)
	{
		float alpha = (FDir) ? 1 : 0;
		float fadeEndValue = (FDir) ? 0 : 1;
		if (FDir)
		{
			while (alpha >= fadeEndValue)
			{
				SetColorImage(ref alpha, FDir);
				yield return null;
			}
			fadeOutUIImage.enabled = false;
		}
		else
		{
			fadeOutUIImage.enabled = true;
			while (alpha <= fadeEndValue)
			{
				SetColorImage(ref alpha, FDir);
				yield return null;
			}
		}
	}

	private void SetColorImage(ref float alpha, bool FDir)
	{
		fadeOutUIImage.color = new Color(fadeOutUIImage.color.r, fadeOutUIImage.color.g, fadeOutUIImage.color.b, alpha);
		alpha += Time.deltaTime * (1.0f / fadeSpeed) * ((FDir) ? -1 : 1);
	}	
}

오른쪽 마우스를 클릭하면 Fade in, 왼쪽 마우스를 한 번만 클릭하면 Fade Out이 자동으로 설정되도록 하는 코드를 작성했다.

 

 

유니티 VR 환경에서 FI/FO 코드 구현하기

OCULUS를 사용해 VR환경에서 Fade in/out을 구현하는 방법도 유사하다

OCULUS Integration을 임포트하면 기본적으로 OVRScreenFade 스크립트가 추가된다. 

하지만 OVRCameraRig를 가져오면 CenterEyeAnchor에 OVRScreenFade가 없으니, OVRPlayerController를 가져와서 확인해주면 된다. (OVRCameraRig에 OVRScreenFade 스크립트를 연결해줘도 된다.)

 

Create Empty를 생성하고 FadeControl로 바꾼 뒤 OVRFadeinout 스크립트를 연결해주고 Center Eye Obj를 매핑해주기만 하면 된다. 마우스 왼쪽/오른쪽 클릭을 하면 VR환경에서 FI/FO 효과가 연출된다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using OVR;

public class OVRFadeinout : MonoBehaviour
{
    public GameObject CenterEyeObj;
    OVRScreenFade OFade;
    void Start()
    {
        OFade = CenterEyeObj.transform.GetComponent<OVRScreenFade>();
        //OVRScreenFade 스크립트도 컴포넌트로 가져온다
    }

    void Update()
    {
        if(Input.GetMouseButtonDown(0))
        {
            OFade.FadeOut();
        }
        if (Input.GetMouseButtonDown(1))
        {
            OFade.FadeIn();
        }
    }
}