Phaser React UI

[neki-dev]

React interface render for Phaser engine

Repository

• phaser-react-ui

Features

• Integration for creating interfaces in scenes
• Hooks for access to game and scenes
• Components for relative positions by camera and relative scale by screen size

Install

npm i phaser-react-ui

Example

Create interface component

import { useScene, useSceneUpdate } from 'phaser-react-ui';

const PlayerHealth: React.FC = () => {
  const world = useScene('world');
  const [health, setHealth] = useState(0);

  useSceneUpdate(world, () => {
    setHealth(world.player.health);
  }, []);

  return (
    <div className='info'>
      {health} HP
    </div>
  );
};

Create components container

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

Add interface to scene

import { Interface } from 'phaser-react-ui';
import { ScreenUI } from './ScreenUI';

class Screen extends Phaser.Scene {
  private ui: Interface;

  create() {
    this.ui = new Interface(this, ScreenUI);
  }
}