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

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

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

Версия 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('atari', 'assets/sprites/atari130xe.png');
    }

    create ()
    {
        //  setScale sets the x and y scale values
        this.add.image(100, 300, 'atari').setScale(0.5, 0.2);

        //  If you just provide one value then both x and y are set to it
        this.add.image(400, 300, 'atari').setScale(2);

        const image2 = this.add.image(800, 300, 'atari');

        //  You can also set the scale via the scaleX and scaleY properties:
        image2.scaleX = 0.5;
        image2.scaleY = 4.5;
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 1024,
    height: 600,
    pixelArt: true,
    scene: Example
};

const game = new Phaser.Game(config);

Основы масштабирования: метод setScale()

Самый частый способ изменить размер спрайта — использовать метод setScale(). Он вызывается непосредственно у объекта изображения (Image) после его создания.

Метод может принимать один или два аргумента. Если передать одно число, и горизонтальный (scaleX), и вертикальный (scaleY) масштаб установятся на это значение. Это удобно для пропорционального увеличения или уменьшения.

this.add.image(400, 300, 'atari').setScale(2);

Если передать два аргумента, вы получите независимый контроль по осям. Первый аргумент — масштаб по X, второй — по Y.

this.add.image(100, 300, 'atari').setScale(0.5, 0.2);

Прямое управление через свойства scaleX и scaleY

Иногда вам может понадобиться изменить масштаб уже после создания объекта или модифицировать только одну ось. Для этого у каждого игрового объекта есть прямые свойства scaleX и scaleY.

Вы можете задавать им числовые значения. Это особенно полезно в игровой логике, например, в методе update(), для анимации или реакции на действия игрока.

const image2 = this.add.image(800, 300, 'atari');
image2.scaleX = 0.5;
image2.scaleY = 4.5;

Обратите внимание: изменение этих свойств происходит мгновенно и перезаписывает предыдущие значения масштаба, установленные через setScale().

Практика: создание сцены с примерами

Давайте соберем всю теорию в одну рабочую сцену. В методе preload() загружается спрайт, а в create() — создаются три его копии с разными типами масштабирования.

class Example extends Phaser.Scene {
    preload () {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('atari', 'assets/sprites/atari130xe.png');
    }

    create () {
        // Сжатие по обеим осям с разными коэффициентами
        this.add.image(100, 300, 'atari').setScale(0.5, 0.2);

        // Равномерное увеличение в 2 раза
        this.add.image(400, 300, 'atari').setScale(2);

        // Создание объекта и последующее изменение свойств
        const image2 = this.add.image(800, 300, 'atari');
        image2.scaleX = 0.5;
        image2.scaleY = 4.5;
    }
}

Конфигурация игры и запуск

Для запуска примера необходима стандартная конфигурация игры Phaser. Ключевой момент здесь — pixelArt: true. Эта настройка включает специальный режим фильтрации для пиксельной графики, который предотвращает её размытие при масштабировании.

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 1024,
    height: 600,
    pixelArt: true, // Важно для сохранения четкости спрайтов
    scene: Example  // Указываем нашу сцену
};

const game = new Phaser.Game(config);

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

Масштабирование в Phaser 3 реализовано гибко: используйте setScale() для быстрой настройки при создании, а свойства scaleX и scaleY — для динамического управления в игровом цикле. Для экспериментов попробуйте анимировать масштаб в update(), создавая эффект пульсации, или привяжите изменение размера объекта к силе нажатия клавиши, чтобы реализовать нестандартную механику.