With all of the tools we just learned, we have everything we need to make a huge number of games. Think about games that you’ve played and try to imagine how they break down into the following steps:
- Loading in assets (all the sounds and images for your game: 3D models and textures would also be assets here although that isn’t something we’re going to be handling in Phaser).
- Setting up a scene by creating all of the interactive game objects.
- Adding event listeners and handlers to those game objects.
- Updating the scene each frame, detecting if buttons are pressed and triggering events based on those button presses.
Here’s a quick review of the concepts we’ve covered in cheat sheet form.
These are all core game development strategies at the heart of nearly every game you’ll play, and you’ve conquered them in Phaser! Congratulations!
The most fundamental part of a Phaser game is the
config we pass to
Phaser.Game(). Inside we define the
height, the default
backgroundColor, and Scene information.
Start by creating a
config object with
height, and a
If you’re not sure what
backgroundColor to use, try plum:
Now create the game! Call
new Phaser.Game(config) and save the results in a new variable called
Now let’s create a quick way to store different things we want to track within our scene. On the first line of game.js, create a
gameState object to store things in our game we need to refer to.
Now that we have a game, let’s start building our scene!
preload() function, where we’ll load in our assets.
Let’s load in our Codey sprite in
preload(). Give it the key
'codey' and load it in from
Now let’s create a
create() function and use it to create our GameObject for Codey.
Inside a new function called
this.add.sprite() to create a Codey sprite. Remember to give these three arguments, in order: an
x value, a
y value, and the key for the image to use.
Save the new sprite as
Where’s Codey? Well we need to add our
scene to our
config add a new key,
scene, and pass an object containing
Also inside our
create() function, let’s add cursors to
gameState.cursors by using
update() function. Inside the
update function, check if the down button is pressed using
gameState.cursors.down.isDown. If it is pressed, we want Codey moving downwards, so add 1 to Codey’s
scene to include the
update() functions we just wrote!
Congratulations, you’ve mastered the basics of Phaser!