О чем этот пример
Физический движок Matter.js в Phaser позволяет создавать сложные и реалистичные взаимодействия объектов с минимальными усилиями. В этой статье на примере игры «Пачинко» мы разберём, как настраивать категории столкновений, создавать статические и динамические тела, обрабатывать коллизии и управлять физическими свойствами. Эти знания пригодятся для разработки любых игр, где важна точная физика: от головоломок до аркадных симуляторов.
Версия 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('ball', 'assets/sprites/red_ball.png');
}
create ()
{
this.matter.world.setBounds(0, 0, 800, 600, 32, true, true, false, false);
// Create our Collision categories. One for the pins, one for the balls and one for the bucket
const pinsCategory = this.matter.world.nextCategory();
const ballsCategory = this.matter.world.nextCategory();
const bucketCategory = this.matter.world.nextCategory();
// Create a basic pachinko board layout
let startY = 150;
for (let y = 0; y < 8; y++)
{
let startX = 50;
let max = 23;
if (y % 2 === 0)
{
startX = 50 + 16;
max = 22;
}
for (let x = 0; x < max; x++)
{
const pin = this.matter.add.circle(startX + x * 32, startY + y, 3, {
isStatic: true,
restitution: 1,
});
pin.collisionFilter.category = pinsCategory;
pin.collisionFilter.mask = ballsCategory;
}
startY += 38;
}
// Our bucket to collect the balls in
const bucket = this.add.rectangle(200, 550, 200, 32, 0xffffff);
this.matter.add.gameObject(bucket, { isStatic: true, isSensor: true });
bucket.setCollisionCategory(bucketCategory);
bucket.setCollidesWith([ ballsCategory ]);
// Use a tween to move the bucket in a set path
this.tweens.add({
targets: bucket,
x: 600,
duration: 6000,
yoyo: true,
repeat: -1,
ease: 'linear',
});
// Our 'dropper' that will drop balls from the top (technically this doesn't have to be a physics object, but it helps for debugging)
const dropper = this.matter.add.rectangle(400, 50, 96, 32, { isStatic: true });
// A basic score
let score = 0;
const scoreText = this.add.text(10, 10, 'Score: 0', { font: '16px Courier', fill: '#00ff00' });
// The balls we can drop from the top
this.balls = new Set();
let ballCount = 0;
const ballsText = this.add.text(690, 10, 'Balls: 100', { font: '16px Courier', fill: '#00ff00' });
// A function that creates a ball
const createBall = (x, y) =>
{
const ball = this.matter.add.image(x, y, 'ball');
ball.setCircle();
ball.setFriction(0.005);
ball.setBounce(1);
ball.setCollisionCategory(ballsCategory);
ball.setCollidesWith([ ballsCategory, pinsCategory, bucketCategory ]);
bucket.setOnCollideWith(ball.body, (body, collisionData) => {
this.balls.delete(ball);
ball.destroy();
score += 100;
scoreText.setText('Score: ' + score);
});
this.balls.add(ball);
ballCount++;
ballsText.setText('Balls: ' + (100 - ballCount));
};
this.input.on('pointermove', pointer => {
this.matter.body.setPosition(dropper, { x: pointer.worldX, y: dropper.position.y });
});
this.input.on('pointerdown', pointer => {
if (ballCount < 100)
{
createBall(dropper.position.x, dropper.position.y);
}
});
}
update ()
{
// If a ball goes below the screen, remove it
this.balls.forEach(ball => {
if (ball.y > 650)
{
this.balls.delete(ball);
ball.destroy();
}
});
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#1d1d1d',
parent: 'phaser-example',
physics: {
default: 'matter',
matter: {
enableSleeping: false,
gravity: {
y: 1
},
debug: {
staticLineColor: 0x00ff00,
lineColor: 0xffffff,
}
}
},
scene: Example
};
const game = new Phaser.Game(config);
Настройка физики Matter.js
В примере используется движок Matter.js, который предоставляет расширенные возможности для моделирования физики. Конфигурация задаётся в объекте config при создании экземпляра игры.
physics: {
default: 'matter',
matter: {
enableSleeping: false,
gravity: { y: 1 },
debug: {
staticLineColor: 0x00ff00,
lineColor: 0xffffff,
}
}
}Здесь gravity: { y: 1 } задаёт слабую гравитацию по вертикали, а enableSleeping: false отключает «засыпание» тел, что важно для постоянно движущихся объектов, таких как шарики. Отладка (debug) визуализирует контуры статических и динамических тел разными цветами, что упрощает разработку.
Категории столкновений для точного контроля
Matter.js позволяет назначать объектам категории столкновений (collision categories), чтобы гибко управлять тем, какие тела могут сталкиваться друг с другом. Это критически важно в играх типа «Пачинко», где шарики должны отскакивать от кеглей, но не взаимодействовать между собой без необходимости.
const pinsCategory = this.matter.world.nextCategory();
const ballsCategory = this.matter.world.nextCategory();
const bucketCategory = this.matter.world.nextCategory();Метод nextCategory() генерирует уникальную битовую маску для каждой категории. Затем эти категории назначаются телам через свойство collisionFilter. Например, для кегли (статического круга) задаётся категория pinsCategory, и маска указывает, что она сталкивается только с шарами (ballsCategory).
pin.collisionFilter.category = pinsCategory;
pin.collisionFilter.mask = ballsCategory;Создание игровых объектов: от статики до динамики
В игре используются три типа тел: статические кегли, динамические шары и сенсорное ведро. Статические тела, такие как кегли, создаются с флагом isStatic: true и не двигаются под воздействием физики.
const pin = this.matter.add.circle(startX + x * 32, startY + y, 3, {
isStatic: true,
restitution: 1,
});Динамические шары создаются как изображения с помощью this.matter.add.image, а затем настраиваются физические свойства:
ball.setCircle();
ball.setFriction(0.005);
ball.setBounce(1);setCircle() задаёт форму тела как круг, setFriction устанавливает низкое трение для плавного движения, а setBounce(1) — идеальный упругий отскок. Ведро создаётся как обычный прямоугольник (this.add.rectangle), а затем превращается в статический сенсор с помощью this.matter.add.gameObject. Сенсор (isSensor: true) не имеет физической реакции, но регистрирует пересечения с другими телами.
Обработка коллизий и игровая логика
Столкновения обрабатываются через метод setOnCollideWith, который позволяет назначить callback для конкретной пары тел. В примере он используется для подсчёта очков при попадании шара в ведро.
bucket.setOnCollideWith(ball.body, (body, collisionData) => {
this.balls.delete(ball);
ball.destroy();
score += 100;
scoreText.setText('Score: ' + score);
});Такой подход точечен и эффективен: функция срабатывает только при контакте конкретного шара с ведром, что упрощает логику. Управление капельницей (dropper) реализовано через обработчики событий ввода:
this.input.on('pointermove', pointer => {
this.matter.body.setPosition(dropper, { x: pointer.worldX, y: dropper.position.y });
});Здесь this.matter.body.setPosition перемещает статическое тело капельницы вслед за курсором, создавая интерактивный элемент.
Управление жизненным циклом объектов
Динамические объекты, такие как шары, требуют ручного управления, особенно за пределами игрового поля. В методе update() происходит проверка позиции каждого шара, и если он упал слишком низко, то удаляется из игры и из коллекции this.balls.
this.balls.forEach(ball => {
if (ball.y > 650) {
this.balls.delete(ball);
ball.destroy();
}
});Использование Set для хранения шаров (this.balls = new Set()) обеспечивает быстрый доступ и удаление без дубликатов. Счётчик оставшихся шаров (ballCount) и отображение через ballsText дают игроку обратную связь.
Что попробовать дальше
Пример «Пачинко» демонстрирует ключевые приёмы работы с Matter.js в Phaser: категории столкновений для фильтрации взаимодействий, создание статических и динамических тел, обработку событий коллизий и управление жизненным циклом объектов. Для экспериментов попробуйте изменить физические параметры (трение, упругость), добавить разные типы препятствий или реализовать систему бонусов при попадании в определённые зоны. Это отличная основа для создания своих физических головоломок или аркадных симуляторов.