4. NGUI 다국어 지원하기 실습 (Localization) – 5

NGUI 다국어 지원하기 실습 – 5

NGUI Localization

지난 예제에 이어서 아래 그림과 같이 NGUI에서 제공하는 다국어 지원 기능을 활용한 예제를 진행합니다.

위의 예제 결과화면 중에서 가운에 위치한 아이디/패스워드 입력 란을 만듭니다.
이를 위해서 패널을 생성합니다.
계층 뷰에서 UI Root 게임 오브젝트를 선택하고 유니티 메뉴 상단의 NGUI -> Create -> Panel을 클릭해서 패널을 생성합니다. 생성한 패널의 이름을 ID PW Panel로 이름을 변경하고 Y 위치 값을 200으로 설정합니다.

이어서 아래 그림을 참고해서 UIPanel 컴포넌트를 설정합니다.

• Clipping 항목을 Soft Clip으로 설정
• Size 항목을 가로 700 세로 300으로 설정
• Anchor 를 Unified 타입으로 설정

계층 뷰에서 ID PW Panel 게임 오브젝트를 선택하고 NGUI -> Create -> Sprite 메뉴를 선택해서 스프라이트를 생성하고, 생성된 스프라이트의 이름을 ID Input으로 변경합니다.

새로 생성한 ID Input 스프라이트를 선택하고 아래 그림을 참고해서 항목을 설정합니다.

• Y위치를 100으로 설정
• Sprite항목을 Background로 선택
• 가로 700 세로 100 크기 설정
• Unified타입으로 앵커 적용

ID Input 게임 오브젝트를 선택한 상태에서 NGUI -> Create -> Label 메뉴를 선택해서 레이블을 새로 생성합니다. 생성된 레이블을 선택하고 아래 그림을 참고해서 UILabel 컴포넌트를 설정합니다.

이어서 아래 그림과 같이 Localize 컴포넌트를 추가하고 Key 항목에 ID를 입력합니다.

이제 ID Input 스프라이트를 입력이 가능한 형태로 만들어 보겠습니다. 계층 뷰에서 ID Input 게임 오브젝트를 선택하고 NGUI -> Attach -> Collider 메뉴를 선택합니다. 그리고 NGUI -> Attach -> Input Field Script 메뉴를 선택해서 입력이 가능한 Input Field 컴포넌트를 추가합니다.

아이디 입력 항목이 완성되었습니다. ID Input 게임 오브젝트 복제를 이용해서 아래 그림과 같이 입력 항목을 2개 더 추가합니다. 복제한 게임 오브젝트의 이름을 각각 PW Input과 PW Confirm Input으로 설정합니다.

그리고 Label 항목도 각각 PW와 Password Confirm 으로 입력하고 위치도 아래 그림과 같이 적절히 설정합니다.

입력 추가 및 위치 설정이 완료되면, PW Input 게임 오브젝트의 자식 오브젝트인 Label 게임 오브젝트를 선택하고 Localize 컴포넌트의 Key 항목에 Password를 입력합니다.

이어서 PW Confirm Input 게임 오브젝트의 자식 게임 오브젝트인 Label 게임 오브젝트를 선택하고 Localize 컴포넌트의 Key 항목에 PWConfirm을 입력합니다.

아이디와 패스워드를 입력할 수 있는 입력창이 완성되었습니다.
그런데 지금은 배경 색상과 입력 창의 색상이 모두 흰색으로 설정되어 있어서 구분하기가 어렵습니다.
계층 뷰에서 Main BG 게임 오브젝트를 선택하고 아래 그림과 같이 UI Sprite의 Color Tint 항목을 회색으로 설정해서 구분이 되도록 합니다.

ID PW Panel 을 생성해서 입력창을 설정했던 것과 같은 방법으로 아래 그림을 참고해서 화면을 구성합니다.

ID PW Panel 게임 오브젝트를 복제해서 입력을 추가하고 배치를 하면 좀 더 쉽게 배치할 수 있습니다. 아래 그림을 참고해서 추가한 입력 창의 위치를 설정합니다.

각 입력 게임 오브젝트들은 Label이라는 이름으로 자식 오브젝트를 가지고 있습니다. 그리고 이 Label 게임 오브젝트에는 Localize 컴포넌트가 있습니다.

입력 창이 가지고 있는 Label 게임 오브젝트를 각각 선택하고 아래 그림을 참고해서 입력에 해당하는 키 값을 설정합니다.

이제 예제 화면에서 제일 아래에 위치한 가입하기 버튼을 생성합니다.
계층 뷰에서 UI Root 게임 오브젝트를 선택하고 NGUI -> Create -> Sprite 메뉴를 선택해서 스프라이트를 생성합니다. 생성한 스프라이트를 선택하고 아래 그림을 참고해서 항목을 설정합니다.

