Setting up a Phaser3 dev environment for Windows

Phaser 3
1

I have worked with Phaser2 in the past and was able to create a couple of games. This was all pretty cool but also a long time ago, so I’ve been wanting to get into Phaser3 again.

So I’ve been trying to setup a working Phaser3 development environment for some time now, on and off in the last year but with little result. I realise that part of this is due to web development in general having a lot of moving parts. And I remember Phaser2 also having quite a steep learning curve to get started, but with Phaser3 it’s even more difficult imho. My experience with Phaser2 was that once everything is setup, the actual game programming part is relatively very easy so a lot of fun. So I really want to get Phaser3 working as well.

There are quite a lot of tutorials on how to get started with Phaser 3, but a lot of them are outdated or frankly sometimes low quality, or aimed at beginners but they start at where everything is already installed, refer to out-dated templates etc. Also, a lot of them end at the point where it’s just a trivial single page demo instead of a “real game” skeleton (=at least two scenes, start button, scene transition etc).

I managed to get to the point where I’ve got Node.JS, NPM and VSCode installed, install and build/run the Phaser 3 Webpack Project Template by partly following this video. But now I want to work this into a “real game”. So I took the Avoid The Germs game from the official demo games, swapped out the .js files and take the assets from here. I’ve updated the package to change the “Main” to .src/main.js but now I get an error, and I’m kind of lost.

ERROR in main
Module not found: Error: Can’t resolve ‘./src’ in ‘C:\programming\phaser3\my_new_game’

It’s kind of frustrating to get lost at (what seems to be) so near the finish line of getting everything set up. So my question is, how can I put one of the demo games into the template? I’ve looked in the webpack js files and the package.json, but is there anything else I need to update?

Or, is it possible to have official Phaser 3 template start with a “real game” and not a single page? So I mean either one of these games “Avoid the Germs” or “Card Memory”, or else some small demo with at least two scenes.

2

For the error you are seeing, you will need to update the webpack configuration to look for the new main.js file. In the webpack config, there is an optional field called entry that will look for the index.js file in the src folder, if that option is not provided in the config. If you modify your main.js file to be index.js, or update the webpack/base.js file to have code like:

module.exports = {
  entry: "./src/main.js",

then, when you start the webpack dev server, your new file should be found.

More information on the entry point configuration can be found here: Concepts | webpack

If you are interested, I made a quick demo repo of the game using the webpack project template you linked here: GitHub - devshareacademy/phaser-3-template-webpack-germs-game-example: A Phaser 3 Project Template With the Germs Game Demo. I had to modify a few of the other files to get everything to work, but you should be able to clone/download the repo for reference.

1 Like
3

Thanks for the template, this helped a lot I got it to build and run now. :+1:

I also got my own copy to work, because I wanted to understand what was going on. So in the Boot.js and Preloader.js I also needed to adjust the “preload()” functions and set the this.load.setPath('assets/') instead of this.load.setPath('assets/games/germs/') like it is in the original source files. If you don’t change this path correctly, there will not be a clear error message pointing to the problem, but instead you get Cannot read properties of undefined (reading 'data').

Besides that, I had incorrectly moved the assets to the ./src/assets/ folder because I was confused about the purpose of that folder. So yeah in hind-sight everything will be obvious, but that needs to be in the ./assets/ folder.

And I probably would never have guessed the optional field called entry which implicitly defaults to index.js. The error message from that had me searching the source files for index.js but was nowhere to be found. This makes me wonder why both “avoid the germs” and “emoji match” examples have a src/main.js as the main script instead of what I guess is the defacto standard index.js.

4

Btw I also always want the game to to scale to entire page, so just in case someone finds this thread and wonders how… In the file src/main.js I added the scalemanager to the config, like this:

const config = {
    ..
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    }

And then to prevent the scrollbar from appearing on the right of the page, I added a <style> part to the header in the index.html file, so:

  <head>
    <meta charset="utf-8">
    <title>Phaser 3 Project Template</title>
    <style>
    * {
        background-color: #040;
        overflow: hidden;
      }
    </style>
5

As a suggestion I just stopped to use webpack and moved to vite without phaser templates, only vanilla.
You can use vite fine, considering the most part of existent phaser templates are just too simple, I’ve built entire games without getting problems with vite or anything.