Unity3D Fade 애니메이션 만들기

Unity3D Fade 애니메이션 만들기

 

유니티에서 Fade 애니메이션을 만드는 방법에 대해서 살펴보겠습니다.
Fade 애니메이션을 구현하는 여러 가지 방법이 있는데, 유니티에서 제공하는 UGUI와 Mathf.Lerp 메소드를 이용해서 구현해보겠습니다.

예제를 따라하시면 아래 그림과 같이 Fade In 애니메이션을 완성할 수 있습니다.

 

유니티 프로젝트를 열고 유니티 메뉴에서 GameObject -> UI -> Image 메뉴를 선택해서 이미지 UI를 생성합니다.
새로 생성한 Image 게임 오브젝트의 이름을 Fade In으로 변경하고 아래 그림과 같이 앵커를 설정합니다.

 

앵커 설정이 완료되면, Image 컴포넌트의 Color 항목을 원하는 색상으로 지정합니다.
그 다음, Create -> C# Script 메뉴를 선택해서 스크립트를 생성하고 FadeInTest라고 이름을 지정합니다.
새로 생성한 FadeInTest 스크립트를 열고 아래 내용을 입력합니다.

using UnityEngine;  
using UnityEngine.UI;  
using System.Collections;  
  
namespace RonnieJ  
{  
    public class FadeInTest : 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 메소드의 시간 값.  
  
        void Awake()  
        {  
            // Image 컴포넌트를 검색해서 참조 변수 값 설정.  
            fadeImage = GetComponent<Image>();  
        }  
  
        void Update()  
        {  
            // Fade 애니메이션 재생.  
            PlayFadeIn();  
        }  
  
        // Fade 애니메이션 함수.  
        void PlayFadeIn()  
        {  
            // 경과 시간 계산.  
            // 2초(animTime)동안 재생될 수 있도록 animTime으로 나누기.  
            time += Time.deltaTime / animTime;  
  
            // Image 컴포넌트의 색상 값 읽어오기.  
            Color color = fadeImage.color;  
            // 알파 값 계산.  
            color.a = Mathf.Lerp(start, end, time);  
            // 계산한 알파 값 다시 설정.  
            fadeImage.color = color;  
        }  
    }  
}

스크립트를 저장하고, Fade In 게임 오브젝트에 FadeInTest 컴포넌트를 추가합니다.

 

이제 유니티를 실행해서 결과를 확인해보면, 처음 봤던 실행 결과를 확인할 수 있습니다.

 

 

스크립트에서 start 변수를 0으로 설정하고, end를 1로 설정하면, FadeOut 애니메이션으로 변경이 가능합니다.

아래 FadeOutTest 스크립트는 내용을 살펴보면, FadeInTest 스크립트와 내용이 모두 동일하고 start변수와 end 변수의 값을 각각 0과 1로 설정한 부분만 다릅니다.

using UnityEngine;  
using UnityEngine.UI;  
using System.Collections;  
  
namespace RonnieJ  
{  
    public class FadeOutTest : 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 메소드의 시간 값.  
  
        void Awake()  
        {  
            // Image 컴포넌트를 검색해서 참조 변수 값 설정.  
            fadeImage = GetComponent<Image>();  
        }  
  
        void Update()  
        {  
            // Fade 애니메이션 재생.  
            PlayFadeOut();  
        }  
  
        // Fade 애니메이션 함수.  
        void PlayFadeOut()  
        {  
            // 경과 시간 계산.  
            // 2초(animTime)동안 재생될 수 있도록 animTime으로 나누기.  
            time += Time.deltaTime / animTime;  
  
            // Image 컴포넌트의 색상 값 읽어오기.  
            Color color = fadeImage.color;  
            // 알파 값 계산.  
            color.a = Mathf.Lerp(start, end, time);  
            // 계산한 알파 값 다시 설정.  
            fadeImage.color = color;  
        }  
    }  
}

 

Fade In 게임 오브젝트에 FadeOutTest 스크립트를 컴포넌트로 추가한 다음 실행해보면, 아래 그림과 같은 결과를 얻을 수 있습니다.

 

FadeOut 애니메이션이 재생되는 결과를 확인할 수 있습니다.

 

내용 끝까지 읽어주셔서 감사합니다.
배너 클릭은 저에게 많은 힘이 됩니다.
감사합니다 🙂

 

다음 강좌는 코루틴(Coroutine)을 활용한 Fade 애니메이션 강좌입니다.