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

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

Версия 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/tests/zoom/title.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: 160,
        height: 144,
        zoom: 4
    },
    scene: Example
};

const game = new Phaser.Game(config);

Суть подхода: Zoom vs Mode

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

Ключевое отличие параметра zoom от других режимов масштабирования в том, что он применяется ко всему холсту игры *после* рендеринга. Внутреннее разрешение игры (указанное в width и height) не меняется. Это значит, что все расчеты физики, позиционирования объектов и камеры остаются в оригинальном низком разрешении, а на экране пользователя мы видим увеличенную, четкую картинку.

scale: {
    mode: Phaser.Scale.NONE,
    width: 160,
    height: 144,
    zoom: 4
}

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

Давайте детально рассмотрим объект конфигурации scale из примера.

- mode: Phaser.Scale.NONE — это самый важный параметр. Он отключает все автоматические механизмы масштабирования Phaser. Игровой холст будет отрисован с размерами, которые мы укажем далее, и больше не изменится. - width: 160 и height: 144 — это внутреннее разрешение вашей игры. Все координаты в коде (например, this.add.image(0, 0, 'pic')) будут отсчитываться в этой системе координат. Это классическое разрешение для стилизации под Game Boy. - zoom: 4 — это множитель для итогового размера холста. Финальный размер холста будет рассчитан как width * zoom и height * zoom. В нашем случае это 160 * 4 = 640px в ширину и 144 * 4 = 576px в высоту. - parent: 'phaser-example' — указывает ID HTML-элемента, в который будет вставлен холст игры.

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

Особенности рендеринга и позиционирования

При таком подходе работа с координатами в сцене не меняется. Вы по-прежнему работаете в пространстве с разрешением 160x144.

В примере изображение загружается и добавляется в начало координат (0, 0). Важный момент: чтобы изображение точно занимало весь экран игры, его начало (origin) устанавливается в `0с помощью.setOrigin(0). Еслиorigin` останется по умолчанию (0.5, центр изображения), то его центр будет в точке (0,0), и большая часть картинки окажется за пределами видимой области.

create ()
{
    // Добавляем изображение в точку (0,0) и сдвигаем точку привязки в его левый верхний угол.
    this.add.image(0, 0, 'pic').setOrigin(0);
}

Поскольку zoom не влияет на внутреннюю систему координат, все объекты, добавленные в сцену, будут позиционироваться и взаимодействовать друг с другом, исходя из базового разрешения width и height.

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

Использование связки Phaser.Scale.NONE и zoom — это чистый и эффективный способ создать игру с фиксированным низким разрешением и четким увеличением. Этот метод незаменим для разработки игр в ретро-стиле, пиксель-арт проектов или любых случаев, где нужно полное управление над размером пикселя. **Идеи для экспериментов:** 1. Попробуйте разные значения zoom (например, 2, 3, 5) и посмотрите, как меняется четкость и размер окна. 2. Создайте игру с разрешением, вдохновленным другими консолями (например, NES: 256x240). 3. Поэкспериментируйте с добавлением фильтров пост-обработки после увеличения, чтобы создать эффект ЭЛТ-монитора или сканирующих линий.