유니티5 독학하기 그 34번째 걸음-계속해서 이어지는 NGUI 챕터2 실습

안녕하세요?

어떻게 시작하기는 힘들지만, 한번 시작을 하고 나니 그런데로 어떻게 되기는 되어가는 것이 보이는 NGUI공부인데, 아직도 챕터2를 다 끝내지는 못했습니다. 아무튼 이번에는 어떻게 버튼을 만들고, 될 수 있으면 팝업 리스트까지 만들고자 했는데, 너무 분량이 많아 지는 것을 보고서, 여기 까지만 일단 포스팅으로 올리고자 합니다.

먼저 지난번에 추가한 simple버튼의 Inspector 뷰를 보면, 위 스크린샷과 같은 요소들로 구성이 되어 있는 것을 볼 수 있었습니다. 그리고 아래에 있는 Label항목으로 들어가서 한번 보도록 합니다.

일단 Label항목을 보면 위와 같이 되어 있는 것을 볼 수 있었습니다.

다시 버튼으로 돌아와서 UI Button이라고 하는 항목을 열도록 합니다. 그리고 color를 바꾸도록 하도록 하고, 그 다음에는 색상을 Normal: 평상시, Hover: 커서등이 위에 있을 때, Pressed: 버튼을 눌렀을 때 라고 이렇게 색상을 지정하고, 스프라이트는 딱히 바꾸지는 않도록 합니다.

먼저 버튼이라는 이 오브젝트의 이름을 Play라고 바꾸도록 하며, 사이즈를 700 X 500으로 바꾸도록 합니다.

그리고 위에서 소개가 된 Normal, Hover, Pressed의 색상을 바꾸고, 스파라이드도 바꾸도록 합니다.

다음으로 위에서 보여준 적이 있는 Play 오브젝트 아래에 있는 Label항목으로 가서, 폰트와 사이즈를 바꾸도록 하고, 다음으로 텍스트도 바꾸고, 색상도 위 스크린샷과 같이 바꾸도록 합니다.

그리고 나서 유니티5에 있는 Scene를 보니, 기본적으로 제공이 되는 버튼에 비해서 상당히 나아져 보이는 버튼이 있는 것을 볼 수 있었습니다.

이제 방금전에 만들어 놓은 Play버튼을 Ctrl + D로 복사를 하는 것으로 Options 버튼을 만들 준비를 하도록 합니다.

여기서는 앞서 소개한 Play버튼을 만드는 것과 다를 것도 없이, 그냥 버튼 오브젝트에서 색상을 바꾸도록 하고, Label 항목으로 가서는 텍스트와 색상을 바꾸는 것으로 위 스크린샷과 같은 작업이 끝날 수 있었습니다.

이제 다음으로는 EXIT라는 버튼을 만들기 위해서 Options게임 오브젝트는 Ctrl + D로 복사를 해서 작업시작을 준비 하도록 합니다.

여기서도 특별히 작업할 것도 없이, 그냥 색상을 바꾸고 Label 항목으로 가서, 글자도 바꾸도록 합니다. 이렇게 하는 것으로 위 스크린샷과 같은 모습으로 메인 메뉴가 완성이 되는 것을 볼 수 있었습니다.

이번에는 옵션 버튼을 누르면 나와야 하는 옵션의 메뉴를 만들어야 할 필요가 있는데, 이 작업을 위해서는 먼저 Main 이라는 게임 오브젝트를 Ctrl + D로 복사를 하도록 합니다.

이전에 만들어 놓은 원본이 되는 Main 오브젝트의 Inspector뷰에서 체크표시가 되어 있는 체크박스를 해제하도록 합니다. 이렇게 되면, Scene뷰에서 더 이상은 보이지 않도록 되는 효과가 나옵니다.

이제 복사가 된 게임 오브젝트에서 buttons를 제거하고, 이름을 Options로 바꿔야 하는데, 제가 잘못해서 오타를 냈습니다. 일단 이건 나중에 고치도록 하고, 먼저 빈 게임 오브젝트인 Language라는 것을 만들었습니다.

그 다음에는 프리펩 툴바에서 Colored Popup List라는 것이 있는데, 이걸 그대로 드레그 해서, 계층뷰에서 방금 만들어 놓은 Language게임 오브젝트에 가서 놓도록 합니다.

그리고 여기서 새로 추가가 된 Colored Popup List라는 것이 있는데, 여기서 위 스크린샷과 같은 메뉴들이 있는 것을 볼 수 있습니다. 일단 확인만 먼저 하도록 합니다.

먼저 접혀 있는 메뉴를 펴도록 합니다. 여기서도 아래에 세세한 항목이 있는 것을 볼 수 있습니다.

아래에 있는 다른 메뉴를 바꾸어서 폰트랑 사이즈 등을 바꿀 수도 있고, 다음으로는 on Value Change라고 해서 팝업 리스트에서 선택되는 값이 바뀌었을 때 호출하는 메소드를 선택할 수 있다고 합니다.

이 팝업 리스트에서 스프라이트를 추가해야 하는데, 아래에 있는 Add Component라는 버튼을 눌러서, 위 스크린샷과 같이 sprite라만 검색응ㄹ 해도, NGUI Sprite라는 것을 확인할 수 있습니다. 이걸 클릭하도록 합니다.

그리고 나서, 먼저 Language의 Inspector뷰를 보면, 위 스크린샷과 같이 되어 있는 것을 볼 수 있는데, 여기서 이제 변경에 하나하나 들어 가도록 합니다.

먼저 위치를 지정 하도록 하고, 아틀라스는 Wooden Atlas를 선택하도록 합니다. 그리고 Sprite를 선택하고 타입과 색상을 선택하도록 합니다. 그리고 나서 마지막으로 사이즈를 변경 하도록 합니다.

다음이 그냥은 어떻게 하는지는 모르겠지만, 단축키로 Alt + Shift + L을 눌러서 Label이라는 항목을 따로 생성하도록 합니다. 물론 계층뷰에서 위치는 Language 오브젝트의 자식 오브젝트로 추가가 되도록 합니다.

이제 마지막으로 Language라는 버튼이 드러났고, 그 아래에 아직 정리가 끝나지 않은 팝업 리스트 항목이 있는 것을 볼 수 있습니다. 이 부분을 이제 정리하러 가야 하는 단계가 되었는데, 일단 스크린샷으로 찍은 양이 너무 많아져서 여기서 한번 포스팅을 올리는 것으로 끊도록 했습니다. 조만간에 이 팝업 리스트를 다 완성하는 것을 포함하는 후속 포스팅을 올릴 것을 약속 드리며, 이번 포스팅은 여기서 마치도록 하겠습니다.