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
game.load.image("burst","images/effects/burst.png");
Shortcut!
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
this.loadMain("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
Shortcuts!
to load an mp3 file sound effect use
//this will load an mp3 file from audio/sfx and give it the key of elephant
this.loadSFX("elephant");
or for a wav file
//this will load an wav file from audio/sfx and give it the key of elephant
this.loadSFX2("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
mediaManager.setBackgroundMusic("background");
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;
To
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!