Build a Space Shooter with Phaser 3 – 1

by | Feb 6, 2019 | Build a Space Shooter with Phaser 3 | 11 comments

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:

(game folder)
|_ index.html
|_ content/
|_ js/
|_ game.js
|_ SceneGameOver.js
|_ SceneMain.js
|_ SceneMainMenu.js

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”. I hope you have found this helpful thus far, and please feel free to comment below if you have any questions or suggestions! I would love to hear from you, and I’m more than happy to help anyone out.

If you would like to receive updates on new courses I release via email, feel free to fill out the form.

11 Comments

    • Jared York

      Hi Stephen, I have not heard of leanpub.com. From first glance it looks like quite a compelling platform. I will definitely consider it. Thanks for letting me know! 🙂

      Reply
  1. Shubhojit Roy

    Can you please upload the assets to github maybe?

    Reply
    • Jared York

      All the source code and assets for all of my courses are available on GitHub. The source + content for this course can be found here.

      Reply
  2. Voragun Supawong

    Where is your GitHub link?

    Reply
    • Voragun Supawong

      Now,I see. Sorry

      Reply
      • Jared York

        No problem! Hopefully the tutorial/source code helps you out. 🙂

        Reply
  3. Feddrik

    Hello Jared, would I be allowed to use some of the assets used for my own game?

    Reply
    • Jared York

      Absolutely! It would be cool to see the game you made with them when you’re done. (This isn’t required, but I enjoy seeing people’s projects.) 🙂

      Reply
  4. Ervan

    Hello Jared, I want to take my minute to thank you for the tutorial you have provided.
    It was incredible! I could not put it into better words!

    I use it to teach my students, and I’ve planned to improve the game, I will tell you more about it later, hopefully, if I’m still motivated to keep it on xD.

    Lastly, keep up the good work! Thank you once more!

    Reply
    • jared

      Hi Ervan,

      I’m glad to hear that you found my tutorial useful! Never have I thought that I’d start seeing classrooms utilize my tutorials. Originally I began writing tutorials just for hobbyists who wanted to get started with game development. I hope the tutorial has been useful for your students. Keep me posted about the updates you’re adding, I always enjoying hearing how people expand out from my tutorial. I should mention that you can find more of my tutorials at https://www.yorkcs.com/tutorials/, if you’re interested.

      Thanks for leaving a comment!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news regarding tutorials and courses we publish!

Please check your inbox to confirm your subscription.

Share This