5단원 - 사용자 인터페이스 : Button

Button UI

버튼으로 동작하도록 설정된 UI 요소

 

Button 게임 오브젝트

하이어라키 창에서 **Create > UI > Button - TextMeshPro**를 통해 만들어지는 게임 오브젝트입니다. UI에서 클릭 가능한 버튼 역할을 하며 여러 컴포넌트와 자식 오브젝트를 포함하여 버튼으로서의 기능을 수행하도록 설계되어 있습니다.

 

Button 게임 오브젝트의 기본적인 역할

• 클릭 이벤트 처리: 사용자가 버튼을 클릭했을 때 특정 동작을 수행할 수 있도록 이벤트를 처리합니다.
• UI 인터랙션: 게임 내 메뉴, 옵션, 대화 상자 등 UI 인터페이스에서 주로 사용됩니다.
• 시각적 상태 변경: 클릭, 호버, 비활성화 등 상태에 따라 버튼의 외형을 자동으로 변경할 수 있습니다.

 

Button 게임 오브젝트의 구성

Button 게임 오브젝트는 기본적으로 다음 요소들로 이루어져 있습니다:

(1) RectTransform

• UI 요소의 위치, 크기, 회전, 정렬 등을 정의합니다.
• 일반 Transform 대신 UI 전용으로 사용됩니다.
• Anchor와 Pivot을 통해 다른 UI 요소와 상대적인 위치를 지정할 수 있습니다.

(2) CanvasRenderer

• UI 요소를 화면에 렌더링하는 데 필요한 컴포넌트입니다.
• 일반적으로 개발자가 직접 수정하지 않으며, Unity가 자동으로 관리합니다.

(3) Image

• 버튼의 배경을 나타내는 컴포넌트입니다.
• 버튼의 시각적 표현(예: 배경 색, 스프라이트 이미지 등)을 설정할 수 있습니다.
• Source Image를 통해 버튼의 기본 이미지를 설정합니다.

(4) Button (Script)

• 버튼으로서의 기능을 정의하는 핵심 컴포넌트입니다.
• 주요 속성과 기능:
  • OnClick: 버튼이 클릭되었을 때 실행할 동작을 지정합니다.
  • Transition: 버튼의 상태 변화(예: Normal, Highlighted, Pressed, Disabled)에 따른 시각적 효과를 정의합니다.
  • Interactable: 버튼의 활성화/비활성화 여부를 설정합니다.

(5) 자식 오브젝트: Text 또는 TextMeshPro

• 버튼의 레이블(문구)을 표시하는 컴포넌트입니다.
• Text (TMP) 또는 Text 컴포넌트를 포함합니다.
  • TextMeshPro가 활성화된 프로젝트에서는 기본적으로 **Text (TMP)**가 사용됩니다.
  • 버튼의 텍스트 내용을 수정하거나, 글꼴 스타일 등을 설정할 수 있습니다.

 

Button 컴포넌트의 주요 속성 및 설정

(1) OnClick 이벤트

• 버튼이 클릭되었을 때 실행할 동작을 지정합니다.
  1. Hierarchy 창에서 버튼 오브젝트를 선택합니다.
  2. Inspector 창에서 Button 컴포넌트의 OnClick() 속성을 찾습니다.
  3. OnClick 이벤트 리스트에 함수를 추가하려면:
     • "+" 버튼을 클릭하여 새 항목을 추가합니다.
     • 함수를 포함한 스크립트를 컴포넌트로 가지고 있는 GameObject를 드래그하여 이벤트 목록의 None(Object) 슬롯에 놓습니다 : 스크립트 자체를 추가하는 것이 아닙니다.
     • 드롭다운 메뉴를 열고 함수 이름을 선택합니다.
     • 단, 추가하려는 함수는 public으로 선언되어 있어야 합니다.
     •  

(2) Transition 설정

Transition은 버튼의 시각적 상태 변화를 정의합니다.

• None: 상태 변화 없음.
• Color Tint: 상태에 따라 버튼의 색상이 변경됩니다.
• Sprite Swap: 상태에 따라 버튼의 스프라이트가 변경됩니다.
• Animation: 상태에 따라 지정된 애니메이션을 실행합니다.

(3) Interactable

• 버튼이 클릭 가능한 상태인지 여부를 설정합니다.
  • 체크된 상태: 버튼이 활성화됨.
  • 체크 해제: 버튼이 비활성화되며, 클릭 이벤트를 받을 수 없습니다.

(4) Text

• 버튼의 자식 오브젝트로 텍스트를 포함합니다.
• 텍스트의 내용, 색상, 크기, 정렬, 폰트 스타일 등을 설정할 수 있습니다.

 

Button 컴포넌트를 스크립트로 받는 방법

1. UnityEngine.UI 라이브러리를 추가

2. Button 컴포넌트를 받기 위해 변수형을 Button 으로 선언

3. Button 게임 오브젝트를 해당 변수에 할당

 

주의할점은 Button 게임 객체를 받는 것이 아닌 Button 게임 객체의 Button 컴포넌트를 받는 다는 것입니다.

만약, Button 게임 객체를 스크립트에서 수정하고 싶다면 Button.gameObject를 통해 접근할 수 있습니다.

 

버튼 컴포넌트 변수 예시