Smart Academy

 6. 버튼으로 오브젝트 움직이기

  (3)  UI Root (2D) 생성

UI Tool(상단 메뉴의 NGUI > Create a New UI로 오픈)에서 Create Your UI 버튼을 눌러서 UI Root (2D), Camera, Anchor, Panel 오브젝트를 생성합니다.

생성된 ‘Camera’ 오브젝트의 Camera 컴포넌트에서 Clear Flags를 Solid Color로 설정하고 Background 색상을 검정색으로 변경합니다.

[그림 6-2]

(4)  Label과 버튼 생성

6. 버튼으로 오브젝트 움직이기

<만들 예정인 결과물>

스마트 앱&게임 개발 강좌 월·수반 6기 수강생을 모집합니다.

​개강일 : 6월 16일(월·수반)​

​

교육대상​

​·프로그램 언어를 배워본적이 없는 일반인 및 초보 프로그래머

·앱 개발 및 게임 개발을 꿈꾸는 취업 준비자 및 예비 창업자

·게임 기획을 넘어 직접 프로그래밍을 해보려는 기획자

·디자인을 기반으로 자신만의 앱 또는 게임을 개발해보길 원하는 디자이너

교육문의 02-567-3885

(7) 버튼 넣기 –Button

​
Widget Tool에서 Template을 button으로 지정하고, Background도 Button인 상태로 ‘Anchor (Center)’의 하위에 있는 Panel에 Button을 2개 생성시킵니다. 

[그림 5-20]

​ 

생성된 버튼 중 하나의 x, y, z 포지션은 -95, -135, 0으로 설정하고, 다른 하나의 x, y, z포지션은 95, -135, 0으로 설정합니다.
그리고 Game 화면을 살펴보면, 처음에 만들려고 목표로 삼았던 이미지와 같은 화면이 되어 있는 것을 확인하실 수 있을 것입니다. 

[그림 5-21]

생성한 Button들의 Inspector창을 보면, 클릭을 감지하기 위한 Box Collider와 UI Button (Script), UIButton Scale (Script), UIButton Offset (Script), UIButton Sound (Script) 컴포넌트가 있는 것을 볼 수 있습니다.

​

​
이 컴포넌트들에 대해서 간략하게 언급을 하자면 다음과 같습니다.

​
- UI Button (Script): 버튼이 마우스 오버 상태일 때, 그리고 클릭이 되었을 때, 버튼의 색상 위로 색상을 덧대는 효과를 주는 컴포넌트 입니다.

​
- UIButton Scale (Script): 버튼이 마우스 오버 상태일 때, 그리고 클릭이 되었을 때, 버튼의 크기가 변하게 만들어주는 컴포넌트 입니다.

​
- UIButton Offset (Script): 버튼이 마우스 오버 상태일 때, 그리고 클릭이 되었을 때, 버튼의 위치가 변하게 만들어주는 컴포넌트 입니다. 생성시 기본적으로 클릭 했을 때만, 오른쪽 아래로 살짝 움직이도록 설정되어 있습니다.

​
- UIButton Sound (Script): 버튼을 클릭했을 때, 마우스 오버했을 때, 오버상태가 끝났을 때, 등 의 이벤트가 발생할 때 지정한 사운드를 플레이해주는 기능을 가진 컴포넌트 입니다.

​

이 컴포넌트들의 값을 다양하게 바꿔보면서 버튼의 컴포넌트 구성에 대해서 탐구해보시길 바랍니다.
그리고 버튼의 하위 객체로 ‘Background’라는 이름을 가진 Sprite 오브젝트와 Label 오브젝트가 있는 것을 볼 수 있습니다.
버튼의 하위 객체에 있는 오브젝트들의 컴포넌트를 다른 값으로 바꿔가며 버튼이 어떻게 바뀌는지 탐구해보시길 바랍니다.

이것으로 NGUI 기초 연습은 끝났습니다.
다음 강좌에서는 Playmaker와 NGUI를 접목시켜서 버튼을 다뤄보도록 하겠습니다.

※ 이번 강좌에서 만든 프로젝트와 Scene을 이후에 사용할 예정이니 잘 저장해주시길 바랍니다