Unity 3D 엔진 (12) UI- Button

안녕하세요 연꿈술사입니다. 오늘은 Unity에서 제공하는 UI 중 Button에 대해서 알아보려고 합니다.

Button 컴포넌트 또한 사용자와의 상호작용에서 매우 중요한 역할을 하는 요소 중 하나입니다. 게임 뿐만 아니라

흔히 사용하는 엘리베이터 등에서도 실제로 볼 수 있는 버튼은 게임을 하면서도 다양하게 사용됩니다.

 

Button 또한 UI 중 하나로 Create-UI-Button으로 생성이 가능하고 Canvas내에 배치되게 됩니다. 또한  Button에도 Text가 달려있기 때문에 과거 버전인 Button(legacy)를 통해 Button과 그 자식인 Text로 생성하기도 하고, Button - TextMeshPro 를 통해 Text 대신 Text - TextMeshPro를 자식으로 받아올 수도 있습니다. 

 

Button의 구성요소에 대해 알아보겠습니다.

Rect Transform - UI 컴포넌트는 Transform이 아닌 Rect Transform이 달려있다고 했었죠. 이를 통해 버튼의 피벗을 정해 어느 위치를 기준으로 생성할 지 잡아주고, 버튼의 위치, 크기, 회전, 스케일 등을 정의해줍니다.

Image - 버튼에도 사용자가 보기좋은 이미지로 구성해주면 좋겠죠? 디자인에 따라 커스텀할 수 있는 요소입니다.

Button - 실제 버튼의 기능과 동작을 관리하는 컴포넌트입니다.

Text - 버튼 내부에 텍스트를 표시하기 위함입니다. 예를 들어 타워를 구매할 때 가격을 표시해준다거나 하는 다양한 정보를 표시할 때 버튼 자식으로 들어가 있는 Text에 정보를 입력해줍니다. 필요없다면 삭제해도 상관없습니다.

 

Button의 상호작용에 대해 알아보겠습니다.

Color Tint - 버튼의 상태(보통, 하이라이트, 프레스드, 비활성화)에 따른 색상 변경을 지정해줄 수 있습니다.

Sprite Swap - 버튼 상태에 따라 다른 스프라이트 이미지로 변경됩니다.

Animation - 애니메이터를 사용하여 버튼의 상태 변경에 애니메이션 효과를 추가할 수 있습니다.

 

또한 Button에는 당연히 이벤트가 포함되어있습니다. Button 컴포넌트 내에 있는 Onclick() 함수에 알맞는 함수를 등록해 버튼을 클릭할 시 생기는 다양한 효과 및 상태창 오픈 등등 만드는 함수에 따라 다양한 동작을 수행할 수 있습니다. 하지만 Interactable 옵션을 해제하고 상호작용을 비활성화할 수도 있습니다.

이렇게 하면 버튼 클릭이 안되며, 위의 상호작용 내용을 통해 색상 또는 스프라이트로 표시 가능합니다.

 

오늘은 Button UI에 대해 알아보았습니다. 다양한 기능이 있는 Button UI는 언제든지 원하는 내용을 추가해 해당하는 이벤트효과를 띄워줄 수 있습니다. 매일 정보를 올리고 있으니 봐주시면 감사하겠습니다.

감사합니다. 연꿈술사였습니다.