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

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

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

Версия 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);

        this.input.on('pointerdown', function ()
        {

            const currentZoom = this.scale.zoom;

            if (currentZoom < 6)
            {
                this.scale.setZoom(currentZoom + 1);
            }

        }, this);
    }
}

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

const game = new Phaser.Game(config);

Настройка Scale Manager в конфигурации игры

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

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

Разберем ключевые параметры: - mode: Phaser.Scale.FIT гарантирует, что игровая область будет пропорционально вписана в родительский контейнер без обрезки. - autoCenter: Phaser.Scale.CENTER_BOTH центрирует игровую область по горизонтали и вертикали. - width и height задают внутреннее, "игровое" разрешение (в данном случае 160x144). Все координаты в игре будут отсчитываться от этих размеров. - zoom: 2 устанавливает начальный уровень увеличения. Значение 2 означает, что каждый игровой пиксель будет отрисован как 2 физических пикселя на экране.

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

Класс сцены содержит стандартные методы preload и create. В preload загружается одно изображение. Обратите внимание, что изображение добавляется в точку (0, 0) с установленным setOrigin(0). Это означает, что его точка начала координат (origin) — это его левый верхний угол. Таким образом, изображение идеально заполняет всю нашу игровую область размером 160x144.

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);
        // ... Обработчик клика будет рассмотрен далее
    }
}

Обработка ввода и изменение зума

Механика интерактивного увеличения реализована в методе create через обработчик события pointerdown. Именно здесь происходит управление масштабом.

this.input.on('pointerdown', function ()
{
    const currentZoom = this.scale.zoom;
    if (currentZoom < 6)
    {
        this.scale.setZoom(currentZoom + 1);
    }
}, this);

Логика работы:
1. При любом клике (`pointerdown`) на игровом холсте получается текущее значение зума через свойство `this.scale.zoom`.
2. Проверяется условие: если текущий зум меньше 6, то он увеличивается на единицу.
3. Новое значение устанавливается с помощью метода `this.scale.setZoom()`. Этот метод мгновенно применяет новый масштаб ко всей игровой области. Важно, что все внутренние координаты игровых объектов (как наше изображение в (0,0)) остаются неизменными — меняется только их отображение на экране.

Важные нюансы и практическое применение

Использование setZoom — это операция над всей сценой. Это отличается от масштабирования отдельных объектов через setScale.

- **Производительность:** Изменение зума через Scale Manager — это операция рендерера, она обычно очень эффективна. - **Область применения:** Такой подход идеален для реализации функциональности "увеличительного стекла", карты мира, или для адаптации под очень высокие разрешения. - **Ограничение:** В примере стоит "защита от дурака" (currentZoom < 6), которая предотвращает бесконечное увеличение. Всегда стоит предусматривать такие ограничения, чтобы не выйти за разумные пределы производительности или визуального восприятия. - **Координаты:** Помните, что система ввода (this.input) по умолчанию возвращает координаты относительно отмасштабированного холста. Если вам нужны координаты внутри игрового мира (в нашем случае 160x144), используйте this.input.mousePointer.worldX и .worldY.

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

Scale Manager в Phaser предоставляет мощный и простой контроль над отображением игры. Ручное управление зумом через this.scale.setZoom() открывает возможности для создания динамических визуальных эффектов и адаптивных интерфейсов. Для экспериментов попробуйте: изменить условие увеличения на уменьшение при долгом клике, привязать зум к колесику мыши, или анимировать изменение масштаба с помощью tweens для плавного приближения.