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

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

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

Версия 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.ENVELOP,
        _parent: 'phaser-example',
        width: 800,
        height: 600
    },
    scene: Example
};

const game = new Phaser.Game(config);

Что такое режим ENVELOP?

Режим ENVELOP в Phaser.Scale.ScaleManager работает по принципу «вписать в конверт». Он масштабирует вашу игровую сцену так, чтобы она полностью помещалась внутри родительского контейнера, сохраняя при этом исходное соотношение сторон (aspect ratio). Если пропорции контейнера и исходного размера игры не совпадают, по краям появятся пустые области (поля).

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

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

Вся конфигурация масштабирования задаётся в объекте config, который передаётся конструктору Phaser.Game. Ключевой раздел — scale.

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

* mode: Phaser.Scale.ENVELOP: Активирует нужный нам режим масштабирования. * width и height: Задают внутреннее разрешение (логический размер) вашей игры. В этом пространстве размещаются все ваши объекты. В примере это 800x600. * _parent: 'phaser-example': Указывает ID HTML-элемента, в который будет встроен canvas игры. Если этот параметр опущен, canvas будет добавлен непосредственно в document.body.

Создание сцены и размещение контента

Важно понимать, что координаты объектов внутри сцены отсчитываются от её логического размера (указанного в scale.width/height), а не от реального размера canvas в браузере.

В методе create мы добавляем изображение в левый верхний угол логической области (координаты 0, 0) и устанавливаем точку привязки (origin) также в (0, 0). Это гарантирует, что изображение начнётся ровно от края логической области.

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

Если бы мы разместили изображение в центре (this.add.image(400, 300, 'pic')), оно всегда оставалось бы в центре видимой области, независимо от того, как масштабируется canvas для вписывания в родительский контейнер.

Практические рекомендации и отладка

1. **Фон (backgroundColor)**: При использовании ENVELOP часто появляются поля. Цвет фона, заданный в основном конфиге, заполняет эти поля, что помогает визуально отделить игровую область. 2. **Тестирование**: Изменяйте размер окна браузера, чтобы увидеть, как игра масштабируется. Логическая область (ваши 800x600) будет всегда целиком видна, но её масштаб и положение будут меняться. 3. **Координаты и ввод**: Система ввода (мышь, касания) автоматически корректируется под масштаб. Событие клика по определённой кнопке на экране будет правильно преобразовано в координаты вашей логической сцены. 4. **Родительский контейнер**: Убедитесь, что элемент с ID, указанным в _parent, существует в DOM и имеет ненулевые размеры (например, установлены через CSS).

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

Режим Phaser.Scale.ENVELOP — это надёжный выбор для игр, где важно сохранить весь интерфейс и игровое поле в зоне видимости. Он избавляет от риска обрезания критически важных элементов на устройствах с нестандартными пропорциями экрана. **Идеи для экспериментов:** * Попробуйте комбинировать ENVELOP с другими настройками ScaleManager, например, autoCenter, чтобы управлять выравниванием игровой области внутри полей. * Создайте интерфейс поверх игрового мира (HUD) и убедитесь, что его элементы, привязанные к краям логического размера, всегда остаются на экране. * Протестируйте, как ведут себя физические тела при изменении масштаба и появлении полей.