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

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

 

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

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

fade out animation with coroutine

 

UI 배치

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

set parameters of canvas scaler

 

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

set-size-of-button

 

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

 set parameters of text component

 

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

game view

 

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

set anchor of fade out gameobject

 

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

set parameters of image component of fade out gameobject

 

 

스크립트 작성

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 스크립트를 컴포넌트로 추가합니다.

add fadeout component

 

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

set button component

 

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

play and check result

 

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

fade out animation with coroutine

 

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 애니메이션을 재생할 수 있습니다.

coroutine fade in test

 

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

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

감사합니다 🙂

RonnieJ

프리랜서 IT강사로 활동하고 있습니다. 게임 개발, 웹 개발, 1인 기업, 독서, 책쓰기에 관심이 많습니다.

4 Responses

  1. 김준석 말해보세요:

    너무 강좌 잘봤습니다. 그런데 제가 그대로 스크립트를 따라했는데. 게임을 실행시키면 처음부터 화면이 어두워져있어서. 버튼을 감으로 찾아야합니다; 올리신 GIF는 실행하고 바로 버튼이 보이는데 왜그런것인지요? 그리고 color.a 에서 a는 무었인가요? 너무 궁금합니다. 부탁드립니다. 감사합니다~~

    • RonnieJ 말해보세요:

      혹시 FadeOut 이미지 배치하실때 색상을 0, 0, 0, 0으로 설정 하는 부분을 빠뜨리진 않았나요?
      RBGA 에서 A (알파)값이 0으로 설정되야 화면이 보입니다. 그렇지 않으면 검정색으로 보일거에요.
      그리고 코드에서 color.a 에서 a 는 알파(Alpha) 값입니다. 이 값이 화면의 투명도를 담당하기 때문에 사용했습니다 🙂

      강좌가 유용했다면 배너 한번 눌러주세요~저에게 큰 힘이 됩니다 ㅎㅎ

  2. 진지한어레 말해보세요:

    감사합니다 배너꽝꽝누르고 갑니다

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다