2.3 NGUI UIButton(버튼)
NGUI UIButton(버튼)
2.3 UIButton(버튼)
지금까지 두 가지의 UI 위젯에 대해서 살펴 보았습니다.
보신바와 같이 NGUI에서 UI 위젯을 생성할 때는 Widget Tool 창에서 거의 모든 작업이 이루어 집니다.
NGUI에서 기본이 되는 두 가지의 위젯에 대해서 살펴 보았으니 본격적으로 다른 위젯에 대해서 살펴보도록 하겠습니다.
NGUI에서 버튼 위젯도 Widget Tool 메뉴를 통해서 간단히 생성이 가능합니다.
유니티 에디터 메뉴에서 NGUI -> Open -> Widget Wizard(Legacy) 메뉴를 선택하고, Widget Tool 창의 Template 항목을 Button, Background 항목을 Dark로 선택해 줍니다.
그리고 Add To 버튼을 클릭하면 버튼 위젯이 생성 됩니다.
생성된 버튼 위젯의 구조를 살펴보겠습니다.
하이어라키 뷰에서 Button 게임오브젝트를 보면 아래 그림과 같이 구조가 이루어져 있습니다.
Button 게임 오브젝트 밑에 Background와 Label 게임오브젝트가 있습니다.
Background 게임오브젝트는 스프라이트, Label은 레이블 위젯입니다.
버튼의 기본 이미지를 변경할 때는 Background 스프라이트의 Sprite 항목을 변경하고, 버튼에 나타낼 텍스트 값을 변경할 때는 Label 위젯의 Text 값을 변경하면 됩니다.
스프라이트와 레이블, 이 두가지 위젯은 위에서 살펴보았고 버튼에서 사용하는 방법도 똑같습니다.
이제 UIButton 컴포넌트를 살펴보도록 하겠습니다.
하이어라키 뷰에서 Button 게임 오브젝트를 클릭한 상태에서 인스펙터 뷰를 보면 아래 그림과 같이 UIButton / UIPlay Sound 두 가지 컴포넌트를 갖고 있는 것을 확인할 수 있습니다.
먼저 UIButton 컴포넌트의 파라미터를 살펴보겠습니다.
| 파라미터 | 설명 |
| Tween Target | Hover, Pressed 등의 이벤트가 발생했을 때 이 항목에 설정된 게임 오브젝트의 색상이 변경됩니다. 기본설정은 버튼 위젯을 생성할 때 자식 게임오브젝트로 생성되는 Background 스프라이트가 지정됩니다. |
| Colors | 버튼에서 발생하는 이벤트에 따라서 변경되는 색상을 설정합니다. – Normal: 이벤트가 발생하지 않은 원래의 색상을 지정합니다. – Hover: Hover 즉 사용자의 커서가 버튼 위에 있을 때 버튼의 색상을 지정합니다. – Pressed: 버튼이 클릭됐을 때의 색상을 지정합니다. – Disabled: 버튼이 비활성화 된 상태일 때의 색상을 지정합니다. |
| Sprites | 버튼에서 발생하는 이벤트에 따라서 스프라이트를 변경하고자 할 때 사용합니다. – Normal: 이벤트가 발생하지 않은 원래의 스프라이트 이미지를 지정합니다. – Hover: Hover 즉 사용자의 커서가 버튼 위에 있을 때 버튼의 스프라이트 이미지를 지정합니다. – Pressed: 버튼이 클릭됐을 때의 스프라이트 이미지를 지정합니다. – Disabled: 버튼이 비활성화 된 상태일 때의 스프라이트 이미지를 지정합니다. |
| Transition | 색상 또는 스프라이트 이미지가 변경될 때, 변경되는 시간을 설정합니다. 이 값이 클수록 변경되는 속도가 느려지게 됩니다. |
| Notify | 버튼이 클릭됐을 때 호출할 함수를 지정하는 항목입니다. 호출할 함수가 있는 컴포넌트를 가진 게임오브젝트를 이 항목에 드래그 하면 Method 필드가 나타나고 세부적으로 함수를 지정 가능합니다. (호출할 함수는 반드시 public void 형으로 지정되어 있어야 합니다.) |
UIPlay Sound 컴포넌트는 버튼에 이벤트가 발생했을 때 소리를 재생하는 역할을 합니다.
버튼이 클릭될 때 특정 소리를 재생하고 싶을 때 이 컴포넌트를 이용하면 됩니다.
| 파라미터 | 설명 |
| Audio Clip | Trigget로 지정한 이벤트가 발생했을 때 재생할 Sound Clip을 지정합니다. |
| Trigger | 버튼에서 어떤 이벤트가 발생했을 때 소리를 재생할 것인지를 지정합니다. 총 7가지 이벤트 중에서 지정할 수 있습니다. (OnClick / OnMouseOver / OnMouseOut / OnPress / OnRelease / OnEnable / OnDisable) |
| Volume | 소리가 재생될 때의 볼륨을 지정합니다. |
| Pitch | 소리가 재생될 때 사용되는 Sound Cilp의 Pitch 값을 지정합니다. |
버튼 위젯의 각 컴포넌트들에 대해서 살펴보았습니다.
그런데 버튼 위젯은 이 상태에서는 사용하는 데 큰 의미가 없습니다.
왜냐하면 버튼은 클릭을 했을 때 특정기능을 하는 위젯인데 지금 상태로는 아무런 기능을 하지 않기 때문입니다.
클릭 했을 때 특정 동작 즉, 특정 동작을 하는 함수를 호출하려는 경우에는 UIButton 파라미터의 Notify 항목을 사용하면 된다고 위에서 설명 드렸습니다.
그럼 Console 뷰에 “Button Clicked” 라는 메시지를 출력하는 간단한 스크립트를 작성한 뒤에 버튼에 연결해서 동작을 화인해 보도록 하겠습니다. 먼저 프로젝트 뷰에서 Create -> C# Script 메뉴를 클릭하고 스크립트를 생성합니다.
스크립트가 생성되면 아래 그림과 같이 스크립트 이름 부분이 선택되어 있는 데 이 상태에서, 스크립트 이름을 PrintDebug 라고 지정합니다.
이렇게 생성된 PrintDebug.cs 스크립트 파일을 더블클릭해서 모노디벨롭 에디터를 실행한 뒤에 아래 내용을 입력합니다.
using UnityEngine;
using System.Collections;
public class PrintDebug : MonoBehaviour
{
public void Print()
{
Debug.Log("Button Clicked");
}
}
위에서 작성한 스크립트의 Print 함수를 UIButton 컴포넌트의 항목 중에서 Notify 항목에 연결시켜 보겠습니다.
먼저 유니티 에디터 메뉴에서 GameObejct -> Create Empty 메뉴를 이용해서 빈 게임오브젝트를 하나 생성합니다.
그리고 게임 오브젝트의 이름을 Notifier 라고 수정 합니다.
이렇게 하면 UIButton 컴포넌트의 Notify 항목에 연결할 준비가 끝이 났습니다.
이제 연결을 해보겠습니다. 먼저 Notifier 게임 오브젝트를 Notify 항목에 드래그 합니다.
이렇게 실행될 함수를 가진 게임 오브젝트를 Notify 항목에 드래그를 하면 아래 그림과 같이 Method 항목이 나타납니다.
여기에서 미리 작성한 Print 함수를 지정합니다.
이제 유니티를 실행하고 버튼을 클릭해보면 Console 창에 아래와 같이 Button Clicked 메시지가 출력되는 것을 확인할 수 있습니다.
이렇게해서 버튼 위젯이 클릭됐을 때 함수가 실행되도록 하는 부분을 진행 했습니다.
예제에서는 간단히 동작하는 함수를 작성했지만, 실제 게임을 만들 때는 필요한 동작을 하는 함수를 작성하고 위에서 설명한 방식대로 연결을 해주면 됩니다.