이어서 SignIn Button 게임 오브젝트를 선택한 상태에서 NGUI -> Attach -> Collider 메뉴를 선택하고, NGUI -> Attach -> Button Script 메뉴를 선택해서 버튼 동작이 가능하도록 컴포넌트를 추가합니다.

추가된 Button 컴포넌트에서 아래 그림을 참고해서 버튼 동작에 따른 색상 값을 설정합니다.
버튼의 기본 색상(Normal)을 초록색으로 설정한 다음 Hover 상태의 색상을 이보다 조금 밝은 초록색을 설정합니다. 그리고 Pressed는 Normal상태일 때보다 조금 어두운 초록색을 설정합니다.

버튼 색상이 적용되었습니다. 버튼에 텍스트를 추가하기 위해서 SignIn Button 게임 오브젝트를 선택하고 NGUI -> Create -> Label 메뉴를 선택해서 레이블을 SignIn Button의 자식 오브젝트로 추가합니다.
새로 생성한 Label 게임 오브젝트를 선택하고 아래 그림을 참고해서 항목을 설정합니다.

이어서 Localize 컴포넌트를 추가하고 Key 항목에 SignIn을 입력합니다.

모든 UI의 배치가 완료되었습니다. 배치가 완료된 UI는 아래 그림과 같은 모습입니다.
그림과 배치 모습이 다른 경우에는 그림을 참고해서 위치를 다시 설정합니다.

이제 언어를 변경하는 스크립트를 작성하고 이를 통해서 설정 언어를 변경해보겠습니다.
프로젝트 뷰에서 Create -> C# Script 메뉴를 통해서 스크립트를 생성하고 Assets/Scripts 폴더에 SetLanguage 라는 이름으로 저장합니다. 스크립트가 생성되면 생성된 스크립트를 열고 아래 내용을 입력합니다.

아래 스크립트에서 ToggleLanguate 메소드가 핵심기능을 담당합니다. 이 메소드는 English Toggle / Korean Toggle 탭 버튼을 통해서 실행되도록 설정할 예정입니다.

토글 버튼이 눌리면 선택된 버튼의 이름을 판별해서 한국어 버튼이 눌렸으면 지원 언어를 Korean으로 설정하고, English 버튼이 눌리면 언어를 English로 설정하는 기능을 합니다.

Localization.language 값에 Localization.txt에 정의된 언어를 문자열 값으로 설정하면 해당 언어로 설정됩니다.

using UnityEngine;
using System.Collections;

namespace RonnieJ.NGUIExam
{
    public class SetLanguage : MonoBehaviour
    {
        private string korean = "Korean";
        private string english = "English";

        public void ToggleLanguage()
        {
            if (UIToggle.current.value)
            {
                if (UIToggle.current.name.Contains("English"))
                    Localization.language = english;
                else if (UIToggle.current.name.Contains("Korean"))
                    Localization.language = korean;
            }
        }
    }
}

스크립트 작성이 완료되었으면, 계층 뷰에서 Main BG 게임 오브젝트를 선택하고 위에서 작성한 SetLanguage 스크립트를 컴포넌트로 추가합니다.

컴포넌트 추가가 완료되었으면, Korean Toggle 게임 오브젝트를 선택하고 아래 그림과 같이 Main BG 게임 오브젝트를 드래그해서 Notify 항목에 설정합니다.

Notify 항목 설정을 한 다음, 아래 그림을 참고해서 Method 항목을 SetLanguage 컴포넌트가 가지고 있는 ToggleLanguage 메소드로 설정합니다.

Korean Toggle 탭 버튼 설정이 완료되면, English Toggle 탭 버튼도 같은 방법으로 설정합니다. 아래 그림을 참고해서 Notify 항목에 Main BG 게임 오브젝트를 드래그해서 설정하고 Method항목에 ToggleLanguage 메소드를 설정합니다.

모든 준비가 완료되었습니다. 이제 유니티를 실행하고 결과를 확인합니다.
영어와 한국어를 변경하는 탭 버튼을 각각 클릭하면 선택한 언어로 각 위젯의 텍스트가 바뀌는 것을 확인할 수 있습니다.

모든 과정이 완료되었습니다.

이해가 가지 않는 부분이 있으면 이번 예제를 복습을 하시거나 4.NGUI 다국어 지원하기 (Localization) – 1 과 4.NGUI 다국어 지원하기 (Localization) – 2 의 내용을 확인해서 NGUI에서 제공하는 Localization 기능을 확실하게 익히시기 바랍니다.

내용 끝까지 읽어주셔서 감사합니다.
배너 클릭은 저에게 많은 힘이 됩니다.
감사합니다 🙂