О чем этот пример
Создание большого количества игровых объектов, таких как пули, враги или частицы, может быстро привести к проблемам с производительностью. Постоянное создание и удаление объектов нагружает сборщик мусора и вызывает «просадки» FPS. В этой статье разберем, как использовать `Phaser.GameObjects.Group` в качестве объекта-пула (Sprite Pool). Этот паттерн позволяет переиспользовать уже созданные спрайты, значительно снижая нагрузку на память и CPU, что критически важно для аркадных игр и проектов с большим количеством динамических объектов.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
captionTextFormat =
`Total: %1
Max: %2
Active: %3
Inactive: %4
Used: %5
Free: %6
Full: %7`;
captionStyle = {
fill: '#7fdbff',
fontFamily: 'monospace',
lineSpacing: 4
};
caption;
group;
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('space', 'assets/skies/space.jpg');
this.load.spritesheet('alien', 'assets/tests/invaders/invader1.png', { frameWidth: 32, frameHeight: 32 });
}
create ()
{
this.anims.create({
key: 'creep',
frames: this.anims.generateFrameNumbers('alien', { start: 0, end: 1 }),
frameRate: 2,
repeat: -1
});
this.add.image(400, 300, 'space');
this.group = this.add.group({
defaultKey: 'alien',
maxSize: 100,
createCallback: function (alien)
{
alien.setName(`alien${this.getLength()}`);
console.log('Created', alien.name);
},
removeCallback: function (alien)
{
console.log('Removed', alien.name);
}
});
// You could also fill the group first:
// group.createMultiple({
// active: false,
// key: group.defaultKey,
// repeat: group.maxSize - 1
// });
this.caption = this.add.text(16, 16, '', this.captionStyle);
this.time.addEvent({
delay: 100,
loop: true,
callback: () => this.addAlien()
});
}
update ()
{
Phaser.Actions.IncY(this.group.getChildren(), 1);
this.group.children.forEach(alien =>
{
if (alien.y > 600)
{
this.group.killAndHide(alien);
}
});
this.caption.setText(Phaser.Utils.String.Format(this.captionTextFormat, [
this.group.getLength(),
this.group.maxSize,
this.group.countActive(true),
this.group.countActive(false),
this.group.getTotalUsed(),
this.group.getTotalFree(),
this.group.isFull()
]));
}
activateAlien (alien)
{
alien
.setActive(true)
.setVisible(true)
.setTint(Phaser.Display.Color.RandomRGB().color)
.play('creep');
}
addAlien ()
{
// Random position above screen
const x = Phaser.Math.Between(250, 800);
const y = Phaser.Math.Between(-64, 0);
// Find first inactive sprite in group or add new sprite, and set position
const alien = this.group.get(x, y);
// None free or already at maximum amount of sprites in group
if (!alien) { return; }
this.activateAlien(alien);
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
pixelArt: true,
scene: Example
};
const game = new Phaser.Game(config);
Что такое объект-пул и зачем он нужен?
Представьте, что в вашей игре нужно создать сотни падающих звёзд или выстрелов. Если для каждого нового объекта создавать спрайт через this.add.sprite(), а при его исчезновении — удалять, браузер будет постоянно выделять и освобождать память. Это неэффективно.
Пул решает эту проблему, создавая заранее заготовленный набор (пул) объектов. Когда объект в игре «умирает» (например, пуля улетает за экран), мы не удаляем его, а просто деактивируем и прячем. Когда нужен новый объект, мы берем уже готовый, неактивный спрайт из пула, активируем его и задаем новые параметры (позицию, цвет). Таким образом, мы переиспользуем одни и те же объекты в игре, избегая дорогостоящих операций создания и удаления.
В Phaser за эту логику отвечает класс Group с настроенными параметрами maxSize и defaultKey.
Создание и настройка пула через Group
В методе create() сцены мы инициализируем наш пул. Ключевые параметры:
- defaultKey: ключ текстуры, которая будет использоваться для автоматического создания спрайтов.
- maxSize: максимальный размер пула. Группа не создаст объектов больше этого числа.
- createCallback и removeCallback: полезные хуки для отладки, срабатывающие при создании нового спрайта внутри пула и при его реальном удалении из памяти.
this.group = this.add.group({
defaultKey: 'alien',
maxSize: 100,
createCallback: function (alien) {
alien.setName(`alien${this.getLength()}`);
console.log('Created', alien.name);
},
removeCallback: function (alien) {
console.log('Removed', alien.name);
}
});Обратите внимание: при достижении maxSize группа перестанет создавать новые спрайты. Вы также можете предзаполнить пул неактивными спрайтами с помощью group.createMultiple(), как показано в закомментированном коде примера.
Получение и активация объектов из пула
Основная магия происходит в методе addAlien(). Когда нам нужен новый спрайт на сцене, мы не создаем его, а запрашиваем у группы через метод get(x, y).
const alien = this.group.get(x, y);Этот метод делает следующее:
1. Ищет первый неактивный (active: false) спрайт внутри группы.
2. Если такой найден — задает ему переданные координаты (x, y) и возвращает его.
3. Если неактивных спрайтов нет, но общее количество спрайтов в группе меньше maxSize, создает новый спрайт (вызывая createCallback).
4. Если группа полна (все спрайты активны) — возвращает null.
Получив спрайт, мы настраиваем его для отображения в игре через вспомогательный метод activateAlien().
activateAlien (alien) {
alien
.setActive(true)
.setVisible(true)
.setTint(Phaser.Display.Color.RandomRGB().color)
.play('creep');
}Здесь мы включаем спрайт, делаем его видимым, задаем случайный оттенок и запускаем анимацию. Это превращает «заготовку» из пула в полноценного активного врага.
Уборка: как «убить» объект и вернуть его в пул
В методе update() мы постоянно двигаем всех пришельцев вниз. Когда спрайт уходит за нижнюю границу экрана (y > 600), его нужно убрать. Вместо удаления мы используем мощный метод группы killAndHide().
if (alien.y > 600) {
this.group.killAndHide(alien);
}Этот метод делает ровно то, что нужно для возврата в пул:
- setActive(false): Делает спрайт неактивным. Теперь он игнорируется системами обновления и физики Phaser.
- setVisible(false): Скрывает спрайт.
- body.stop(): Если у спрайта есть физическое тело, оно останавливается.
После этого спрайт становится кандидатом для повторного использования. При следующем вызове this.group.get() он будет найден и «воскрешен» с новыми параметрами.
Мониторинг состояния пула
Для отладки и понимания работы пула полезно отслеживать его внутренние метрики. В примере это делается через текстовый вывод. Группа предоставляет несколько методов для получения статистики:
this.caption.setText(Phaser.Utils.String.Format(this.captionTextFormat, [
this.group.getLength(), // Общее количество созданных спрайтов
this.group.maxSize, // Максимальный размер пула
this.group.countActive(true), // Количество активных спрайтов
this.group.countActive(false), // Количество неактивных спрайтов
this.group.getTotalUsed(), // Сколько спрайтов сейчас «используется» (активно)
this.group.getTotalFree(), // Сколько спрайтов свободно (неактивно)
this.group.isFull() // Полон ли пул? (getLength() === maxSize)
]));Наблюдая за этими значениями, вы можете оптимизировать maxSize под нужды игры. Идеально, когда количество активных спрайтов (getTotalUsed()) стабилизируется, а общее количество (getLength()) достигает maxSize и больше не растет — это значит, пул работает эффективно и не создает новых объектов.
Что попробовать дальше
Использование Group в качестве пула объектов — это фундаментальная оптимизация для игр с повторяющейся динамикой. Вы значительно снижаете нагрузку на память и CPU, избегая рывков производительности. Для экспериментов попробуйте:
1. Изменить maxSize и наблюдать, как меняется производительность при большом количестве объектов.
2. Реализовать пул для системы частиц (particles) или пуль в шутере.
3. Добавить логику постепенного увеличения размера пула (maxSize) при необходимости, если изначальная оценка была недостаточной.
4. Использовать разные defaultKey для создания разнотипных объектов в одном пуле.