[Unity] 캔버스 활성화 비활성화(FadeIn,FadeOut)

목차.

1. 개요
2. 본론
3. 결과

 

개요

 

앱에서 화면을 터치하면 다른 화면이 나오는 기능을 많이 사용합니다.

게임에서는 퀘스트창 열기 닫기, 아이템 정보 열기 닫기 ,옵션창 열기 닫기 등 캔버스나 캔버스 하위에 있는 UI를 활성화, 비활성화합니다.

 

 

저는 개발 중인 앱에 이 기능을 적용해 버튼을 누를 때마다 그에 맞는 페이지로 이동하도록 보겠습니다.

 

본론

 

1.  Hierarchy 창에서 Ui -> Canvas를 눌러 Canvas를 생성해 주고 생성한 Canvas의 하위에 Panel을 생성해 줍니다.

 

2. Add Component를 눌러 Canvas Group을 추가 그리고 기호에 맞게 버튼, 이미지, 텍스트 등을 배치해 줍니다

 

3. 하나의 캔버스만 이용하고 싶다면 그대로 이용하시면 되고 저처럼 여러 캔버스를 이용하고싶다면 생성한 Canvas를 선택하고 CTRL +D를 눌러 필요한 수만큼 복사해 줍니다.

 

4.Hierarchy창에서-> Create Empty -> 이름 : GameManager로 생성

 

5. Projects창에서 ->Create -> C# Script -> 이름 : GameManager.cs로 생성

 

6. 버튼을 눌렀을 때 캔버스를 제어해 줄 스크립트 Screen_Fade.cs 생성

 

GameManager.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameManager : MonoBehaviour
{
    public static GameManager instance = null;

    public Canvas screen0_canvas;
    public Canvas screen0_1_canvas;


    public CanvasGroup screen0;
    public CanvasGroup screen0_1;
  
 private void Awake()
    {
        if (instance == null)
            instance = this;
        else if (instance != null)
            Destroy(gameObject);

        DontDestroyOnLoad(gameObject);

        screen0.alpha = 1;
        screen0_canvas.enabled = true;

        screen0_1.alpha = 0;
        screen0_1_canvas.enabled = false;
   }

  public void Screen0_Active() {
        screen0.alpha = 1;
        screen0.interactable = true;
        screen0_canvas.enabled = true;
        screen0_1_canvas.enabled = false;
        screen1_canvas.enabled = false;
    }

 public void Screen0_1_Active() {
        screen0_1.alpha = 1;
        screen0_1.interactable = true;
        screen0_1_canvas.enabled = true;
        screen0_canvas.enabled = false;
        screen1_canvas.enabled = false;
        screen2_canvas_back01.enabled = false;

    }
}

 

위 코드는 가장 처음 할당해 둔 캔버스를 활성화하는 코드입니다.
게임 매니저가 아닌 다른 클래스에서 작성해도 무관합니다.

 

Screen_Fade.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Screen_Fade : MonoBehaviour
{
    public void Fade0_1()
    {
        StartCoroutine(Do0_1Fade());
    }
 	IEnumerator Do0_1Fade()
    {
        CanvasGroup canvasGroup = GetComponent<CanvasGroup>();
        while (canvasGroup.alpha > 0)
        {
            canvasGroup.alpha -= Time.deltaTime * 2;
            yield return null;

        }
        canvasGroup.interactable = false;
        yield return null;

        GameManager.instance.Screen0_1_Active();

    }
   
}

 

위 코드는 코루틴을 이용해 천천히 캔버스가 사라지는 효과를 주는 코드입니다.

 

GameManager 오브젝트에 GameManager 스크립트를,

그리고 사용할 캔버스에 Screen_Fade 스크립트를 적용시켜 줍니다

 

그리고 활성화, 비활성화시킬 오브젝트를 GameManger에 잘 할당시키고,

버튼을 눌렀을 때 Screen_Fade 함수가 호출되어야 하기 때문에 버튼의 OnClick() 이벤트에
함수를 바인딩시켜 줍니다.

 

 

결과

 

버튼을 누르면 캔버스가 전환되는 모습

 

 

게임 시작하기를 누르면 현재 화면이 페이드 인 되면서 다른 화면이 나오는 것을 볼 수 있습니다.

이런 방식으로 다양한 캔버스를 연결해서 이동할 수 있습니다.

 

하나의 캔버스에 여러 개의 Panel을 두는 것도 하나의 방법입니다.