Initialize the framework

The game's HTML

The game will be rendered entirely on the <canvas> element generated by the framework. Using your favorite text editor, create a new HTML document, save it as index.html in a sensible location, and add the following code to it:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Breakout game</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
    </style>
    <script src="js/phaser.min.js"></script>
    <script src="js/script.js" defer></script>
  </head>
  <body></body>
</html>

Next, create a new js directory in the same location as your index.html file, and create a new file called script.js inside it. This is where we will write the JavaScript code that controls the game. Initially it should contain the following:

class ExampleScene extends Phaser.Scene {
  preload() {}
  create() {}
  update() {}
}

const config = {
  type: Phaser.CANVAS,
  width: 480,
  height: 320,
  scene: ExampleScene,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  backgroundColor: "#eeeeee",
};

const game = new Phaser.Game(config);

Downloading the Phaser code

Next, we need to go through the process of downloading the Phaser source code and applying it to our HTML document. This tutorial uses Phaser v3 (v3.90.0 as of the time of writing, though newer minor versions should work the same).

1. Go to the Phaser download page.
2. Choose an option that suits you best—we recommend the phaser.min.js option as it keeps the source code smaller, and you are unlikely to go through the source code anyway.
3. Save the Phaser code in the js directory. If you use another file name, make sure to update the src value of the first <script> element in the HTML accordingly.

Walking through what we have so far

In our document head, we have a charset, a <title>, some basic CSS to reset the default margin and padding, and two <script> element elements. One applies the Phaser source code to the page; the other references the JavaScript code we will write to render the game and control it.

The <canvas> element is generated automatically by the framework. We are initializing it by creating a new Phaser.Game object and assigning it to the game variable. The parameters are:

• The rendering method. The available options are AUTO, CANVAS, WEBGL, HEADLESS. We can set either CANVAS or WEBGL explicitly or use AUTO to let Phaser decide which one to use. It usually uses WebGL if available in the browser, falling back to Canvas 2D if not. The last option, HEADLESS, is used for server-side rendering or testing, which is not relevant for this tutorial.
• The width and height to set the <canvas> to.
• The scene to add to the game. In this case, we are creating a new class called ExampleScene that extends Phaser.Scene. This class implements the methods that Phaser calls at different stages of the game lifecycle. We'll fill in these methods among them later:
  • preload takes care of preloading the assets
  • create is executed once when everything is loaded and ready
  • update is executed on every frame.
• How the game canvas will be scaled. Here, mode: Phaser.Scale.FIT scales the canvas to fit the available space while keeping the aspect ratio untouched. Depending on the aspect ratio, it may not cover the entire space. The other property, autoCenter, is responsible for aligning the canvas element horizontally and vertically, so it always centers the canvas on the screen regardless of size.
• The background color, which is a light gray instead of the default black.

Running the application

To run the app, you cannot directly open the index.html file, because later we will be loading external assets, which will be blocked by the browser's same-origin policy.

To fix the problem, you need to run a local web server to serve the HTML files and the image files. As the official document of Phaser suggests, we have a lot of options to run a local web server. We also have our own tutorials for setting up a local server—use any option you prefer. For example, if you choose to use the Python HTTP server, then open a terminal, navigate to the directory where your index.html file is located, and run the following command:

python3 -m http.server

This will start a simple HTTP server on port 8000. Then, open your web browser and navigate to http://localhost:8000/index.html.

Compare your code

Here's what you should have so far, running live. To view its source code, click the "Play" button.

There's nothing to see here yet, other than the light gray canvas background.

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.90.0/phaser.js"></script>

* {
  padding: 0;
  margin: 0;
}

class ExampleScene extends Phaser.Scene {
  preload() {}
  create() {}
  update() {}
}

const config = {
  type: Phaser.CANVAS,
  width: 480,
  height: 320,
  scene: ExampleScene,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  backgroundColor: "#eeeeee",
};

const game = new Phaser.Game(config);

Next steps

Now we've set up the basic HTML and learned a bit about Phaser initialization, let's continue to the second lesson and work out how to render a ball and move it.

• Previous
• Next