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

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

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


class Example extends Phaser.Scene
{
    block;

    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 ()
    {
        this.block = this.matter.add.image(50, 0, 'block');

        this.block.setFrictionAir(0.001);
        this.block.setBounce(0.6);

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

        ground.setScale(2, 0.5);
        ground.setAngle(10);
        ground.setFriction(0);
    }

    update ()
    {
        if (this.block.y > 600)
        {
            this.block.setPosition(50, 0);
            this.block.setVelocity(0, 0);
        }
    }
}

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.js

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

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

Ключевой момент — установка default: 'matter' в разделе physics. Это активирует Matter.js как физический движок по умолчанию. Дополнительные настройки движка можно передать в объекте matter, но в данном примере они не требуются, поэтому он остаётся пустым.

Создание динамического и статического тел

В методе create() сцены создаются два физических тела: динамический блок и статическая платформа. Динамическое тело подвержено воздействию сил, гравитации и может вращаться, а статическое — нет.

create ()
{
    this.block = this.matter.add.image(50, 0, 'block');
    this.block.setFrictionAir(0.001);
    this.block.setBounce(0.6);
    const ground = this.matter.add.image(400, 400, 'platform', null, { isStatic: true });
    ground.setScale(2, 0.5);
    ground.setAngle(10);
        ground.setFriction(0);
}

Блок создаётся с помощью this.matter.add.image. Он начинает падать с координат (50, 0). Методы setFrictionAir(0.001) и setBounce(0.6) настраивают сопротивление воздуха и упругость блока, делая его движение более плавным и отскок более выраженным.

Платформа создаётся с флагом { isStatic: true }, что делает её абсолютно неподвижной — она не будет реагировать на столкновения, гравитацию или другие силы. Методы setScale(2, 0.5) и setAngle(10) изменяют её размеры и задают небольшой угол наклона, демонстрируя, что даже наклонная статическая поверхность остаётся неподвижной. setFriction(0) устанавливает нулевое трение, чтобы блок свободно скользил по платформе после отскока.

Сброс позиции блока

Чтобы бесконечно наблюдать за падением блока, в методе update() реализована проверка его позиции. Если блок падает ниже определённой границы, он возвращается в исходную точку.

update ()
{
    if (this.block.y > 600)
    {
        this.block.setPosition(50, 0);
        this.block.setVelocity(0, 0);
    }
}

Условие this.block.y > 600 отслеживает, когда блок опускается ниже нижней границы холста (высота которого 600 пикселей). При срабатывании setPosition(50, 0) мгновенно перемещает блок в начальные координаты, а setVelocity(0, 0) обнуляет его скорость, останавливая любое движение. Это создаёт цикл падения, полезный для тестирования физических взаимодействий.

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

Использование статических тел в Matter.js — это простой и эффективный способ создавать устойчивые элементы игрового мира, которые не вращаются и не двигаются. Этот пример демонстрирует базовые принципы: настройку движка, создание тел с разными свойствами и управление их поведением. Для экспериментов попробуйте изменить угол платформы через setAngle, увеличьте трение блока с помощью setFriction или добавьте больше динамических объектов, чтобы увидеть сложные взаимодействия. Также можно сделать платформу динамическим телом (убрать isStatic) и посмотреть, как она начнёт вращаться и падать под весом блока.