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

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

Создание игр для разных экранов — сложная задача. Классический подход с фиксированным разрешением часто приводит к появлению нежелательных черных полос по бокам или обрезанию важных областей игры. Встроенный в Phaser менеджер масштабирования предлагает несколько стратегий для решения этой проблемы. В этой статье мы разберем режим `HEIGHT_CONTROLS_WIDTH`, который позволяет автоматически подстраивать ширину игрового холста под высоту окна браузера. Это отличный выбор для вертикально-ориентированных игр или сцен, где сохранение видимой высоты является приоритетом.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('pic', 'assets/pics/zero-two.png');
    }

    create ()
    {
        this.add.image(0, 0, 'pic').setOrigin(0);
    }
}

const config = {
    type: Phaser.AUTO,
    backgroundColor: '#2dab2d',
    scale: {
        mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH,
        parent: 'phaser-example',
        width: 800,
        height: 600
    },
    scene: Example
};

const game = new Phaser.Game(config);

Что такое HEIGHT_CONTROLS_WIDTH?

Это один из режимов масштабирования, доступных в объекте Phaser.Scale. Когда он активен, система фиксирует заданную в конфигурации высоту игры (height: 600) как основной ориентир.

Принцип работы прост: 1. Движок непрерывно отслеживает текущую высоту окна браузера (или родительского элемента). 2. Исходя из этой высоты и заданного соотношения сторон (рассчитанного из width и height), автоматически вычисляется и применяется новая ширина холста. 3. Ваша игровая сцена всегда будет отображаться на всю доступную высоту, а ширина будет пропорционально увеличиваться или уменьшаться.

Это противоположность более распространенному режиму FIT, где игра старается вписаться в контейнер, иногда создавая поля.

Разбор конфигурации масштабирования

Вся магия происходит в объекте scale внутри главной конфигурации игры (config). Давайте посмотрим на ключевые параметры.

scale: {
    mode: Phaser.Scale.HEIGHT_CONTROLS_WIDTH,
    parent: 'phaser-example',
    width: 800,
    height: 600
}

* mode: Устанавливает стратегию масштабирования. Значение Phaser.Scale.HEIGHT_CONTROLS_WIDTH активирует описанный режим. * parent: ID HTML-элемента, в который будет встроен игровой холст. Если элемент с таким ID существует, Phaser использует его размеры как границы для расчетов. * width и height: **Это внутреннее, игровое разрешение.** Важно понимать, что width: 800 и height: 600 — это не пиксели на экране, а условные единицы вашей игровой логики и координатной сетки. В режиме HEIGHT_CONTROLS_WIDTH высота (600) является жестким ориентиром для масштаба.

Как это выглядит в коде сцены

Ваша сцена не требует специальной обработки для работы с этим режимом. Вы работаете с координатами и размерами, как будто игра всегда запущена в окне 800x600. Менеджер масштабирования Phaser берет на себя преобразование этих координат в реальные пиксели на экране.

Рассмотрим простой пример создания изображения в левом верхнем углу.

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('pic', 'assets/pics/zero-two.png');
    }

    create ()
    {
        this.add.image(0, 0, 'pic').setOrigin(0);
    }
}

* В preload мы загружаем изображение обычным способом. * В create мы размещаем его в точке (0, 0) — левом верхнем углу игрового мира с внутренним разрешением 800x600. * Вызов .setOrigin(0) устанавливает точку привязки (anchor) изображения в его левый верхний угол. Это совмещает точку привязки картинки с точкой (0, 0) мира, гарантируя, что изображение начнется прямо от края холста, независимо от его растяжения.

Поведение при изменении размера окна

Попробуйте запустить этот пример и изменить высоту окна браузера. Вы увидите, как ширина игровой области динамически меняется, сохраняя всю высоту видимой. Изображение будет растягиваться или сжиматься по ширине, но его высота всегда будет соответствовать высоте окна (поскольку она привязана к внутренней высоте 600).

Если вы уменьшите окно по ширине, игра станет уже. Если увеличите — шире. Черные полосы (letterbox) появятся только в том случае, если соотношение сторон окна браузера станет уже, чем исходное соотношение 800:600 (т.е. 4:3). В этом случае по бокам добавятся поля, чтобы сохранить правильные пропорции и не искажать контент.

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

Режим Phaser.Scale.HEIGHT_CONTROLS_WIDTH — это мощный инструмент для создания игр, где вертикальное пространство критически важно. Он избавляет разработчика от ручного пересчета координат при изменении размера экрана. **Идеи для экспериментов:** 1. Сравните поведение с режимами FIT, RESIZE и WIDTH_CONTROLS_HEIGHT. 2. Создайте UI-элементы (счет, кнопки) и разместите их с помощью setOrigin, чтобы посмотреть, как они ведут себя при масштабировании. 3. Попробуйте задать parent в виде реального div-контейнера на странице и управлять его размерами через CSS, наблюдая за реакцией игры.