Phaser Hooks - lightweight reactive state management for Phaser scenes

Phaser 3
1

Hey everyone!

I’ve been working on a new open-source library called Phaser Hooks.

It’s a small, framework-free state management system built specifically for Phaser 3 (I don’t know yet about the compatibility with Phaser 4).

It lets you create reactive state directly inside your scenes, perfect for things like player health, score, or energy. Is inspired in React Hooks (but, without React)

// hooks/player.ts (yes, I love Typescript, but you can use with JS only if you want
import * as Phaser from 'phaser';
import { withLocalState } from 'phaser-hooks';

const withPlayer = (scene: Phaser.Scene) => {
  const player = withLocalState(scene, 'player', {
    hp: 100,
    maxHp: 100,
    level: 1,
  });

  return player;
};

// Now, in all scenes you can get the same state
class GameScene extends Phaser.Scene {
  constructor() {
    super({key: 'GameSceneKey'});
  }

  create(): void {
    const playerState = withPlayer(this); // Get the state here
    // ...

    const hp = playerState.get().hp;

    playerState.on('change', (newValue, oldValue) => {
      if (newValue.hp !== oldValue.hp) {
        this.hpText.setText(`HP: ${newValue.hp}`);
      }
      // .....

Github: phaser-toolkit/packages/phaser-hooks at main · renatocassino/phaser-toolkit · GitHub

:link: Docs + live examples: https://toolkit.cassino.dev/phaser-hooks/start-here/installation/
:package: NPM: https://www.npmjs.com/package/phaser-hooks

It integrates with the Phaser registry, automatically cleans up when scenes are destroyed, and works perfectly with TypeScript or plain JavaScript.

Feedback and ideas are very welcome!

I’m already using it in my own games and it keeps my code a lot cleaner. I decided to put open source to share with the community.

Some games using this lib:

https://gamedistribution.com/games/smart-dots-reloaded/

1 Like