유니티 페이드인 페이드아웃 효과 ( FadeIn FadeOut Effect)

 

1. 페이드인 페이드아웃 효과 (FadeIn FadeOut Effect)

게임이나 앱은 화면 전환이 빈번하게 발생한다. 또한, 설계에 따라 던전 진입, 필드 이동과 같이 위치를 변경하기도 한다. 이러한 경우에 페이드인 페이드아웃 효과를 주어 화면 전환 과정에서 발생하는 부자연스러운 부분을 보이지 않도록 할 수 있다.

페이드인 페이드아웃 효과는 화면 전환이 자연스럽게 보이도록 하는 효과이다.

• 페이드인은 검은색이나 흰색화면에서 화면이 서서히 보이게하는 효과이다.
• 페이드아웃은 검은색이나 흰색으로 화면이 서서히 사라지게하는 효과이다.

반응형

2. 입력 차단

게임이나 앱은 화면 전환이 이루어지는 과정에서 추가적인 입력이 발생하지 않도록 사용자의 입력을 차단해 주어야 한다. 추가적인 입력이 발생하면 예기치 않은 오류가 발생할 수 있기 때문이다. 입력을 차단하는 방법은 다양하다. 본 글에서는 캔버스와 그래픽레이캐스터를 사용한다. 

 

2.1 캔버스 ( Canvas )

캔버스( Canvas )는 버튼( Button ), 텍스트( Text )와 같은 UI 요소들을 배치하기 위한 컴포넌트이다. 모든 UI 요소는 반드시 캔버스 상에 존재해야 한다 [1]. 캔버스는 씬에 여러 개 존재할 수 있다. 그리고 캔버스의 Sort Order는 캔버스를 렌더링 하는 순서이다. Sort Order의 값이 높을수록 다른 캔버스 위에 렌더링 한다. 캔버스의 Sort Order의 값을 변경해 씬에 존재하는 UI의 오브젝트를 포함하는 모든 오브젝트가 보이지 않도록 이미지를 사용하여 차단한다. 

 

Canvas Sort order

 

2.2 그래픽레이캐스터( GraphicRaycaster )

그래픽레이캐스터는 캔버스에 레이캐스트를 하는데 사용하는 컴포넌트이다 [2]. 그래픽레이캐스터가 없다면 캔버스의 하위 요소들은 레이캐스팅을 하지 않는다. 그래픽레이캐스터를 사용하여 캔버스에서 모든 입력을 받아 아무 효과도 발생하지 않도록 차단한다.

 

Graphic Raycaster

 

 

728x90

3. 페이드인 (FadeIn), 페이드아웃(FadeOut) 구현

이미지 컴포넌트의 컬러 값을 수정하여 페이드인 페이드아웃 효과를 구현한다.

페이드인 페이드아웃 효과가 시작되면 이미지와 그래픽레이캐스터를 활성화하여 이벤트 발생 및 모든 오브젝트를 차단한다.  WaitForEndOfFrame은 Update와 같은 모든 이벤트 함수들이 실행된 이후에 실행된다 [3].  WaitForEndOfFrame 코루틴을 사용하여 프레임 업데이트를 마친 후 페이드인 페이드아웃 효과가 발생하도록 한다.

 

UIFadeInOutAnimation

 

3.1 페이드인 (FadeIn)

이미지의 컬러 값을 변경한다. 컬러의 알파 값을 서서히 감소시킨다. 

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

public class UIFadeInOutAnimation : MonoBehaviour
{
   public GraphicRaycaster graphicRaycaster;
   public Image animationImage;
   public float animationSpeed = 1.0f;
   Color baseColor;
   
   WaitForSeconds waitForSeconds = new WaitForSeconds(0.5f);
   WaitForEndOfFrame waitForEndOfFrame = new WaitForEndOfFrame();
   // Awake is called
   void Awake()
   {
      Init();
   }
   
   void Init()
   {
      graphicRaycaster.enabled = false;
      animationImage.enabled = false;
      baseColor = animationImage.color;      
   }
   
   public IEnumerator FadeIn()
   {
      float alphaValue = 1.0f;
      graphicRaycaster.enabled = true;
      animationImage.color = new Color(baseColor.r, baseColor.g, baseColor.b, alphaValue);
      animationImage.enabled = true;
      
      yield return waitForSeconds;
      
      while(alphaValue > 0)
      {
         yield return waitForEndOfFrame;
         alphaValue -= Time.deltaTime * animationSpeed;
         animationImage.color = new Color(baseColor.r, baseColor.g, baseColor.b, alphaValue);
      }
      graphicRaycaster.enabled = false;
      animationImage.enabled = false;
   }
}

 

3.2 페이드 아웃(FadeOut)

이미지의 컬러 값을 변경한다. 컬러의 알파 값을 서서히 증가시킨다. 

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

public class UIFadeInOutAnimation : MonoBehaviour
{
   public GraphicRaycaster graphicRaycaster;
   public Image animationImage;
   public float animationSpeed = 1.0f;
   Color baseColor;
   
   WaitForSeconds waitForSeconds = new WaitForSeconds(0.5f);
   WaitForEndOfFrame waitForEndOfFrame = new WaitForEndOfFrame();
   // Awake is called
   void Awake()
   {
      Init();
   }
   
   void Init()
   {
      graphicRaycaster.enabled = false;
      animationImage.enabled = false;
      baseColor = animationImage.color;      
   }
   
   public IEnumerator FadeOut()
   {
      float alphaValue = 0.0f;
      graphicRaycaster.enabled = true;
      animationImage.color = new Color(baseColor.r, baseColor.g, baseColor.b, alphaValue);
      animationImage.enabled = true;
      
      yield return waitForSeconds;
      
      while( 1.0f > alphaValue )
      {
         yield return waitForEndOfFrame;
         alphaValue += Time.deltaTime * animationSpeed;
         animationImage.color = new Color(baseColor.r, baseColor.g, baseColor.b, alphaValue);
      } 
   }
}

 

 

References

[1] UICanvas

https://docs.unity3d.com/kr/530/Manual/UICanvas.html

[2] GraphicRaycaster

https://docs.unity3d.com/kr/2019.4/Manual/script-GraphicRaycaster.html

[3] ExecutionOrder

https://docs.unity3d.com/kr/2023.2/Manual/ExecutionOrder.html