@playertwo/phaser

Multiplayer without networking.

Phaser 3 adapter for playertwo that automatically syncs sprites, physics, and game state across clients with zero networking code.

Features

• Automatic sprite synchronization - Just create sprites normally, they sync automatically
• Physics integration - Use Phaser's physics engine (Arcade, Matter) - syncs automatically
• Input helpers - Pre-built player movement patterns (platformer, top-down, racing)
• Collision management - Define collision rules declaratively
• UI helpers - Health bars, player labels, HUD elements
• Camera management - Smooth camera following with configurable behaviors

Installation

npm install @playertwo/phaser @playertwo/core phaser

Quick Start

import { defineGame } from '@playertwo/core';
import { PhaserAdapter } from '@playertwo/phaser';
import Phaser from 'phaser';

// Define your game logic
const game = defineGame({
  initialState: { players: {} },

  actions: {
    move: (state, { playerId, x, y }) => {
      state.players[playerId] = { x, y };
    }
  }
});

// Create Phaser scene with automatic sync
class GameScene extends Phaser.Scene {
  adapter!: PhaserAdapter;

  create() {
    // Initialize adapter - handles all networking
    this.adapter = new PhaserAdapter(this, runtime);

    // Create sprites normally - they sync automatically!
    runtime.onPlayerJoin((playerId) => {
      const sprite = this.physics.add.sprite(100, 100, 'player');
      this.adapter.trackSprite(playerId, sprite);
    });

    // Handle input
    this.input.on('pointermove', (pointer) => {
      runtime.dispatchAction('move', {
        x: pointer.x,
        y: pointer.y
      });
    });
  }

  update() {
    // Sprites automatically update from state - no manual sync needed!
    this.adapter.syncSprites((playerId) => runtime.state.players[playerId]);
  }
}

Key Concepts

Automatic Sprite Tracking

The adapter automatically tracks sprite properties and syncs them across clients:

// Host: Create and move sprite with physics
const sprite = this.physics.add.sprite(100, 100, 'player');
sprite.setVelocityX(200);

// Client: Sprite automatically mirrors the position/rotation - no code needed!

Input Helpers

Pre-built movement patterns for common game types:

import { InputManager } from '@playertwo/phaser';

const inputManager = new InputManager(this, runtime, {
  profile: 'platformer', // or 'top-down', 'racing', 'twin-stick'
  speed: 200,
  jumpForce: 400
});

// Automatically handles WASD/Arrow keys and dispatches actions

Physics Integration

Use Phaser's physics normally - the adapter syncs the results:

// Host: Real physics simulation
this.physics.add.collider(player, platforms);
player.setVelocityX(200);

// Client: Sees the result automatically
// No physics simulation needed on client side

Documentation

• Full Documentation
• API Reference
• Examples

Advanced Features

Collision Management

import { CollisionManager } from '@playertwo/phaser';

const collisionManager = new CollisionManager(this, runtime, {
  rules: [
    { group1: 'players', group2: 'enemies', action: 'damage' },
    { group1: 'players', group2: 'platforms', action: 'collide' }
  ]
});

Health Bars

import { HealthBarManager } from '@playertwo/phaser';

const healthBars = new HealthBarManager(this, {
  width: 50,
  height: 6,
  offsetY: -30
});

healthBars.attach(sprite, playerId);

Camera Following

import { createCameraFollower } from '@playertwo/phaser';

const follower = createCameraFollower(this, {
  lerp: 0.1,
  deadzone: { width: 200, height: 200 }
});

follower.follow(playerSprite);

License

Apache-2.0 © Blueprint Lab

Links

• GitHub Repository
• Report Issues
• NPM Package