유니티5 독학하기 그 36번째 걸음-드디어 끝난 챕터2

안녕하세요?

 

드디어 유니티 NGUI 게임 프로젝트라는 책의 챕터2를 드디어 마쳤고, 그 내용을 이번 포스팅에서 다루고자 합니다. 지난 번 포스팅에서는 닉네임을 입력하는 입력필드까지 만드는 것을 했는데, 이번에는 체크박스를 만들고, 사운드와 효과음의 크기를 제어하는 슬라이드를 만들고자 합니다.

 

 

우선 빈 자식 오브젝트를 만들기를 해서 새로이 빈 게임 오브젝트를 하나 만들어 주도록 합니다. 당연 이전에 만들어 놓았는 Options의 다른 자식 오브젝트와 동항렬로 두도록 합니다.

 

 

게임 오브젝트의 이름을 Sound로 바꾸고 난 다음에는 아틀라스를 Wooden Atlas로 바꾸고, 위 스크린샷과 같이 여러가지 요소를 바꾸어 주도록 합니다.

 

 

그리고 Sound라는 오브젝트에 Alt + Shift + L을 눌러서, Label이라는 항목을 하나 만들어 주도록 합니다.

 

 

이번에는 Label이라는 방금 생성한 게임 오브젝트를 위 스크린샷과 같이 바꾸어 주도록 합니다.

 

 

이제 체크박스를 추가할 시간입니다. 체크박스는 프리펩툴바에서 위 스크린샷에 나와 있는 것과 같은 것을 찾아낸 다음, 그대로 드레그 앤 드롭을 해서, Sound 오브젝트의 자식 오브젝트가 되도록 합니다.

 

 

실제 계층뷰에서는 위 스크린샷과 같이 변하는 것을 볼 수 있습니다.

 

 

일단 체크박스는 위와 같은 오브젝트로 구성이 되어 있는 것을 볼 수 있는데, 위 UI라고 시작되는 구성요소들은 다음과 같은 기능을 대략 하고 있다고 합니다.

* UIWidget: 기본적인 NGUI컴포넌트

* UIToggle: 체크박스나 라디오 버튼들에 사용되는 On/Off 스위치

* UI Button: 체크박스의 Hover/Pressed 상태에 색상 효과를 추가하는 것에 사용이 된다.

* UI Button Rotation: hover상태에서 배경을 회전하는 데 상용되는 컴포넌트라고 합니다.

 

 

이제는 더 세부적으로 들어가서 UI Toggle 안의 구성요소를 살펴 보는데, 여기에 있는 매개변수에 대해서 대략적으로 살펴 보았더니 다음과 같았습니다.

 

* Gorup: 같은 그룸 ID를 지정하는 구성요소입니다.

* Start State: 유니티의 Play버튼을 눌렀을 때의 기본 상태

* On Value Change: 상태가 바뀔 때 마다 어떤 메소드가 출력될 것인지에 대해서 지정합니다.

먼저 체크박스의 게임 오브젝트 이름을 Checkbox라고 바꾸고 나서, 위 스크린샷에 나와 있는 것 처럼 사이즈를 바꾸도록 하고, 위치도 바꾸도록 합니다.

아래로 내려가서 UI Button에 대해서 칼라들을 바꾸도록 합니다.

이제 체크박스의 크기에도 작업을 해 주는데, 위 스크린샷과 같은 형식으로 하도록 합니다.

이제 체크마크도 다르게 바꾸어 주어야 하는 단계가 왔습니다. 위 스크린샷에 보이는 대로, 색상도 바꾸고, 사이즈도 변경을 하도록 합니다. 그리고 위치도 바꾸도록 합니다.

그리고 체크박스 옆에 있는 문자 레이블을 수정하러 갑니다. 각종 설정은 위 스크린샷에 나와 있는 그대로 바꾸도록 합니다.

그리고 위치를 옮겨야 하는데, 이 레이블은 닻이 내려져 있어서 바꿀 수 없습니다. 그래서 Anchors를 none으로 설정해 줍니다.

다음으로는 레이블의 위치를 바꾸도록 합니다.

