SvelteKit Package

engine-renderer

Rendering engine — PixiJS-based game renderer with grid, backgrounds, and visual effects

SvelteKit Ready SI

Rendering Setup typescript

import { GameLoop, GridRenderer } from '@sbx/engine-renderer';

const loop = new GameLoop();
const grid = new GridRenderer({
  rows: 20, cols: 20, cellSize: 32
});

loop.onUpdate = (dt) => {
  game.update(dt);
  grid.draw(game.board);
};

loop.start(); // 60fps fixed timestep

About

Game rendering layer built on PixiJS. Manages the render loop, background layers (static, parallax, tiled), grid overlay rendering for tile-based games, and visual effect pipelines (particles, screen shake, flash). Provides a clean abstraction over PixiJS internals so game code works with logical coordinates rather than raw WebGL.

Public API

Name	Kind	Signature
GameLoop	type	class GameLoop — start(), stop(), fps, deltaTime
GridRenderer	type	class GridRenderer — rows, cols, cellSize, draw(grid)
BackgroundRenderer	type	class BackgroundRenderer — layers, parallax, speed
EffectsPipeline	type	class EffectsPipeline — shake(), flash(), particles()

Dependencies

Imports (1)

vendor-pixi SvelteKit Ready

PixiJS vendor wrapper — tree-shakeable PixiJS adapter with type-safe API subset

pixijsvendorwebglcanvastree-shaking

2 exports 1 deps

Imported By (1)

game-svelte SvelteKit Ready

Svelte game framework — Game component shell with lifecycle, loop, and renderer integration

svelte-5gamepixijscanvasgame-loop

1 exports 2 deps

Source

@sbx/engine-renderer

game-enginerenderingpixijswebglgrideffectsparticles