Concepts you will learn about:
- Drawing sprites
- Scaling and rotating sprites
- Playing sounds
- Changing scenes
Ensure a Web Server is Set Up
Even though Phaser games are ran in your browser, you unfortunately can’t just run a local HTML file directly from your file system. When requesting files over http, the security of the server allows you to access only the files you’re allowed to. When loading a file from the local file system (the file:// protocol), your browser highly restricts it for obvious security reasons. It’s no good to allow code on a website to read anything in your raw file system. Because of this, we will need to host our game on a local web server.
We recommend checking out Phaser’s official guide, “Getting Started with Phaser 3“, to learn which web server is compatible with your system and there are links to each one. The guide also provides some detailed summaries on the each of the various web servers mentioned.
Create the Files and Folders Needed
First, find the location where your web server hosts files from (WAMP Server, for example, hosts files from the www directory within it’s installation folder at C:/wamp64.) Once you have found the location, create a new folder inside it and call it anything you want.
Next, enter the folder and create a new file called, “index.html”. Our index file is where we will declare the location of our Phaser script and the rest of our game scripts.
Now we will need to create two new folders, I called the first one
content for our game content (sprites, audio, etc.), and the other one,
game.js. I will explain what those files will do shortly, but next we need to populate our content folder with the content for our game. After all, what’s the point of a game if there’s nothing to see? 🙂
So far, the file structure we have created should look like:
Now to add content to our game, we will first need content. I have prepared some assets for this course that you can download for free here. Otherwise, you create your own assets if you wish. Keep in mind that if you create your own assets, Phaser requires frames to be in a horizontal row on the images with animations. Below is a list of the content we will need:
- Sprites (images)
- sprBtnPlay.png (the play button)
- sprBtnPlayHover.png (the play button when mouse is over)
- sprBtnPlayDown.png (the play button when clicked)
- sprBtnRestart.png (the restart button)
- sprBtnRestartHover.png (the restart button on mouse over)
- sprBtnRestartDown (the restart button when clicked)
- sprBg0.png (a background layer of stars with transparency around the stars)
- sprBg1.png (another background layer of stars with transparency around the stars)
- sprEnemy0.png (the first enemy, this is an animation)
- sprEnemy1.png (the second enemy, this is not an animation)
- sprEnemy2.png (the third enemy, this is an animation)
- sprLaserEnemy.png (laser shot by enemies)
- sprLaserPlayer.png (laser shot by the player)
- sprExplosion.png (an explosion animation)
- sprPlayer.png (the player, this is an animation)
- Audio (.wav files)
- sndExplode0.wav (the first explosion sound)
- sndExplode1.wav (the second explosion sound)
- sndLaser.wav (the sound of a laser being shot)
- sndBtnOver.wav (the sound of mouse moving over button)
- sndBtnDown.wav (the sound of button when clicked)
Once you downloaded the assets (or made your own), we will move those files into the content directory we have made.
Finally, we need to download the latest Phaser script. One method of acquiring this (there are multiple), is to head over to GitHub (specifically here). You will want either
phaser.min.js. The file
phaser.js contains the source code for Phaser in a readable form, which is useful if you wanted to contribute to Phaser, or to understand how something is implemented under-the-hood. The other file,
With that, we will wrap up the first part of our free course, “Build a Space Shooter with Phaser 3”.
If you would like to receive updates on new courses I release via email, feel free to fill out the form.