[Unity][UI] Button(버튼)에 대해 알아보자

[Unity][UI] Button(버튼)에 대해 알아보자

 

이전 글 : 2018/11/24 - [Unity] - [Unity] 2D Sprite와 UI Image

 

 

-

 

01. Button 생성하기

 

Button버튼을 만드는 방법에는 두 가지가 있습니다.

 

 

① 첫번째는 Hierachy에서 마우스 우클릭 -> UI -> Button

을 통해 간단히 버튼을 만드는 방법,

(UI Text도 함께 생성됩니다.)

 

 

② 두번째는 UI Image 생성 -> Add Component -> Button 검색 후 선택

하여 Button 컴포넌트를 생성하는 방법입니다.

 

주요 기능은 Button 컴포넌트가 하기 때문에 큰 차이는 없습니다.

 

 

02. 살펴보기

 

 

우측에 보이는 Inspector가 갓 생성한 UI Button의 모습입니다.

 

좌측의 버튼 두개 중 위의 글자가 적힌 버튼은 첫번째 방법으로 생성한 버튼,

파란 버튼은 두번째 방법으로 생성한 버튼입니다.

 

- 그렇다면 기본 UI Button은 무조건 저런 모양인가요?

기본 생성 시에는 같은 모양이지만,

 

좌측에 보이는 파란 버튼처럼 모양을 바꾸고 싶다면,

Source Image에 가지고 계신 Sprite를 집어넣어주시면 됩니다.

 

 

이미지의 우측 아래를 봐주세요.

Button 컴포넌트에 있는 설정은 버튼 상태에 따른 컬러입니다.

주로 사용하는 것은 'Pressed (눌려졌을 때)' 입니다.

 

 

Transition이 Color Tint로 되어있어 각 버튼의 상태를 색으로 나타냅니다.

그래서 버튼을 클릭하면 지정해둔 색으로 변합니다.

(저는 어두운 회색으로 해두었습니다. Pressed Color를 조정하면 됩니다.)

 

 

그런데 색은 싫다!

라면 두가지 방법이 있습니다.

하나는 Sprite Swap, 다른 하나는 Animation 입니다.

 

그 중 하나인 Sprite Swap을 설명 드리겠습니다.

 

 

Sprite Swap은 버튼을 클릭하면 기존 Sprite가 지정해놓은 Sprite로 변하는 기능입니다.

Button 컴포넌트의 Transition이 Color Tint가 아니라, Sprite Swap 일 때만 가능합니다.

 

 

Transition을 Sprite Swap으로 변경하면, 각 상태에 Sprite를 넣을 칸이 생깁니다.

여기서는 Pressed Sprite에 알맞는 Sprite를 넣어주시면 됩니다.

 

 

-

 

03. OnClick() -활용하기

 

드디어 On Click()에 대해 다뤄보겠습니다.

 

 

우선 Asset에서 우클릭 -> Create -> C# Script

를 통해 Script를 생성해줍니다.

(Script 이름은 꼭 영어로 해주셔야하고 띄어쓰기는 하시면 안됩니다!!)

 

 

UI Text 두 개를 만들어주시고,

Hierachy 우클릭 -> Create Empty

를 통해 아무것도 없는 GameObject를 생성합니다.

 

 

위처럼 Script처럼 입력해줍니다.

꼭 위의 내용이 아니어도 결과가 눈에 보이는 구조로 해주시면 됩니다.

 

using UnityEngine.UI; 는 꼭 선언해주셔야 Text를 포함한 UI 관련을 다룰 수 있습니다.

public void OnClick~ () 함수들은 각 버튼들이 실행할 함수들입니다.

(public으로 선언해주셔야 OnClick이 접근할 수 있습니다.)

 

 

Create Empty로 생성했던 GameObject에 C# Script를 추가해줍니다.

 

 

① OnClick() 아래에 있는 +를 누른 후,

② None에 GameObject를 넣어줍니다.

이렇게 하면, No Function이라고 적힌 칸이 나타납니다.

 

 

No Function -> GameObject에 넣었던 Script 이름* -> 동작할 함수**

 

* 제가 지정한 Script 이름은 ButtonScript

** 여기서 작동할 함수는 OnClickImageButton() // 두번째 버튼이므로.

 

나머지 버튼도 똑같이 해줍니다.

 

 

실행한 후 버튼을 클릭해보세요! 클릭한만큼 숫자가 늘어납니다.

점수 UI에도 활용이 가능하겠네요.ㅎㅎ

 

도움이 되었으면 좋겠습니다. (^^)

 

-

 

사용한 Asset : https://assetstore.unity.com/packages/2d/gui/cute-cartoon-mobile-gui-97-png-files-35315