JavaScript game development with Phaser3 – phaser-dev-starter

Phaser is a popular open source JavaScript HTML5 game toolkit. While the source code of the engine is written using TypeScript, it’s built and available through NPM as “regular” JavaScript.

But maybe we’re getting ahead of ourselves here. You might be quite new to JavaScript and/or game development.

If that’s the case, then let’s take some time to setup a starter project.

Note: If you want to download the code so that you can follow along, here’s the project on github.

The “point” of a starter project – Hello World 2.0

While most (if not all) authors begin with the traditional Hello World tutorial, I prefer to introduce concepts using a “starter” project. In essence it really IS a Hello World project, but at the same time it is a project that you use as a template for future work. In other words, a really primitive form of “project re-use”.

  1. Download Node.js – Make sure you grab the correct installer for your platform. It’s a critical piece that’s required for everything you want to do using JavaScript.
  2. Once Node has finished installing, let’s open a console window and create a folder called phaser-dev-starter.
  3. Change directory into that new folder.
  4. Now let’s use NPM (Node Package Manager), which is included within the Node.js installation. NPM is a vital tool for working with the many different JavaScript libraries and frameworks available.

    We’re just initializing a basic JavaScript project using “defaults” that we don’t need to care about right now.
  5. This next command is used to tell NPM to install some JavaScript packages we need.
  6. Now, we can install Phaser
  7. That’s it for most of the setup. We’ll split up the rest of the starter tutorial into different sections.

Webpack

Without trying to get into details at this point, a major tool that we’re using for our JavaScript game development is Webpack. Webpack has a lot of capabilities, but for our purposes; it’s a code compiler, web server and packager all rolled up into one.

In other words, Webpack is all you need to get started. You don’t need to fiddle with the installation or configuration of any web server. Period.

  1. We left off in the command window / shell in our phaser-dev-starter folder.
  2. Create a new file – webpack.config.js.

    Webpack relies on this specific file for telling it how to handle your project.
  3. We’re not going to go through this file line-by-line (right now), but here it is:
  4. The only real important thing to note is the devServer section of the configuration. We are specifying that our development
    server is listening on port 3000.
  5. Save and close the file.

Phaser basics

Time to go through a little bit of Phaser basics. After all, that’s really the whole point of this tutorial right? Phaser is quite a forgiving but structured type of engine. What I mean to say, is that Phaser gives you freedom to organize your project. The only requirement is that you make use of a few Phaser-specific conventions and functions.

Creating the Phaser object

  1. Still within your phaser-dev-starter folder…
  2. Create a new folder called “src”.
  3. Within “src”, create an “index.js” file.
  4. Now comes the fun. Open up the newly created “index.js” file.

So what’s going on here?

At the top of the file, we are importing the phaser library, as well as package.json (which is used and created by NPM). In the next few lines, we are creating two variables to store the width and height of our Phaser display area. You can call these variables anything you want (apart from any reserved JavaScript terms of course). Our intention here is to create a Phaser area of 800 x 600.

One convention of Phaser is the use of an Object of specific properties to use during Phaser startup. So our config object declaration is specifying the width and height of our display. The type property should almost always be Phaser.AUTO. This allows Phaser to attempt the creation of a WebGL display area first, with a Canvas fallback. Using the magic of Phaser, we don’t care which.

Finally, the scene property defines the function callback we want Phaser to use.

So let’s continue…

  1. Create Phaser using the config object.

Like I said, just use that config Object in the Phaser engine.

The Create “scene” / callback

Within the config Object, we used a function callback for our Scene.

  1. Continuing in the index.js file…
  2. Let’s go through the Create scene

We’re almost finished. This is the last major piece to go through.

Depending on what kind of game engines you are used to using, Phaser functions as a Manager type of engine. In other words, you are only responsible for the creation of any Phaser object you want to use. Once you add() it to Phaser, the engine takes care of handling, displaying and any object cleanup.

The create function callback is executed by the Phaser engine once it has finished all of its initialization and setup work. So once Phaser completes the creation of our 800×600 display area, the engine will run this callback.

We’re using the Phaser.Text Object to draw some text at (10, 10) in our display area, which will be in the top-left corner of the display. The font and fill properties are to specify the Font we want to use as well as our color.

Similarly, in the lower-right corner of our display area, we’re displaying the version number (taken from the package.json file in the project).

Running the starter

We’re going to tweak the package.json file in order to give us a one-line command to start our Webpack server up, allowing us to try out our “game”.

  1. Continuing within the phaser-dev-starter folder…
  2. Open the package.json file, and add an entry to the scripts object:

That’s it. We can now make use of an NPM convention.

This is all you need to type. The Webpack server will do the rest and startup its internal web server.

Just open your favorite web browser to http://localhost:3000 and you should see your Phaser work!

Voila!

That wraps up the phaser-dev-starter project. Take a look at the source code on Github. You should always feel free to experiment and morph it to become a starter project for YOU.

Leave a Reply

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