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

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

Версия 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 (1 = no scale)
        this.add.image(100, 300, 'atari').setScale(1, 0.5);

        this.add.image(400, 300, 'atari').setScale(1, 2);
        
        const image2 = this.add.image(700, 300, 'atari');

        //  You can also set the scale via the scaleY property:
        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 для вертикального масштабирования

Phaser предоставляет удобный метод setScale для управления размером игровых объектов. Его особенность в том, что он позволяет независимо контролировать масштаб по горизонтальной (X) и вертикальной (Y) осям.

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

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

В этом примере мы размещаем изображение с оригинальной шириной (scaleX = 1), но сжимаем его высоту вдвое (scaleY = 0.5). Объект визуально становится сплющенным.

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

Здесь, наоборот, высота спрайта увеличена в два раза, в то время как ширина осталась неизменной. Это создает эффект вытянутого объекта.

Прямой доступ: свойство scaleY объекта

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

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

В этом фрагменте кода мы сначала создаем спрайт и сохраняем ссылку на него в переменную image2. Затем мы напрямую присваиваем его свойству scaleY значение 4.5. В результате высота изображения увеличивается в 4.5 раза, создавая сильно вытянутый спрайт. Такой подход дает большую гибкость для программируемой анимации.

Конфигурация сцены и важность pixelArt

Для корректного отображения пиксельной графики важно правильно настроить игру. Ключевую роль здесь играет свойство pixelArt в конфигурации игры.

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

Установка pixelArt: true отключает сглаживание (anti-aliasing) для всех текстур в игре. Это критически важно для сохранения четкости и блочного вида пиксельной графики при масштабировании. Без этой настройки изображение atari при растягивании могло бы выглядеть размытым. Также в конфиге определяется размер холста и указывается класс нашей сцены (Example), в которой происходит вся работа со спрайтами.

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

Вертикальное масштабирование через setScale и scaleY — это простой, но эффективный способ управления формой объектов. Попробуйте применить эти знания на практике: анимируйте scaleY в функции update, чтобы создать эффект прыжка или удара; используйте разные значения масштаба для X и Y, чтобы нарисовать тени или отражения; или комбинируйте масштабирование с другими свойствами, например alpha (прозрачность), для создания сложных визуальных переходов.