Rendering API
typescript
import { PixiRenderer, CanvasRenderer, GameLoop, Camera } from "quantum-forge/rendering";PixiRenderer
WebGL/WebGPU renderer using PixiJS 8.
Constructor
typescript
new PixiRenderer(options: {
canvas: HTMLCanvasElement;
backgroundColor?: number; // default: 0x000000
logger?: LoggerInterface;
})Methods
| Method | Description |
|---|---|
init(): Promise<void> | Initialize PixiJS (must await before use) |
render(state: TState) | Calls draw(state) with fresh graphics |
destroy() | Cleanup PixiJS resources |
Properties
| Property | Type | Description |
|---|---|---|
app | Application | PixiJS Application instance |
graphics | Graphics | Cleared each frame, use for drawing |
Override
typescript
class MyRenderer extends PixiRenderer {
protected draw(state: GameState) {
this.graphics.circle(x, y, r).fill(color);
this.drawText(key, text, x, y, style);
}
}drawText(key, text, x, y, style)
Manages PixiJS Text objects by key. Creates on first call, updates on subsequent calls. Prevents Text object proliferation.
CanvasRenderer
Canvas 2D renderer for simpler use cases.
Constructor
typescript
new CanvasRenderer(options: {
canvas: HTMLCanvasElement;
logger?: LoggerInterface;
})Properties
| Property | Type | Description |
|---|---|---|
ctx | CanvasRenderingContext2D | Canvas 2D context |
canvas | HTMLCanvasElement | Canvas element |
Methods
| Method | Description |
|---|---|
clear(color?: string) | Clear canvas with optional fill |
GameLoop
Fixed-timestep game loop.
Constructor
typescript
new GameLoop(options: {
update: (deltaTime: number) => void; // dt in seconds
render: () => void;
targetFps?: number; // default: 60
logger?: LoggerInterface;
})Methods
| Method | Description |
|---|---|
start() | Begin the loop |
stop() | Pause the loop |
deltaTime is in seconds. At 60 FPS, deltaTime ≈ 0.0167.
Camera
Optional camera for world-space to screen-space transforms.
typescript
const camera = new Camera({ x: 0, y: 0, zoom: 1 });
const screenPos = camera.worldToScreen(worldX, worldY);
const worldPos = camera.screenToWorld(screenX, screenY);