This is a Phaser 3 project template that uses Vite for bundling. It supports hot-reloading for quick development workflow, includes TypeScript support and scripts to generate production-ready builds.
Node.js is required to install dependencies and run scripts.
We have provided a default project structure to get you started. This is as follows:
index.html- A basic HTML page to contain the game.src- Contains the game source code.src/main.ts- The main entry point. This contains the game configuration and starts the game.src/vite-env.d.ts- Global TypeScript declarations, provide types information.src/scenes/- The Phaser Scenes are in this folder.public/assets- Contains the static assets used by the game.
Vite supports loading assets via TypeScript module import statements.
This template provides support for both embedding assets and also loading them from a static folder. To embed an asset, you can import it at the top of the TypeScript file you are using it in:
import logoImg from './assets/logo.png'To load static files such as audio files, videos, etc place them into the public/assets folder. Then you can use this path in the Loader calls within Phaser:
preload ()
{
// This is an example of an imported bundled image.
// Remember to import it at the top of this file
this.load.image('logo', logoImg);
// This is an example of loading a static image
// from the public/assets folder:
this.load.image('background', 'assets/bg.png');
}When you build the project, all static assets are automatically copied to the dist/assets folder.
After you build the project, your code will be built into a single bundle and saved to the dist folder, along with any other assets your project imported, or stored in the public assets folder.
In order to deploy your game, you will need to upload all of the contents of the dist folder to a public facing web server.