О чем этот пример
Одной из ключевых задач при разработке игр является оптимизация. Этот пример демонстрирует мощь и эффективность физического движка Arcade в Phaser, позволяя создавать и управлять десятками тысяч взаимодействующих объектов в реальном времени. Мы разберём, как достигается такая производительность, и изучим практические приёмы работы с массовыми телами, спрайтами Blitter и контролем камеры, которые можно применить в своих играх для создания масштабных симуляций или экшен-сцен.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
controls;
blitter;
spriteBounds;
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.atlas('atlas', 'assets/tests/fruit/veg.png', 'assets/tests/fruit/veg.json');
}
create ()
{
this.physics.world.setBounds(0, 0, 800 * 8, 600 * 8);
this.blitter = this.add.blitter(0, 0, 'atlas');
this.spriteBounds = Phaser.Geom.Rectangle.Inflate(Phaser.Geom.Rectangle.Clone(this.physics.world.bounds), -100, -100);
// Create 40,000 bodies at a rate of 100 bodies per 100ms
this.time.addEvent({ delay: 100, callback: this.release, callbackScope: this, repeat: (40000 / 100) - 1 });
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.cameras.main.scrollX = 2770;
this.cameras.main.scrollY = 2036;
this.cameras.main.zoom = 0.12;
}
update (time, delta)
{
this.controls.update(delta);
}
release ()
{
for (let i = 0; i < 100; i++)
{
const pos = Phaser.Geom.Rectangle.Random(this.spriteBounds);
const frame = `veg0${Phaser.Math.Between(1, 9).toString()}`;
const bob = this.blitter.create(pos.x, pos.y, frame);
bob.angle = 0;
bob.scaleX = 1;
bob.scaleY = 1;
bob.displayOriginX = 0;
bob.displayOriginY = 0;
this.physics.add.existing(bob);
bob.body.setVelocity(Phaser.Math.Between(200, 400), Phaser.Math.Between(200, 400));
bob.body.setBounce(1);
bob.body.setCollideWorldBounds(true);
if (Math.random() > 0.5)
{
bob.body.velocity.x *= -1;
}
if (Math.random() > 0.5)
{
bob.body.velocity.y *= -1;
}
}
}
}
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
parent: 'phaser-example',
pixelArt: true,
physics: {
default: 'arcade',
arcade: {
useTree: false,
gravity: { y: 100 }
}
},
scene: Example
};
const game = new Phaser.Game(config);
Подготовка мира и создание Blitter
В методе create() мы задаём огромные границы физического мира — в 64 раза больше экрана. Это необходимо, чтобы 40 тысяч тел не скапливались в одном месте.
this.physics.world.setBounds(0, 0, 800 * 8, 600 * 8);Затем создаётся объект Blitter. Это высокопроизводительный контейнер для отрисовки множества спрайтов из одного атласа. Он идеально подходит для массовых однотипных объектов, таких как частицы или, в нашем случае, фрукты.
this.blitter = this.add.blitter(0, 0, 'atlas');Мы также создаём рабочую область для спавна объектов, отступив от границ мира на 100 пикселей, чтобы тела появлялись не вплотную к стенам.
this.spriteBounds = Phaser.Geom.Rectangle.Inflate(Phaser.Geom.Rectangle.Clone(this.physics.world.bounds), -100, -100);Управление камерой: плавный полёт по огромному миру
Чтобы исследовать мир с 40 тысячами объектов, нужна подвижная камера. В примере используется Phaser.Cameras.Controls.SmoothedKeyControl для плавного управления с клавиатуры. Конфигурация привязывает стрелки для движения и клавиши Q/E для зума.
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().
this.controls.update(delta);Порционное создание тел: ключ к стабильности
Создать 40 тысяч физических тел за один кадр — верный способ "подвесить" браузер. Вместо этого используется таймер, который вызывает функцию release() каждые 100 миллисекунд, создавая по 100 тел за раз. Это позволяет системе плавно наращивать нагрузку.
this.time.addEvent({ delay: 100, callback: this.release, callbackScope: this, repeat: (40000 / 100) - 1 });В функции release() для каждого из 100 тел выбирается случайная позиция внутри подготовленной области spriteBounds и случайный кадр из атласа (от veg01 до veg09).
const pos = Phaser.Geom.Rectangle.Random(this.spriteBounds);
const frame = `veg0${Phaser.Math.Between(1, 9).toString()}`;
const bob = this.blitter.create(pos.x, pos.y, frame);Настройка физики для каждого объекта
Самый важный шаг — добавление физического тела к уже созданному спрайту Blitter с помощью this.physics.add.existing(). Этот метод превращает обычный спрайт в физическое тело Arcade.
this.physics.add.existing(bob);Затем телу задаются свойства: случайная начальная скорость, упругость (bounce: 1) и включение коллизии с границами мира. Значение bounce: 1 означает абсолютно упругое столкновение — тела отскакивают от стен без потери энергии.
bob.body.setVelocity(Phaser.Math.Between(200, 400), Phaser.Math.Between(200, 400));
bob.body.setBounce(1);
bob.body.setCollideWorldBounds(true);Для добавления хаоса скорость случайным образом инвертируется по осям. В Arcade-физике это делается прямым изменением свойства velocity тела.
if (Math.random() > 0.5) {
bob.body.velocity.x *= -1;
}Конфигурация игры: отключение оптимизации и гравитация
Секрет производительности кроется и в настройках физики в конфиге игры. Параметр useTree: false отключает внутреннее пространственное разбиение движка (quadtree). При таком огромном количестве динамических тел на поддержку дерева уходило бы больше ресурсов, чем оно экономит на проверках коллизий.
physics: {
default: 'arcade',
arcade: {
useTree: false,
gravity: { y: 100 }
}
}Также задана гравитация по оси Y, которая заставляет все тела постепенно падать вниз, создавая постоянное движение в системе.
Что попробовать дальше
Пример наглядно показывает, что Phaser способен обрабатывать экстремальное количество объектов, если правильно использовать его API. Ключевые приёмы: порционное создание тел, использование Blitter для рендеринга, отключение useTree для полностью динамических миров и SmoothedKeyControl для навигации. Для экспериментов попробуйте изменить силу гравитации, добавить взаимодействие между телами с помощью collider или заменить фрукты на другие спрайты, наблюдая за влиянием на производительность.