유니티5 독학하기 그 33번째 걸음-쉬울줄 알았는데, 어려운 NGUI공부

안녕하세요?

그동안 파죽지세로 공부가 가능할 것으로 생각해서 자신 만만하게 공부를 시작해 봤는데, NGUI공부가 생각 외로 어려워서 이래저래 지체가 많이 되었습니다. 아무튼 이런 지체 속에서도 여기까지 했다는 것이 있기에, 관련된 내용을 포스팅으로 올리고자 합니다.

먼저 project 뷰에 있는 서치창-돋보기가 있는 곳을 위 스크린샷과 같이 control이라고 해서 입력합니다. 그러면 '컨트롤 프리팹'이라고 해서, NGUI에서 미리 제작이 되어 있는 버튼이나 체크박스 등을 불러 올 수 있습니다.

드레그 앤 드롭이라고 해서, 그냥 control-background라는 것을 끌어다가 그냥 계층뷰에 그대로 끌어다가 놓으면 되기는 됩니다.

Control-Background의 inspector항목에서 Size항목을 1700 X 900으로 바꾸어 두도록 합니다. 그리고 그 아래에 있는 BG-Stripes의 depth를 -4로 두도록 합니다.

이제 UI Root아래에 Background와 동일한 계층에 있는 빈 게임 오브젝트를 만들어 주도록 합니다. 만드는 방법은 위에 있는 create항목을 클릭해서 Create Empty object인가 하는 것을 클릭하는 것으로 간단하게 할 수 있습니다.

또 다른 빈 게임 오브젝트를 생성 하도록 하고, 각각 이름을 Main과 Title로 지정을 하도록 합니다. 그리고 위 스크린샷과 같이 Main아래에 Background라는 항목을 지정 하도록 하고, Title아래에서 Label과 Sprite를 옮기도록 합니다.

다음은 title으리 transform위치를 0,400,0이라고 하는데, 저는 잘 몰라서 처음에는 위 스크린샷처럼 S 항목에다가 이렇게 지정을 하였습니다.

그리고 나서 Title 게임 오브젝트의 자식 오브젝트-하위 오브젝트인 Sprite에서 사이즈를 1700X100으로 지정을 하도록 해 둡니다.

다음으로는 Ctrl + D 를 눌러서 위에 있는 Stripes를 그대로 복사하도록 합니다. 이 방법은 아마 Copy & 바로 그 자리에서 Paste를 하는 것으로 생각이 됩니다.

복사가 된 게임 오브젝트의 이름을 Border라고 지정을 하고서, 다음에는 위 스크린삿에 나와 있는 것처럼 Sprite를 HighLight-Thin으로 지정, 타입을 Sliced로 하고 Fill Center를 해제하고, 색상을 오렌지 색이 되도록 지정을 하도록 합니다. 그런데 책과는 다른 결과가 나와서 어디가 에러인지 일단 찾아 보고자 했습니다.

먼저 이전에 0,400,0이라고 지정이 되는 Sprite라는 게임 오브젝트의 Transform이라는 항목을 위 스크린샷처럼 P의 X, Y, Z축으로 지정을 하도록 합니다.

다음으로는 글자가 쓰여져 있는 Label 역시 위치를 위 스크린샷과 같이 지정을 하도록 합니다.

그리고 위 스크린샷처럼 의도한 대로, Fill center를 제거 했기에 가운데가 없는 테두리만 있는 만들 수 있었으며, Title이 될 펫말도 제대로 세워지는 것을 볼 수 있었습니다.

그리고 다음으로는 '프리팹 툴바'라고 해서 위에서 처럼 이렇게 오브젝트를 구성하는 데 도움이 되는 툴바라는 메뉴가 있다고 합니다. 불러오는 방법은 위 스크린샷처럼 NGUI에서 Open->Prefab Toolbar를 누르면 됩니다.

가장 먼저 프리팹 툴바를 열자, 위 스크린샷과 같은 화면이 나오는 것을 볼 수 있었습니다.

위 프리펩 툴바에서 하단에 있는 ICON mode라는 것을 Detailed Mode로 바꾸어서 제대로 이름까지 볼 수 있도록 만들어 주도록 합니다.

이번에는 새로운 빈 게임 오브젝트를 생성 하도록 합니다. 그것도 Main과 Title과 동일한 계층에 위치할 수 있도록 만들어 주도록 합니다.

새로운 게임 오브젝트를 Buttons라는 이름으로 지정을 하도록 합니다.

그리고 나서 위 스크린샷에 나와 있는 Simple-Button이라는 것을 선택해서 계층뷰에 있는 Buttons에 드레그 앤 드롭을 하러 가도록 합니다.

추가하고 나서는 위 스크린샷과 같이 계층뷰가 바뀌는 것을 볼 수 있었습니다. 이제 이게 Game뷰가 아니라, Scene뷰에서 어떻게 바뀐게 있는지를 볼까 합니다.

그래서 위 스크린샷과 같이, 제대로 버튼하나가 추가된 것을 볼 수 이었습니다. 이제 이것으로 일차적인 일련의 실습은 마무리를 지었고, 이어서 버튼을 여러개 버튼과 다른 위젯도 추가해야 합니다. 그 내용도 완료가 되는 대로, 이 블로그에서 포스팅으로 올릴 것을 약속 드립니다.