With the latest release of Phaser 3 (as of now, v3.16.1), there has never been a better time to jump into Phaser than now! In this free course, we will be exploring creating a basic space shooter with Phaser 3. I will start by saying that it is quite beneficial to have the basics of JavaScript under your belt. If you don’t, be sure to check out my free course, “JavaScript Beginner Blocks“. That course will cover everything in JavaScript you need to know to start this one. However, no matter if you have never used Phaser before, or just dabbled in it for a little bit, this course is for you. By the end of this course, you should have adequate knowledge to start building games of your own with Phaser 3. You can check out Phaser at the official website.

Concepts you will learn about:

  • Basics of JavaScript ES6 classes
  • 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, js, which will contain our Phaser script and our other game scripts. Feel free to name these two folders anything you would like, after all, it is your game. One of the folders just needs to be dedicated to the content for our game, and the other for the JavaScript files. Since we have our folder for content and JavaScript, create four new files inside the newly created folder for JavaScript called: SceneMainMenu.js, SceneMain.js, SceneGameOver.js, and 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:

Content needed:

  • 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.js or 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, phaser.min.js is meant for distribution, and is compressed to reduce file size. For our purposes, it won’t really matter which one we download, so decide which and click the appropriate link. You will then be greeted by a page that displays a “View raw” button near the center of the page and roughly halfway down. Next, click the “View raw” link, right click anywhere on the page that appears, then click “Save Page As”. A save dialog will appear where you should save the Phaser file in the JavaScript directory we created earlier.

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.