Тела Matter: прямоугольники, круги, многоугольники

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

В Matter.js тело создаётся через функцию this.matter.add, к которой передаётся тип тела и его конфигурация.

this.matter.add.rectangle(x, y, width, height, options);
this.matter.add.circle(x, y, radius, options);
this.matter.add.polygon(x, y, sides, radius, options);

Прямоугольные тела

Прямоугольник — наиболее часто используемая форма. Основные параметры:

  • x, y — координаты центра тела
  • width, height — размеры
  • options — объект с физическими свойствами: isStatic, friction, restitution, density

Пример создания прямоугольника:

const box = this.matter.add.rectangle(400, 300, 80, 50, {
    isStatic: false,
    friction: 0.1,
    restitution: 0.8
});

Особенности прямоугольников:

  • Тела легко вращаются вокруг центра.
  • Физика столкновений учитывает форму тела и угол наклона.
  • Для прямоугольников можно задавать sensor (тела, которые не участвуют в столкновениях, но могут реагировать на пересечения).

Круглые тела

Круги создаются с помощью this.matter.add.circle. Параметры аналогичны прямоугольникам, но тело всегда симметрично и проще для расчёта столкновений.

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

Ключевые моменты:

  • Круги идеально подходят для шарообразных объектов, мячей и роликов.
  • Столкновения с другими телами более предсказуемы благодаря отсутствию острых углов.
  • Масса тела вычисляется автоматически через плотность и радиус, но может задаваться вручную через mass.

Многоугольные тела

Многоугольники создаются с помощью this.matter.add.polygon. Параметры:

  • sides — количество сторон
  • radius — радиус описанной окружности
  • options — физические свойства
const triangle = this.matter.add.polygon(500, 200, 3, 50, {
    restitution: 0.7,
    friction: 0.2
});
const hexagon = this.matter.add.polygon(600, 400, 6, 40);

Особенности многоугольников:

  • Многоугольные тела могут быть правильными (равные стороны) или составными (через fromVertices).
  • Для сложных форм используются массивы вершин:
const complexShape = this.matter.add.fromVertices(300, 300, [
    { x: 0, y: 0 },
    { x: 100, y: 0 },
    { x: 50, y: 50 }
], {
    restitution: 0.5
});
  • fromVertices позволяет импортировать формы из SVG или ручной разметки.
  • Сложные тела могут делиться на композитные объекты для лучшей производительности.

Настройка физических свойств тел

Физические свойства определяют поведение тела:

  • isStatic — тело неподвижно, не реагирует на силы.
  • restitution — коэффициент упругости при столкновениях (0–1).
  • friction — коэффициент трения при движении по другим телам.
  • frictionAir — сопротивление воздуха, замедляющее движение.
  • density — плотность, влияет на массу тела.
  • angle и angularVelocity — начальный угол и скорость вращения.

Пример сложной конфигурации:

const dynamicBox = this.matter.add.rectangle(150, 100, 60, 60, {
    isStatic: false,
    friction: 0.1,
    frictionAir: 0.01,
    restitution: 0.8,
    density: 0.005,
    angle: Math.PI / 4
});

Управление телами

После создания тела можно изменять его состояние и управлять физикой:

  • Применение силы:
dynamicBox.applyForce({ x: 0.01, y: -0.02 });
  • Установка позиции:
dynamicBox.setPosition(300, 300);
  • Изменение скорости:
dynamicBox.setVelocity(5, -2);
dynamicBox.setAngularVelocity(0.1);
  • Поворот:
dynamicBox.setAngle(Math.PI / 2);
dynamicBox.setRotation(0); // альтернативный способ
  • Удаление тела:
dynamicBox.destroy();

Взаимодействие тел

Matter.js поддерживает столкновения и события:

  • collisionstart — начало контакта
  • collisionactive — продолжающийся контакт
  • collisionend — конец контакта

Пример отслеживания столкновений:

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

Композитные и составные тела

Для сложных объектов можно объединять несколько форм в одно тело через Matter.Composite или Matter.Body.create. Пример создания составного объекта:

const compoundBody = this.matter.body.create({
    parts: [
        this.matter.bodies.rectangle(0, 0, 50, 50),
        this.matter.bodies.circle(0, -25, 25)
    ],
    restitution: 0.6
});

this.matter.world.add(compoundBody);

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

  • Все части тела движутся как единое целое.
  • Можно комбинировать прямоугольники, круги и многоугольники.
  • Поддерживается вращение и столкновения на уровне всего компаунда.

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

Оглавление