Phaser 3 Initialization Tutorial

May 5, 2020

Below is a quick walkthrough on how to initialize a web browser game using Phaser 3. We will be producing the following “Hello World” scene.

Step 1: Download Node.js

We need Node.js to be able to use http-server which serves our resources to the browser.

Download Node.js from the official website and follow the instructions there. Check that you have Node.js by running the following on your command line.

$ node --version

Node package manager (npm) should come installed with Node.js.

Step 2: Download http-server

After downloading Node.js and npm, download http-server using npm.

$ npm install http-server

With this, you are able to launch your own web server and serve up the game. Check the you have http-server by running the following command.

$ http-server .

Your terminal should display the following message.

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://your.ip.address:8080

If you see this, that means that your folder is being correctly served. You can check this by visiting localhost:8080 through your fave browser. You can abort your server by hitting Ctrl+C in terminal.

Step 3: Initial HTML file

Create a folder. Inside it, create a file called index.html.

This is the main page that will be served by your server.

index.html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.18/dist/phaser-arcade-physics.min.js"></script>
  </head>
  <body>
      <script type="module" src="main.js"></script>
  </body>
</html>

Here, we import phaser.js script from online to enable Phaser.js functionalities, and import a file called main.js (which we’ll edit in a while).

Step 4: Initialize Phaser in javascript

Using main.js, you can initialize a Phaser game with your very own scenes and configurations.

My scene names are StartGame and Game, but you can replace yours with a different set of names. Don’t forget to replace startGame.js and game.js too with the different files you’d use for your game.

main.js

/* Replace with your own scene names and file names */
import StartGame from "./startGame.js"
import Game from "./game.js"

var config = {
  type: Phaser.CANVAS,
  width: 800, 
  height: 660,
  physics: {
    default: "arcade"
  },
  scale: {
    mode: Phaser.Scale.FIT,
  },
  scene: [StartGame, Game] /* Replace with scene objects that you imported */
}

new Phaser.Game(config)

Step 5: Initialize scene

In StartGame.js and your other scene files, make each scene extend Phaser.Scene, and inherit two functions, preload() and create().

startGame.js

/* Replace StartGame with scene name */
export default class StartGame extends Phaser.Scene { 
  constructor() {
    super("startGame") /* Replace with scene key */
  }
  preload() {
    // to be filled
  }
  create() {
    // to be filled
  }
}

Make sure to replace StartGame with your scene name, and replace “startGame” with any scene key to identify the scene. Do the same for Game.js or whatever scene your game has.

Step 6: Add components

Now, you can add components, such as rectangles, images, interaction, sounds, etc to your game.

Example
Here, we add the text “Hello World!” in the center of our game, and set the anchor point of the text to the middle.

startGame.js

create() {
    const textSprite = this.add.text(400, 300, 'Hello World in Phaser 3!', { fontFamily:'Arial', fontSize: "30px", fill: "#00ff00" })
    textSprite.setOrigin(0.5, 0)
}

Here is a cheat sheet for the various components you can add to make your game.

Step 7: Launch Game

Now, open your terminal

Activate your game to see if it works.

$ http-server .

What you should see
When you open up localhost:8080, or whatever port in your browser, here is what you should see.

Hooray!

We’ve just intialized a generic Phaser Scene. We can further build on this by adding components and logic.