[Unity / C#] 2D 젤리 키우기 게임 - 5. UI 창 구축하기

해당 글은 유튜버 골드메탈님의 강의를 기반으로 작성되었습니다.

 

이번 강의에서는 이전 시간에 만들었던 인터페이스와 함께 Esc 버튼을 눌렀을 경우 활성화 되는 UI를 새로 만든 뒤 기능을 구현해보았습니다.

 

먼저 Canvas의 자식 오브젝트로 Image 오브젝트를 생성한 뒤 Source Imgae를 'Panel'로 변경해줍니다.

 

 

 

이후 크기를 너비 40, 높이 50으로 맞춘 뒤, Anchor를 사용하여 위치를 중앙 아래로 조정해주고 이름을 'Jelly Panel'로 변경 해주었습니다.

 

 

 

다음으로 방금 만들었던 Jelly Panel의 자식 오브젝트로 Image 오브젝트를 하나 더 생성한 뒤, Source Image를 'Panel Left'로 지정하고 'Set Native Size' 버튼을 통해 크기를 조절해줍니다.

 

이후 Anchor를 활용하여 왼쪽 중앙으로 위치를 조정하고 x축 위치를 -8로 설정해주었으며 이름은 'Page Left Btn'으로 수정해주었습니다.

 

 

 

이제 Page Left Btn을 복사하여 이름을 'Page Right Btn'으로 바꾼 뒤, Source Image와 위치를 변경해줍니다.

 

 

 

이제 두 버튼에 효과를 추가하기 위해 각각에 'Button' 컴포넌트를 추가한 뒤, 'Transition'을 'Sprite Swap'으로 설정하고 아래 세 가지 Sprite 옵션에 'Panel Left/Right Over' Sprite를 지정해줍니다.

 

 

 

여기까지 되었으면 이제 Jelly Panel 전체를 복사한 뒤, 이름을 'Plant Panel'로 변경해줍니다. 이후 Plant Panel 안에 있는 두 개의 버튼은 삭제해줍니다.

 

 

 

다음으로 Plant Panel의 너비를 90으로 변경한 뒤, 한 번 더 복사하여 이번에는 이름을 'Option Panel'로 지정합니다.

Option Panel은 Esc 키를 눌렀을 경우 표시되는 인터페이스이므로 주변 배경을 살짝 어둡게 하는 효과를 추가해줍니다.

 

먼저 Option Panel의 Source Image를 'None'으로 설정한 뒤, Color를 검은색으로 설정하고 투명도를 조절합니다.

 

 

 

이후 Anchor를 활용해 크기를 최대로 늘려줍니다.

 

 

 

이제 Option Panel의 자식 오브젝트로 Image 오브젝트를 생성한 뒤, Source Image를 'Panel'로 설정해주고 크기를 너비 80, 높이 40으로 지정해줍니다.

 

---

다음으로 창 애니메이션을 구현해주어야 합니다.

 

우선 Option Panel은 비활성화 시켜줍니다.

 

체크 해제

 

 

 

Jelly Panel과 Plant Panel의 경우 y축 위치를 -55로 설정하여 화면 아래로 내려줍니다.

 

Game Scene에서는 보이지 않음

 

 

이후 애니메이션 생성을 위해 Animations 폴더 안에 'UI' 폴더를 따로 만들어줍니다.

 

 

 

UI 폴더 안에 Animator Controller를 생성한 뒤 이름을 지정해줍니다.

 

 

 

다음으로 Animation을 두 개 생성하여 각각의 이름을 'Show', 'Hide'로 지정해줍니다.

 

 

 

AcUI 애니메이터에 빈 상태를 추가해줍니다.

 

마우스 우클릭 -> Create State -> Empty

 

 

이후 'Show'와 'Hide' 애니메이션을 AcUI 애니메이터에 추가합니다.

 

 

 

각각을 Transition으로 연결하고 'doShow'와 'doHide'라는 이름의 Trigger형 파라메터를 생성한 뒤, 각각의 Transition에 해당 파라메터를 설정해줍니다.

 

 

 

이후 Jelly Panel과 Plant Panel에 Animator 컴포넌트를 추가하여 AcUI로 지정해줍니다.

 

 

 

이제 Scene 탭으로 가서 Jelly Panel를 클릭한 뒤, Animation 탭을 띄워 애니메이션을 편집해줍니다.

애니메이션 편집 과정은 글로 쓰기엔 복잡하기 때문에 생략하겠습니다.

---

이제 창 애니메이션을 실제로 활용하기 위한 로직을 구성해보겠습니다.

 

우선 Jelly Panel과 Plant Panel의 Animator를 이용해야 하므로 GameManager 스크립트에 각각의 오브젝트 객체를 가져오기 위한 변수를 생성하고 Awake() 함수에서 이를 초기화 해주었습니다.

    public Image jelly_panel;
    public Image plant_panel;
    public Image option_panel;

    Animator jelly_anim;
    Animator plant_anim;

    void Awake()
    {
        jelly_anim = jelly_panel.GetComponent<Animator>();
        plant_anim = plant_panel.GetComponent<Animator>();
    }

 

이후 새로운 변수와 함께 각각의 버튼이 클릭될 시 호출되는 함수 ClickJellyBtn()과 ClickPlantBtn()을 만들어주었습니다.

    bool isJellyClick;
    bool isPlantClick;

    public void ClickJellyBtn()
    {
        if (isPlantClick) {
            plant_anim.SetTrigger("doHide");
            isPlantClick = false;
        }

        if (isJellyClick)
            jelly_anim.SetTrigger("doHide");
        else
            jelly_anim.SetTrigger("doShow");

        isJellyClick = !isJellyClick;
    }

    public void ClickPlantBtn()
    {
        if (isJellyClick) {
            jelly_anim.SetTrigger("doHide");
            isJellyClick = false;
        }

        if (isPlantClick)
            plant_anim.SetTrigger("doHide");
        else
            plant_anim.SetTrigger("doShow");

        isPlantClick = !isPlantClick;
    }

 

위의 두 함수는 각각 버튼이 클릭 될 시 발생하며 이전에 만들었던 창을 오르 내리는 역할을 수행합니다.

 

이제 유니티 프로그램으로 돌아가서 새로운 변수에 각각 오브젝트를 지정해줍니다.

 

 

 

이후 Jelly Button과 Plant Button의 Button 컴포넌트에서 OnClick 이벤트를 추가한 뒤, 각각의 이름에 맞게 방금 작성했던 함수를 지정해줍니다.

 

Jelly Button

 

 

다시 GameManager 스크립트로 돌아와, Esc 키를 눌렀을 경우 Option Panel이 활성화 또는 비활성화 되도록 Option() 함수를 추가해줍니다.

    bool isOption;

    void Option()
    {
        isOption = !isOption;

        option_panel.gameObject.SetActive(isOption);
        Time.timeScale = isOption == true ? 0 : 1;
    }

 

Update() 함수와 함께 다음의 코드를 추가합니다.

    void Update()
    {
        if (Input.GetButtonDown("Cancel")) {
            if (isJellyClick) ClickJellyBtn();
            else if (isPlantClick) ClickPlantBtn();
            else Option();
        }
    }

 

위 코드를 통해 Esc 버튼이 눌리게 될 경우 3가지 경로로 나뉘게 되며 만약 이미 띄워져 있는 UI 창이 있다면 Option Panel을 활성화 시키는 대신 이미 띄워져 있는 창을 내리게 될 것입니다.

---

여기까지 하고나서 게임을 실행하고 테스트 해보면 잘 구현된 듯 보였지만 한 가지 문제점이 있었습니다.

 

바로 UI 창을 띄운 상태 또는 Esc 버튼을 눌러 옵션창이 활성화 된 상태에서 젤리가 컨트롤 된다는 것입니다.

 

따라서 저는 GameManager 스크립트에 게임의 활성화/비활성화 상태를 구분하기 위한 isLive 변수를 추가해주었으며 해당 변수의 상태에 따라 젤리 컨트롤의 가능 여부를 확인해주었습니다.

 

추가로 GameManager의 일부 함수를 다음과 같이 수정해주었습니다.

    public bool isLive;
    
    void Awake()
    {
        jelly_anim = jelly_panel.GetComponent<Animator>();
        plant_anim = plant_panel.GetComponent<Animator>();

        isLive = true;
    }

    public void ClickJellyBtn()
    {
        if (isPlantClick) {
            plant_anim.SetTrigger("doHide");
            isPlantClick = false;
            isLive = true;
        }   

        if (isJellyClick)
            jelly_anim.SetTrigger("doHide");
        else
            jelly_anim.SetTrigger("doShow");

        isJellyClick = !isJellyClick;
        isLive = !isLive;
    }

    public void ClickPlantBtn()
    {
        if (isJellyClick) {
            jelly_anim.SetTrigger("doHide");
            isJellyClick = false;
            isLive = true;
        }

        if (isPlantClick)
            plant_anim.SetTrigger("doHide");
        else
            plant_anim.SetTrigger("doShow");

        isPlantClick = !isPlantClick;
        isLive = !isLive;
    }

    void Option()
    {
        isOption = !isOption;
        isLive = !isLive;

        option_panel.gameObject.SetActive(isOption);
        Time.timeScale = isOption == true ? 0 : 1;
    }

 

다음으로 Jelly 스크립트의 OnMouseDown/Drag/Up() 함수의 시작 부분에 아래의 코드를 추가하였습니다.

if (!game_manager.isLive) return;

 

 

이로써 변수를 통해 게임의 상태를 임의적으로 활성화/비활성화 시켜 사용자의 플레이에 제약을 부여할 수 있습니다.