Quick Start Guide for Ultimate Game Parts Template

Just a couple of weeks ago, I released the Ultimate Game Parts Template. Over the next few months, I’ll be writing some posts to show you how to get the most out of it, as well as my regular posts on Phaser.

The template is rather large, but it can save a lot of time. Here are a few steps to get you started.

Making a new Project

To make a new project simply make a copy of the template folder and give it the name of your project.

The States

  • StateInit-sets up the load state.
  • StateLoad-preloads the game assets
  • StateTitle-the title screen
  • StateMain-this is where you write your game
  • StateOver-the game over screen

Adding Images

It is recommended that you preload all images inside stateLoad, and that your game images should be inside the images/main folder.

You can use standard Phaser loading statements such as



I found myself making image keys the same as the image name. For example, if I was making a space game, and loaded ship.png, chances were I’d make the key ‘ship’ as well. To save a bit of time I made a shortcut function for main game images if you want the file name and key name to be the same:

Load an image from the images/main folder

//this will load the heart png image from images/main and give it the key of heart

Adding Sounds

There are 2 folders in the templates audio folder, background and sfx, for background music and sound effects, respectively.

You may load audio in the standard way:

load.audio("background", "audio/background/piano.mp3");

but there are a couple of shortcuts:

Sound Effects


to load an mp3 file sound effect use

//this will load an mp3 file from audio/sfx and give it the key of elephant

or for a wav file

//this will load an wav file from audio/sfx and give it the key of elephant

Background Music

Load the background music in the standard way in the stateLoad preload function

game.load.audio("background", "audio/background/piano.mp3");

Then set the background music in the media manager in the create function of stateLoad


This will set up the background music on a loop.

Sound Buttons

You can add sound controls to your game in any state by using

var soundButtons = new SoundButtons();

These will toggle on and off sounds effects and background music.

Try it in stateMain!

Dev Mode

When I am first developing a game, I can find it annoying to have the background music keep resetting and having to go through the title screen when I was debugging, so I created a development mode in the model that when set to true, will skip to stateMain, the main part of the game. By default the game template has devMode set to true

To change this, in the main.js simply change the line

model.devMode = true;


model.devMode = false;

I hope you find this useful. If you have any questions about the template I am most happy to answer them!

Happy Coding!

Leave a Comment