For people who want to spend time making games instead of configuring build tools.
You'll need Node.js, npm, and Parcel installed.
It is highly recommended to use Node Version Manager (nvm) to install Node.js and npm.
For Windows users there is Node Version Manager for Windows.
Install Node.js and npm
with nvm
:
nvm install node
nvm use node
Replace 'node' with 'latest' for nvm-windows
.
Then install Parcel:
npm install -g parcel-bundler
Clone this repository to your local machine:
git clone https://github.com/ourcade/phaser3-parcel-template.git
This will create a folder named phaser3-parcel-template
. You can specify a different folder name like this:
git clone https://github.com/ourcade/phaser3-parcel-template.git my-folder-name
Go into your new project folder and install dependencies:
cd phaser3-parcel-template # or 'my-folder-name'
npm install
Start development server:
npm run start
To create a production build:
npm run build
Production files will be placed in the dist
folder. Then upload those files to a web server. 🎉
.
├── dist
├── node_modules
├── public
├── src
│ ├── scenes
│ │ ├── HelloWorldScene.js
│ ├── index.html
│ ├── main.js
├── package.json
The contents of this template is the basic Phaser3 getting started example.
This template assumes you will want to organize your code into multiple files and use modern JavaScript (or TypeScript).
JavaScript files are intended for the src
folder. main.js
is the entry point referenced by index.html
.
Other than that there is no opinion on how you should structure your project. There is a scenes
folder in src
where the HelloWorldScene.js
lives but you can do whatever you want.
Any static assets like images or audio files should be placed in the public
folder. It'll then be served at http://localhost:8000/images/my-image.png
Example public
structure:
public
├── images
│ ├── my-image.png
├── music
│ ├── ...
├── sfx
│ ├── ...
They can then be loaded by Phaser with this.image.load('my-image', 'images/my-image.png')
.
If you want to use the modern ES6 class properties feature then you'll need to add a .babelrc
file at the project root with the @babel/plugin-proposal-class-properties
plugin.
{
"presets": [
"env"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
Parcel should automatically install the necessary dependencies.
If you run into an error about mismatched major versions then go into package.json
to see what the major versions for @babel/core
and @babel/plugin-proposal-class-properties
are.
Reinstall one or the other manually to make the versions match 😉
Check out the phaser3-typescript-parcel-template for a ready-to-use version of this template in TypeScript!
It just works. (Thanks to Parcel)
You can rename all the .js
files to .ts
and start using TypeScript.
You may also want to add a tsconfig.json
file to the project root like this:
{
"compilerOptions": {
"target": "es2016",
"module": "es6",
"strict": true,
"noImplicitAny": false,
"noEmit": true,
"allowJs": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": "./src",
"paths": {
"~/*": ["./*"]
},
"typeRoots": [
"node_modules/@types",
"node_module/phaser/types"
],
"types": [
"phaser"
]
},
"include": [
"src/**/*"
]
}
More information on tsconfig.json
options here.
Note on how Parcel handles baseUrl
and paths
.
It just works. (Thanks to Parcel)
Just put // @flow
at the top of your .js
files. Parcel will handle the rest.
Go here for more information on how to use Flow.
You can change the dev server's port number by modifying the start
script in package.json
. We use Parcel's -p
option to specify the port number.
The script looks like this:
parcel src/index.html -p 8000
Change 8000 to whatever you want.
parcel-plugin-clean-easy is used to ensure only the latest files are in the dist
folder. You can modify this behavior by changing parcelCleanPaths
in package.json
.
parcel-plugin-static-files is used to copy static files from public
into the output directory and serve it. You can add additional paths by modifying staticFiles
in package.json
.