유니티5 독학하기 그 35번째 걸음-계속 이어지는 NGUI공부 챕터2

안녕하세요?

지난번 포스팅에서는 팝업창을 만들기는 했는데 어딘가 10%는 부족해 보이는 모양으로 완성이 된 것을 볼 수 있었습니다. 아무튼 이게 작업이 다 끝난것이 아니기 때문에 일어난 일인데, 아무튼 이번 포스팅에서는 어떻게 팝업 리스트를 완성해 보고, 다음으로는 입력박스도 만들어 보고자 합니다.

먼저 Language 게임 오브젝트의 자식 오브젝트인 List라는 오브젝트 안에서 위 스크린샷과 같이 변경을 하도록 합니다. 그리고 책에서의 예시대로 언어라고 하면서 영어와 불어를 적어 놓았습니다.

그리고 나서 색상도 따로따로 정해주고, 글자 크기랑 글씨체도 따로 정해 주도록 합니다. 이렇게 하고 나서, 다음에는 Padding이 있는데, 이게 무엇인지는 모르지만, 일단 8,20으로 설정을 해 주도록 합니다.

그러나 여전히 팝업 리스트의 글씨는 작은 채인데, 이게 사실인 아까 위에서 했는 문자크기는 팝업 리스트가 열릴때 리스트의 내용입니다. 그래서 여기서 보이는 내용은 따로 지정을 해야 합니다.

그래서 List의 자식 오브젝트인 Label로 가도록 합니다.

먼저 이름을 Value로 바꾼다음에, 폰트를 바꾸고 사이즈를 50으로 올리도록 합니다. 그리고 나서 색상도 바꾸도록 합니다.

이제서야 의도한 대로 그럭저럭 보기가 괜찮은 것이 나오는 것을 볼 수 있었습니다.

다음으로는 Ctrl + D를 이용해서 방금 다 만들었는 language라는 게임 오브젝트를 복사하도록 합니다.

오브젝트 이름을 Subtitles라고 지정을 하고서, 위츼를 위 스크린샷과 같이 지정을 하도록 합니다.

역시 리스트안에서도 위 스크린샷처럼 리스트를 만들어 주도록 합니다.

역시나 같은 작업을 거치고 나면, 위 스크린샷과 같은 팝업 박스 2개가 나오는 것을 볼 수 있습니다.

그리고 나서 이번에는 입력 필드를 만들 차례입니다. 빈 오브젝트를 생성한 다음 오브젝트의 이름을 Nickname이라고 지정을 하도록 합니다.

일단 빈 오브젝트에다가 NGUI Sprite라는 것을 추가하기 위해서 Inspector뷰 아래에 있는 Add Component라는 것을 눌러서 위 그림과 같은 메뉴를 불러온 다음, sprite라고 검색을 해서 추가를 해 주도록 합니다.

그리고 이제부터 작업이 많은데, 우선 위 스크린샷과 같이 Wooden Atlas를 선택한 다음 스프라이트를 따로 지정을 하고 색상도 변경을 하고 사이즈도 조절을 해야 합니다.

이제 Nickname이라는 게임 오브젝트의 자식 오브젝토로 Label을 만들기 위해서, Alt + Shift + L 이라는 단축키를 눌러서 Label을 불러 오도록 합니다.

그리고 나서 윗 스린샷과 같이 색상을 비롯해서 글꼴, 그리고 폰트 사이즈와 오브젝트의 사이즈, 그리고 위치까지 지정을 하도록 해 줍니다.

이제 프리펩 툴바에서 있는 Input Field라는 것을 드레그 해서, 방금 만들어 둔 Nickname이라는 게임 오브젝트의 아래에 들어갈 수 있도록 드레그 앤 드롭을 해 주도록 합니다.

위 스크린샷과 같은 UI Sprite, UI Input, Box Collider라고 하는 요소가 Inspector뷰가 있는 것을 볼 수 있었습니다. 이제 이걸 여러가지 변경사항을 만들어야 하는 때 입니다.

그리고 먼저 살펴볼 것이 바로 UI Input의 매개변수입니다. 여기서 우선 Starting Value라는 것은 유니티5의 플레이 버튼을 눌렀을 경우 기본적으로 나오는 값이며, Saved As는 입력받은 텍스트를 PlayerPrefs로 저장할 수 있으며, Active Text Color는 입력을 하는 동안 나오는 색상입니다.

Inactive color: 입력필드가 선택되지 않을 때의 텍스트 색상

Caret color: 텍스트 커서의 색상

Selection Color: 선택된 텍스트의 배경 색상을 선택

Input Type: 입력된 텍스트와 관계된 세 가지 중 하나입니다. 

      -> Standard: 입력된 텍스트가 표시되며, 자동 교정 기능을 사용하지 않는다.

      -> AutoCorrect: 입력된 텍스트가 표시되며, 모바일에서는 자동 교정 기능을 사용합니다.

      -> Password: 입력된 텍스트가 *로 바뀌어서 표시돼ㅣ며, 자동 교정 기능을 사용하지 않습니다.

Validation: 입력된 텍스트의 유효성 검사 종류를 선택하는데, 특정한 문자들만 입력할 수 있도록 제한할 수 있다고 합니다.

Hide Input: 입력하는 동안에는 모바일 운영체제의 입력 박스 필드를 숨긴다는데, 모바일 환경에서 landscape모드에서 풀 스크린 키보드를 사용하지 않아도 된다고 합니다.

On Enter Key: Enter키를 누를 때 동작을 설정하는데...

   -> Submit: OnSubmit 이벤트가 발생

   -> NewLine: Enter키를 누르면 제출되지 않고 새로운 줄이 만들어 집니다.

Character Limit: 몇 글자까지 입력할 수 있는지 제한을 둘 수 있습니다.

On Submit: 입력된 문자들이 제출되었을 때, 호출할 메소드를 선택합니다.

On Change: 입력 필드에 입력된 문자들이 바뀔 때 마다 호출되는 메소드를 선택합니다.

그리고 실질적으로 입력필드를 만들기 위해서는 위 스크린샷과 같이 붉은색 줄로 그어진 부분을 바꾸도록 합니다. 먼저 게임 오브젝트의 이름부터 Input으로 변경합니다.

그리고 나서 UI Input이라는 항목도 바꾸도록 하는데, 여기서는 시작 값은 Player로 지정을 하고, 색상도 지정을 합니다. 그리고 나서 14개의 문자만을 입력할 수 있도록 만들어 주도록 합니다.

다음으로는 Input의 하위 오브젝트로 미리 생성되어 있던 Label이라는 자식 오브젝트의 이름부터 Value로 바꾸도록 하고, 다음으로는 폰트 사이즈와 Widget에서 위 스크린샷과 같이 맞추어 줍니다. 그 이유는 위에 있는 Alignment항목에 Automatic이라고 되어 있기 때문입니다.

그렇게 해서 입력필드 까지 완성을 하는 데 성공했습니다. 하지만 이러고도 아직 챕터2는 남아 있는데, 워낙에 처음하는 내용이라서 정리할 게 많아서 그렇지, 계속해서 하면 어떻게 챕터2는 다 끝낼 수 있어 보인다는 생각이 듭니다. 지금은 저 팝업 리스트가 Game뷰에서 플레이를 눌러도 안 뜨는데, 아마 짐작가는 데가 있어서, 다음번 포스팅에서 이 문제까지 해결하고 나서, 진도를 더 나아갈 것을 약속 드립니다.