[Unity_GUI] Canvas Fade In/Out

유니티 UGUI 의 CanvasGroup 컴포넌트의 Alpha 값을 조절하는 기능

 

프로젝트에서 캔버스와 패널을 생성한다.

 

인스팩터 창에서 Panel 에 Canvas Group 컴포넌트를 추가하여 준다.

 

Alpha값을 0으로 맞춰주고 Fade Time을 임의로 맞춰준다.

 

스크립트 작성

public class FadeController : MonoBehaviour
{
    private CanvasGroup cg;
    public float fadeTime = 1f; // 페이드 타임 
    float accumTime = 0f;
    private Coroutine fadeCor;

   private void Awake()
    {
        //여기의 Alpha 값을 조절
        cg = gameObject.GetComponent<CanvasGroup>(); // 캔버스 그룹
        StartFadeIn();
    }

   public void StartFadeIn() // 호출 함수 Fade In을 시작
    {
        if (fadeCor != null)
        {
            StopAllCoroutines();
            fadeCor = null;
        }
        fadeCor = StartCoroutine(FadeIn());
    }

   private IEnumerator FadeIn() // 코루틴을 통해 페이드 인 시간 조절
    {
        yield return new WaitForSeconds(0.2f);
        accumTime = 0f;
        while (accumTime < fadeTime) 
        {
            cg.alpha = Mathf.Lerp(0f, 1f, accumTime / fadeTime);
            yield return 0;
            accumTime += Time.deltaTime;
        }
        cg.alpha = 1f;

        StartCoroutine(FadeOut()); //일정시간 켜졌다 꺼지도록 Fade out 코루틴 호출

    }

    private IEnumerator FadeOut()
    {
        yield return new WaitForSeconds(3.0f);
        accumTime = 0f;
        while (accumTime < fadeTime)
        {
            cg.alpha = Mathf.Lerp(1f, 0f, accumTime / fadeTime);
            yield return 0;
            accumTime += Time.deltaTime;
        }
        cg.alpha = 0f;
    }
}

---

구현 결과

에러코드는 에디터와 관련한 내용이라 무시하여도 된다.

이렇게 페이드 인 후 페이드 아웃하는 기능을 만들어보았다.