[유니티] Canvas Group 알아보기

유니티에선 대부분의 그래픽이 씬에서 보여지기 위해선 Canvas 컴포넌트를 가진 오브젝트의 자식 계층으로 존재하고 있어야만 합니다. 그리고 UI중에선 마우스 입력에 따라 동작되어야 하는 버튼들이 있습니다. 흔히 게임들에서 볼 수 있는 UI들이 그렇죠. 그리고 이 UI들은 상황에 따라 입력이 되거나 혹은 안되게 만들어야할때가 있습니다. 그러면 Image 컴포넌트의 Raycast Target이나 Button 컴포넌트의 Interactable을 값을 이용해야하는데요. 이를 캔버스 단위로 간단하게 제어할 수 있는 컴포넌트가 바로 Canvas Group 입니다.

---

 

이번 글에선 Canvas Group을 사용해서 버튼들의 상호작용을 간단하게 제어해보겠습니다.

먼저 Hierarchy에서 Canvas를 생성시킵니다.

생성된 캔버스를 클릭해서 Inspector 창을 보면 Canvas 생성시 기본적으로 붙여있는 컴포넌트들을 보실 수 있습니다. 보시다시피 Canvas Group이라는 컴포넌트는 Canvas를 생성할 때 기본적으로 붙어있는 컴포넌트가 아니기 때문에 추가해주어야합니다.

 

하단에 Add Component를 클릭해서 검색하시면 찾으실 수 있습니다.

 

Canvas Group 컴포넌트를 추가해서 보시면 4가지 옵션이 있는데 하나씩 알아보겠습니다.

더 자세하고 빠르게 알아보시고 싶으시다면 유니티 공식 레퍼런스 문서 docs.unity3d.com/kr/530/ScriptReference/CanvasGroup.html 에서 확인해보시면 되겠습니다.

 

먼저 Alpha입니다. 해당 캔버스에 존재하는 UI들의 Alpha 값을 일괄적으로 조절하는 옵션입니다.

캔버스에 테스트를 위해 이미지 4개를 추가시켜놓은 모습입니다. Alpha 값이 1일때의 상태입니다.

 

Alpha 값을 0.3으로 낮췄을때의 모습입니다. 4개의 이미지에 똑같은 Alpha 값이 적용되는 것을 볼 수 있습니다. Canvas Group 컴포넌트를 사용하지 않아도 각 Image 컴포넌트에서 제어가 가능하긴 하지만 제어하려는 오브젝트의 갯수만큼 하나하나 조절해주어야하고 간혹 잘못된 값이 들어갈 수도 있지만 Canvas Group의 Alpha값을 사용하면 한번의 입력으로 모든 자식 오브젝트들의 Alpha를 제어할 수 있기 때문에 편리합니다.

 

다음으로 Interactable 입니다. 말그대로 상호작용할 수 있는지에 대한 설정값입니다. 체크되어있으면 true(상호작용 가능), 체크해제되어 있으면 false(상호작용 불가능) 상태를 가리킵니다.

테스트를 위해 버튼 2개를 생성시켜주었습니다. 각 버튼은 클릭되면 하단에 '클릭됨' 이라는 텍스트가 나타나도록 되어있습니다.

 

 

Canvas Group의 Interactable 옵션이 true일 경우 입니다. 각 버튼들의 마우스 클릭은 정상적으로 입력되어져 하단에 텍스트가 나타납니다.

 

 

 

Canvas Group의 Interactable 옵션이 false일 때 모습입니다. Button 오브젝트 생성시 기본적으로 Interactable이 false 경우 button의 Source Image가 어둡게 표시되어지는데 시각적으로도 상호작용이 불가능한 상태임을 알 수 있고 실제로 클릭해봐도 상호작용이 되지 않는 모습을 볼 수 있습니다.

 

 

마지막으로 Blocks Raycasts 옵션은 마우스 클릭시 보이지 않는 Ray가 발사되는데 이 Ray에 충돌을 일으킬 것인지 제어하는 옵션입니다. 만약 Interactable이 체크되어 true 상태여도 Blocks Raycasts가 체크해제 (false)되어 있다면 마우스로 클릭해도 상호작용이 일어나지 않게 만들어줍니다. 사용자 입장에선 Interactable과 비슷한 기능이지만 때에 따라 알맞게 사용한다면 UI 기능을 보다 더 편리하게 제어할 수 있습니다.