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: 9 months 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 (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-01-08T17:34:27.000Z (over 2 years ago)
- Last Synced: 2024-11-14T22:22:37.956Z (over 1 year 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/global-state.ts file to create your own handlers
To register new handler write inside your React functional component:
```typescript
const [fps, setFps] = useState(0);
const [version, setVersion] = useState('');
useGlobalReg({
setVersion,
setFps
});
```
To use it inside phaser game:
```typescript
useGlobalState(state => state.setVersion(`Phaser v${Phaser.VERSION}`));
```
## Websocket support
Use GameWebSocket class to communicate with ws server...
First, initialize websocket to communicate with specific server host:
```typescript
webSocket.initConnection("")
```
Then use functionality directly:
```typescript
webSocket.on(MessageType.UPDATE, data => {
}, this)
```
```typescript
webSocket.send(MessageType.PLAYER_KEY_DOWN, {inputId: 'RIGHT', state: false});
```
## Credits
A huge thank you to Rich [@photonstorm](https://github.com/photonstorm) for creating Phaser