phaser-pixi-2d-games

Phaser and PixiJS 2D Games

Overview

Phaser is a game framework: scenes, game objects, input, physics, audio, tweens, a loader and a scale manager. PixiJS is a fast 2D renderer: display objects, textures and a ticker — scenes, physics, input mapping and audio are yours to add. Pick by what the repository already uses; never put both in one game.

Core principle: The engine draws and dispatches; rules live in plain TypeScript modules with no engine import, so Vitest can run them (web-game-performance-and-testing).

Phaser: structure

// main.ts
new Phaser.Game({
  type: Phaser.AUTO,
  parent: "game",
  backgroundColor: "#101018",
  scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 1280, height: 720 },
  physics: { default: "arcade", arcade: { gravity: { x: 0, y: 900 }, debug: false } },
  scene: [BootScene, PreloadScene, GameScene, HudScene],
});

// GameScene.ts — the scene wires engine objects to plain rules
export class GameScene extends Phaser.Scene {
  private player!: Player;
  private bullets!: Phaser.Physics.Arcade.Group;
  private rules!: CombatRules;                       // plain TS, no Phaser import

  constructor() { super("Game"); }

  create(data: { seed: number }): void {
    this.rules = new CombatRules(definitions.combat, mulberry32(data.seed ?? Date.now()));
    this.player = new Player(this, 200, 500);
    this.bullets = this.physics.add.group({ classType: Bullet, maxSize: 64, runChildUpdate: true });
    this.physics.add.overlap(this.bullets, this.enemies, (b, e) => this.onHit(b as Bullet, e as Enemy));
    this.scene.launch("Hud");                        // HUD as a parallel scene listening to events
    this.events.once(Phaser.Scenes.Events.SHUTDOWN, () => this.cleanup());
  }

  update(_time: number, deltaMs: number): void {
    this.rules.tick(deltaMs / 1000);                  // Phaser's delta is milliseconds
    this.player.applyIntent(this.input.keyboard!, deltaMs / 1000);
  }

  private fire(x: number, y: number): void {
    const b = this.bullets.get(x, y) as Bullet | null;  // reuse from the pool; null when maxSize reached
    b?.launch(600);
  }

  private cleanup(): void {
    this.game.events.off("settings-changed", this.applySettings, this);
  }
}