Phaser Parcel TypeScript Template

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.

Versions

This template has been updated for:

• Phaser 3.87.0
• Parcel 2.12.0
• TypeScript 5.4.5

Requirements

Node.js is required to install dependencies and run scripts via

.

Available Commands

Writing Code

After cloning the repo, run

from your project directory. Then, you can start the local development server by running

npm run dev

.

The local development server runs on

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

folder. Parcel will automatically recompile your code and then reload the browser.

Template Project Structure

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.

Handling Assets

Parcel supports loading assets via JavaScript module

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:

To load static files such as audio files, videos, etc place them into the

folder. Then you can use this path in the Loader calls within Phaser:

When you issue the

command, all static assets are automatically copied to the

dist/assets

folder. This is done via the

parcel-reporter-static-files-copy

plugin.

Deploying to Production

After you run the

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

folder to a public facing web server.

Customizing the Template

Parcel

If you want to customize your build, such as adding plugins for loading CSS or fonts, modify the

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.

Cache Issues

Problem Description

When a file is manually moved out of the

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.

Possible Solution

Try deleting the

folder and restarting the browser with the cache cleared.

About log.js

If you inspect our node scripts you will see there is a file called

. This file makes a single silent API call to a domain called

gryzor.co

. This domain is owned by Phaser Studio Inc. The domain name is a homage to one of our favorite retro games.

We send the following 3 pieces of data to this API: The name of the template being used (vue, react, etc). If the build was 'dev' or 'prod' and finally the version of Phaser being used.

At no point is any personal data collected or sent. We don't know about your project files, device, browser or anything else. Feel free to inspect the

file to confirm this.

Why do we do this? Because being open source means we have no visible metrics about which of our templates are being used. We work hard to maintain a large and diverse set of templates for Phaser developers and this is our small anonymous way to determine if that work is actually paying off, or not. In short, it helps us ensure we're building the tools for you.

However, if you don't want to send any data, you can use these commands instead:

Dev:

Build:

Or, to disable the log entirely, simply delete the file

and remove the call to it in the

scripts

section of

package.json

:

Before:

After:

Either of these will stop

from running. If you do decide to do this, please could you at least join our Discord and tell us which template you're using! Or send us a quick email. Either will be super-helpful, thank you.

Join the Phaser Community!

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.