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

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

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

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

        //  Increase the solver steps from the default to aid with the stack
        this.matter.world.engine.positionIterations = 30;
        this.matter.world.engine.velocityIterations = 30;

        const stack = this.matter.add.imageStack('crate32', null, 300, 50, 5, 18, 30, 0, { _mass: 0.5 });

        this.matter.add.mouseSpring();
    }
}

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

const game = new Phaser.Game(config);

Настройка сцены и загрузка ассетов

В методе preload мы загружаем два изображения для наших физических тел. Одно будет использоваться для звеньев цепи, другое — для груза.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('crate', 'assets/sprites/crate.png');
    this.load.image('crate32', 'assets/sprites/crate32.png');
}

Создание мира Matter.js и настройка точности

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

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

    //  Increase the solver steps from the default to aid with the stack
    this.matter.world.engine.positionIterations = 30;
    this.matter.world.engine.velocityIterations = 30;
}

Формирование стопки из тел

Далее создается стопка из тел с помощью метода this.matter.add.imageStack. Этот метод генерирует сетку спрайтов, которые сразу становятся физическими телами. Параметры позволяют контролировать положение, количество строк и столбцов, а также промежутки между телами. Свойство _mass устанавливает массу для каждого отдельного тела в стопке.

const stack = this.matter.add.imageStack('crate32', null, 300, 50, 5, 18, 30, 0, { _mass: 0.5 });

Добавление интерактивности

Финальный штрих — добавление интерактивной пружины, привязанной к курсору мыши. Метод this.matter.add.mouseSpring() создает невидимую пружину, которой можно хватать и перемещать физические тела в сцене. Это отличный инструмент для тестирования и отладки физического поведения объектов.

this.matter.add.mouseSpring();

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

Вы создали основу для физической симуляции с составными объектами и интерактивным управлением. Для экспериментов попробуйте

  1. Заменить стопку на цепь, созданную из отдельных круглых тел и соединений (Constraint)
  2. Изменить силу гравитации в конфигурации игры
  3. Прикрепить груз (crate) к последнему звену цепи с помощью сцепления (Constraint), чтобы создать реалистичный шарик для сноса