Managing Audio In Phaser


Getting Started

How to preload different assets in in Phaser

What We Will Cover:

-Loading images
-Loading spritesheets
-Loading audio

Preloading Images:

The first thing we are going to go over in this quick tutorial is going to be preloading images for your game using phasers preload function.

preload() {'background', './assetsDirectory/background.png');

The Breakdown:

Okay so lets go through this simple functionality step by step and explain exactly what is happening here.

-Alright so first off inside of our games preload function for Phaser we start by telling our game we will be loading an image by calling as a function.

-The first parameter we pass to this function is what we want this specific image to be called, in this case we will call it background

-The second parameter passed is going to be our project directory where we have saved off our background.png file

Preloading Spritesheets:

Next we are going to speak about preloading spritesheets, they are used for creating animations. As well as saving crucial space when your project has a lot of assets to be loaded. I will be posting a tutorial in the near future on how to create and manage animations with spritesheets.

preload() {'player', './assetsDirectory/player.png, 32, 32, 8');

Breaky Break, Break It Down

Alrighty, so loading a spritesheet is not that different from loading an image…. or really anything else in Phaser. The main difference here
is we are going to accept three new parameters in our load function that were not there in the image preload. We will go through those now.

-Okay so the first new parameter we are accepting is 32 now this is the width of the frame that we will be calling.
-This next parameter we are accepting is also 32 to keep things simpe, this is the height of the frame we are calling.
-Now this last parameter is how many frames are contained in our spritesheet.

I will be going over in more detail in a future post about how to setup and use animations with loaded spritesheets.

Loading Audio:

For this section I will quickly cover how to preload audio for your game. In a future post I will conver audio management in Phaser.

preload() {'sound', './assetsDirectory/sound.oog');

The Audio Breakdown:

So this far in the tutorial this should all basically look familiar. I will go ahead and list the difference for this functionality.

-Only one thing has been changed here for loading the audio, we call audio after to tell Phaser that the file we will
be loading is an audio file.

-We then define what we want to call our audio to be called in our game state in this example we will just call it ‘sound’.

-Then we list where the sound file can be found.


-Went over preloading images in Phaser
-Went over preloading spritesheets in Phaser
-Went over preloading audio in Phaser

One thing not covered in this tutorial was loading files using JSON we have done a tutorial on this that can be found here

Please stay tuned for future posts about creating animations using spritesheets, as well as a post for audio management, and how to add a progress bar for your preload in Phaser!


Error code 89: Invalid or expired token.

Stay Updated