Как сделать поддержку мультиязычности в игре

На самом деле вариантов множество. Начиная с хардкода

Код:


if(language == 'ru'){
    alert('Сообщение на русском языке');
} else if(language == 'en') {
    alert('Message in english');
}


и так для каждого текстого блока. Но, как мне кажется, что



По этому я придумал вот такой вот велосипед:

Код:


let options = {}; //Переменная с нашими настройками
if(localStorage.getItem('language')){
    options.language = localStorage.getItem('language'); //Если в Local Storage есть наша переменная языка, возьмем от туда
} else {
    options.language = 'en'; //если нет, установим Английский
}

//При нажатии на кнопку смены языка
$('#change-language-button').click(function(){
    checkLanguage();
});

function checkLanguage(){
  if (options.language == 'en') {
    options.language = 'ru';
  } else {
    options.language = 'en';
  } //Меняем язык
  getMessages(options.language);
  localStorage.setItem("language", options.language); //Записываем в Local Storage
}

//Получаем Json со строками из Json файла
function getMessages(lang) {
  $.ajax({
    url    : 'lang/' + lang + '/messages.json',
    dataType: "json",
    success : function (data) {
      msg = data;
      setLanguage();
    }
  });
}

//Присваиваем полученные строки объектам
function setLanguage() {
  $('.controls-header').text(msg.msg_controls);
  $('.options-header').text(msg.msg_options);
  /*Перечисляем наши текстовые блоки*/
}


Создаем папку 'lang', а в ней папки, соответствующие аббревиатурам наших языков. Соответственно в данном примере 'ru' и 'en'. В них создаем файлы messages.json с нашими строками. Например lang/en/messages.json

Код:


{
  "msg_controls"    : "Controls:",
  "msg_options"      : "Options:"
}


lang/ru/messages.json

Код:


{
  "msg_controls"    : "Управление:",
  "msg_options"      : "Опции"
}


Вы великолепны!

Если вы например используете Point JS, то вместо localStorage.getItem('language'), пишем pjs.memory.local.load("language"), вместо localStorage.setItem("language", options.language) - pjs.memory.local.save("language", options.language), вместо

Код:

$('#change-language-button').click(function(){
    checkLanguage();
});

Код:

if (mouse.isPeekObject('LEFT', change-language-button) || touch.isPeekObject(change-language-button){
    checkLanguage();
  }

вместо

Код:

function setLanguage() {
  $('.controls-header').text(msg.msg_controls);
  $('.options-header').text(msg.msg_options);
  /*Перечисляем наши текстовые блоки*/
}

Код:

function setLanguage() {
  pressAnyKey.text = msg.msg_pressSpace;
}

ну вы поняли.

если есть идеи, как это все можно сделать более лучше, вэлком ваши варианты в каменты

Мне кажется тут подойдет концепция флакс. Только без заморочек типа мутации и т.д. vuex

Вот эта функция плоха для масштабирования. Придется постоянно искать что где устанавливать.

Код:

//Присваиваем полученные строки объектам
function setLanguage() {
  $('.controls-header').text(msg.msg_controls);
  $('.options-header').text(msg.msg_options);
  /*Перечисляем наши текстовые блоки*/
}

В игре типе инвайдерс норм, т.к. текста мало. Но коль текста будет много?

Грубо говоря, все наши строки должны хранится в общем хранилище. А объекты ссылаются на строки из хранилища. Небольшой трабл в том, что строка - это простой объект и по ссылке он не передается. Поэтому строки надо заворачивать в var text = {hello: "Привет мир!"} Вроде проканает.

да. на любом реактивном фреймворке это делается проще - поменял в одном месте - поменялось во всех других местах.

конечно, если передавать по ссылке, а не по значению, будет то-же самое. но я честно говоря не в курсе, будет ли Point JS понимать такие штуки. надо попробовать.

в принципе да. у меня там всего около 10 строк. если далать какой-то квест к примеру - это точно не проканает - там по любому надо делать по ссылке.

поэкскрементирую на досуге