이렇게 위 스크린샷과 같이 멋지게 사운드를 켜고 끌수 있는 체크박스를 추가하는 데 성공했습니다.

그리고 나서 이제 슬라이더를 추가해야 하는데, 위 스크린샷과 같이 Sound를 Ctrl + D로 바꾼다음에, 이전에 있던 체크박스를 삭제하도록 해서 만들 준비를 끝내도록 합니다.

프리펩 툴바에서는 슬라이더(Slider)가 있는 것을 볼 수 있었습니다. 이걸 드레그 앤 드롭을 해서 방금 추가를 하였는 volume이라는 게임 오브젝트의 자식 오브젝트로 만들도록 합니다.

자식 오브젝트로 제대로 만든 이후의 모습입니다. 이렇게 해서 Foreground: 슬라이더바의 채워진 부분을 나타내는 부분, Thumb: 슬라이더의 조절 막대를 표시, Label: 슬라이더가 채워진 %를 표시하는 레이블 이런식으로 채워진 것을 볼 수 있었습니다.

그리고 Inspector뷰를 보면 위 스크린샷과 같은 구성요소들이 있는 것을 볼 수 있습니다.

그 중에서 슬라이더의 동작과 매개변수를 관장하는 UI Slider의 내부에 보면 위와 같은 구성요소들이 있는 것을 볼 수 있습니다. 여기서 value라고 슬라이더의 값을 지정할 수 있고, steps라고 해서 슬라이더가 비어있다가 가득 채워질 때 까지의 단계 갯수도 지정할 수 있습니다. 그리고 Appearance에서는 각각의 부분에 사용될 스프라이트를 지정할 수 있습니다.

이제 본격적인 볼륨조절 슬라이더 바를 만드는 작업입니다. 우선 게임 오브젝트의 이름을 SFX로 바꾸도록 하고, 위치를 바꾸고 다음으로는 사이즈를 변경하도록 합니다.

먼저 Value의 값을 1로 바꾸도록 하고, 이어서 UI Slider와 UI Slider Colors에서 size를 2로 바꾼 다음에 색상을 바꾸도록 합니다. 이렇게 해서 작업이 일단은 완성이 되었습니다.

이제 슬라이더 조절바를 바꾸어야 하는데, 여기서는 color Tint를 바꾸도록 하고, 다음으로는 사이즈를 조절 하도록 합니다.

다음으로는 슬라이더안에 포함이 되어 있는 Label을 클릭해서 들어가도록 합니다.

먼저 오브젝트의 이름을 Value로 바꾸도록 하고, 위치와 폰트 사이즈, 그리고 색상을 바꾸도록 합니다.

슬라이더 조절 막대의 크기가 커졌으니, Box Collider라는 것을 변경하도록 해야 합니다. 위 스크린샷에 나와있는 것처럼 변경을 가하도록 합니다.

그리고 이제 Value를 Ctrl + D를 눌러서 복사하도록 합니다.

여기서는 위치를 다르게 해서, 텍스트를 SFX라고 지정을 해서 이게 무슨 슬라이드 바인지 사람들이 알기 쉽도록 합니다.

이렇게 해서 한개의 슬라이드 바가 완성이 된 것을 볼 수 있었습니다. 이제 효과음을 만들었으니 음악을 만들 차례입니다.

위에서 다 완성을 한 SFX의 게임 오브젝트를 Ctrl + D를 눌러서 복사 하도록 합니다.

게임 오브젝트의 이름을 Music로 바꾸도록 하고, 위치를 따로 옮기도록 합니다.

이렇게 해서 최종적으로 완성이 된 모습입니다. 여기서는 특별히 조작할 것은 없고, 그냥 이름만을 바꾸었을 뿐입니다. 이렇게 해서 어떻게 외형상으로는 Option의 화면 메뉴를 완성하는 데는 성공했습니다. 아직은 Game뷰에 가서, Play버튼을 눌러도 아무런 일이 일어나지 않는 것은, 대본에 해당하는 프로그래밍을 하지 않았기 때문입니다. 아마 나중에 나오는 챕터에서 관련된 내용이 나오리라 생각합니다.