유니티) Fade(In,Out) 효과넣기(알파값 조절)

Fade(In,Out)

(fadeIn 효과)

위 그림처럼 게임 시작 시 알파값을 조절해 fadeIn 효과를 연출할 수 있다.

1) Image 생성

Canvas -> UI -> Image를 생성한 뒤 Color

까맣게 만들어 준다.

2) 스크립트 생성

public class FadeIn : MonoBehaviour

{

    public float FadeTime = 2f; // Fade효과 재생시간

    Image fadeImg;

    float start;

    float end;

    float time = 0f;

    bool isPlaying = false;

    void Awake()

    {

        fadeImg = GetComponent<Image>();

        InStartFadeAnim();

    }

    public void OutStartFadeAnim()

    {

        if(isPlaying == true) //중복재생방지

        {

            return;

        }

start = 1f;

         end = 0f;

        StartCoroutine("fadeoutplay");    //코루틴 실행

    }

public void InStartFadeAnim()

    {

        if (isPlaying == true) //중복재생방지

        {

            return;

        }

        StartCoroutine("fadeIntanim");

    }

    IEnumerator fadeoutplay()

    {

        isPlaying = true;

        Color fadecolor = fadeImg.color;

        time = 0f;

        color.a = Mathf.Lerp(start, end, time);

            while (fadecolor .a > 0f)

            {

                time += Time.deltaTime / FadeTime;

                fadecolor .a = Mathf.Lerp(start, end, time);

                fadeImg.color = fadecolor ;

                yield return null;

            }

            isPlaying = false;

    }

코드분석

while(color.a > 0f) {    } :  이미지 색상의 알파값이 0으로 가까워 질 수록 투명해짐(이미지 색상이 약해짐?)

time += Time.deltaTime / FadeTime; : 지정한 시간만큼 효과를 주기 위해 1초를 나눠줌

fadecolor.a = Math.Lerp(start, end, time); : start와 end 중간값을 리턴

yield return null; :  다음 프레임까지 대기

Math.Lerp(start, end, time);

선형 보간을 할때 사용.

시작과 끝을 알고 정해진 시간동안 진행되야될 경우에 사용 
0일경우 시작값을, 1일 경우 끝 값을 반환하는데,

0.4일경우 시작값 40%,끝 값 60%값을 반환해서 자연스러운 연출이 가능하다.

(매 프레임 마다 증가하는 time값과 감소하는 알파값을 Debug.log를 찍어봤다)

Math.Lerp를 사용하면 time값에 따라 0에서 1로 갈수록 점점 큰 약한 알파값을 반환함으로서 자연스럽게 연출이 가능해진다.

FadeOut

같은 코드로 start값과 end값 그리고 while조건문 값만 수정하면 연출이 가능하다.

이 블로그에 더 자세히 나와있음 : http://ronniej.sfuh.tk/%EC%BD%94%EB%A3%A8%ED%8B%B4coroutine%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-fade-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EB%A7%8C%EB%93%A4%EA%B8%B0/