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.
- 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
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 this.loadMain("heart");
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:
but there are a couple of 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");
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.
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!
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!