코루틴(Coroutine)을 이용한 Fade 애니메이션 만들기

코루틴(Coroutine)을 이용한 Fade 애니메이션 만들기

 

지난 강좌에서 유니티에서 UGUI를 이용해서 Fade 애니메이션을 구현하는 방법을 살펴봤습니다.
이번에는 코루틴(Coroutine)을 이용해서 Fade애니메이션을 구현하는 방법에 대해서 살펴보겠습니다.

이번 예제를 진행하면 아래 그림과 같이 버튼을 눌렀을 때 Fade Out 애니메이션이 재생되는 결과를 얻을 수 있습니다.

 

UI 배치

GameObject -> UI -> Button 메뉴를 선택해서 버튼을 생성합니다.
계층 뷰에서 Canvas 게임 오브젝트를 선택하고 아래 그림을 참고해서 Canvas Scaler 컴포넌트 항목을 설정합니다.

 

이어서 계층 뷰에서 새로 생성된 Button 게임 오브젝트를 선택하고 버튼의 크기를 설정합니다.
예제에서는 가로 300 세로 100으로 설정했습니다.

 

Button 게임 오브젝트의 자식 오브젝트로 생성된 Text 게임 오브젝트를 선택하고 Text 컴포넌트를 설정합니다.

 

이렇게 배치를 하고나면, 아래 그림과 같이 버튼이 화면 가운데에 배치된 것을 확인할 수 있습니다.

 

버튼 배치가 완료되면 GameObject -> UI -> Image 메뉴를 이용해서 이미지 UI를 생성합니다.
계층 뷰에서 생성된 Image 게임 오브젝트를 선택하고 이름을 Fade Out으로 변경한 다음 앵커를 설정합니다.

 

앵커를 설정한 다음 Fade Out 게임 오브젝트를 선택하고 아래 그림과 같이 Image 컴포넌트를 설정합니다

 

 

스크립트 작성

UI 배치가 완료되었습니다. 스크립트를 작성하고 예제를 완성해보겠습니다.
Create -> C# Script 메뉴를 선택해서 C# 스크립트를 생성하고 FadeOut으로 스크립트 이름을 지정합니다.
생성된 스크립트를 열고 아래 내용을 입력합니다.

using UnityEngine;  
using UnityEngine.UI;  
using System.Collections;  
  
namespace RonnieJ.Coroutine  
{  
    public class FadeOut : MonoBehaviour  
    {  
        public float animTime = 2f;         // Fade 애니메이션 재생 시간 (단위:초).  
  
        private Image fadeImage;            // UGUI의 Image컴포넌트 참조 변수.  
  
        private float start = 0f;           // Mathf.Lerp 메소드의 첫번째 값.  
        private float end = 1f;             // Mathf.Lerp 메소드의 두번째 값.  
        private float time = 0f;            // Mathf.Lerp 메소드의 시간 값.  
  
        private bool isPlaying = false;     // Fade 애니메이션의 중복 재생을 방지하기위해서 사용.  
  
        void Awake()  
        {  
            // Image 컴포넌트를 검색해서 참조 변수 값 설정.  
            fadeImage = GetComponent<Image>();  
        }  
  
        // Fade 애니메이션을 시작시키는 메소드.  
        public void StartFadeAnim()  
        {  
            // 애니메이션이 재생중이면 중복 재생되지 않도록 리턴 처리.  
            if (isPlaying == true)  
                return;  
  
            // Fade 애니메이션 재생.  
            StartCoroutine("PlayFadeOut");  
        }  
  
        // Fade 애니메이션 메소드.  
        IEnumerator PlayFadeOut()  
        {  
            // 애니메이션 재생중.  
            isPlaying = true;  
  
            // Image 컴포넌트의 색상 값 읽어오기.  
            Color color = fadeImage.color;  
            time = 0f;  
            color.a = Mathf.Lerp(start, end, time);  
  
            while (color.a < 1f)  
            {  
                // 경과 시간 계산.  
                // 2초(animTime)동안 재생될 수 있도록 animTime으로 나누기.  
                time += Time.deltaTime / animTime;  
  
                // 알파 값 계산.  
                color.a = Mathf.Lerp(start, end, time);  
                // 계산한 알파 값 다시 설정.  
                fadeImage.color = color;  
  
                yield return null;  
            }  
  
            // 애니메이션 재생 완료.  
            isPlaying = false;  
        }  
    }  
}

