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

Физика — основа динамичных игр. В Phaser с плагином Matter.js управление движением объектов становится интуитивным и мощным инструментом. Эта статья покажет, как напрямую задавать скорость физическим телам в ответ на действия игрока, что полезно для создания механик вроде запуска снарядов, прыжков платформера или отталкивания объектов. Вы научитесь использовать `setVelocity` для мгновенного импульса, контролируя направление и силу.

Версия 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('block', 'assets/sprites/block.png');
        this.load.image('platform', 'assets/sprites/platform.png');
    }

    create ()
    {
        const block = this.matter.add.image(400, 100, 'block');

        block.setFriction(0.05);
        block.setFrictionAir(0.0005);
        block.setBounce(0.9);

        const ground = this.matter.add.image(400, 550, 'platform', null, { restitution: 0.4, isStatic: true });

        this.input.on('pointerdown', pointer =>
        {

            if (pointer.y > 300)
            {
                block.setVelocity(0, -10);
            }
            else if (pointer.x < 400)
            {
                block.setVelocityX(-8);
            }
            else
            {
                block.setVelocityX(8);
            }

        });
    }
}

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

const game = new Phaser.Game(config);

Настройка сцены и физики Matter

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

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#1b1464',
    parent: 'phaser-example',
    physics: {
        default: 'matter', // Активация Matter.js как основного движка
        matter: {} // Дополнительные настройки движка можно передать здесь
    },
    scene: Example
};

const game = new Phaser.Game(config);

Создание физических тел с параметрами

В методе create создаются два тела: динамический блок и статическая платформа. Ключевая разница — свойство isStatic. Статическое тело не двигается под воздействием сил и служит опорой.

const block = this.matter.add.image(400, 100, 'block');
block.setFriction(0.05); // Трение о поверхности
block.setFrictionAir(0.0005); // Сопротивление воздуха
block.setBounce(0.9); // Коэффициент отскока (упругость)

const ground = this.matter.add.image(400, 550, 'platform', null, { restitution: 0.4, isStatic: true });

Параметр restitution для платформы определяет её упругость при столкновении. Блок с bounce=0.9 будет сильно отскакивать, особенно от упругой поверхности.

Обработка клика и применение скорости

Логика реакции на клик мыши или касание реализована через слушатель события pointerdown. В зависимости от координат клика, блоку задаётся мгновенная скорость.

this.input.on('pointerdown', pointer => {
    if (pointer.y > 300) {
        block.setVelocity(0, -10); // Резкий толчок вверх
    } else if (pointer.x < 400) {
        block.setVelocityX(-8); // Движение влево
    } else {
        block.setVelocityX(8); // Движение вправо
    }
});

Метод setVelocity(x, y) мгновенно изменяет скорость тела по осям. setVelocityX(value) меняет только горизонтальную компоненту, оставляя вертикальную неизменной. Это прямое и моментальное воздействие, в отличие от применения силы (applyForce), которая разгоняет тело с учётом массы.

Поведение тела после толчка

После задания скорости Matter.js автоматически обрабатывает дальнейшее движение. На блок продолжают действовать заданные ранее силы: гравитация будет тянуть его вниз, трение о воздух (frictionAir) постепенно замедлит горизонтальное движение, а отскок (bounce) определит поведение при ударе о платформу.

Важно: setVelocity перезаписывает текущий вектор скорости тела полностью или по одной оси. Это не добавляет скорость, а задаёт новое значение. Для добавления скорости (например, для прыжка в воздухе) нужно сначала получить текущую скорость через block.body.velocity.

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

Метод setVelocity в Matter.js — это ваш прямой рычаг для управления движением. Он идеален для механик, требующих мгновенной реакции: выстрелов, двойных прыжков, телепортации или ударов. Для экспериментов попробуйте

  1. Комбинировать setVelocity с setAngularVelocity для закрученных прыжков
  2. Рассчитывать вектор скорости относительно положения мыши для метания в нужную точку
  3. Использовать разные значения скорости в зависимости от удержания кнопки мыши для механики заряда выстрела