О чем этот пример
Реалистичная физика — ключ к созданию динамичных и увлекательных миров. В этой статье мы разберем пример из официального репозитория Phaser, который демонстрирует, как быстро создать множество интерактивных физических объектов и предоставить игроку полный контроль над камерой для навигации по обширной сцене. Вы научитесь генерировать случайные полигоны и прямоугольники, настраивать отскок, добавлять интерактивность с помощью мыши и создавать плавное управление камерой с приближением и вращением. Этот фундаментальный паттерн полезен для прототипирования песочниц, симуляторов или уровней с разрушаемыми объектами.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
controls;
create ()
{
const worldWidth = 1600;
const worldHeight = 1200;
this.matter.world.setBounds(0, 0, worldWidth, worldHeight);
// Create loads of random bodies
for (let i = 0; i < 100; i++)
{
const x = Phaser.Math.Between(0, worldWidth);
const y = Phaser.Math.Between(0, worldHeight);
if (Math.random() < 0.7)
{
const sides = Phaser.Math.Between(3, 14);
const radius = Phaser.Math.Between(8, 50);
this.matter.add.polygon(x, y, sides, radius, { restitution: 0.9 });
}
else
{
const width = Phaser.Math.Between(16, 128);
const height = Phaser.Math.Between(8, 64);
this.matter.add.rectangle(x, y, width, height, { restitution: 0.9 });
}
}
this.matter.add.mouseSpring();
const cursors = this.input.keyboard.createCursorKeys();
const controlConfig = {
camera: this.cameras.main,
left: cursors.left,
right: cursors.right,
up: cursors.up,
down: cursors.down,
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
acceleration: 0.06,
drag: 0.0005,
maxSpeed: 1.0
};
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);
this.input.keyboard.on('KEY_DOWN_Z', function (event)
{
this.cameras.main.rotation += 0.01;
}, 0, this);
this.input.keyboard.on('KEY_DOWN_X', function (event)
{
this.cameras.main.rotation -= 0.01;
}, 0, this);
const cam = this.cameras.main;
const gui = new dat.GUI();
const p1 = gui.addFolder('Pointer');
p1.add(this.input, 'x').listen();
p1.add(this.input, 'y').listen();
p1.open();
const help = {
line1: 'Cursors to move',
line2: 'Q & E to zoom',
line3: 'Z & X to rotate'
};
const f1 = gui.addFolder('Camera');
f1.add(cam, 'x').listen();
f1.add(cam, 'y').listen();
f1.add(cam, 'scrollX').listen();
f1.add(cam, 'scrollY').listen();
f1.add(cam, 'rotation').min(0).step(0.01).listen();
f1.add(cam, 'zoom', 0.1, 2).step(0.1).listen();
f1.add(help, 'line1');
f1.add(help, 'line2');
f1.add(help, 'line3');
f1.open();
}
update (time, delta)
{
this.controls.update(delta);
}
}
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
parent: 'phaser-example',
pixelArt: true,
physics: {
default: 'matter',
matter: {
gravity: {
y: 0
},
debug: true
}
},
scene: Example
};
const game = new Phaser.Game(config);
Настройка мира и генерация тел
Код начинается с настройки физического мира Matter.js. Важно установить границы мира, чтобы тела не улетали в бесконечность. После этого в цикле создаются 100 случайных тел.
Основная логика генерации использует Math.random() для выбора типа фигуры: с вероятностью 70% создается случайный многоугольник, в остальных случаях — прямоугольник. Параметры, такие как количество сторон, радиус, ширина и высота, выбираются случайно в заданных диапазонах.
Обратите внимание на свойство restitution: 0.9 в конфигурации тел. Оно определяет упругость (коэффициент восстановления). Значение 0.9 означает, что тела будут отскакивать почти с первоначальной энергией, создавая очень "прыгучее" и живое поведение.
this.matter.world.setBounds(0, 0, worldWidth, worldHeight);if (Math.random() < 0.7) {
const sides = Phaser.Math.Between(3, 14);
const radius = Phaser.Math.Between(8, 50);
this.matter.add.polygon(x, y, sides, radius, { restitution: 0.9 });
} else {
const width = Phaser.Math.Between(16, 128);
const height = Phaser.Math.Between(8, 64);
this.matter.add.rectangle(x, y, width, height, { restitution: 0.9 });
}Интерактивность: пружина для мыши и управление камерой
Чтобы игрок мог взаимодействовать с миром, к сцене добавляется mouseSpring. Это специальный джойнт, который позволяет "тянуть" и "бросать" физические тела, щелкая и перетаскивая их левой кнопкой мыши.
Для навигации по большой сцене реализовано сглаженное управление камерой с клавиатуры. Объект Phaser.Cameras.Controls.SmoothedKeyControl обеспечивает плавное, инерционное движение камеры при нажатии стрелок, а также зум с помощью клавиш Q и E.
Параметры acceleration (ускорение), drag (сопротивление) и maxSpeed (максимальная скорость) тонко настраивают "ощущение" управления.
this.matter.add.mouseSpring();const controlConfig = {
camera: this.cameras.main,
left: cursors.left,
right: cursors.right,
up: cursors.up,
down: cursors.down,
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
acceleration: 0.06,
drag: 0.0005,
maxSpeed: 1.0
};
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl(controlConfig);В методе update необходимо постоянно обновлять состояние этих контролов.
update (time, delta) {
this.controls.update(delta);
}Вращение камеры и панель отладки dat.GUI
Пример расширяет стандартные возможности камеры, добавляя вращение по нажатию клавиш Z и X. Это делается через слушатели событий клавиатуры KEY_DOWN_Z и KEY_DOWN_X, которые изменяют свойство rotation у главной камеры.
Для визуализации и отладки параметров камеры и ввода используется библиотека dat.GUI. Она создает на экране панель, которая в реальном времени отображает координаты камеры (`x,y), смещение (scrollX,scrollY), масштаб (zoom) и вращение (rotation). Также отображаются текущие координаты указателя мыши (this.input.x,this.input.y`) и справочная информация по управлению.
this.input.keyboard.on('KEY_DOWN_Z', function (event) {
this.cameras.main.rotation += 0.01;
}, 0, this);const gui = new dat.GUI();
const f1 = gui.addFolder('Camera');
f1.add(cam, 'x').listen();
f1.add(cam, 'y').listen();
f1.add(cam, 'zoom', 0.1, 2).step(0.1).listen();
// ... и другие параметрыКонфигурация игры: Matter.js с нулевой гравитацией
Вся магия начинается с правильной конфигурации игры. Ключевой момент — активация физического движка Matter.js (default: 'matter'). В его настройках гравитация по оси Y отключена (y: 0), что позволяет телам свободно парить и взаимодействовать только при столкновениях или действии пружины мыши. Параметр debug: true включает отладочную графику, которая отображает контуры всех тел.
Также обратите внимание на pixelArt: true. Этот параметр влияет на алгоритм масштабирования текстуры камеры, помогая сохранить четкость пиксельной графики при зуме.
const config = {
type: Phaser.WEBGL,
physics: {
default: 'matter',
matter: {
gravity: { y: 0 },
debug: true
}
},
pixelArt: true,
scene: Example
};Что попробовать дальше
Этот пример — отличная стартовая точка для создания интерактивных физических симуляций в Phaser. Вы можете экспериментировать: изменить баланс между многоугольниками и прямоугольниками, поиграть с коэффициентом упругости для создания "мягких" или "супер-прыгучих" миров, добавить разные типы тел (например, круги) или реализовать притягивающие/отталкивающие силы. Используя этот код как основу, вы быстро создадите прототип игры-песочницы, головоломки или симулятора.