스크립트 생성이 완료되면, 계층 뷰에서 Fade Out 게임 오브젝트를 선택하고 위에서 생성한 FadeOut 스크립트를 컴포넌트로 추가합니다.

 

이제 버튼이 눌렸을 때 실행시킬 메소드를 연결하겠습니다.
계층 뷰에서 Button 게임 오브젝트를 선택하고 아래 그림을 참고해서 Button 컴포넌트를 설정합니다.

 

설정이 완료되었습니다. 유니티를 실행하고 Start Fade 버튼을 클릭해서 결과를 살펴봅니다.

 

버튼을 눌러보면 아래 그림과 같이 Fade Out 애니메이션이 재생되는 것을 확인할 수 있습니다.

 

Fade Out 애니메이션이 완성되었습니다.

Fade In 애니메이션은 FadeOut 애니메이션에서 조금만 내용을 수정하면 됩니다.
아래 스크립트는 FadeIn 애니메이션을 재생하는 스크립트입니다.
FadeOut 스크립트와 비교했을 때 start 변수에 1, end 변수에 0이 입력되었고, PlayFadeIn 메소드에서 while 루프의 조건이 수정되었습니다.

using UnityEngine;  
using UnityEngine.UI;  
using System.Collections;  
  
namespace RonnieJ.Coroutine  
{  
    public class FadeIn : MonoBehaviour  
    {  
        public float animTime = 2f;         // Fade 애니메이션 재생 시간 (단위:초).  
  
        private Image fadeImage;            // UGUI의 Image컴포넌트 참조 변수.  
  
        private float start = 1f;           // Mathf.Lerp 메소드의 첫번째 값.  
        private float end = 0f;             // Mathf.Lerp 메소드의 두번째 값.  
        private float time = 0f;            // Mathf.Lerp 메소드의 시간 값.  
  
        private bool isPlaying = false;     // Fade 애니메이션의 중복 재생을 방지하기위해서 사용.  
  
        void Awake()  
        {  
            // Image 컴포넌트를 검색해서 참조 변수 값 설정.  
            fadeImage = GetComponent<Image>();  
        }  
  
        // Fade 애니메이션을 시작시키는 메소드.  
        public void StartFadeAnim()  
        {  
            // 애니메이션이 재생중이면 중복 재생되지 않도록 리턴 처리.  
            if (isPlaying == true)  
                return;  
  
            // Fade 애니메이션 재생.  
            StartCoroutine("PlayFadeIn");  
        }  
  
        // Fade 애니메이션 메소드.  
        IEnumerator PlayFadeIn()  
        {  
            // 애니메이션 재생중.  
            isPlaying = true;  
  
            // Image 컴포넌트의 색상 값 읽어오기.  
            Color color = fadeImage.color;  
            time = 0f;  
            color.a = Mathf.Lerp(start, end, time);  
  
            while (color.a > 0f)  
            {  
                // 경과 시간 계산.  
                // 2초(animTime)동안 재생될 수 있도록 animTime으로 나누기.  
                time += Time.deltaTime / animTime;  
  
                // 알파 값 계산.  
                color.a = Mathf.Lerp(start, end, time);  
                // 계산한 알파 값 다시 설정.  
                fadeImage.color = color;  
  
                yield return null;  
            }  
  
            // 애니메이션 재생 완료.  
            isPlaying = false;  
        }  
    }  
}

 

위의 스크립트를  작성하고, 실행하면 아래 그림과 같이 Fade In 애니메이션을 재생할 수 있습니다.

 

내용 끝까지 읽어주셔서 감사합니다.

배너 클릭은 저에게 많은 힘이 됩니다.

감사합니다 🙂