4. NGUI 다국어 지원하기 실습 (Localization) – 4
NGUI 다국어 지원하기 실습 – 4
NGUI Localization
지난 예제에 이어서 아래 그림과 같이 NGUI에서 제공하는 다국어 지원 기능을 활용한 예제를 진행합니다.
2D UI를 생성하고 화면 크기 설정하기
유니티 메뉴 상단의 NGUI -> Create -> 2D UI 메뉴를 선택합니다. 계층 뷰에 생성된 UI Root 게임 오브젝트를 선택하고 아래 그림과 같이 Scaling Style 항목을 Constrained로 화면의 가로/세로 크기를 800/1280으로 입력합니다.
Fit 항목을 모두 체크해서 가로와 세로 크기를 모두 고려해서 화면 크기에 대응하도록 설정합니다.
배경 스프라이트와 타이틀 텍스트 만들기
배경 스프라이트를 생성합니다. 이번에는 위젯 마법사를 사용하지 않고 다른 방법으로 스프라이트를 생성하겠습니다. NGUI 3.x 버전부터 지원하는 컨텍스트 메뉴를 사용합니다.
계층 뷰에서 UI Root 게임 오브젝트를 선택하고 씬 뷰에서 마우스 오른쪽 버튼을 클릭합니다. 그러면 아래 그림과 같이 메뉴가 나타나는데 Create -> Sprite 메뉴를 선택하고 스프라이트를 생성합니다.
생성된 스프라이트는 계층 뷰의 UI Root 게임 오브젝트의 자식 오브젝트로 생성됩니다. 생성된 Sprite 게임 오브젝트의 이름을 Main BG로 변경하고, 아래 그림과 같이 아틀라스와 스프라이트 그리고 크기를 설정합니다.
스프라이트와 크기 설정이 완료되면, 아래 그림과 같이 앵커(Anchor)를 설정합니다.
스프라이트 각 모서리와 화면의 각 모서리를 앵커로 연결하고, 오프셋(앵커 위치와의 거리)을 설정하면 화면의 크기가 변경되더라도 스프라이트의 크기와 위치를 이 값에 따라서 상대적으로 유지할 수 있습니다.
배경 스프라이트가 완성되었습니다. 이어서 타이틀 텍스트를 생성합니다. 스프라이트를 생성했을 때와 같은 방법으로 NGUI의 컨텍스트 메뉴를 통해서 생성하겠습니다.
UI Root 게임 오브젝트를 선택한 상태에서 씬 뷰에서 마우스 오른쪽 버튼을 클릭합니다. Create -> Label 메뉴를 선택해서 UILabel을 생성합니다.
생성된 Label 게임 오브젝트의 이름을 Title Label로 변경하고, 아래 그림과 같이 각 항목을 설정합니다.
텍스트 항목 설정이 완료되면, 아래 그림과 같이 앵커를 설정합니다.
UILabel 항목 설정이 모두 완료되었습니다. 이제 타이틀 텍스트가 영어와 한글로 변경될 수 있도록 Localize 컴포넌트를 키 값을 설정하겠습니다.
아래 그림과 같이 Title Label 게임 오브젝트에 UILocalize 컴포넌트를 추가하고 Key 항목에 Localization을 입력합니다.
언어를 변경하는 탭 버튼 만들기
배경과 타이틀 텍스트 생성이 완료되었습니다.
문제 없이 예제를 따라오셨다면 아래 그림과 같이 배경 이미지와 타이틀 텍스트가 배치된 화면을 확인할 수 있습니다.
토글 버튼 두개를 생성하고, 탭 버튼으로 구성해보겠습니다. UI Root 게임 오브젝트를 선택한 상태에서 씬 뷰에서 마우스 오른쪽 버튼을 클릭합니다. 아래 그림과 같이 메뉴가 나타나면 Create -> Invisible Widget 메뉴를 선택해서 위젯을 생성합니다.
Invisible Widget은 NGUI의 UI 위젯 중에서 화면에 보이지는 않지만, 여러가지로 응용할 수 있는 위젯입니다. 보이지 않는 위젯을 활용해서 탭을 구성합니다.
생성된 위젯을 선택하고 아래 그림을 참고해서 위젯의 각 항목을 설정합니다.
UIWidget의 항목 설정이 완료되었습니다. 이 위젯을 토글 버튼으로 동작시키기 위해서 필요한 컴포넌트를 추가합니다. Korean Toggle 게임 오브젝트를 선택한 상태에서 유니티 메뉴 상단의 NGUI -> Attach -> Box Collider 메뉴를 선택합니다. 이어서 NGUI -> Attach -> Toggle Script 메뉴를 선택해서 토글 버튼으로 만듭니다.
이어서 추가된 UIToggle 컴포넌트의 Group항목과 Starting State 항목을 아래 그림과 같이 설정합니다.
그리고 Korean Toggle 게임 오브젝트를 선택한 상태에서 NGUI -> Create -> Label 메뉴를 선택해서 레이블을 새로 생성합니다. 생성된 레이블을 선택하고 아래 그림과 같이 각 항목을 설정합니다.
항목 설정이 완료되면, 아래 그림과 같이 위에서 생성한 Label 게임 오브젝트를 복제하고 이름을 Selected Label 로 변경합니다.
복제한 레이블의 색상을 아래 그림과 같이 Font Size를 55로 설정하고 텍스트 색상을 초록색으로 설정합니다.
Korean Toggle 게임 오브젝트를 선택하고 아래 그림을 참고해서 항목을 설정합니다. UIToggled Object 컴포넌트는 탭 버튼을 구성할 때 활성화 상태일 때와 비활성화 상태일 때의 모습을 서로 구분하고 싶을 때 사용합니다.
비활성화 일 때 화면에서 가려야하는 게임 오브젝트를 설정하면 게임 오브젝트가 비활성화 되어 화면에서 보이지 않습니다.
- Selected Label 게임 오브젝트를 UIToggle 컴포넌트의 Sprite 항목에 드래그해서 설정
- Transition 타입을 Instant로 설정
- Toggle Object 컴포넌트 추가
- Toggled Object 컴포넌트의 Deactivate 항목에 Label 게임 오브젝트를 드래그해서 설정
토글 버튼 하나가 완성되었습니다. 이 버튼은 한국어로 전환할 때 사용할 토글 버튼입니다.
이어서 계층 뷰에서 Korean Toggle 게임 오브젝트를 복제하고 이름을 English Toggle로 변경합니다.
복제한 English Toggle 게임 오브젝트를 열고 Label 게임 오브젝트와 Selected Label 게임 오브젝트를 모두 선택합니다. 그리고 아래 그림과 같이 UILabel 컴포넌트의 Text 항목에 English라고 입력합니다.
계층 뷰에서 English Toggle 게임 오브젝트를 선택하고 아래 그림과 같이 UI Toggle 컴포넌트의 Starting State 항목을 체크 해제합니다. 이렇게 해서 기본 언어를 한국어로 설정되도록 합니다.
설정이 완료되면, 씬 뷰에서 English Toggle의 위치를 마우스 드래그를 이용해서 조절합니다. 예제에서는 한국어 토글 버튼의 왼쪽에 위치시켰습니다.
탭 버튼이 완성되었습니다.
유니티를 실행하고 아래 그림과 같이 토글 버튼을 번갈아 눌러보면 탭 버튼 처럼 동작하는 것을 확인할 수 있습니다.
여기서 끊고 다음 예제에서 나머지 위젯 배치 및 영어와 한국어 간의 언어를 전환하는 과정을 진행하겠습니다.
내용 끝까지 읽어주셔서 감사합니다.
배너 클릭은 저에게 많은 힘이 됩니다.
감사합니다 🙂
