본문 바로가기
게임 프로그래밍/게임개발 중급

게임개발 중급(74) - Monster Killer(36)

by jyppro 2023. 7. 11.

Monster Killer(36)

저번에는 저장된 데이터를 삭제하여 초기화 시키는 방법에 대해서 알아보았습니다. 이번에는 씬을 전환할 때 적용하기 좋은 페이드 인/ 아웃에 대해서 알아보겠습니다.

 

메인씬에서 전환하기 

메인씬에서 게임씬으로 전환할 때에 그냥 씬이 바뀌면 너무 밋밋하기 때문에 화면 전환할 때 검은화면으로 전환하고 다시 천천히 밝아지는 효과를 넣어 주려고 합니다.

using System.Collections;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class GameStartButton : MonoBehaviour
{
    public Image FadeOutPage;
    float time = 0f;
    float F_time = 1f;

    private void Start(){ GetComponent<UnityEngine.UI.Button>().onClick.AddListener(GameStart); }
    private void GameStart() { StartCoroutine(FadeOut()); }

    IEnumerator FadeOut()
    {
        FadeOutPage.gameObject.SetActive(true);
        Color alpha = FadeOutPage.color;
        
        while(alpha.a < 1f)
        {
            time += Time.deltaTime / F_time;
            alpha.a = Mathf.Lerp(0, 1, time);
            FadeOutPage.color = alpha;
            yield return null;
        }
        SceneManager.LoadScene("GameScene");
    }
}

이전에 보여드렸던 코드입니다. 여기서 FadeOut 메소드가 존재하는데 씬에 마스크로 사용할 이미지를 만들어둔 것을 띄우고 시간에 따라 투명도 즉 alpha값을 조절하여 검은색에서 투명, 투명에서 검은색으로 자연스럽게 화면전환 효과를 주는 방식 입니다.

 

페이드 이미지 생성

페이드-이미지
페이드 이미지 인스펙터 창

UI로 이미지를 생성하고 화면을 가득 채우도록 Rect Transform을 조절해 줍니다. 그리고 색상을 검정색으로 바꾼 뒤에 color 알파값을 0에다 둡니다. 그리고 스크립트를 사용하여 일정시간동안 투명도를 천천히 조절해줍니다. 메인씬에서는 검정으로 어두워지는 FadeOut 이미지를 만들고, 게임씬에서는 FadeIn이 되도록 따로 만들어 주어야 합니다. 왜냐하면 씬이 달라지면 한쪽에 스크립트에서 다룰 수 없기 때문에 양쪽에서 한개씩 만들어 주어야 합니다.

 

페이드 인

using System.Collections;
using UnityEngine;
using UnityEngine.UI;

public class FadeIn : MonoBehaviour
{
    public Image FadeInPage;
    float time = 0f;
    float F_time = 2f;
    
    void Start() { Fade(); } 

    public void Fade() { StartCoroutine(Fade_In()); }

    IEnumerator Fade_In()
    {
        Color alpha = FadeInPage.color;
        while(alpha.a > 0f)
        {
            time += Time.deltaTime / F_time;
            alpha.a = Mathf.Lerp(1, 0, time);
            FadeInPage.color = alpha;
            yield return null;
        }
        FadeInPage.gameObject.SetActive(false);
        yield return null;
    }
}

페이드 인은 검은색에서 밝아지면서 화면전환이 완료되는 것처럼 보여야 하기 때문에 투명도가 없는 검은색에서 점점 투명해지도록 만들어 주어야 합니다. 그리고 약간의 씬전환 딜레이를 고려하여 시간을 1초정도 늘려서 만들어 줍니다. 스크립트는 FadeIn과 FadeOut의 형태가 비슷합니다. 게임을 실행해서 보여드릴 순 없지만 화면전환 할때에 암전되고 밝아지는 것을 생각하시면 쉽습니다.

 

<NEXT>

오늘은 페이드 인 / 아웃에 대해서 알아보았습니다. 사실 이 페이드 기술은 상당히 많은 게임에서 사용할 수 있는 잡기술 같은 느낌입니다. 다음에는 이전에 PlayerPrefs로 사용했던 각종 수치들을 기존의 그냥 사용하던 수치들과 바꿔서 데이터와 연동 되도록 바꾸어 보도록 하겠습니다. 감사합니다.