Подключение и настройка Matter.js в Phaser

Phaser предоставляет мощную интеграцию с физическим движком Matter.js, позволяя создавать сложные физические взаимодействия объектов в 2D-пространстве. Matter.js представляет собой гибкий движок с поддержкой твердых тел, столкновений, сил и constraints (ограничений).

Инициализация Matter.js

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

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'matter',
        matter: {
            gravity: { y: 1 }, // стандартная гравитация по оси Y
            debug: true,       // включение режима отладки
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

Ключевые моменты инициализации:

  • default: 'matter' — указывает, что по умолчанию используется Matter.js.
  • gravity — задает глобальную гравитацию сцены; можно отдельно настраивать по оси X и Y.
  • debug — отображает физические тела, что удобно при тестировании.

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

В Matter.js объекты называются бодисами (bodies). Phaser упрощает работу с ними через методы this.matter.add.

Прямоугольник:

let box = this.matter.add.rectangle(400, 300, 80, 80, {
    restitution: 0.8, // коэффициент упругости
    friction: 0.1,    // трение при движении
    density: 0.001     // плотность объекта
});

Круг:

let ball = this.matter.add.circle(200, 100, 40, {
    restitution: 0.9,
    friction: 0.05
});

Полигон:

let polygon = this.matter.add.polygon(600, 300, 5, 50, {
    restitution: 0.6,
    friction: 0.2
});

Особенности:

  • restitution отвечает за отскок тела при столкновении.
  • friction — сопротивление движению при контакте с другими телами.
  • density влияет на массу тела и его реакцию на силы.

Связывание Phaser-спрайтов с физикой

Phaser позволяет автоматически привязывать визуальные объекты к телам Matter.js:

let sprite = this.matter.add.sprite(400, 200, 'boxTexture');
sprite.setRectangle(80, 80);
sprite.setBounce(0.7);  // аналог restitution
sprite.setFriction(0.05);

Методы для настройки тела спрайта:

  • setCircle(radius) — задает форму круга.
  • setPolygon(sides, radius) — задает форму многоугольника.
  • setStatic(true) — делает тело неподвижным.
  • setFixedRotation() — запрещает вращение тела.

Constraints и соединения

Matter.js поддерживает constraints — соединения между объектами:

let ballA = this.matter.add.circle(300, 100, 20);
let ballB = this.matter.add.circle(350, 100, 20);

this.matter.add.constraint(ballA, ballB, 50, 0.9); // длина 50, жесткость 0.9

Параметры constraints:

  • length — естественная длина соединения.
  • stiffness — жесткость, от 0 (гибкое) до 1 (жесткое).
  • damping — гашение колебаний, снижает «качание» тел.

Настройка столкновений и коллизий

Для контроля коллизий используется система collision categories и masks:

const CATEGORY_PLAYER = 0x0001;
const CATEGORY_ENEMY  = 0x0002;

let player = this.matter.add.rectangle(100, 100, 50, 50, {
    collisionFilter: { category: CATEGORY_PLAYER, mask: CATEGORY_ENEMY }
});

let enemy = this.matter.add.rectangle(300, 100, 50, 50, {
    collisionFilter: { category: CATEGORY_ENEMY, mask: CATEGORY_PLAYER }
});

События столкновений:

this.matter.world.on('collisionstart', function(event) {
    event.pairs.forEach(pair => {
        console.log('Столкновение:', pair.bodyA, pair.bodyB);
    });
});

Доступные события:

  • collisionstart — начало контакта тел.
  • collisionactive — контакт продолжается.
  • collisionend — контакт завершен.

Применение сил и импульсов

Matter.js поддерживает динамическое воздействие на тела:

let ball = this.matter.add.circle(400, 200, 30);

ball.applyForce({ x: 0.01, y: -0.02 }); // добавление силы
ball.setVelocity(2, 3);                  // установка скорости напрямую
ball.setAngularVelocity(0.1);            // вращение тела
  • applyForce добавляет силу пропорционально массе тела.
  • setVelocity мгновенно изменяет скорость тела.
  • setAngularVelocity контролирует вращение.

Глобальные настройки Matter.js

Phaser позволяет настраивать мир физики:

this.matter.world.setBounds(0, 0, 800, 600, 32, true, true, true, true);
this.matter.world.setGravity(0, 1); // по умолчанию вниз
this.matter.world.disableGravity(); // отключение гравитации для всех объектов

Основные возможности:

  • setBounds — установка границ мира с возможностью отскока от стен.
  • setGravity — изменение гравитации по каждой оси.
  • disableGravity — глобальное отключение гравитации.

Интеграция с Tilemap и сложными формами

Matter.js позволяет создавать тела на основе сложных форм:

this.matter.add.sprite(400, 300, 'levelTile').setPolygonFromTilemap('layerName');

Для сложных многоугольников можно использовать метод fromVertices:

let verts = [
    { x: 0, y: 0 },
    { x: 60, y: 20 },
    { x: 40, y: 80 }
];

let complexBody = this.matter.add.fromVertices(500, 200, verts, {
    restitution: 0.5
});
  • Поддерживаются concave и convex формы.
  • Внутренние алгоритмы автоматически разделяют concave на несколько convex для правильной симуляции.

Оптимизация производительности

  • Ограничивать количество тел с включенным debug.
  • Использовать статические тела для неподвижных объектов (setStatic(true)).
  • Минимизировать использование сложных concave-полигонов.
  • Настраивать sleeping для тел, которые долго не участвуют в симуляции:
ball.setSleepThreshold(60); // через 60 фреймов без движения тело «засыпает»
  • Использовать collision categories для уменьшения числа проверок столкновений.

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

Оглавление