import { GameProvider } from '../contexts/GameContext'
94 | import PropTypes from 'prop-types'
95 | import React from 'react'
96 | import usePhaser from '../hooks/usePhaser'
97 |
98 | /**
99 | * A higher-order React functional component that manages the Phaser game.
100 | *
101 | * @function
102 | * @module GameComponent
103 | * @param {Object} props The component props.
104 | * @param {Array|Object} [props.children] The child components.
105 | * @param {Object} props.config The config object for the Phaser game instance.
106 | * @throws {ConfigError} Will throw a ConfigError if the Phaser game is mis-configured by the user.
107 | * @see module:usePhaser
108 | * @see module:GameProvider
109 | */
110 | export default function GameComponent({ children, config }) {
111 | const [canvasRef, game] = usePhaser(config)
112 | return (
113 | <div style={{ display: 'inline-block', position: 'relative' }}>
114 | <GameProvider value={game}>{children}</GameProvider>
115 | <canvas ref={canvasRef} />
116 | </div>
117 | )
118 | }
119 |
120 | GameComponent.propTypes = {
121 | children: PropTypes.oneOfType([
122 | PropTypes.arrayOf(PropTypes.node),
123 | PropTypes.node
124 | ]),
125 | config: PropTypes.object
126 | }
127 | phaser-react-tools
95 |
By default, Phaser and React don't always get along. phaser-react-tools is here to help.
You can use phaser-react-tools to:
-
99 |
- Embed your Phaser game in a React application 100 |
- Build your game's UI with React 101 |
- Send events & data between Phaser and React 102 |
Quickstart
104 |To install, run:
105 |npm i phaser-react-tools
Config
107 |The GameComponent is a HOC that can be configured just like a normal Phaser game.
import { GameComponent } from 'phaser-react-tools'
109 |
110 | export default function App() {
111 | return (
112 | <GameComponent
113 | config={{
114 | backgroundColor: '000000',
115 | height: 300,
116 | width: 400,
117 | scene: {
118 | preload: function () {
119 | console.log('preload')
120 | },
121 | create: function () {
122 | console.log('create')
123 | }
124 | }
125 | }}
126 | >
127 | {/* YOUR GAME UI GOES HERE */}
128 | </GameComponent>
129 | )
130 | }
131 | Events
133 |The useEventEmitter hook can help you send messages from a React component to your Phaser game.
import { useEventEmitter } from 'phaser-react-tools'
135 |
136 | export default () => {
137 | const emit = useEventEmitter('BUTTON_CLICK_EVENT')
138 |
139 | return <button onClick={() => emit('Click!')}>Emit</button>
140 | }
141 | The useEventListener hook can help you handle game events in your React components.
import { useEventListener } from 'phaser-react-tools'
144 |
145 | export default () => {
146 | useEventListener('BUTTON_CLICK_EVENT', (event) => {
147 | console.log(event)
148 | })
149 | }
150 | Next steps
152 |Check out the /example directory or visit the docs.
If you find a bug or have ideas for improvements, please create an issue and/or submit a pull request.
154 |