Skip to content
Create Phaser 3 games using React
TypeScript JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples disable debug in breakout example Feb 18, 2020
packages/react-phaser-fiber
.eslintrc.json
.gitignore
.prettierrc.js
README.md
package.json
yarn.lock

README.md

react-phaser-fiber

Create Phaser 3 games using React. Heavily inspired by @inlet/react-pixi.

This is very much a work in progress. The following components are provided (linked to their respective Phaser class):

The current goal is to support all GameObjects and Physics.Arcade objects. After that, I'll look at adding Matter and Impact components.

Examples

Games

Breakout (recreated from official Phaser example)

Basic Platformer (recreated from official Phaser example)

Other

Custom Phaser Component

Spawning Components

Getting Started

Install

npm install react-phaser-fiber

Create a game

import React from 'react'
import ReactDOM from 'react-dom'
import { Game, Scene, Text } from 'react-phaser-fiber'

const App = () => {
  return (
    <Game width={400} height={400}>
      <Scene sceneKey="main">
        <Text x={100} y={100} text="Hello World!" style={{ color: 'white' }} />
      </Scene>
    </Game>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Edit Hello World

There will be proper documentation eventually, but for now look through the examples to see what else is possible.

You can’t perform that action at this time.