@web-engine-dev/replay

Recording and playback system for web-engine.

Features

• Input Recording: Record player inputs
• State Recording: Capture game state
• Playback: Replay recorded sessions
• Seek/Scrub: Jump to any point
• Export/Import: Share replays

Installation

npm install @web-engine-dev/replay
# or
pnpm add @web-engine-dev/replay

Quick Start

import { ReplayRecorder, ReplayPlayer } from '@web-engine-dev/replay';

// Recording
const recorder = new ReplayRecorder();
recorder.start();

// Record inputs each frame
recorder.recordInput(frame, input);
recorder.recordState(frame, getGameState());

// Stop and get replay
const replay = recorder.stop();

// Playback
const player = new ReplayPlayer(replay);
player.play();

// In game loop
const input = player.getInputAtFrame(currentFrame);

API Overview

Recorder

const recorder = new ReplayRecorder({
  recordInputs: true,
  recordState: true,
  stateInterval: 60, // Record state every 60 frames
});

recorder.start();

// Each frame
recorder.recordInput(frame, {
  horizontal: inputX,
  vertical: inputY,
  jump: jumpPressed,
});

// Periodic state snapshots
recorder.recordState(frame, serializeWorld());

const replay = recorder.stop();

Player

const player = new ReplayPlayer(replay);

player.play();
player.pause();
player.seek(frame);
player.setSpeed(2.0); // 2x speed

// Get data at frame
const input = player.getInputAtFrame(frame);
const state = player.getStateNear(frame);

// Events
player.on('end', () => console.log('Replay finished'));
player.on('frame', (frame) => console.log(frame));

Deterministic Replay

// For deterministic replay, only record inputs
const recorder = new ReplayRecorder({
  recordInputs: true,
  recordState: false,
});

// Seed RNG at start
const seed = replay.seed;
rng.setSeed(seed);

// Replay inputs to recreate game
for (const input of replay.inputs) {
  game.update(input);
}

Export/Import

// Export
const data = replay.serialize();
const compressed = replay.compress();

// Import
const replay = Replay.deserialize(data);
const replay = Replay.decompress(compressed);

// Save to file
downloadFile('replay.dat', compressed);