[Unity] 유니티 Canvas Group을 이용한 UI컨트롤 + Dotween

 

 

유니티를 이용해서 게임을 제작하다보면,

UI를 어떻게 띄울까.....하는 고민이 생기게 되는거 같습니다..

 

애니메이션이나... Dotween... Feel을 이용해서 UI를 이동시키거나 FadeInOut 시키면서,

약간 동적인 UI?를 만들수도 있지만!

 

 

이러한 애니메이션을 추가하면, 뭔가 과한느낌...이 들기도 하고,

UI내부의 버튼들에 대한 컨트롤 처리...또한 애니메이션에 맞춰서 해줘야하는 문제가..있었습니다!

 

 

그래서 이번에는 유니티에서 제공해주는 기본 컴포넌트 Canvas Group을 이용하여,

UI를 컨트롤 하는 방법에 대해서 알아보려고 합니다.  

 

---

그럼 시작!

 

 

아래는 공식문서!

캔버스 그룹 - Unity 매뉴얼

 

사실 설명을 하기에는 내용이.. 많이 없긴합니다!

 

 

 

먼저 컴포넌트를 설치하면 아래와 같은 옵션들이 생깁니다.

 

오.... 처음보는 컴포넌트지만, 구성은 기본적으로 UI에서 다뤄본 내용들이 포함되어있는것 같습니다. 

 

 

내용을 살펴보면....

Alpha는 UI의 투명도를 구성하는것이고,

Interactable은 UI의 상호작용에 대해서,

Blocks Raycasts는  해당 UI에 Raycast를 위한 콜라이더를 동작시키는 부분입니다.

 

 

 

딱하나!

Ignore Parent Groups은 처음보는 녀석인데, 이건 on해주면,

해당 Canvas Group 컴포넌트에만 영향을 받는다! 라는 옵션입니다.

---

 

 

 

근데... ?? 영향을 받는다는게 뭐지..?

 

이게 Canvas Group이라는 컴포넌트가 가지는 특징인데,

이름에서부터 알수있듯이, 해당 컴포넌트를 가진 오브젝트의 하위 UI들에 대해 똑같이 컨트롤 할 수 있다는 것입니다.

 

만약 한 오브젝트에서 Canvas Group - alpha = 0으로 설정하게 되면 그 하위의 UI도 마찬가지로 alpha가 0이됩니다.

이걸 이용해서 간단한 UI fadeInOut을 만들어 보았습니다.

 

 

 

---

그럼 이제 사용해보러!

 

아주아주 간단한 코드!

(Dotween을 이용한)

 

먼저 Dolocal을 이용하여 UI가 켜지고 꺼질때,

UI를 상하로 이동시켜주는 코드를 만들고

void UIAnim(GameObject UI,bool On)
    {
        if (On) // 켜기
        {
            WaitUI = true;
            UI.transform.DOLocalMoveY(0f, 1f).SetUpdate(true);
            UIFadeAnim(UI, On, 1f);
        }
        else
        {
            if (WaitUI)
            {
                return;
            }
            UI.transform.DOLocalMoveY(140f, 1f).SetUpdate(true);
            UIFadeAnim(UI, On, 1f);
        }

 

 

추가로 FadeInOut을 구현하기 위한 UIFadeAnim을 만들어 주었습니다.

void UIFadeAnim(GameObject UI, bool on , float duration)
    {
        if (FadeTween != null)
        {
            FadeTween.Kill();
        }

        CanvasGroup TempUI = UI.GetComponent<CanvasGroup>();

        if (on)
        {
            UI.SetActive(true);

            FadeTween = TempUI.DOFade(1, duration);
            FadeTween.onComplete += (() =>
              {
                  TempUI.interactable = true;
                  TempUI.blocksRaycasts = true;
                  
                  WaitUI=false;
              });
        }
        else
        {
            FadeTween = TempUI.DOFade(0, duration);
            FadeTween.onComplete += (() =>
            {
                TempUI.interactable = false;
                TempUI.blocksRaycasts = false;
                UI.SetActive(false);
            });
        }
    }

 

애니메이션이나, 순차적으로 alpha값을 변경해줘도 되지만,

 

 

 

 

약간 올라가는느낌 내려가는 느낌을 위해 Dotween을 사용해 보았습니다. 

Dotween에서도 CanvasGroup을 받아 DoFade를 사용할수 있게 되어있어,

생각보다 쉽게 아래와 같은 효과를 줄 수 있었습니다!

 

 

 

 

(왜 이걸 이때까지 몰랐지....)

 

여튼 이제라도 알게되서 굳굳!

다음 프로젝트에 넣어봐야겠네요!

 

 

 

 

 

틀린점이 있다면 댓 달아주세요!