Phaser.js: всё об играх и разработке

О чем этот пример

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

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    text;

    create ()
    {
        //  Implicit values
        const config1 = {
            x: 100,
            y: 100,
            text: 'Text\nGame Object\nCreated from config',
            style: {
                fontSize: '64px',
                fontFamily: 'Arial',
                color: '#ffffff',
                align: 'center',
                backgroundColor: '#ff00ff',
                shadow: {
                    color: '#000000',
                    fill: true,
                    offsetX: 2,
                    offsetY: 2,
                    blur: 8
                }
            }
        };

        this.make.text(config1);
    }
}

const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Зачем нужен конфиг для текста?

Метод this.make.text() может принимать как простые аргументы (x, y, текст), так и один объект конфигурации, содержащий все свойства. Второй подход делает код чище, особенно когда стилей много. Конфиг можно сохранить в константу или даже в отдельный JSON-файл, что позволяет централизованно управлять дизайном текста во всей игре.

Основные преимущества: * **Читаемость:** Все параметры собраны в одной структуре. * **Переиспользование:** Один конфиг можно применять для множества текстовых объектов. * **Структурированность:** Легко вложить сложные параметры, такие как тени.

Структура конфигурационного объекта

В примере ключевой объект config1 содержит базовые координаты, строку текста и объект style. Давайте разберем его по частям.

Базовые свойства объекта:

const config1 = {
    x: 100,
    y: 100,
    text: 'Text\nGame Object\nCreated from config',
    style: { ... }
};

Здесь `xиyзадают позицию на экране, аtext— сам отображаемый текст (с переносами строк через\n). Все дальнейшее оформление определяется объектомstyle`.

Объект стиля (style) и его свойства

Объект style — сердце конфигурации текста. В нем задаются все визуальные параметры.

style: {
    fontSize: '64px',
    fontFamily: 'Arial',
    color: '#ffffff',
    align: 'center',
    backgroundColor: '#ff00ff',
    shadow: { ... }
}

* fontSize, fontFamily, color — базовые параметры шрифта. * align — выравнивание текста ('left', 'center', 'right'). Важно: оно работает внутри границ текстового объекта. * backgroundColor — цвет фона за текстом. В примере это яркий розовый (#ff00ff).

Создание и настройка тени

Phaser позволяет гибко настраивать тень для текста через вложенный объект shadow. Это делает надпись объемной и лучше читаемой на сложном фоне.

shadow: {
    color: '#000000',
    fill: true,
    offsetX: 2,
    offsetY: 2,
    blur: 8
}

* color — цвет тени (черный). * fill: true — указывает, что тень должна отрисовываться. Если false, тень не будет видна. * offsetX и offsetY — смещение тени относительно основного текста по осям. Положительные значения смещают тень вправо и вниз. * blur — степень размытия краев тени. Чем больше значение, тем мягче тень.

Создание объекта и запуск игры

Когда конфиг готов, создание текстового объекта становится однострочной операцией с помощью фабрики (this.make).

this.make.text(config1);

Фабрика this.make принадлежит сцене и используется для создания игровых объектов без необходимости добавлять их в системы физики. Этот метод сам добавляет созданный объект на дисплейный лист текущей сцены.

Конфигурация игры (config) и её запуск стандартны:

const config = {
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Ключевой параметр — scene: Example, который сообщает движку, какую сцену использовать в качестве основной.

Что попробовать дальше

Использование конфигурационных объектов для создания текста (и других объектов) в Phaser — это отличная практика для написания чистого и поддерживаемого кода. Вы можете хранить библиотеки стилей для заголовков, описаний или диалогов, легко меняя оформление всей игры правкой одного объекта. **Идеи для экспериментов:** 1. Вынесите объект style в отдельную константу и примените его к нескольким текстовым объектам с разными координатами и содержимым. 2. Поэкспериментируйте с другими свойствами style, например, fontStyle, stroke (обводка) и strokeThickness. 3. Попробуйте динамически менять свойства конфига (например, color) уже после создания текстового объекта, обращаясь к его полю style.