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

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

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

const game = new Phaser.Game(config);

Настройка Scale Manager: фиксированный размер и центрирование

Ключевая настройка происходит в объекте конфигурации игры, в поле scale. Здесь определяется, как Phaser будет обрабатывать игровой холст относительно окна браузера.

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

Рассмотрим параметры подробнее: - mode: Phaser.Scale.NONE — полностью отключает систему масштабирования Phaser. Канвас сохранит размеры, указанные в width и height, независимо от размеров окна. - autoCenter: Phaser.Scale.CENTER_BOTH — автоматически центрирует игровой холст по горизонтали и вертикали внутри своего родительского контейнера. - _parent: 'phaser-example' — указывает ID HTML-элемента, внутрь которого будет вставлен канвас. Если такого элемента нет, он будет создан. - width: 800, height: 600 — фиксированные размеры игрового поля в пикселях.

Сцена: загрузка и отображение изображения

В данном примере сцена выполняет две стандартные операции: предзагрузку ресурса и его создание в методе create. Это демонстрирует, что логика сцены не зависит от выбранного режима масштабирования.

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);
    }
}

Ключевой момент здесь — позиционирование изображения. Вызов this.add.image(0, 0, 'pic') помещает его в точку (0, 0) игрового мира. Метод .setOrigin(0) устанавливает точку привязки (origin) изображения в его левый верхний угол. Таким образом, левый верхний угол картинки совпадает с левым верхним углом игрового мира (канваса размером 800x600).

Поведение канваса на странице

После запуска игры с такой конфигурацией вы увидите следующее: 1. В теле HTML-страницы появится элемент <div id="phaser-example">, а внутри него — <canvas>. 2. Размер канваса будет жёстко задан: 800 пикселей в ширину и 600 в высоту. 3. Этот канвас будет отцентрирован по середине своего родительского <div>. Фон игры (зелёный цвет #2dab2d) заполнит всю область канваса. 4. Изображение будет нарисовано в левом верхнем углу канваса. Если его размеры превышают 800x600, часть изображения будет обрезана границами холста.

Важно: поскольку масштабирование отключено (NONE), при изменении размера окна браузера размер канваса и игрового мира останется прежним. Может появиться полоса прокрутки или пустое пространство вокруг канваса.

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

Режим Phaser.Scale.NONE — это инструмент для полного ручного контроля над размерами игрового холста. Он идеально подходит для проектов с фиксированным дизайном, таких как казуальные игры, интерактивные иллюстрации или прототипы интерфейсов. Для экспериментов попробуйте: 1. Изменить значения width и height в конфиге и понаблюдать за изменением размера канваса. 2. Поменять autoCenter на Phaser.Scale.CENTER_HORIZONTALLY или Phaser.Scale.NO_CENTER. 3. Добавить в сцену несколько изображений или спрайтов, используя фиксированные координаты, чтобы понять организацию пространства при отключённом масштабировании.