[javascript] Phaser를 사용하여 게임의 다국어 지원 추가하기

22 Nov 2023

javascript

게임을 개발할 때, 다국어 지원은 중요한 요소입니다. 사용자들이 여러 언어로 게임을 즐길 수 있도록 해 주기 때문에 게임의 유저 환경을 개선하는 데 큰 역할을 합니다.

Phaser는 HTML5 게임 개발 프레임워크로, 다국어 지원을 쉽게 추가할 수 있는 기능을 제공합니다. 이번 블로그 포스트에서는 Phaser를 사용하여 게임의 다국어 지원을 추가하는 방법을 알아보겠습니다.

1. 다국어 파일 작성하기

첫 번째 단계는 다국어 파일을 작성하는 것입니다. 이 파일은 각각의 언어에 해당하는 텍스트를 포함하고 있어야 합니다. 예를 들어, 다음과 같은 형식으로 작성할 수 있습니다:

{
  "en": {
    "welcome": "Welcome to the game!",
    "start": "Start",
    "settings": "Settings"
  },
  "ko": {
    "welcome": "게임에 오신 것을 환영합니다!",
    "start": "시작하기",
    "settings": "설정"
  },
  "fr": {
    "welcome": "Bienvenue dans le jeu!",
    "start": "Commencer",
    "settings": "Paramètres"
  }
}

위의 예시에서는 영어, 한국어, 프랑스어에 대한 다국어 텍스트를 작성했습니다. 각 언어의 텍스트는 해당하는 키(예: welcome, start, settings)와 함께 작성되어 있습니다.

2. Phaser에서 다국어 지원 설정하기

다국어 파일을 작성했다면, 이제 Phaser에서 다국어 지원을 설정해야 합니다. 이를 위해 Phaser의 game.state 객체 및 i18n 플러그인을 사용할 수 있습니다.

먼저, preload 상태에서 다국어 파일을 로드해야 합니다. 다음과 같은 코드를 작성하여 다국어 파일을 로드할 수 있습니다:

preload: function() {
  this.load.json('languages', 'path/to/languages.json');
}

위의 코드에서는 languages.json 파일을 languages라는 키로 로드하도록 지정했습니다.

다국어 파일을 로드한 후, create 상태에서 현재 언어를 설정하고, 텍스트를 표시하는 로직을 작성해야 합니다. 다음과 같이 코드를 작성할 수 있습니다:

create: function() {
  // 다국어 파일 로드
  var languages = this.game.cache.getJSON('languages');

  // 현재 언어 설정 (예: 'en', 'ko', 'fr')
  var currentLanguage = 'ko';

  // 다국어 텍스트 표시
  var welcomeText = this.game.add.text(100, 100, languages[currentLanguage].welcome, { fill: '#fff' });
  var startButton = this.game.add.button(100, 200, 'startButton', startGame, this);
  startButton.setLabel(languages[currentLanguage].start);

  function startGame() {
    // 게임 시작 로직
  }
}

위의 코드에서는 languages 변수로 다국어 파일을 로드하고, currentLanguage 변수를 통해 현재 언어를 설정합니다. 그리고 텍스트를 표시할 때 languages[currentLanguage] 객체를 사용하여 해당 언어의 텍스트를 가져와 사용합니다.

3. 언어 변경 기능 추가하기

게임 환경에서 언어를 변경할 수 있는 기능을 추가하면 유저들이 원하는 언어로 게임을 즐길 수 있습니다. 이를 위해 다음과 같은 코드를 작성할 수 있습니다:

update: function() {
  if (this.game.input.keyboard.isDown(Phaser.Keyboard.ENTER)) {
    // 언어 변경 로직
    currentLanguage = (currentLanguage === 'en') ? 'ko' : 'en';

    // 다국어 텍스트 업데이트
    welcomeText.text = languages[currentLanguage].welcome;
    startButton.setLabel(languages[currentLanguage].start);
  }
}

위의 코드에서는 사용자가 Enter 키를 누르면 현재 언어를 변경하고, 다국어 텍스트를 업데이트합니다.

마치며

위의 단계를 따라가면 Phaser를 사용하여 게임의 다국어 지원을 쉽게 추가할 수 있습니다. 다국어 파일을 작성하고, Phaser에서 다국어 텍스트를 로드하고 표시하는 로직을 작성하면 됩니다. 또한 언어 변경 기능을 추가하여 게임의 다국어 사용자들에게 최적의 경험을 제공할 수 있습니다.