A comprehensive collection of tools and utilities for game development with Phaser.

This monorepo contains a cohesive suite of TypeScript-first libraries for Phaser. Each package is focused, well-tested, and built to work great together or stand alone.

Hudini is a collection of reusable, themeable UI components for Phaser games. Named after the famous magician Houdini and HUD (Head-Up Display), it provides a magical toolkit for building consistent game interfaces.

Key Features:

• 🎨 Themeable - Dark/light themes with full customization
• 📦 Phaser-wind Dependency - Only requires phaser-wind
• 🎯 TypeScript First - Full type safety and IntelliSense
• 🧪 Tested - Comprehensive test coverage

Components:

• Column - Stacks children vertically with spacing and alignment
• Row - Arranges children horizontally with spacing and alignment
• IconButton - Interactive circular icon button with animations
• FlatIconButton - Flat-style icon button with customizable colors and opacity

Links:

• 📦 NPM Package
• 📖 Documentation
• 🎮 Live Demos

Phaser Wind brings the joy and simplicity of Tailwind-like design tokens to Phaser games! Stop fighting with magic numbers and random colors.

Key Features:

• 🎨 Complete Tailwind-like Color Palette - 22 families × 11 shades
• 📐 Semantic Font Sizes - From xs to 6xl
• 🧩 Default constants ready-to-use - Color, FontSize, Spacing, Radius, Shadow
• 🧭 Optional theme system (typed) - Add your own tokens with strong typing
• 🔧 TypeScript First - Full type safety and IntelliSense
• 🎮 Phaser Ready - Global plugin for easy access in scenes

Example:

import { Color, FontSize } from 'phaser-wind';

const button = this.add.text(100, 50, 'Click me!', {
  fontSize: FontSize.css('lg'), // Clear intention!
  fill: Color.rgb('blue-500'), // Beautiful blue
  backgroundColor: Color.rgb('gray-800'), // Perfect contrast
});

Links:

• 📦 NPM Package
• 📖 Documentation
• 🎮 Live Demos

Use Font Awesome icons as text/sprites directly in your Phaser scenes with zero friction rendering pipeline.

Key Features:

• 🎯 Zero friction rendering - Direct integration with Phaser text system
• 🎨 Full control - Sizing, color and stroke controls
• 📦 IconText component - Ready-to-use component for icons
• 🔧 TypeScript Support - Full type safety

Example:

import { IconText } from 'font-awesome-for-phaser';

const icon = new IconText(this, 90, 90, 'gamepad', 64, {
  color: '#0066cc',
  iconStyle: 'solid', // 'solid' | 'regular' | 'brands'
});

Links:

• 📦 NPM Package
• 📖 Documentation
• 🎮 Live Demos

A comprehensive state management library for Phaser games with React-like hooks pattern. Reduce boilerplate and manage state cleanly.

Key Features:

• 🎯 React-like API - Familiar hooks pattern for Phaser developers
• 🔒 Type-safe - Full TypeScript support with compile-time validation
• 🎮 Phaser-native - Designed specifically for Phaser lifecycles
• 🧪 Well-tested - Comprehensive test coverage
• 🐛 Debug Mode - Built-in debug logging for development

Available Hooks:

• withLocalState - Scene-specific state management
• withGlobalState - Application-wide state
• withPersistentState - State with localStorage persistence
• withComputedState - Derived state that auto-updates
• withUndoableState - State with undo/redo functionality
• withDebouncedState - State with debounced updates

Example:

import { withLocalState } from 'phaser-hooks';

const playerState = withLocalState<{ hp: number; level: number }>(
  this,
  'player',
  { hp: 100, level: 1 },
  { debug: true } // Enable debug logging
);

playerState.set({ hp: 90, level: 2 });
const currentPlayer = playerState.get();

Links:

• 📦 NPM Package
• 📖 Documentation
• 🎮 Live Demos

The ultimate type-safe audio management system for Phaser.js games. Transform your game's audio experience with professional-grade sound management, multi-channel mixing, and automatic volume persistence.

Key Features:

• ✅ Full TypeScript Support - Complete type safety for sound keys and channels
• 🎛️ Multi-Channel Audio - Professional mixing with HUD, SFX, Music, and custom channels
• 💾 Automatic Persistence - Player volume preferences saved automatically
• ⚡ Smart Preloading - Efficient audio loading with lazy loading fallbacks
• 🎯 Zero Configuration - Works out of the box with sensible defaults
• 🔗 Phaser Hooks Integration - Leverages battle-tested state management

Example:

import { getSoundStudio } from 'phaser-sound-studio';

const studio = getSoundStudio<GameSounds, GameChannels>(this);
studio.play('button-click'); // ✅ Type-safe!
studio.setChannelVolume(this, 'music', 0.1); // Lower background music

Links:

• 📦 NPM Package
• 📖 Documentation
• 🎮 Showcase Games

A powerful Chrome DevTools extension that brings state inspection capabilities to Phaser game development. Just like Redux DevTools revolutionized React debugging, this extension provides game developers with comprehensive insights into their Phaser game state management.

Key Features:

• 🎯 Real-Time State Monitoring - Track state changes across Phaser Registry and Scene Data
• 🔍 Powerful Search & Filter - Search by state key and filter by source
• 📊 State Diff Visualization - Side-by-side comparison with visual diff highlighting
• 📄 Pagination & Performance - Handle large event logs efficiently
• 🎮 Multi-Game Support - Switch between multiple Phaser game instances
• 🎨 Modern UI - Built with React and styled-components

Example:

import { withLocalState } from 'phaser-hooks';

// In your scene
const { set, get } = withLocalState(this, 'score', 0);

// When score changes, you'll see the diff in the inspector
set(100);

Links:

• 🛒 Download Chrome Extension
• 📖 Documentation
• 🔧 Development Guide

• Node.js >= 18.0.0
• pnpm >= 8.0.0

# Clone o repositório
git clone https://github.com/cassinodev/phaser-toolkit.git
cd phaser-toolkit

# Instale as dependências
pnpm install

# Construa todos os pacotes
pnpm build

• pnpm build - Builds all packages
• pnpm test - Runs tests across all packages
• pnpm dev - Starts development mode
• pnpm lint - Runs linting across all packages
• pnpm typecheck - Checks TypeScript types
• pnpm clean - Cleans previous builds
• pnpm changeset - Creates a new changeset for versioning
• pnpm release - Publishes new versions of packages

phaser-toolkit/
├── packages/
│   ├── hudini/                    # UI components
│   ├── phaser-wind/              # Design tokens & theming
│   ├── font-awesome-for-phaser/   # Font Awesome icons
│   ├── phaser-hooks/             # State management hooks
│   ├── phaser-sound-studio/      # Audio management
│   ├── phaser-data-inspector/    # Chrome DevTools extension
│   └── showcase/                 # Astro showcase
├── package.json
├── pnpm-workspace.yaml
└── README.md

Contributions are always welcome! Please read our contribution guide before submitting a PR.

1. Fork the project
2. Create a branch for your feature (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

CassinoDev

• Website: games.cassino.dev
• GitHub: @cassinodev

If this project helped you, please give it a ⭐ in the repository!