본문 바로가기
유니티 이야기

[Unity] GUI Text 다국어 번역 하기

by novices 2022. 8. 23.
반응형

게임을 만들어 여러 나라에 출시할 때 일반적으로 사용되는 기능들은(음악, 효과음 등) 아이콘으로 표현하면 되지만 해당되지 않는 경우에 UI Text 요소들에 번역이 필요합니다. 유니티나 에셋스토어에서 제공하는 여러 패키지가 있지만 만들어보는 것에 학습 효과가 있다고 생각합니다. 자체적으로 게임 UI에 존재하는 문자들을 설정에 따라 다국어 표시하는 기능을 작성해보겠습니다.

 

본 포스팅에서 만들 간단한 번역 기능은 게임 타이틀을 언어변경 버튼을 누를 때마다 UI가 갱신되게 하는 예시입니다. 기능의 전체적인 흐름은 언어가 변경될 때마다 언어별 데이터가 저장되어 있는 string 배열에서 값을 가져와 UI Text 컨포넌트에 문자열을 할당하고 UI를 갱신합니다. 게임 구동 시 언어를 자동으로 설정하는 방법은 포스팅에 포함되지 않았습니다.

 

 

1. 유니티 에디터 화면 ( Game - Hierarchy - Project )

스크립트는 TranslationData, TranslationManager, DisplayUI 3개로 만들었고 데이터를 저장할 구조인 TranslationData를 제외한 나머지 스크립트는 TitlePanel 게임 오브젝트에 컴포넌트로 추가하였습니다.

 

유니티-에니터-Game - Hierarchy - Project
유니티 에디터 화면

 

 

2. 스크립트 구성

DisplayUI.cs ( UI 갱신 및 버튼 동작)

TranslationData (키값 및 데이터를 저장할 string 배열)

TranslationManager (키값을 받아 언어 맞는 문자열을 돌려주는 기능)

 

DisplayUI.cs

현재 설정된 언어를 표시하기 위해 enum Languge를 만들고 다른 클래스에서 바로 접근하여 읽을 수 있도록 static으로 변수 선언하였습니다. 

using UnityEngine;
using UnityEngine.UI; // Text 컨포넌트를 사용하기 위한 선언

public enum Language {ENGLISH, KOREAN, JAPANESE} // 언어별 enum
public class DisplayUI : MonoBehaviour
{
    public static Language language; // 다른 클래스의 접근을 위한 static 선언
    TranslationManager translationManager; // TranslationManager 클래스 주소를 담기 위한 변수
    public Text titleText; // 타이틀에 사용중인 텍스트 컨포넌트를 참조할 변수
    void Awake()
    {
        // 게임 씬내 TranslationManager를 찾아서 할당합니다.
        translationManager = FindObjectOfType<TranslationManager>();

        language = Language.ENGLISH; // 구동 시 영어로 설정하고 UI를 갱신 합니다.
        DisplayTitle();
    }

    void DisplayTitle()
    {
        /* translationManager의 GetTranslateString함수에 키값을 넣어
            리턴된 값을 타이틀텍스트 컨포넌트의 text 필드에 할당합니다. */
        titleText.text = translationManager.GetTranslateString("Title");
    }

    // 버튼별 언어를 변경하고 UI를 갱신
    public void EnglishButton()
    {
        language = Language.ENGLISH;
        DisplayTitle();
    }

    public void KoreanButton()
    {
        language = Language.KOREAN;
        DisplayTitle();
    }

    public void JapaneseButton()
    {
        language = Language.JAPANESE;
        DisplayTitle();
    }
}

 

TranslationData.cs

[System.Serializable]
public class TranslationData
{
    // 배열의 첫번째는 키값으로 사용
    // key - 0, english - 1, korean - 2, japanese - 3
    public string[] languageDatas;
}

 

TranslationManager.cs

using UnityEngine;
public class TranslationManager : MonoBehaviour
{
    //직렬화된 스트링 배열을 통해 에디터에서 데이터를 입력할 수 있습니다.
    public TranslationData[] translationData; 

    //키값을 받아 번역된 문자열을 리턴하는 함수
    public string GetTranslateString(string newKey) 
    {
        // translationData.Length는 키값이 있는 번역 배열의 수를 뜻합니다.
        for(int i = 0; i < translationData.Length; i++) 
        {
            /* 배열의 0번이 키값이므로 입력된 키와 비교하여 같은 키일 경우에만
            번역된 문자열을 리턴합니다.*/
            if(translationData[i].languageDatas[0] == newKey)
            {
                // 언어설정 enum을 int로 형변환하고 key값을 제외하기 위한 +1
                return translationData[i].languageDatas[(int)DisplayUI.language + 1];
            }  
        }
        return newKey; //입력된 키값이 없을 경우 입력된 키를 돌려줍니다.
    }
}

 

 

3. 유니티 에디터 설정

TitlePanel에 컴포넌트로 추가된 DisplayUI, TranslationManager 스크립트에 아래와 같은 내용이 참조 및 입력했습니다. 번역할 내용이 추가로 필요하다면 translationData의 배열 길이를 늘리고 키 와 언어별 데이터를 추가로 입력하면 됩니다.

 

작성된-스크립트-참조-값-입력화면
컨포넌트로 추가된 스크립트의 참조 및 값 입력화면

 

 

인스펙터에서 각버튼의 리스너에  DisplayUI를 참조하고 언어별 함수를 등록합니다.

버튼-리스너-함수-추가-화면
버튼 리스너에 함수 추가 화면

 

 

4. 결과

결과물은 아래와 같습니다. 완성된 코드에서 Subtitle 텍스트도 번역이 되도록 추가하고 다른 방법으로 비슷한 기능을 구현해보세요. 

결과화면-gif
결과 화면 gif

 

 

반응형

댓글