Emanuele Feronato

Talking about Game development, HTML5, Javascript and Phaser.

To start building HTML5 games serioulsy, you have to automate and streamline the process of importing libraries and exporting distributable files.

Although no one prohibits you from manually including frameworks and exporting distributable files, the first you start to automate this project, the better.

All posts in this tutorial series:

Step 1: how to install Node.js and npm, and what to do with them

Step 2: how to set up a web server with Node.js, and why you should do it.

Step 3: using Visual Studio Code to develop HTML5 games with Phaser and webpack.

Step 4: how to publish and distribute your HTML5 games with Phaser and webpack.

Step 5: moving from JavaScript to TypeScript.

Moreover, all the tools you need are free, so you have no excuses.

Let’s start throwing your code editor in the dustbin and installing Visual Studio Code to create our first Phaser project.

What is Visual Studio Code?

Visual Studio Code (VS Code) is a free, open-source code editor developed by Microsoft.

It has gained widespread popularity among developers for its lightweight design, extensibility, and powerful features.

Here are the most important key aspects of Visual Studio Code when used for HTML5 game development:

1 – It’s cross-platform: Visual Studio Code is available for Windows, macOS, and Linux, making it a cross-platform code editor.

2 – It has a great language support: it supports a wide range of programming languages and file types. The editor comes with built-in support for languages like JavaScript, TypeScript, HTML, CSS, which are the languages we will be using, and more, with code completion.

3 – It features an integrated terminal, so you won’t have to use any external command-line shell.

Download Visual Studio Code from https://code.visualstudio.com/.

Install Visual Studio Code, then create a new empty folder, in my example I called it phaserproject.

Launch Visual Studio Code, then select File -> Open Folder:

Now select the folder you just created.

If you are asked to trust the authors (you!!), do it.

Now, in Terminal -> New Terminal you can find a command-line shell. We are going to use it quite a lot.

The terminal will open directly in your project directory.

Let’s set up a new or existing npm package.

If you don’t know what is npm, refer to the post Node.js and NPM: don’t be afraid of them!

In the terminal enter:

npm init -y

A new file, package.json, will be created with some default values.

You can enter these values by calling the above command without the final -y, with

npm init

But I suggest to always start with the default options which can be changed later.

This is the content of package.json:

{
  "name": "phaserproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now it’s time to install Phaser. Which version? The latest.

How to know the latest version to install? We don’t mind, thanks to NPM we can always install the latest Phaser version, with:

npm install –save phaser

This way:

Now you should see some new lines in package.json:

{
  "name": "phaserproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "phaser": "^3.70.0"
  }
}

Lines 12-14 tell us there is Phaser 3.70.0, the most recent at the time of writing, as dependency.

Now it’s time to meet webpack.

What is webpack

Webpack is a popular open-source JavaScript module bundler.

It takes modules with dependencies and generates static assets representing those modules, managing and optimizing the assets, in our case JavaScript, CSS, and images for web applications.

Webpack will build the distributable version of our work.

Let’s install it with:

npm install –save-dev webpack

This way:

You will notice package.json changed again:

{
  "name": "phaserproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "phaser": "^3.70.0"
  },
  "devDependencies": {
    "webpack": "^5.89.0"
  }
}

Lines 15-17 say there is webpack 5.89.0 as dev dependency.

You probably noticed we installed Phaser using –save, and webpack using –save-dev.

Phaser is now listed in dependencies, while webpack is listed in devDependencies.

What’s the difference? Under dependencies we find the libraries which needs to be included in the final distributable bundle. In this case, a Phaser game obviously requires Phaser.

Under devDependencies we find the libraries we use during development, but which we won’t need anymore once we publish the final bundle.

This means we don’t need to create a distributable package which includes webpack.

Now let’s install some useful webpack plugins.

webpack-cli provides a flexible set of commands for developers to increase speed when setting up a custom webpack project, and can be installed with:

npm install –save-dev webpack-cli

This way:

And look at line 17 of package.json:

{
  "name": "phaserproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "phaser": "^3.70.0"
  },
  "devDependencies": {
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}

The second plugin we need to install is copy-webpack-plugin, to copy individual files or entire directories, which already exist, to the build directory.

