Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/photonstorm/phaser3-project-template
A Phaser 3 project template that uses Webpack 5 for bundling
https://github.com/photonstorm/phaser3-project-template
phaser phaser3 phaserjs webpack
Last synced: 3 months ago
JSON representation
A Phaser 3 project template that uses Webpack 5 for bundling
- Host: GitHub
- URL: https://github.com/photonstorm/phaser3-project-template
- Owner: phaserjs
- License: mit
- Created: 2017-07-31T15:39:58.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-03-29T11:13:30.000Z (8 months ago)
- Last Synced: 2024-05-01T18:29:54.405Z (6 months ago)
- Topics: phaser, phaser3, phaserjs, webpack
- Language: JavaScript
- Homepage:
- Size: 2.36 MB
- Stars: 1,136
- Watchers: 23
- Forks: 759
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-canvas - phaser3-project-template - A Phaser 3 Project Template.   (Libraries / Game engine)
README
# Phaser Webpack Template
This is a Phaser 3 project template that uses webpack for bundling. It supports hot-reloading for quick development workflow and includes scripts to generate production-ready builds.
**[This Template is also available as a TypeScript version.](https://github.com/phaserjs/template-webpack-ts)**
### Versions
This template has been updated for:
- [Phaser 3.80.1](https://github.com/phaserjs/phaser)
- [Webpack 5.91.0](https://github.com/webpack/webpack)
## Requirements
[Node.js](https://nodejs.org) is required to install dependencies and run scripts via `npm`.
## Available Commands
| 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 |
## Writing Code
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:8080` by default. Please see the webpack 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. Webpack 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.js` - The main entry point. This contains the game configuration and starts the game.
- `src/scenes/` - The Phaser Scenes are in this folder.
- `public/style.css` - Some simple CSS rules to help with page layout.
- `public/assets` - Contains the static assets used by the game.
## Handling Assets
Webpack 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:
```js
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:
```js
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.
## Deploying to Production
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.
## Customizing the Template
### Babel
You can write modern ES6+ JavaScript and Babel will transpile it to a version of JavaScript that you want your project to support. The targeted browsers are set in the `.babelrc` file and the default currently targets all browsers with total usage over "0.25%" but excludes IE11 and Opera Mini.
```
"browsers": [
">0.25%",
"not ie 11",
"not op_mini all"
]
```
### Webpack
If you want to customize your build, such as adding a new webpack loader or plugin (i.e. for loading CSS or fonts), you can modify the `webpack/config.js` file for cross-project changes, or you can modify and/or create new configuration files and target them in specific npm tasks inside of `package.json`. Please see the [Webpack documentation](https://webpack.js.org/) for more information.
## 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](https://phaser.io) and follow on [Phaser Twitter](https://twitter.com/phaser_)
**Play:** Some of the amazing games [#madewithphaser](https://twitter.com/search?q=%23madewithphaser&src=typed_query&f=live)
**Learn:** [API Docs](https://newdocs.phaser.io), [Support Forum](https://phaser.discourse.group/) and [StackOverflow](https://stackoverflow.com/questions/tagged/phaser-framework)
**Discord:** Join us on [Discord](https://discord.gg/phaser)
**Code:** 2000+ [Examples](https://labs.phaser.io)
**Read:** The [Phaser World](https://phaser.io/community/newsletter) Newsletter
Created by [Phaser Studio](mailto:[email protected]). Powered by coffee, anime, pixels and love.
The Phaser logo and characters are © 2011 - 2024 Phaser Studio Inc.
All rights reserved.