Unity Fade in/out 이미지의 투명도(알파값)을 조절해 서서히 흐려지게/밝아지게 하기

(본 글은 프로젝트 중 공부했던 내용을 개인적으로 기록하기 위한 용도입니다.)

 

 

 

이미지의 알파값에 접근해 투명도에 접근할 수 있다.

이를 활용해 서서히 흐려지거나 뚜렷하게 만드는 페이드 인/아웃 효과를 줄 수 있다.

 

이번 프로젝트에서는

1. 플레이어가 죽을때 화면이 서서히 어두워지게 하기 
2. 몬스터가 남아있다는 안내 글자를 띄우고 서서히 없어지게 하기

이렇게 두 군데에서 이 효과를 적용했다.

 

<1>

페이드인

플레이어가 죽을때 화면이 서서히 어두워지게 하기 

 

검정 이미지를 비활성화 해 불러와서 a값을 미리 0으로 설정해둔다.

이후 플레이어가 죽을 때 검정 이미지를 활성화 시키고 코루틴을 활용해 a값을 서서히 0에서 1로 만들어준다.

부활할 때 다시 a값을 0으로 바꿔 투명하게 하고 이미지를 비활성화한다.

IEnumerator BlackOut()  //페이드인
    {
        
        blackOut.gameObject.SetActive(true);    //검정 이미지 활성화
        Color color = blackOut.color;

        while (color.a<1f)
        {
            color.a += Time.deltaTime / 1.5f;   //1.5초동안 실행
            blackOut.color = color;
            yield return null;
        }

        GameManager.Instance.Life--;
        yield return new WaitForSeconds(1.5f);
        color.a = 0;                            //부활 - 컬러 다시 투명해지게 초기화
        blackOut.color = color;                 
        blackOut.gameObject.SetActive(false);   //이미지 비활성화
        
        
    }

(점점 어두워지지만 실제로는 이미지의 투명도를 0에서 1로 바꿔주기 때문에 페이드 아웃이 아닌 인 이다.)

 

 

<2>

페이드아웃

몬스터가 남아있다는 안내 글자를 띄우고 서서히 없어지게 하기

public void MonsterLeftUI()
    {
        if(GameManager.Instance.isMonsterLeft)
        {
            monsterLeftPopUp.gameObject.SetActive(true); //이미지 활성화
            StartCoroutine(MonsterLeftFadeOutCo());
        }
    }

    IEnumerator MonsterLeftFadeOutCo()   //페이드아웃
    {
        Color color = monsterLeftPopUp.color;   //텍스트 컬러에 접근
        while (color.a >0 )
        {
            color.a -= Time.deltaTime / 3f;     //3초동안 실행
            monsterLeftPopUp.color = color;
            yield return null;
        }


        color.a = 1;        //비활성화 직전에 알파값 초기화
        monsterLeftPopUp.color = color;
        monsterLeftPopUp.gameObject.SetActive(false);   //비활성화
        GameManager.Instance.isMonsterLeft = false;
    }

특정 상황에서 텍스트를 활성화시키고 

점점투명하게 하는 페이드아웃 코루틴을 발생시킨다.

비활성화 직전에 알파값을 초기화 해준다.