Getting Started with Phaser 3 and Node.js

#node #javascript #phaser3 #tutorial

Phaser 3 is a popular Javascript library for creating fun and interactive web-based games. The possibilities with Phaser are almost limitless and if you can think of it, odds are Phaser will be able to help you make that game-idea or level design a reality. Today we're going to look at the basic set up for creating a Phaser 3 project and what it takes to get your first web-based game up and running on your local machine.

Before you even start working with Phaser, you'll need to create a backend server that will be responsible for serving up the static files generated from your Phaser game. In order to do this, we are to implement a Node.js server using Express. Let's take a look at the process now. In your editor, create a file called Server.js



const express = require('express');
const app = express();

app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(8080, () => {
  console.log('Server listening on http://localhost:8080');
});

The code above outlines the basic Node.js server, first we require Express, and from there we set up the server to serve our static files from the public folder. This will allow us to have access to all the static elements for our game. After that, we set up the server to listen on Port 8080 of our local machine, in order to test our server, let's create our index.html file within the public directory mentioned earlier. For now we'll just use a boiler plate HTML file, but we'll change this later down the road. Here's what the index.html file should look like.



<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Phaser - Demo</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Once you've created that file, save it and go into your terminal. From the root of your project directory, run 'node server.js'. You should see 'Server listening on http://localhost:8080' in your terminal. Now within your browser, navigate to localhost:8080. Once you're there you should see the words 'Hello World' on the top of the page, if so you've successfully created your server, now let's move onto getting Phaser 3 set up and running on the server.

The first step will be to set up our script tags within the index.html file. These script tags will allow us to access the Phaser 3 library and create our game instance. Here's what the index.html should look like:



<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Phaser - Asteroids</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.24.0/dist/phaser.min.js"></script>
    <script type= "module" src="game.js"></script>
  </head>
  <body>
  </body>
</html>

The latest release of Phaser 3 at the time of this article is version 3.24.0, so that's the one that we'll be using, also note how we're using the minified version, which will help to not slow down our webpage. Now that we have our script tags within the index.html file, we can finally get our hands dirty using Phaser. In order to get our game to actually show up in the browser, we have to set up the configuration for our game. The configuration for the game will go into a file called game.js, so let's go ahead a create that file and look at the contents of it.



import Phaser from 'phaser';

const config = {
  width: 800,
  height: 600,
  type: Phaser.AUTO,
  audio: {
    disableWebAudio: true
  },
  physics: {
    default: 'arcade',
    arcade: {
      fps: 60,
      gravity: {y : 0},
    }
  },
};

const game = new Phaser.Game(config);

Alright, now we've got our game.js file all set up, let's breakdown what's happening in the game.js file. Here we're creating the configuration for our game. We supply the height and width of the game view in the browser and set the type to 'Phaser.AUTO'. Phaser.AUTO allow the browser to either run the game with WebGL or CANVAS, if the browser supports WebGL it will use that, but if not CANVAS will be the default. Next, we enable audio for the game within the audio property. Then we setup the physics for the game, we'll be using the 'arcade' physics for this game and we set the fps or Frames per Second to 60 and the gravity on the y axis to 0 (this is standard for normal gravity conditions in Phaser 3). Finally we make the game variable and assign it the value of a new Phaser.Game(config), which creates the new instance of our Phaser game using the configurations we outlined above. Now that we understand a little better what's going on, it's time to test it out in the browser. If we load up the browser we should see the a black box on the page, and if we check the console, we'll see that Phaser 3 has successfully been started. Here's what your browser should look like:

If you've made it this far in the tutorial, fantastic! In the next post we'll be taking a look at how you can add images, sounds, and text to your Phaser 3 game instance, so if you're interested in learning more about Phaser 3 stick around!