Toolchain/workflow

All these tools are free – or so cheap and good that you should get them…

Artwork

– aseprite > auto export to img folder

– tiled > auto export to game map folder (.json)

Node js

– vscode > work in src folder – saving reloads/relaunches page in browser

runs test server plugin

webpack4 as build tool

– why?

First, create a lib folder in the src folder. Then make a new file in lib called phaser.js.

The code in phaser.js will simply export window.Phaser from our phaser.js file.

export default window.Phaser

We can then import Phaser in the main.js file. Replace what was in main.js with this:

import Phaser from ‘./lib/phaser.js’
console.dir(Phaser)

Make a folder called types under the src folder and put the phaser.d.ts file there.

Next, create a new file called jsconfig.json at the base of the project on the same level as index. html and insert the following:

{
“compilerOptions”: {
“module”: “es6”,
“target”: “es6”
}
}

This jsconfig.json file is to configure JavaScript handling for VS Code.

JSDoc annotation

/** @type {Phaser.Physics.Arcade.Sprite} */
player

PUBLISH

Consider how you are setting up your folders

Working

Tmx folder – Tilemap data – export to production folder

TSX folder – Tileset data – export to production folder

Production ‘export’ folder

Tileset – tileset graphics in here

Scripts > set up one to be able to refresh/relaunch browser