О чем этот пример
Создание множества однотипных объектов, например, пуль, может быстро снизить производительность вашей игры. Постоянное создание и уничтожение экземпляров `Sprite` или `Image` нагружает сборщик мусора и приводит к "тормозам". В этой статье мы разберем пример из официальной документации Phaser, который демонстрирует профессиональный подход к решению этой проблемы. Вы научитесь использовать класс `Phaser.GameObjects.Group` в качестве пула объектов (object pool) для эффективного управления выпускаемыми снарядами, что является ключевым навыком для создания плавного и отзывчивого геймплея в shoot 'em up, аркадных и других типах игр.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
mouseY = 0;
mouseX = 0;
isDown = false;
lastFired = 0;
stats;
speed;
ship;
bullets;
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('ship', 'assets/sprites/ship.png');
this.load.image('bullet1', 'assets/sprites/bullets/bullet11.png');
}
create ()
{
class Bullet extends Phaser.GameObjects.Image
{
constructor (scene)
{
super(scene, 0, 0, 'bullet1');
this.incX = 0;
this.incY = 0;
this.lifespan = 0;
this.speed = Phaser.Math.GetSpeed(600, 1);
}
fire (x, y)
{
this.setActive(true);
this.setVisible(true);
// Bullets fire from the middle of the screen to the given x/y
this.setPosition(400, 300);
const angle = Phaser.Math.Angle.Between(x, y, 400, 300);
this.setRotation(angle);
this.incX = Math.cos(angle);
this.incY = Math.sin(angle);
this.lifespan = 1000;
}
update (time, delta)
{
this.lifespan -= delta;
this.x -= this.incX * (this.speed * delta);
this.y -= this.incY * (this.speed * delta);
if (this.lifespan <= 0)
{
this.setActive(false);
this.setVisible(false);
}
}
}
this.bullets = this.add.group({
classType: Bullet,
maxSize: 50,
runChildUpdate: true
});
this.ship = this.add.sprite(400, 300, 'ship').setDepth(1);
this.input.on('pointerdown', pointer =>
{
this.isDown = true;
this.mouseX = pointer.x;
this.mouseY = pointer.y;
});
this.input.on('pointermove', pointer =>
{
this.mouseX = pointer.x;
this.mouseY = pointer.y;
});
this.input.on('pointerup', pointer =>
{
this.isDown = false;
});
}
update (time, delta)
{
if (this.isDown && time > this.lastFired)
{
const bullet = this.bullets.get();
if (bullet)
{
bullet.fire(this.mouseX, this.mouseY);
this.lastFired = time + 50;
}
}
this.ship.setRotation(Phaser.Math.Angle.Between(this.mouseX, this.mouseY, this.ship.x, this.ship.y) - Math.PI / 2);
}
}
const config = {
type: Phaser.WEBGL,
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Проблема: нативные создание и удаление объектов
Наивный подход к стрельбе выглядит так: при каждом нажатии кнопки мыши в методе update создается новый спрайт пули (this.add.image), ему задается скорость, а когда пуля улетает за экран или проживает отведенное время, она уничтожается методом destroy(). При активной стрельбе за секунду могут создаваться десятки таких объектов. Частое создание и удаление ведет к фрагментации памяти и работе сборщика мусора, что вызывает просадки FPS.
Пул объектов (Object Pool) — это паттерн, при котором заранее создается набор (пул) переиспользуемых объектов. Вместо уничтожения объект деактивируется и возвращается в пул. Когда нужен новый объект, он не создается с нуля, а берется из пула и активируется с новыми параметрами. Это сводит аллокацию памяти к минимуму.
Создание пользовательского класса Bullet
В примере мы создаем собственный класс Bullet, расширяющий Phaser.GameObjects.Image. Это позволяет инкапсулировать логику поведения пули.
Ключевые поля:
- incX, incY: единичный вектор направления движения.
- lifespan: время жизни пули в миллисекундах.
- speed: предрассчитанная скорость (пикселей в секунду).
Метод fire(x, y) используется для "активации" пули, уже взятой из пула. Он задает стартовую позицию, рассчитывает угол и направление к цели, сбрасывает таймер жизни и делает объект видимым.
Метод update(time, delta) обновляет положение пули каждый кадр и уменьшает ее время жизни. Когда время жизни истекает, пуля не уничтожается, а деактивируется, что является ключевым моментом для пула.
class Bullet extends Phaser.GameObjects.Image
{
constructor (scene)
{
super(scene, 0, 0, 'bullet1');
this.incX = 0;
this.incY = 0;
this.lifespan = 0;
this.speed = Phaser.Math.GetSpeed(600, 1);
}
fire (x, y)
{
this.setActive(true);
this.setVisible(true);
this.setPosition(400, 300);
const angle = Phaser.Math.Angle.Between(x, y, 400, 300);
this.setRotation(angle);
this.incX = Math.cos(angle);
this.incY = Math.sin(angle);
this.lifespan = 1000;
}
update (time, delta)
{
this.lifespan -= delta;
this.x -= this.incX * (this.speed * delta);
this.y -= this.incY * (this.speed * delta);
if (this.lifespan <= 0)
{
this.setActive(false);
this.setVisible(false);
}
}
}Инициализация пула через Group
Phaser предоставляет удобный способ создания пула объектов — класс Phaser.GameObjects.Group. При его создании можно указать пользовательский класс для его элементов и максимальный размер.
Конфигурация группы:
- classType: Bullet: все объекты, создаваемые группой, будут экземплярами нашего класса Bullet.
- maxSize: 50: группа создаст и будет хранить не более 50 пуль. Это размер нашего пула.
- runChildUpdate: true: это критически важный параметр. Если он установлен в true, группа автоматически будет вызывать метод update для каждого своего активного дочернего объекта в каждом кадре. Без этого наши пули не будут двигаться.
this.bullets = this.add.group({
classType: Bullet,
maxSize: 50,
runChildUpdate: true
});Группа сразу создает пул из 50 неактивных объектов Bullet. Они существуют в памяти, но не отрисовываются (visible=false) и не обновляются (active=false).
Механика стрельбы и взятие объекта из пула
Логика стрельбы находится в методе update сцены. При зажатой кнопке мыши (this.isDown) и соблюдении задержки между выстрелами (cooldown) мы запрашиваем у группы готовый объект.
Метод this.bullets.get() — это сердце пула. Он ищет первый неактивный (active=false) объект в группе. Если такой объект найден (пул не исчерпан), он активируется и возвращается. Если свободных объектов нет (все 50 пуль в полете), метод вернет undefined. Это безопаснее, чем создание нового объекта и потенциальная утечка памяти.
После получения объекта мы инициализируем его вызовом bullet.fire(this.mouseX, this.mouseY), передавая текущие координаты мыши в качестве цели.
Также здесь реализован простой rate limit (ограничение скорости стрельбы) через переменную this.lastFired, чтобы нельзя было выпустить все пули за один кадр.
if (this.isDown && time > this.lastFired)
{
const bullet = this.bullets.get(); // Получаем пулю из пула
if (bullet)
{
bullet.fire(this.mouseX, this.mouseY); // Активируем ее
this.lastFired = time + 50; // Устанавливаем задержку 50мс
}
}Управление временем жизни и возврат в пул
Возврат объекта в пул происходит автоматически внутри класса Bullet. В его методе update отсчитывается время жизни (this.lifespan -= delta). Когда lifespan достигает нуля, объект деактивируется:
this.setActive(false);
this.setVisible(false);После этих вызовов объект снова становится кандидатом для возврата методом this.bullets.get(). Он не удален из памяти, а просто "спит" с нулевыми координатами, готовый к повторной инициализации. Это полностью исключает затраты на создание (new) и уничтожение (destroy) объектов во время игрового процесса.
Важно: деактивация через setActive(false) также останавливает вызов update для этого объекта, так как группа обновляет только активные дочерние элементы (благодаря runChildUpdate: true).
Дополнительный штрих: поворот корабля к цели
Пример также содержит элегантное решение для поворота спрайта корабля в сторону курсора мыши. Это делается в том же основном методе update сцены с помощью функции Phaser.Math.Angle.Between.
Эта функция возвращает угол (в радианах) между двумя точками: текущим положением мыши (this.mouseX, this.mouseY) и позицией корабля (this.ship.x, this.ship.y). Полученный угол используется для установки вращения спрайта.
Вычитание Math.PI / 2 (90 градусов) необходимо, потому что спрайт корабля, вероятно, нарисован "носом" вверх (по оси Y), а стандартный угол 0 в системе координат Phaser указывает направо (по оси X). Это типичная корректировка для графики.
this.ship.setRotation(Phaser.Math.Angle.Between(this.mouseX, this.mouseY, this.ship.x, this.ship.y) - Math.PI / 2);Что попробовать дальше
Использование Group в качестве пула объектов — это мощный и эффективный способ управления множеством однотипных игровых объектов в Phaser. Он решает проблемы производительности, минимизирует работу сборщика мусора и делает код чище. Вы можете адаптировать этот паттерн для частиц, врагов, бонусов или любых других повторяющихся сущностей.
**Идеи для экспериментов:**
1. Добавьте разные типы пуль (например, ракеты, лазеры) в один пул, используя массив текстур и случайный выбор в методе fire.
2. Реализуйте систему улучшений (power-ups), которая временно увеличивает maxSize пула или уменьшает задержку между выстрелами (this.lastFired).
3. Добавьте столкновения пуль с целями, используя this.physics.add.overlap. Не забудьте деактивировать пулю при попадании, чтобы вернуть ее в пул.
4. Визуализируйте границы пула: выведите на экран счетчик активных/неактивных пуль в группе (this.bullets.getTotalUsed()).