[유니티 기초] UI 편 - Button

이번 글에서는 유니티의 기본 UI 중 버튼과 이미지에 대해서 알아보도록 하겠습니다.

버튼은 게임에서 정말 많이 사용됩니다. 각종 메뉴 선택, 스킬 사용, 가방 열기 등등 버튼은 정말 많이 사용됩니다. 

 

그럼 먼저 버튼을 하나 만들어 보도록 하겠습니다.

 

 

위의 그림과 같은 경로로 버튼을 만들 수 있습니다. 생성된 버튼의 Inspector 창을 보면 아래의 그림과 같습니다.

 

 

버튼과 이미지 컴포넌트가 추가되어 있습니다. 먼저 버튼 컴포넌트의 각 항목에 대해 알아보겠습니다.

 

Transition 은 버튼의 상태 변화를 어떤 방식으로 표현할 것인가를 설정합니다.

Transition	None	상태 변화를 사용하지 않습니다.
	Color Tint	상태 변화에 색상을 이용합니다.
	Sprite Swap	상태 변화에 이미지를 이용합니다.
	Animation	상태 변화에 애니메이션을 이용합니다.

 

이 글에서는 Color Tint 를 이용하는 방법에 대해서만 다루도록 하겠습니다. Color Tint 란 Target Graphic 으로 설정된 이미지에 버튼의 각 상태에 따라 지정된 색을 덧입혀서 상태의 변화를 표현하는 방식입니다.

 

 

Navigation 은 여러 개의 UI 객체가 있을 때 포커스의 이동을 어떤 방식으로 할 것인지를 결정하는 것입니다. 게임에서는 UI포커스의 이동 순서가 그렇게 중요하지 않기 때문에 자세한 설명은 생략하고 유니티 공식문서의 링크를 대신하도록 하겠습니다.

 

 

내비게이션 옵션 - Unity 매뉴얼

 

Visualize 버튼은 navigation 의 순서를 유니티 에디터의 씬 창에 시각적으로 표시해 줍니다.

 

OnClick() 은 버튼을 클릭했을 때의 이벤트를 처리할 스크립트와 해당 스크립트의 특정 함수를 연결합니다.

 

 

이제 스크립트를 만들고 이벤트를 연결해 보도록 하겠습니다. 스크립트는 버튼 객체에 있어도 되고 다른 객체에 있어도 됩니다. 여기서는 다른 객체에 스크립트를 만들고 연결을 할 것입니다. 

 

1. Hierarchy 창에서 빈 오브젝트를 생성하고 ButtonListener 스크립트를 생성합니다.

 

 

 

2. 스크립트를 작성합니다.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ButtonListener : MonoBehaviour
{
   public void OnButtonClicked()
   {
      print("버튼을 클릭했습니다.");
   }
}

 

OnButtonClicked() 라는 함수를 만들었습니다. 버튼을 클릭하면 이 함수가 호출 되도록 할 것입니다. 주의 할 점은 함수의 접근자가 반드시 public 이어야 한다는 것입니다. 이 함수가 호출됐을 때 수행하는 print 는 유니티 에디터의 Console 창에 문자를 출력해줍니다.

 

 

3. 생성한 스크립트를 Button 컴포넌트의 OnClick 에 연결해 보도록 하겠습니다.

 

 

위의 영상과 같은 방법으로 버튼에 스크립트를 연결하고 클릭했을 때 호출될 함수를 지정할 수 있습니다.

 

이제 Play를 한 후 버튼을 클릭하면 Console 창에 다음과 같이 "버튼을 클릭했습니다." 가 출력됩니다.