react-phaser-fiber v0.2.4

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

• Game
• Scene
• Text
• Image
• Sprite
• TileSprite
• Group
• ArcadeImage
• ArcadeSprite
• ArcadeCollider
• ArcadeGroup
• MatterImage
• MatterSprite
• MatterCollider

Examples

Games

Breakout (recreated from official Phaser example)

Basic Platformer (recreated from official Phaser example)

Invaders (recreated from Phaser 2 example

Other

Spawning Components With Matter Physics

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'))

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