Phaser 3 React TypeScript Starter Template

A starter template for Phaser 3 with TypeScript and webpack for building excellent html5-games that work great in the browser and on mobile devices.

Key Features • Preview • How To Use • React controls • Websocket support • Credits

---

Key Features

• All newest ES 2020 features
• Prettier
• Webpack dev server
• Includes Phaser 3 TypeScript typings
• For development and production builds
• React gui development
• Websocket integration

Preview

This is what you get after installing this template. A simple and clean starter template written in TypeScript.

How To Use

To clone and run this template, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository (yes, npx not npm)
$ git clone https://github.com/tfkfan/phaser3-react-template.git

# Go into the repository
$ cd phaser3-react-template

# Install dependencies
$ npm install

# Start the local development server (on port 8080)
$ npm start

# Ready for production?
# Build the production ready code to the /dist folder
$ npm run build

React controls

This template allows to use react hooks outside of react components

To use this take a look to /src/controls.ts file to create your own handlers

To register new handler:

class GameControls {
    private controls: GameControlsMap = {}

    // Create your own register controls method
    public registerGameDebugControls(controls: GameDebugControls) {
        this.controls.debug = controls
    }

    // Create your own valueSetter method
    public setFps(fps: number) {
        if (checkExists(this.controls.debug))
            this.controls.debug.setFps(fps)
    }

    public setVersion(version: string) {
        if (checkExists(this.controls.debug))
            this.controls.debug.setVersion(version)
    }
}

To use it inside phaser game:

CONTROLS.setVersion(`Phaser v${Phaser.VERSION}`)

Websocket support

Use Network class to communicate with ws server...

First, initialize websocket to communicate with specific server host:

network.initConnection("<your ws host>")

Then use functionality directly:

network.on(MessageType.UPDATE, data => {

}, this)

network.send(MessageType.PLAYER_KEY_DOWN, {inputId: 'RIGHT', state: false});

Credits

A huge thank you to Rich @photonstorm for creating Phaser