https://github.com/tfkfan/phaser3-react-template

Phaser3, react, typescript, webpack, websocket template
https://github.com/tfkfan/phaser3-react-template

game phaser phaser3 react typescript websocket

Last synced: 6 days ago
JSON representation

Phaser3, react, typescript, webpack, websocket template

• Host: GitHub
• URL: https://github.com/tfkfan/phaser3-react-template
• Owner: tfkfan
• Created: 2023-08-28T10:36:35.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-01-08T17:34:27.000Z (about 1 year ago)
• Last Synced: 2024-11-14T22:22:37.956Z (2 months ago)
• Topics: game, phaser, phaser3, react, typescript, websocket
• Language: TypeScript
• Homepage: https://tfkfan.github.io/phaser3-react-template/
• Size: 817 KB
• Stars: 7
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  


  

  


  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](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:

```bash

# 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:

```typescript

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:

```typescript

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:

```typescript

network.initConnection("")

```

Then use functionality directly:

```typescript

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

}, this)

```

```typescript

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

```

## Credits

A huge thank you to Rich [@photonstorm](https://github.com/photonstorm) for creating Phaser