🧩 React interface render for Phaser engine
MIT License
Library for render relative game interface using React, connecting it with Phaser through events and context.
Use special hooks for access to game and scenes.
For each scene can be create one interface instance, which is container for all components.
.
Documentation
.
npm i phaser-react-ui
.
const ui = new Interface(scene: Phaser.Scene)
console.log(ui.container) // HTMLDivElement
ui.render(
component: React.FC,
props?: object
)
scene.events.on(Phaser.Interface.Events.MOUNT, () => {
console.log('component mounted');
})
ui.setInteractive(state: boolean)
true
pointer-events
ui.destroy()
.
useGame(): Phaser.Game
useCurrentScene(): Phaser.Scene
useScene(key: string): Phaser.Scene
useSceneUpdate(
scene: Phaser.Scene,
callback: () => void,
depends: any[]
)
useEvent(
emitter: Phaser.Events.EventEmitter,
event: string,
callback: () => void,
depends: any[]
)
useRelativePosition(params: {
x: number,
y: number,
camera?: Phaser.Cameras.Scene2D.Camera
}): React.MutableRefObject<HTMLElement>
useRelativeScale(params: {
target: number,
min?: number,
max?: number,
round?: boolean
}): React.MutableRefObject<HTMLElement>
useTexture(key: string): HTMLImageElement
useMatchMedia(query: string): boolean
useMobilePlatform(): boolean
useClick(
ref: React.RefObject,
type: 'up' | 'down',
callback: Function,
depends: any[]
)
useClickOutside(
ref: React.RefObject,
callback: Function,
depends: any[]
)
useInteraction(
ref: React.RefObject,
callback?: Function,
depends?: any[]
): boolean
.
<RelativePosition
x={number}
y={number}
camera={Phaser.Cameras.Scene2D.Camera?}
>
...
</RelativePosition>
<RelativeScale
target={number}
min={number?}
max={number?}
round={boolean?}
>
...
</RelativeScale>
<Texture name={string} />
.
ifModifiedObject(
newValue: T,
keys?: (keyof T)[]
): (currentValue: T) => T
ifModifiedArray(
newValue: T[],
keys?: (keyof T)[]
): (currentValue: T[]) => T[]
const Component: React.FC = () => {
const scene = useCurrentScene();
const [data, setData] = useState({});
useSceneUpdate(scene, () => {
const newData = scene.getSomeData();
// Rerender only if newData is different by data
setList(ifModifiedObject(newData))
}, []);
};
.
import { useScene, useSceneUpdate, useEvent } from 'phaser-react-ui';
const PlayerHealth: React.FC = () => {
const world = useScene('world');
const [health, setHealth] = useState(0);
const [isAlive, setAlive] = useState(true);
useSceneUpdate(world, () => {
if (isAlive) {
setHealth(world.player.health);
}
}, [isAlive]);
useEvent(world.player, Phaser.GameObjects.Events.DESTROY, () => {
setAlive(false);
}, []);
return isAlive && (
<div className='info'>
{health} HP
</div>
);
};
import { useRelativeScale } from 'phaser-react-ui';
import { PlayerHealth } from './PlayerHealth';
const ScreenUI: React.FC<Props> = () => {
const ref = useRelativeScale<HTMLDivElement>({
target: 1280,
min: 0.6,
max: 1.2,
});
return (
<div ref={ref} className='container'>
<PlayerHealth />
...
</div>
);
};
ScreenUI.displayName = 'ScreenUI';
import { Interface } from 'phaser-react-ui';
import { ScreenUI } from './ScreenUI';
class Screen extends Phaser.Scene {
private ui: Interface;
create() {
this.ui = new Interface(this);
this.ui.render(ScreenUI);
}
}