Build a Space Shooter with Phaser 3 - 2

Build a Space Shooter with Phaser 3 – 2

February 6, 2019 9:54 am Published by 2 Comments

In the last part of this course, we finished creating the files and folders we need for our game. The next thing we need to do is start building out our index.html. In order to start coding our HTML and JavaScript files, you will need a text editor. If you have not programmed yet, any text editor will work such as Notepad, Visual Studio Code, Atom, etc. I personally use Visual Studio Code for web development, it’s fast and simply works.

To start, open your index.html file and type the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta lang="en-us">
    <title>Space Shooter</title>
    <script src="js/phaser.js"></script> <!-- the file name should be the same as the Phaser script you added. -->
  </head>

  <body>
    <script src="js/SceneMainMenu.js"></script>
    <script src="js/SceneMain.js"></script>
    <script src="js/SceneGameOver.js"></script>
    <script src="js/game.js"></script>
  </body>
</html>

In this last snippet, we declare the file to be an HTML file (hence the .html file extension), and declare the scripts we will use. Note the order we declare the scripts that contain “Scene” in them in comparison to the game.js script. The order is very important because JavaScript is interpreted from top to bottom. We will be referencing code from our three scene scripts in game.js.

Next, we will need to initialize our Phaser game inside game.js. Take a moment and open up game.js if you haven’t already and create a JavaScript object like the following:

var config = {

};

This JavaScript object will contain the configuration properties that we will feed our upcoming Phaser game instance. Inside our config object add:

  type: Phaser.WEBGL,
  width: 480,
  height: 640,
  backgroundColor: "black",
  physics: {
    default: "arcade",
    arcade: {
      gravity: { x: 0, y: 0 }
    }
  },
  scene: [],
  pixelArt: true,
  roundPixels: true

So far inside our configuration object we are telling Phaser that we want to ensure our game is being rendered via WebGL instead of using ordinary Canvas rendering tech. The next part of the config includes width and height which define the size of our game on the page. The property backgroundColor defines the background color that will be shown behind our game. The next property, physics defines the default physics engine that we will be using, which is arcade. Arcade physics work well when we want basic collision detection without many bells and whistles. Inside the physics property, we also set default gravity of our physics world. The next property, scene is set to an array which we will add to in a bit. Finally we want Phaser to ensure pixels are crisp just like the great nostalgic video games we’ve come to know and love.

The scene array that we have defined inside our config object is needed in order to declare the order of our scenes in our game. A scene is effectively like any sort of “screen” you see in a video game. For example, the main menu, the play state, and the game over screen are what I call separate “screens”. Well, a scene is pretty much the same as a screen. We will define our scenes as a JavaScript class (a class is still an object, the syntax is just different and helps us organize our code better.) Now we will define our scene classes inside the array of the scene property we just wrote:

  },
  scene: [
    SceneMainMenu,
    SceneMain,
    SceneGameOver
  ],
  pixelArt: true,

We are now finished with our configuration object! We will not need to touch it for the duration of this course. The final line of code we need (and arguably most important) after the last curly brace of our config object is:

var game = new Phaser.Game(config);

And there we have it! Our game.js file is complete. Now we need to define a class for each of our scene scripts. Lets open SceneMainMenu.js first and add the following:

class SceneMainMenu extends Phaser.Scene {
  constructor() {
    super({ key: "SceneMainMenu" });
  }

  create() {
    this.scene.start("SceneMain");
  }
}

Here we are declaring a class with class SceneMainMenu. On the same line we added extends Phaser.Scene {. Extending Phaser.Scene means to build on top of Phaser’s Scene class (Phaser.Scene means a class named Scene which is a property of the object Phaser.) Inside the class we have just declared, there are two functions: constructor and create. The constructor function is called immediately when instantiating (creating an instance) the class. Within the constructor we have:

super({ key: "SceneMainMenu" });

which is effectively the same (technically speaking) as:

var someScene = new Phaser.Scene({ key: "SceneMainMenu" });

Instead of creating an instance of Phaser.Scene and assigning it to a variable, we are instead defining our scene as a class that we can assign a custom preload, create, and eventually an update function. This is what I mean when I say build on top of the existing Phaser.Scene class. The create function within our SceneMainMenu class will be called as soon as the scene is started. Inside our create function we included:

this.scene.start("SceneMain");

The plan is to redirect the player to the main play scene, where all the action is. I think it would be better to start on the game play and work backwards to the main menu. Who wants to work on those boring buttons and interface elements anyway? Especially when we can instead code something much more exciting… for now… right? 🙂

We can finish up by the code we just typed for SceneMainMenu into SceneMain.js and SceneGameOver.js. Below is what you should end up with for all three scripts:

class SceneMainMenu extends Phaser.Scene {
  constructor() {
    super({ key: "SceneMainMenu" });
  }

  create() {
    this.scene.start("SceneMain");
  }
}
class SceneMain extends Phaser.Scene {
  constructor() {
    super({ key: "SceneMain" });
  }

  create() {
    
  }
}
class SceneGameOver extends Phaser.Scene {
  constructor() {
    super({ key: "SceneGameOver" });
  }

  create() {
    
  }
}

If you have questions or suggestions, feel free to leave a comment below and I’ll be happy to help you out! If you would like to receive updates on new courses I release via email, feel free to fill out the form.

Tags: , ,

Categorised in:

This post was written by Jared York

2 Comments

  • Pieter-Jan says:

    Howly moly. One of the best tutorials I found by now! Amazing! Excited to see more of your content.

    • Jared York says:

      Thanks! I’m glad you found that tutorial useful! We have a few more tutorials and courses available here. Also, you can fill out the form to receive updates on my future tutorials and courses. 🙂

Leave a Reply

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