[Unity][3D-Game] Tower Defense Game (22)

• preview Link : https://velog.io/@suhan0304/Unity3D-Game-Tower-Defense-Game-21
• gitHub Link : https://github.com/suhan0304/TowerDefenseTutorial

---

강의영상 (24)

---

개발

FADING UI

Fading 효과를 원할 때마다 켜고 끌 수 있는 애니메이션 효과를 지닌 UI를 하나 만들어준다. 그 다음에 Image를 자식 오브젝트로 추가해준 후에 앵커를 전체 화면 꽉 차게 설정해준다.

그 다음에 색을 검정색으로 설정한 후에 alpha를 0으로 설정해서 투명하게 해준다.

그 다음에 Canvas의 Graphic Raycaster를 제거해준다. 그래야만 캔버스가 화면을 차지하고 있어도 정상적으로 클릭이 작동한다.

FADING 스크립트

이제 Scene Fader라는 빈 오브젝트를 만들어준 후에 위에서 만든 Canvas를 자식으로 넣어준 후에 Scene Fader 스크립트에 페이드 효과를 구현한다.

SceneFader.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;
using UnityEditor.SearchService;

public class SceneFader : MonoBehaviour
{
    public Image img;
    public AnimationCurve curve;

    private void Start() //시작 시에 자동으로 FadeIn 효과 한번 실행
    {
        StartCoroutine(FadeIn());
    }

    public void FadeTo(string scene) //특정 씬으로 넘어가는 함수
    {
        StartCoroutine(FadeOut(scene));

    }
    IEnumerator FadeIn()
    {
        float t = 1f;

        while (t > 0f)
        {
            t -= Time.deltaTime; //t를 프레임 단위 시간만큼 감소 
            float a = curve.Evaluate(t);
            img.color = new Color(0f, 0f, 0f, a); //투명도를 a로 설정 (투명도가 animationCurve를 따라 감소)
            yield return 0; //다음 프레임으로 넘어감
        }
    }
    IEnumerator FadeOut(string scene) //FadeIn 반대로 설정
    {
        float t = 0f;

        while (t < 1f)
        {
            t += Time.deltaTime;
            float a = curve.Evaluate(t);
            img.color = new Color(0f, 0f, 0f, a); 
            yield return 0;
        }

        SceneManager.LoadScene(scene);
    }
}

AnimationCurve : 입력 값에 따른 변수의 변화를 그래프로 나타내고 설정할 수 있다. 아래 사진과 같이 그래프를 설정한 다음에 curve.Evaluate(입력)을 호출하면 해당 입력에 따른 출력 값이 나오는 것을 확인할 수 있다.

FADING 효과 적용

이제 SceneFader를 프리팹화 해준 후에 MainMenu에도 해당 프리팹을 추가해준다.

이제 기존의 스크립트에서 Scene을 Load 하는 장면을 FadeTo 함수로 수정해준다.

MainMenu

public SceneFader sceneFader;

public void Play()
{
    sceneFader.FadeTo(levelToLoad);
}

인스펙터에서 sceneFader에 SceneFader 오브젝트를 드래그드랍해서 초기화해준다. PauseMenu와 GameOver에도 해당 Fade 효과를 위와 동일한 방식으로 적용시켜준다.

PauseMenu.cs

public string menuSceneName = "MainMenu";
public SceneFader sceneFader;

public void Retry()
{
    Toggle();
    sceneFader.FadeTo(SceneManager.GetActiveScene().name); //현재 실행중인 Scene을 재로드
}

public void Menu()
{
    Toggle();
    sceneFader.FadeTo(menuSceneName);
}

GameOver.cs

public string menuSceneName = "MainMenu";
public SceneFader sceneFader;

public void Retry()
{
	sceneFader.FadeTo(SceneManager.GetActiveScene().name); //현재 실행중인 Scene을 재로드
}

public void Menu()
{
    sceneFader.FadeTo(menuSceneName);
}

이제 인스펙터에서 SceneFader 오브젝트를 드래그드랍해서 초기화해준다.

---

결과물