О чем этот пример
Создание ровных платформеров и головоломок с физикой требует точной обработки столкновений. Ручная расстановка коллайдеров для каждого тайла — задача муторная и неэффективная. Пример `tilemap/collision/matter.js` демонстрирует мощную функцию Phaser — автоматическое преобразование тайлового слоя в физические тела Matter.js. Это позволяет загружать сложные формы столкновений, созданные в Tiled, и использовать их в физическом движке, что экономит часы ручной работы и дает точный контроль над взаимодействиями в мире игры.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
controls;
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.spritesheet('balls', 'assets/sprites/balls.png', { frameWidth: 17, frameHeight: 17 });
this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/tileset-collision-shapes.json');
this.load.image('kenny_platformer_64x64', 'assets/tilemaps/tiles/kenny_platformer_64x64.png');
}
create ()
{
const map = this.make.tilemap({ key: 'map' });
const tileset = map.addTilesetImage('kenny_platformer_64x64');
const layer = map.createLayer(0, tileset, 0, 0);
// Set colliding tiles before converting the layer to Matter bodies!
map.setCollisionByExclusion([ -1, 0 ]);
// Convert the layer. Any colliding tiles will be given a Matter body.
// If a tile has collision shapes from Tiled, these will be loaded. If
// not, a default rectangle body will be used.
// The body will be accessible via tile.physics.matterBody.
this.matter.world.convertTilemapLayer(layer);
this.matter.world.setBounds(map.widthInPixels, map.heightInPixels);
// Drop bouncy, Matter balls on pointer down
this.input.on('pointerdown', function ()
{
const worldPoint = this.input.activePointer.positionToCamera(this.cameras.main);
for (let i = 0; i < 4; i++)
{
const x = worldPoint.x + Phaser.Math.RND.integerInRange(-5, 5);
const y = worldPoint.y + Phaser.Math.RND.integerInRange(-5, 5);
const frame = Phaser.Math.RND.integerInRange(0, 5);
this.matter.add.image(x, y, 'balls', frame, { restitution: 1 });
}
}, this);
this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
this.cameras.main.setScroll(95, 0);
const cursors = this.input.keyboard.createCursorKeys();
const controlConfig = {
camera: this.cameras.main,
left: cursors.left,
right: cursors.right,
up: cursors.up,
down: cursors.down,
speed: 0.5
};
this.controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig);
const help = this.add.text(16, 16, 'Left-click to drop balls.\nArrows to scroll.', {
fontSize: '18px',
padding: { x: 10, y: 5 },
backgroundColor: '#000000',
fill: '#ffffff'
});
help.setScrollFactor(0);
}
update (time, delta)
{
this.controls.update(delta);
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'phaser-example',
physics: {
default: 'matter',
matter: {
gravity: { y: 1 },
enableSleep: true
}
},
scene: Example
};
const game = new Phaser.Game(config);
Загрузка карты и настройка столкновений
Первым шагом является загрузка тайловой карты и создание слоя. Ключевой момент — настройка столкновений для тайлов ДО их преобразования в физические тела.
const map = this.make.tilemap({ key: 'map' });
const tileset = map.addTilesetImage('kenny_platformer_64x64');
const layer = map.createLayer(0, tileset, 0, 0);
// Указываем, какие тайлы являются коллизионными
map.setCollisionByExclusion([ -1, 0 ]);Метод setCollisionByExclusion([ -1, 0 ]) помечает все тайлы как коллизионные, кроме тайлов с индексами -1 (пустая ячейка) и 0 (тайл с индексом 0 в наборе). Это удобный способ быстро задать столкновения для всех «твердых» тайлов.
Волшебство convertTilemapLayer
Следующий вызов — это сердце примера. Метод this.matter.world.convertTilemapLayer() автоматически пробегается по всем тайлам на слое, которые мы ранее пометили как коллизионные, и создает для них физические тела Matter.js.
this.matter.world.convertTilemapLayer(layer);Если в редакторе Tiled для тайла были заданы пользовательские формы столкновений (например, треугольники или многоугольники), движок Phaser загрузит и использует их. Если формы не заданы, для тайла будет создано стандартное прямоугольное тело (rectangle). После преобразования получить доступ к физическому телу тайла можно через свойство tile.physics.matterBody.
Создание интерактивных объектов
Для демонстрации работы физики в сцене создаются динамические объекты — шарики, которые падают по клику мыши.
this.input.on('pointerdown', function ()
{
const worldPoint = this.input.activePointer.positionToCamera(this.cameras.main);
for (let i = 0; i < 4; i++)
{
const x = worldPoint.x + Phaser.Math.RND.integerInRange(-5, 5);
const y = worldPoint.y + Phaser.Math.RND.integerInRange(-5, 5);
const frame = Phaser.Math.RND.integerInRange(0, 5);
this.matter.add.image(x, y, 'balls', frame, { restitution: 1 });
}
}, this);Обратите внимание на параметр { restitution: 1 } при создании шариков через this.matter.add.image. Он задает упругость (коэффициент восстановления) равную 1, что делает шарики идеально прыгучими. Они будут отскакивать от тайлов и друг от друга, не теряя энергию. positionToCamera корректно переводит координаты указателя мыши в мировые координаты с учетом прокрутки камеры.
Управление камерой и интерфейс
Пример также включает управление камерой с клавиатуры и статический текст с подсказками.
const controlConfig = {
camera: this.cameras.main,
left: cursors.left,
right: cursors.right,
up: cursors.up,
down: cursors.down,
speed: 0.5
};
this.controls = new Phaser.Cameras.Controls.FixedKeyControl(controlConfig);Phaser.Cameras.Controls.FixedKeyControl предоставляет готовое управление камерой стрелками. Скроллинг камеры обновляется в методе update(). Текст подсказки создается с фоном и свойством setScrollFactor(0), которое фиксирует его на экране, независимо от движения камеры.
Конфигурация физики Matter
Важно правильно настроить физический движок в конфигурации игры.
physics: {
default: 'matter',
matter: {
gravity: { y: 1 },
enableSleep: true
}
},Указание default: 'matter' активирует движок Matter.js. В его настройках задается гравитация по оси Y. Параметр enableSleep: true — это важная оптимизация. Он позволяет физическому движку переводить неподвижные тела в «спящий» режим, что значительно снижает нагрузку на CPU, когда в мире много статичных объектов (как наша тайловая карта).
Что попробовать дальше
Метод convertTilemapLayer() — это мощный мост между редактором уровней Tiled и физическим движком Phaser. Он автоматизирует создание сложных коллизионных ландшафтов, позволяя дизайнеру уровней работать в привычном редакторе, а разработчику — получать готовый физический мир.
**Идеи для экспериментов:**
1. Загрузите карту, созданную в Tiled с разными формами коллайдеров (круги, многоугольники), и посмотрите, как шарики будут скатываться по сложным поверхностям.
2. Измените restitution и friction у шариков или задайте эти свойства для разных типов тайлов через пользовательские данные в Tiled.
3. Используйте tile.physics.matterBody после конвертации, чтобы сделать некоторые тайлы разрушаемыми, удаляя их физическое тело при ударе.