О чем этот пример
В 2D-физике тела часто выглядят как простые квадраты и круги, что ограничивает визуальную выразительность игры. Phaser с плагином Matter.js позволяет легко создавать тела со скруглёнными углами — это не просто декоративный эффект, а реальное изменение физической формы. Используя параметр `chamfer`, вы можете делать объекты более органичными, задавать сложные скругления для каждого угла отдельно и создавать уникальные коллизии, которые сделают геймплей интереснее.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
create ()
{
this.matter.world.setBounds();
this.matter.add.rectangle(200, 200, 100, 100, {
chamfer: { radius: 20 }
});
this.matter.add.rectangle(300, 200, 100, 100, {
chamfer: { radius: [ 90, 0, 0, 0 ] }
});
this.matter.add.rectangle(400, 200, 200, 200, {
chamfer: { radius: [ 150, 20, 40, 20 ] }
});
this.matter.add.rectangle(200, 200, 200, 200, {
chamfer: { radius: [ 150, 20, 150, 20 ] }
});
this.matter.add.rectangle(300, 200, 200, 50, {
chamfer: { radius: [ 25, 25, 0, 0 ] }
});
this.matter.add.polygon(200, 100, 8, 80, {
chamfer: { radius: 30 }
});
this.matter.add.polygon(300, 100, 5, 80, {
chamfer: { radius: [ 10, 40, 20, 40, 10 ] }
});
this.matter.add.polygon(400, 200, 3, 50, {
chamfer: { radius: [ 20, 0, 20 ] }
});
this.matter.add.mouseSpring();
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'phaser-example',
physics: {
default: 'matter',
matter: {
gravity: {
y: 0
},
debug: true
}
},
scene: Example
};
const game = new Phaser.Game(config);
Что такое `chamfer` и зачем он нужен
В Matter.js параметр chamfer (скос, фаска) отвечает за скругление углов у полигонов и прямоугольников. Это не просто визуальная маска — физический движок действительно изменяет форму тела, учитывая новые скруглённые грани при расчётах столкновений и отскоков.
Основное преимущество — вы можете создавать тела, которые выглядят менее «коробочно» и более естественно взаимодействуют с окружением. Например, закруглённые углы у платформы помогут персонажу плавнее съезжать с неё.
В примере используется this.matter.world.setBounds() для создания границ мира, чтобы тела не улетали за пределы экрана, и this.matter.add.mouseSpring() для удобного перетаскивания объектов мышью и изучения их форм.
Базовое скругление для прямоугольника
Самый простой случай — равномерное скругление всех углов прямоугольника. Для этого в опциях тела нужно передать объект chamfer с числовым значением radius.
this.matter.add.rectangle(200, 200, 100, 100, {
chamfer: { radius: 20 }
});Здесь создаётся квадрат 100x100 пикселей в координатах (200, 200). Параметр radius: 20 указывает радиус скругления для всех четырёх углов. Чем больше значение, тем более «подушкообразным» станет тело. При radius, равном половине меньшей стороны, прямоугольник визуально превратится в эллипс (но физически останется полигоном).
Разное скругление для каждого угла
Чаще всего требуется контролировать каждый угол отдельно. Для этого radius задаётся массивом чисел. Порядок обхода углов в Matter.js — по часовой стрелке, начиная с верхнего левого.
this.matter.add.rectangle(300, 200, 100, 100, {
chamfer: { radius: [ 90, 0, 0, 0 ] }
});В этом коде скруглён только первый (верхний левый) угол с радиусом 90. Остальные углы остаются острыми (radius: 0). Таким образом можно создавать треугольные скосы, трапеции и другие сложные формы на основе прямоугольника.
this.matter.add.rectangle(400, 200, 200, 200, {
chamfer: { radius: [ 150, 20, 40, 20 ] }
});Здесь каждый угол имеет своё уникальное значение скругления, создавая асимметричную форму. Это полезно для создания камней, неправильных платформ или стилизованных UI-элементов с физикой.
Скругление для многоугольников и треугольников
Принцип работы chamfer для полигонов, созданных через this.matter.add.polygon, аналогичен. Для равномерного скругления всех вершин передаётся число.
this.matter.add.polygon(200, 100, 8, 80, {
chamfer: { radius: 30 }
});Создаётся восьмиугольник (`8сторон) с радиусом описанной окружности80`. Все его углы скругляются с радиусом 30, делая фигуру похожей на шестерёнку или цветок.
Для неоднородного скругления массив radius должен иметь длину, равную количеству вершин многоугольника. Порядок также по часовой стрелке.
this.matter.add.polygon(300, 100, 5, 80, {
chamfer: { radius: [ 10, 40, 20, 40, 10 ] }
});Это создаст пятиугольник, где две нижние вершины скруглены сильно, верхняя — умеренно, а две боковые — слегка. Так можно моделировать капли, щиты или кристаллы.
Для треугольника массив будет из трёх элементов:
this.matter.add.polygon(400, 200, 3, 50, {
chamfer: { radius: [ 20, 0, 20 ] }
});Здесь скруглены только две вершины, что может создать форму, похожую на лодку или наконечник стрелы.
Настройка Matter.js в конфиге
Чтобы всё работало, необходимо правильно инициализировать физический движок Matter в конфигурации игры. Ключевые параметры:
physics: {
default: 'matter',
matter: {
gravity: { y: 0 },
debug: true
}
}- default: 'matter' — активирует плагин Matter.js.
- gravity: { y: 0 } — отключает гравитацию по оси Y (в примере тела не падают).
- debug: true — включает отладочную отрисовку, которая показывает реальные полигональные формы тел, а не спрайты. Это необходимо, чтобы видеть эффект от chamfer.
Без debug: true вы увидите только стандартные спрайты прямоугольников и полигонов, поверх которых будет наложена физическая форма.
Что попробовать дальше
Параметр chamfer в Matter.js — это мощный и простой инструмент для выхода за рамки примитивных геометрических форм. Он позволяет создавать сложные, стильные и физически точные тела буквально в одну строку. Поэкспериментируйте: попробуйте создать платформы со скруглёнными краями для плавного соскальзывания, «пузыри» из полигонов с большим скруглением или асимметричные камни для динамичного пинбола. Комбинируя массивы скруглений для разных углов, можно генерировать процедурные формы для разрушаемых объектов или ландшафта.