Phaser Groups — Managing Multiple Game Objects
In this tutorial, you will learn about Phaser Groups. We cover key concepts, practical examples, and best practices to help you master this topic.
Phaser groups manage collections of game objects with built-in iteration, physics integration, pooling, and bulk property configuration.
What You'll Learn
By the end of this guide, you will create display and physics groups, use object pooling for performance, iterate group children, configure physics properties on groups, and use groups for collision detection.
Basic Group
var enemies = this.add.group();
for (var i = 0; i < 10; i++) {
var enemy = this.add.sprite(100 + i * 60, 100, 'enemy');
enemies.add(enemy);
}
Physics Group
var bullets = this.physics.add.group({
defaultKey: 'bullet',
maxSize: 30,
active: false,
visible: false
});
function fireBullet(x, y) {
var bullet = bullets.get(x, y);
if (bullet) {
bullet.setActive(true).setVisible(true);
bullet.body.velocity.y = -300;
}
}
Group Collision
this.physics.add.collider(player, platforms);
this.physics.add.overlap(bullets, enemies, hitEnemy, null, this);
Group Iteration
bullets.children.iterate(function(bullet) {
if (bullet.y < -50 || bullet.y > 650) {
bullet.setActive(false).setVisible(false);
bullet.body.stop();
}
});
Common Mistakes
1. Not Setting maxSize for Pooling
Without maxSize, the group grows unbounded. Set maxSize for controlled pooling.
2. Active Vis False Mismatch
When deactivating bullets, set both setActive(false) and setVisible(false).
3. Physics Body on Non-Physics Group
Physics collision only works with physics groups. Use this.physics.add.group() not this.add.group().
4. Not Resetting Body Position
When reusing a pooled object, reset its body position and velocity.
5. Adding Children After Collision Set
Add colliders AFTER groups are populated. Adding children after does not retroactively add collisions.
Practice Questions
Q1: How do you create a physics group? A: Use this.physics.add.group().
Q2: How do you pool bullets? A: Use group.get() to retrieve inactive bullets. Set active/visible on use and return.
Q3: How do you check overlap between groups? A: Use this.physics.add.overlap(groupA, groupB, callback).
Q4: How do you iterate all children? A: Use group.children.iterate(callback) or group.getChildren().forEach().
Q5: How do you count active children? A: Use group.getFirstAlive() or group.countActive().
Challenge: Build a bullet hell shooter where the player fires into a physics group of enemies. Bullets are pooled and enemies respawn when killed. Display the count of active enemies.
FAQ
Try It Yourself
Create a physics group with pooled bullets.
<!DOCTYPE html>
<html>
<head>
<title>Phaser Groups</title>
<script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Group Demo</h2>
<script>
var config = {
type: Phaser.AUTO,
width: 600,
height: 400,
backgroundColor: '#1a1a2e',
physics: { default: 'arcade', arcade: { gravity: { y: 0 } } },
scene: {
create: function() {
var bullets = this.physics.add.group({
defaultKey: null,
maxSize: 20
});
// Create bullet graphics and store texture
var g = this.make.graphics({ add: false });
g.fillStyle(0xff6b35);
g.fillRect(0, 0, 6, 12);
g.generateTexture('bullet', 6, 12);
g.destroy();
// Spawn circles as targets
var targets = this.add.group();
for (var i = 0; i < 5; i++) {
var t = this.add.circle(100 + i * 100, 200, 20, 0x4ecdc4);
targets.add(t);
}
// Click to shoot
this.input.on('pointerdown', function(pointer) {
var bullet = bullets.get(pointer.x, pointer.y);
if (bullet) {
bullet.setTexture('bullet');
bullet.setActive(true).setVisible(true);
bullet.body.velocity.y = -300;
}
});
// Return inactive bullets
this.events.on('update', function() {
bullets.children.iterate(function(b) {
if (b.active && b.y < -20) {
b.setActive(false).setVisible(false);
b.body.stop();
}
});
// Simple overlap check
targets.children.iterate(function(t) {
bullets.children.iterate(function(b) {
if (b.active && t.active &&
Phaser.Geom.Intersects.RectangleToRectangle(
b.getBounds(), t.getBounds())) {
t.setActive(false).setVisible(false);
b.setActive(false).setVisible(false);
b.body.stop();
}
});
});
});
this.add.text(300, 30, 'Click to Shoot', { fill: '#4ecdc4' }).setOrigin(0.5);
}
}
};
var game = new Phaser.Game(config);
</script>
</body>
</html>
What's Next
Use camera system.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro