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

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

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

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

const game = new Phaser.Game(config);

Что такое Phaser.Scale.NONE?

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

Этот режим идеально подходит для случаев, когда дизайн игры рассчитан на строго определенное разрешение (например, 800x600) и вы не хотите, чтобы оно менялось. Канвас будет отрендерен в точности с заданными параметрами, а если область его отображения (parent) будет больше или меньше — появятся пустые поля или часть канваса будет обрезана.

Конфигурация игры с Scale.NONE

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

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

Давайте разберем параметры: * mode: Phaser.Scale.NONE: Устанавливает желаемый режим масштабирования. * parent: 'phaser-example': Это id HTML-элемента (например, <div id="phaser-example">), внутри которого Phaser создаст канвас. Если элемент с таким id не найден, канвас будет добавлен непосредственно в body. * width: 800, height: 600: Физические размеры игрового мира и самого канваса в пикселях. Именно такого размера будет область для отрисовки. * backgroundColor: '#2dab2d': Цвет фона, который заполнит всю площадь канваса, если изображение его не закроет.

Работа с координатами в режиме NONE

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

В примере изображение добавляется в самое начало координат.

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

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

Когда использовать этот режим?

Использование Phaser.Scale.NONE оправдано в нескольких сценариях: 1. **Фиксированные демо и прототипы:** Когда вы создаете небольшую демонстрацию механики, которая должна выглядеть одинаково на всех устройствах. 2. **Интеграция в существующий интерфейс:** Если игра является частью сложной веб-страницы или панели управления с жесткой сеткой layout. 3. **Инструменты для разработки:** Создание внутриигровых редакторов, консолей или панелей отладки, где важна точность пикселей. 4. **Начальная точка для обучения:** Этот режим максимально прост для понимания, так как избавляет новичка от сложностей с адаптивным дизайном, позволяя сосредоточиться на основах Phaser API.

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

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

Режим Phaser.Scale.NONE — это фундаментальная настройка, которая передает всю ответственность за размер игрового поля разработчику. Он отлично подходит для проектов с фиксированным дизайном или для начального этапа обучения, когда нужно разобраться с базовым позиционированием объектов. Для экспериментов попробуйте: 1. Изменить width и height в конфиге на другие значения и посмотреть, как меняется область отрисовки. 2. Добавить несколько изображений с разными координатами, чтобы понять систему координат. 3. Поиграть со значением setOrigin (например, setOrigin(0.5, 0.5) или setOrigin(1, 1)) и понаблюдать, как меняется позиция картинки относительно заданных координат. 4. Создать HTML-страницу с контейнером <div id="phaser-example">, задать ему через CSS фиксированные размеры, отличные от 800x600, и увидеть, как канвас вписывается (или не вписывается) в него.