Play as Coton The Tige to make your world a better place to live, full of tasty food. This game is made with Phaser and is based on Ourcade's template : phaser3-parcel-template
- Kenney.nl
- Tommy from Ourcade.co
- Some html attribution to place:
<div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
<div>Icons made by <a href="https://www.flaticon.com/authors/icon-box" title="Icon Box">Icon Box</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
Go into your new project folder and install dependencies:
cd coton-the-tige # 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.ts
│ ├── index.html
│ ├── main.ts
├── package.json
The contents of this template is the basic Phaser 3 getting started example.
This template assumes you will want to organize your code into multiple files and use TypeScript.
TypeScript files are intended for the src
folder. main.ts
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.ts
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')
.
This template uses a basic typescript-eslint
set up for code linting.
It does not aim to be opinionated.
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
.