Webpack + TypeScript project template for Phaser 3 & Phaser Editor 2D

A project template for Phaser 3, Webpack 5, TypeScript, and Phaser Editor 2D v3.

First steps

This project requires Node.js and NPM.js. It is recommended that you learn the basics of Webpack.js.

• Install dependencies:

  npm install
  

• Run the development server:

  npm start
  

  Open the browser at http://127.0.0.1:8080.

• Make a production build:

  npm build
  

  It is generated in the /dist folder.

Phaser Editor 2D considerations

Excluding files from the project

There are a lot of files present in the project that are not relevant to Phaser Editor 2D. For example, the whole node_modules folder should be excluded from the editor's project.

The /.skip file lists the folders and files to exclude from the editor's project.

Learn more about resource filtering in Phaser Editor 2D

Setting the root folder for the game's assets

The /static folder contains the assets (images, audio, atlases) used by the game. Webpack copies it to the distribution folder and makes it available as a root path. For example, http://127.0.0.1:8080/assets points to the /static/assets folder.

By default, Phaser Editor 2D uses the project's root as the start path for the assets. You can change it by creating an empty publicroot file. That is the case of the /static/publicroot file, which allows adding files to the Asset Pack file (/static/assets/asset-pack.json) using correct URLs.

Coding

The /src folder contains all the JavaScript code, including the scene and user component files, in addition to the Phaser Editor 2D compilers output.

We recommend using Visual Studio Code for editing the code files.

In many tutorials about Phaser Editor 2D, the JavaScript files are loaded using the Asset Pack editor. When using Webpack this is not needed. Just use the Asset Pack editor for loading the art assets.

Scene and User Components configuration

The Scenes and User Components are configured to compile to TypeScript ES modules. Also, the compilers auto-import the classes used in the generated code.

Author

Created and maintained by the Phaser Editor 2D team.