Shooting bullets using Phaser groups

  • 4 Min. Read.

Groups are one of the most powerful features of PhaserJS, let’s take a look at how they work, by creating a small spaceship shooter example.

Finished example

What we’ll cover

  • How to set up a Phaser Group
  • Create an Arcade physics body for movement
  • Detect when lasers are out of bound
  • Object Pooling using Phaser Groups for improving performance
  • Phaser mouse or touch input
  • Phaser keyboard input events

Setup

We have use a very simple HTML snippet for this example.

Create your main.js file, set up a basic Phaser game instance and preload the assets.

Add a space ship to the stage

We’ll add a space ship on the stage in the create function. This is where the assets are available for use.

When you fire up your HTML file in the browser, you’ll see your ship on screen.

PhaserJS canvas
PhaserJS canvas

Create the lasers group

Next up, we’ll create the group containing the lasers in create(). The code is documented throughout, and we’ll highlight some special things afterwards. Put this code before you create the ship.

The callAll and setAll function might be a bit difficult to understand, but look at it like this:

These functions are basically saving you time by looping over every object for you. There’s no need for you to manually loop over the sprites and apply the properties or call the functions.

If we take a look at the Phaser source code for setAll, this is what’s happening.

It’s looping over all children and it sets the given property on the child, simple as that.

Time to make the ship shoot

Whenever we click, tap or press space / enter, we’ll make the ship shoot a bullet.

We’ll start with clicking and tapping, since those are easiest.

When you click the screen now, lasers will start shooting out of the ship! When the lasers are out of bounds, they are killed and put back in the pool for reuse.

Adding keyboard input

For listening to keyboard input, we first have to let Phaser know which keys we want to observe.

Then in update() we loop over the keys, and check whether or not they were just pressed. If they were, we fire a laser.

And that concludes this overview of how Phaser Groups work, I hope you learned something new today, and you can find the completed demo on github.

A concept by Wonderlus