This is a Phaser 3 project template that uses Parcel for bundling. It supports hot-reloading for quick development workflow, includes TypeScript support and includes scripts to generate production-ready builds.
This Template is also available as a JavaScript version.
This template has been updated for:
Node.js is required to install dependencies and run scripts via npm.
| Command | Description |
|---|---|
npm install |
Install project dependencies |
npm run dev |
Launch a development web server |
npm run build |
Create a production build in the dist folder |
After cloning the repo, run npm install from your project directory. Then, you can start the local development server by running npm run dev.
The local development server runs on http://localhost:1234 by default. Please see the Parcel documentation if you wish to change this, or add SSL support.
Once the server is running you can edit any of the files in the src folder. Parcel will automatically recompile your code and then reload the browser.
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/global.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.
Parcel supports loading assets via JavaScript 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 JavaScript 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 issue the npm run build command, all static assets are automatically copied to the dist/assets folder. This is done via the parcel-reporter-static-files-copy plugin.
After you run the npm run build command, 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.
If you want to customize your build, such as adding plugins for loading CSS or fonts, modify the parcel/.parcel.* file for cross-project changes. Or, you can create new Parcel configuration files and target them from specific npm tasks defined in package.json. Please see the Parcel documentation for more information.
When a file is manually moved out of the public folder and then placed back into it, Parcel fails to properly reload the file due to cache management issues. This can result in recent changes not being immediately reflected in the browser.
Try deleting the .parcel-cache folder and restarting the browser with the cache cleared.
We love to see what developers like you create with Phaser! It really motivates us to keep improving. So please join our community and show-off your work 😄
Visit: The Phaser website and follow on Phaser Twitter
Play: Some of the amazing games #madewithphaser
Learn: API Docs, Support Forum and StackOverflow
Discord: Join us on Discord
Code: 2000+ Examples
Read: The Phaser World Newsletter
Created by Phaser Studio. Powered by coffee, anime, pixels and love.
The Phaser logo and characters are © 2011 - 2024 Phaser Studio Inc.
All rights reserved.