[TIL_005] Unity FadeIn, FadeOut 구현

Dreamer·2024년 9월 11일

1. 오늘 배운 것

오늘 팀 프로젝트에서 필수 구현 기능들은 모두 구현했다.
이후에 추가로 도전하고자 하는 기능들을 구현하기로 했는데, 일단 혼자서 결정하여 게임 시작시 FadeIn, FadeOut 기능을 구현하여 게임 시작이 자연스럽게 보이도록 해보았다. 그러면서 Animation, Trigger, Controller 등 여러가지를 알게 되었는데 개발내용을 보여 하나하나 따라가 보자.

2. Components & Files

  • 우선 UI GameObject를 원하는 위치에 Fade라는 이름으로 생성하고 앵커는 화면을 모두 채우도록 stretch로 설정하고 Fade GameObject에 Image와 Animator Component를 추가해준다.

    그런 다음 Assets 폴더에 Fade Animation Controller 파일과 FadeIn, FadeOut Animation 파일을 만들어준다. Fade Animation Controller 를 Animator Component에 있는 Controller를 등록해준다.

3. Animation

  • Hierachy에 있는 Fade GameObject를 선택해서 Animation 탭에서 FadeOut을 선택하고 Add Property를 눌러 Image.Color를 선택한다.

    그러면 rgba 값을 입력할 수 있는데 여기서 a 값을 FadeOut이니까 처음 keyframe 에는 0으로 두고

    두번째 keyframe에는 a값을 1로 설정해준다.

    그럼 0.5초동안 화면이 까맣게 보여지는것을 확인 할 수 있다.
    그렇다면 FadeIn은 어떻게 할까?
    위에 과정을 FadeIn으로 바꾸고 keyframe의 순서만 바꿔주면 해결된다!

4. Animation Controller

  • 그럼 만들어진 FadeIn, FadeOut Animation 을 가지고 Animation Controller에 적용해보자.

    애니메이션을 그림처럼 추가했다. 그리고 좌측에 Parameter에 FadeIn과 FadeOut을 선택해서 동작하도록 Trigger를 추가했다.

    AnyState에서 FadeOut 으로 향하는 Transition을 보면 Conditions에 FadeOut을 추가하고 Has Exit Time을 체크 해제한 것을 볼 수 있다.
    Conditions는 FadeOut Parameter가 On 상태가 되면 FadeOut 애니메이션을 실행시키겠다는 뜻이 된다.
    Has Exit Time 은 체크가 된 상태라면 FadeOut Animation을 실행하고 다시 이전 상태로 돌아가려하기 때문에 화면이 깜빡깜빡거린다.
    그래서 한번만 딱 실행하고 멈춘상태를 유지하기 위해 Has Exit Time 을 체크해제 상태로 둬야한다.

    FadeIn도 마찬가지로 FadeOut과 동일하게 설정해주면 된다.

5. Code Side

  • 그러면 코드에서는 어떻게 해야할까?
    FadeIn 의 경우 화면이 검은 색이었다가 서서히 보여지고 Fade GameObeject를 일정시간 후에 숨겨버리면 된다.
public class GameScene : MonoBehaviour
{
    public GameObject fade;
    public void Start()
    {
        GameStart();
    }
    public void GameStart()
    {
        fade.SetActive(true);
        fade.GetComponent<Animator>().SetTrigger("FadeIn");
        Invoke("HideFade", 1.0f);
    }
    void HideFade()
    {
        fade.SetActive(false);
        GameManager.Instance.GameStart();
    }
}

FadeOut은 반대로 해주면 보이지 않는 Fade GameObject가 나타나고 서서히 검은색화면으로 바뀌는 것을 확인 할 수 있다.

public class StartScene : MonoBehaviour
{
    public GameObject fade;
    public void GameStart()
    {
        fade.SetActive(true);
        fade.GetComponent<Animator>().SetTrigger("FadeOut");
        Invoke("MoveGameScene", 1.2f);
    }
    void MoveGameScene()
    {
        SceneManager.LoadScene("GameScene");
    }
}

여기까지 FadeIn, FadeOut 기능을 만들어 보았다. 아마 이런거 말고도 다양한 방법이 있겠지만 구글링 하지 않고 해보니 뿌듯하다. ㅎㅎㅎㅎ

profile
새로운 시작

0개의 댓글