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

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

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

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

    create ()
    {
        this.matter.world.setBounds().disableGravity();

        //  By default it will create a rectangular body the size of the texture
        const rect = this.matter.add.image(200, 50, 'blue');

        //  Just make the body move around and bounce
        rect.setVelocity(3, 1);
        rect.setAngularVelocity(0.01);
        rect.setBounce(1);
        rect.setFriction(0, 0, 0);

        rect.setInteractive();

        rect.once('pointerup', () =>
        {

            rect.setScale(2);

        });
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#1b1464',
    parent: 'phaser-example',
    physics: {
        default: 'matter',
        matter: {
            debug: true
        }
    },
    scene: Example
};

const game = new Phaser.Game(config);

Настройка физики Matter.js

В примере используется физический движок Matter.js. Конфигурация игры указывает на него как на систему по умолчанию. Важный параметр debug: true включает отладочную отрисовку контуров тел, что позволяет визуально контролировать форму коллайдера.

physics: {
    default: 'matter',
    matter: {
        debug: true
    }
}

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

this.matter.world.setBounds().disableGravity();

Создание и настройка физического спрайта

Физическое тело на основе изображения создается с помощью метода this.matter.add.image. Phaser автоматически создает прямоугольный коллайдер (тело), точно соответствующий размерам загруженной текстуры 'blue'.

const rect = this.matter.add.image(200, 50, 'blue');

После создания телу задается начальная скорость, угловая скорость, коэффициент отскока и трение. Значение setBounce(1) делает отскок абсолютно упругим, а setFriction(0, 0, 0) полностью убирает трение о воздух и поверхности.

rect.setVelocity(3, 1);
rect.setAngularVelocity(0.01);
rect.setBounce(1);
rect.setFriction(0, 0, 0);

Обработка клика и магия setScale

Спрайту добавляется интерактивность через setInteractive. По однократному клику (pointerup) срабатывает лямбда-функция, которая и меняет масштаб.

rect.setInteractive();
rect.once('pointerup', () => {
    rect.setScale(2);
});

Ключевой момент: метод setScale для Matter-спрайта выполняет две важные операции. Во-первых, он масштабирует визуальное отображение текстуры, как и обычный Phaser.GameObjects.Image. Во-вторых, он автоматически обновляет данные физического тела в Matter.js — пересчитывает вершины коллайдера, его площадь и инерцию. Благодаря этому коллизии после масштабирования остаются точными, и тело продолжает корректно взаимодействовать с миром.

Важные особенности и ограничения

1. **Мгновенное изменение**: Масштабирование происходит мгновенно. Для плавной анимации нужно использовать твины, но важно твинить именно свойство scale спрайта, а не его размеры вручную, чтобы физическое тело синхронизировалось. 2. **Форма коллайдера**: В данном примере тело прямоугольное. setScale равномерно увеличит его по обеим осям. Для сложных составных или невыпуклых тел поведение может отличаться. 3. **Точка трансформации**: Масштабирование происходит относительно текущей точки трансформации спрайта (origin). Её можно изменить методами setOrigin. 4. **Отладка**: Всегда включайте debug: true на этапе разработки, чтобы визуально убедиться, что коллайдер изменяется так, как вы ожидаете.

// Пример плавного масштабирования через твин
rect.once('pointerup', () => {
    this.tweens.add({
        targets: rect,
        scale: { from: 1, to: 2 },
        duration: 500
    });
});

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

Метод setScale для Matter-спрайтов — мощный и удобный инструмент для динамического изменения размеров физических объектов. Он избавляет разработчика от необходимости вручную перестраивать коллайдеры. Попробуйте экспериментировать: применить масштабирование не по клику, а при столкновении с другим объектом; создать цепную реакцию увеличения; или комбинировать setScale с изменением других физических свойств, например, плотности тела.