In today’s tutorial we are going to cover the simple but powerful concept of grouping in Phaser. As the name suggested, grouping allows you to group like minded Sprites together. Probably easiest to jump right in with a simple example:
/// <reference path="phaser.d.ts"/> class SimpleGame { game: Phaser.Game; sprite: Phaser.Sprite; group: Phaser.Group; constructor() { this.game = new Phaser.Game(640, 480, Phaser.AUTO, 'content', { create: this.create, preload: this.preload, render: this.render }); } preload() { this.game.load.image("decepticon", "decepticon.png"); } render() { } create() { this.group = this.game.add.group(); this.group.create(0, 0, "decepticon"); this.group.create(100, 100, "decepticon"); this.group.create(200, 200, "decepticon"); this.game.add.tween(this.group).to({ x: 250 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true).start(); } } window.onload = () => { var game = new SimpleGame(); };
And run it:
As you can see, all objects in the group are updated as the group is updated. You may notice we created the sprites directly in the group using Group.create, but we didn’t have to. We could have just as easily done:
create() { this.group = this.game.add.group(); var sprite1 = this.game.add.sprite(0, 0, "decepticon"); var sprite2 = this.game.add.sprite(100, 100, "decepticon"); var sprite3 = this.game.add.sprite(200, 200, "decepticon"); this.group.add(sprite1); this.group.add(sprite2); this.group.add(sprite3); this.game.add.tween(this.group).to({ x: 250 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true).start(); }
You can also add groups to groups, like so:
create() { this.group = this.game.add.group(); this.group2 = this.game.add.group(); this.group.create(0, 0, "decepticon"); this.group2.create(100, 100, "decepticon"); this.group2.create(200, 200, "decepticon"); this.group.add(this.group2); this.game.add.tween(this.group).to({ x: 250 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true).start(); }
The above code performs identically to the earlier example. This can provide a great way to organize your game into logical entities, such as a group for the background, a group for scrolling foreground clouds, a group for bullets, etc.
Grouping things together is all nice and good, but if you can’t do anything to the group, it’s mostly just pointless. Fortunately then, there is quite a bit you can do with a group. You can loop through them:
create() { this.group = this.game.add.group(); this.group.create(0, 0, "decepticon"); this.group.create(100, 100, "decepticon"); this.group.create(200, 200, "decepticon"); // Set each item in the group's x value to 0 this.group.forEach((entity) => { entity.x = 0; }, this, false); this.game.add.tween(this.group).to({ x: 250 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true).start(); }
You can sort them:
create() { this.group = this.game.add.group(); this.group.create(0, 0, "decepticon"); this.group.create(100, 100, "decepticon"); this.group.create(200, 200, "decepticon"); // Sort group by y coordinate descending this.group.sort("y", Phaser.Group.SORT_DESCENDING); this.game.add.tween(this.group).to({ x: 250 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true).start(); }
You can update a property on all group members at once:
create() { this.group = this.game.add.group(); this.group.create(0, 0, "decepticon"); this.group.create(100, 100, "decepticon"); this.group.create(200, 200, "decepticon"); // set the alpha value of all sprites to 50% this.group.setAll("alpha", 0.5); this.game.add.tween(this.group).to({ x: 250 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true).start(); }
Running:
You can get the index of any item within the group:
create() { this.group = this.game.add.group(); var sprite1 = this.group.create(0, 0, "decepticon"); this.group.create(100, 100, "decepticon"); this.group.create(200, 200, "decepticon"); this.group.sort("y", Phaser.Group.SORT_DESCENDING); var index = this.group.getIndex(sprite1); this.game.add.text(0, 0, "Sprite1's index is:" + index, { font: "65px Arial", fill: "#ff0000", align: "center" }, this.group); // Index should be 2 this.game.add.tween(this.group).to({ x: 250 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true).start(); }
Running:
And as you might be able to see from the above example, you can also add text objects directly to groups!
One other important concept of Groups is being dead or alive. There are all kinds of methods for checking if an entity is alive or not, like so:
create() { this.group = this.game.add.group(); var sprite1 = this.group.create(0, 0, "decepticon"); this.group.create(100, 100, "decepticon"); this.group.create(200, 200, "decepticon"); sprite1.alive = false; this.group.forEachDead((entity) => { entity.visible = false; }, this); this.game.add.tween(this.group).to({ x: 250 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true).start(); }
This kills off the first of the three sprites, leaving you:
This tutorial only scratched the surface on what groups can do. Simply put, they are a convenient data type for logically holding your game objects. The only thing I didn’t mention is what happens when a group doesn’t have a parent. In this situation, that parent is the games’ World, which… is a group.