It can be installed with:

npm install –save-dev copy-webpack-plugin

This way:

And here it is at line 16 of package.json:

{
  "name": "phaserproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "phaser": "^3.70.0"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^11.0.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}

Now we have to install clean-webpack-plugin, a webpack plugin to remove/clean your build folders.

We can do it with the command:

npm install –save-dev clean-webpack-plugin

This way:

package.json content will change once more, at line 16:

{
  "name": "phaserproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "phaser": "^3.70.0"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}

Finally we’ll install webpack-dev-server plugin, which uses webpack with a development server that provides live reloading.

Live reloading is a development feature that automatically refreshes a web page whenever changes are made to the source code or other related files.

This capability is especially useful during the development phase as it provides a faster and more efficient way for developers to see the effects of their code changes in real-time without manual page refreshing.

We can do it with the command:

npm install –save-dev webpack-dev-server

This way:

And here it is another change to package.json at line 20:

{
  "name": "phaserproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "phaser": "^3.70.0"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

What to do with webpack now? We need to create aconfiguration file for development.

In Explorer panel, right click and select New File.

Call the new file webpack.development.js.

This is the content of webpack.development.js:

const path = require('path');
 
module.exports = {
    entry : {
 
        // this is our entry point, the main JavaScript file
        app : './src/main.js',
    },
    output : {
 
        // this is our output file, the one which bundles all libraries
        filename : 'main.js',
 
        // and this is the path of the output bundle, "dist" folder
        path : path.resolve(__dirname, 'dist'),
    },
 
    // we are in development mode
    mode : 'development',
 
    // we need a source map
    devtool : 'inline-source-map',
 
    // development server root is "src" folder
    devServer : {
        static : './src'
    }
};

It’s pretty straightforward and mainly describes folders and files to be used, the only curious thing here is the source map.

A source map is a file that maps the source code of an application back to its original, unminified, and untranspiled form. It is particularly useful in the context of web development where code written in high-level languages (such as TypeScript or ES6 JavaScript) is often transpiled and minified before being deployed to production.

The use of source maps significantly improves the debugging experience in production, as developers can work with the more readable and understandable original source code rather than the minified and transpiled version.

Many build tools and bundlers, such as webpack, automatically generate source maps as part of their build process.

Developers can enable or disable source map generation based on their needs and preferences during development and production builds.

At this time, we are ready to write our first Phaser project.

This simple official example is a good example to build with webpack, as it also features an image.

Right click in the Explorer panel and select New Folder.

Call the new folder src as defined at line 26 of webpack.development.js.

Then right click on src folder and select New File.

Call the new file index.html.

This is the content of index.html:

Look at line 4 how we include main.js which is the entry point as specified at line 7 of webpack.development.js, and at line 7 with the thegame element where we want our Phaser game to run in.

<!DOCTYPE html>
<html>
    <head>
        <script src="main.js"></script>
    </head>
<body>
    <div id="thegame"></div>
</body>
</html>

Now, create in the same folder a file called main.js and write this content, which is roughly the same as the one you can see in the official example:

import 'phaser';
 
class PlayGame extends Phaser.Scene {
    constructor() {
        super("PlayGame");
    }
    preload() {
        this.load.image('logo', 'assets/phaser3-logo.png');    
    }
    create() {
        this.image = this.add.image(400, 300, 'logo');
    }
    update() {
        this.image.rotation += 0.01;   
    }
}
 
let config = {
    width: 800,
    height: 600,
    parent: 'thegame',
    scene: PlayGame
};
 
new Phaser.Game(config);

You will also need the Phaser logo, here it is:

Create a new folder in src folder and call it assets, then copy the Phaser logo inside assets folder.

This is how your project structure should look like, in Explorer panel:

Now we need to edit lines 6-8 of package.json this way:

{
  "name": "phaserproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "development": "webpack serve --open --config webpack.development.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "phaser": "^3.70.0"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

Basically we created a new script which starts a server using the configuration specified in webpack.development.js.

Now let’s run the project with:

npm run development

This way:

And finally a bowser page should open with your first Phaser script running, thanks to webpack.

From now on, everything will be simpler, and next time we’ll see how to generate distributable files.