Локализация текста

Локализация текста является важным аспектом создания многоязычных игр и приложений. В PlayCanvas эта задача может быть решена с помощью различных методов, включая использование встроенных функций и сторонних библиотек. В этой статье рассмотрим подходы к локализации, методы работы с текстами и инструменты для динамической замены контента в зависимости от выбранного языка.

Подготовка локализации

Для начала необходимо организовать структуру, которая будет хранить переводы для разных языков. Чаще всего для этого используют объект, в котором ключами являются идентификаторы текстов, а значениями — переведенные строки для каждого языка. Стандартный подход включает в себя создание JSON-файлов для каждого языка.

Пример структуры для хранения переводов:

{
  "en": {
    "welcome": "Welcome to the game!",
    "score": "Score: {score}"
  },
  "ru": {
    "welcome": "Добро пожаловать в игру!",
    "score": "Очки: {score}"
  }
}

В этом примере переводы для английского и русского языков хранятся в отдельных объектах. Важно заметить, что переменные, такие как {score}, могут быть использованы для динамического подставления значений.

Загрузка и использование локализаций

Для работы с локализациями в PlayCanvas можно создать менеджер, который будет загружать соответствующие JSON-файлы в зависимости от выбранного языка. Менеджер должен поддерживать функционал для переключения языков и получения переведённых строк.

Пример кода для создания менеджера локализаций:

var LocalizationManager = pc.createScript('localizationManager');

LocalizationManager.prototype.initialize = function () {
    this.languages = {};
    this.currentLanguage = 'en'; // Язык по умолчанию

    // Загрузка локализаций
    this.loadLocalization('en');
    this.loadLocalization('ru');
};

LocalizationManager.prototype.loadLocalization = function (lang) {
    var url = '/locales/' + lang + '.json'; // Путь к файлу локализации
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onl oad = function () {
        if (xhr.status === 200) {
            this.languages[lang] = JSON.parse(xhr.responseText);
        }
    }.bind(this);
    xhr.send();
};

LocalizationManager.prototype.setLanguage = function (lang) {
    if (this.languages[lang]) {
        this.currentLanguage = lang;
        this.updateText();
    }
};

LocalizationManager.prototype.getText = function (key, params) {
    var text = this.languages[this.currentLanguage][key];
    if (params) {
        Object.keys(params).forEach(function (param) {
            var regex = new RegExp('{' + param + '}', 'g');
            text = text.replace(regex, params[param]);
        });
    }
    return text;
};

LocalizationManager.prototype.updateText = function () {
    var elements = document.querySelectorAll('[data-localize]');
    elements.forEach(function (element) {
        var key = element.getAttribute('data-localize');
        var params = JSON.parse(element.getAttribute('data-params') || '{}');
        element.textContent = this.getText(key, params);
    }, this);
};

Этот менеджер загружает переводы для английского и русского языков, переключается между ними и обновляет текст в элементам интерфейса, использующим атрибут data-localize.

Применение локализации к интерфейсу

Для динамического обновления текста в интерфейсе необходимо связать локализацию с HTML-элементами. Каждый элемент, который нужно локализовать, должен содержать атрибут data-localize, указывающий на ключ текста в локализации.

Пример использования в HTML:

<button data-localize="welcome"></button>
<p data-localize="score" data-params='{"score": 100}'></p>

Когда язык изменяется, менеджер локализации обновит текст в этих элементах с учетом выбранного языка.

Работа с числовыми значениями

При локализации также важно учитывать формат чисел и дат. Например, в разных странах могут использоваться различные разделители для десятичных и тысячных разрядов, а также различные форматы отображения дат. PlayCanvas не предоставляет встроенных инструментов для локализации чисел или дат, но можно использовать JavaScript API для этого.

Для форматирования чисел можно использовать Intl.NumberFormat, который автоматически учитывает особенности выбранного языка.

Пример форматирования чисел:

var number = 1234567.89;
var formattedNumber = new Intl.NumberFormat('ru-RU').format(number); // "1 234 567,89"

Пример форматирования даты:

var date = new Date();
var formattedDate = new Intl.DateTimeFormat('ru-RU').format(date); // "5 марта 2026 г."

Работа с изображениями для локализации

Иногда в игре или приложении могут быть изображения, которые нужно локализовать в зависимости от языка. Например, различные текстовые баннеры или иконки с текстами на разных языках. Это может быть решено путем замены изображений в зависимости от текущего языка.

Пример замены изображений:

var imageElement = document.getElementById('banner');
var languageImages = {
    'en': 'images/banner_en.png',
    'ru': 'images/banner_ru.png'
};

imageElement.src = languageImages[this.currentLanguage];

Динамическая локализация

Для обеспечения динамической локализации, например, когда текст может изменяться в процессе игры, важно обновлять контент в реальном времени. Для этого можно использовать систему событий или просто периодически обновлять текстовые элементы интерфейса.

Пример динамического обновления текста:

this.entity.script.localizationManager.setLanguage('ru');

Этот код переключит язык на русский, и все элементы, использующие локализованный текст, будут обновлены.

Обработка различных языков

Когда речь идет о локализации, необходимо учитывать, что тексты могут отличаться по длине на разных языках. Например, в некоторых языках одно и то же предложение может занимать больше или меньше места. Чтобы избежать ошибок в отображении текста, необходимо использовать адаптивные элементы интерфейса.

Для этого следует предусмотреть механизм, который будет автоматически изменять размер или расположение текста в зависимости от его длины.

Заключение

Локализация в PlayCanvas позволяет значительно расширить аудиторию игры, сделав её доступной для пользователей разных стран. Использование менеджеров локализации и динамическое обновление текстов помогает создать многоязычный интерфейс, который автоматически подстраивается под выбранный язык. С помощью простых инструментов JavaScript можно эффективно решить задачи перевода и адаптации контента, улучшив восприятие игры и её доступность для международных пользователей.

Оглавление