This is a Phaser 3 project template that uses importmap.
An import map is a JSON object that allows developers to control how the browser resolves module specifiers when importing JavaScript modules. It provides a mapping between the text used as the module specifier in an import statement or import() operator, and the corresponding value that will replace the text when resolving the specifier. The JSON object must conform to the Import map JSON representation format.
An import map is used to resolve module specifiers in static and dynamic imports, and therefore must be declared and processed before any <script>
elements that import
modules using specifiers declared in the map.
importmap a baseline 2023 feature. Please see MDN for details about browser compatibility.
This template has been updated for:
Node.js is required to install dependencies and run scripts via npm
(if you want to use the development server).
Command | Description |
---|---|
npm install |
Install project dependencies |
npm run dev |
Launch a development web server |
After cloning the repo, you will need a server to serve the resources of your game. This template provides your own server with hot-reloading. To start it, simply run npm run dev
.
The local development server runs on http://localhost:3000
by default.
- You MUST use the
phaser.esm
build of Phaser. This is the only build that exports ES Modules that importmap supports. - Phaser v3.60.0 was the first version to export an ESM bundle. You cannot use earlier versions with this template.
- The 'name' you give in the importmap (in your
index.html
) should match exactly that used in theimport
declarations within your game code. - You can store the Phaser ESM build locally if you'd rather not use the CDN. Simply put the
phaser.esm.js
in your local folder structure and reference that inside your HTML like this:
{
"imports": {
"phaser": "./my-local-folder/phaser.esm.js"
}
}
We have provided a default project structure to get you started. This is as follows:
assets/
- Contains the static assets used by the game.src/
- Contains the game source code.src/scenes/
- The Phaser Scenes are in this folder.src/main.js
- The main entry point. This contains the game configuration and starts the game.index.html
- A basic HTML page to contain the game.style.css
- Some simple CSS rules to help with page layout.
In order to deploy your game, you will need to upload all the content of the folder to a public-facing web server.
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
Tell us about your game in [email protected]!
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.