webpunk.ts v0.2.1 — Now with Font & Circle APIs

Build games. Not boilerplate.

A lightweight TypeScript 2D canvas framework inspired by the classic FlashPunk library. Fixed timestep, entity-component, scene stack — ship HTML5 games or wrap as desktop apps with Tauri.

Get Started API Reference

Everything a game needs. Nothing it doesn't.

webpunk.ts gives you the essential systems and gets out of the way.

Fixed Timestep

Physics and logic run at a rock-solid 60 Hz. Rendering interpolates between steps — smooth gameplay on any device.

Entity / Component

Compose game objects from reusable components. Transform, SpriteRenderer, BoxCollider, Animator — all built in.

Scene Stack

Push, pop, and replace scenes for pause menus, fade transitions, and overlays. First-class, zero boilerplate.

Tiled Integration

Load .tmj/.tmx maps exported from Tiled. Tile collision, object layers, and pre-baked OffscreenCanvas rendering.

Tauri Desktop

The same Vite build output wraps into a native desktop installer. No framework changes required.

UI System

Screen-space widgets, nine-slice sprite skins, themes, bitmap fonts, and a full theming API — batteries included.

Up and running in 3 steps.

From zero to a running game scene in minutes.

01

Scaffold your game

The create-webpunk initializer generates a Vite + TypeScript project with scenes, input, and the default font wired up.

bash
npm create webpunk@latest my-game
02

Write your first scene

Implement IScene and add entities, components, camera layers, and collision in a structured, predictable API.

typescript
import { Engine, CanvasRenderer } from 'webpunk.ts'
import { TitleScene } from './scenes/TitleScene'

const canvas = document.getElementById('game-canvas') as HTMLCanvasElement
const engine = new Engine({ canvas, renderer: new CanvasRenderer(canvas) })
engine.actions.defineAction('jump', [{ type: 'key', code: 'Space' }])
await engine.start(new TitleScene())
03

Build and ship

npm run build produces a self-contained HTML5 game. Zip it for itch.io or wrap with Tauri for a native desktop app.

bash
npm run build   # → dist/ (HTML5 game)
npx tauri build # → native installer (optional)

Follow the development.

Patch notes, devlog posts, and framework updates — delivered to your inbox. Sign up and get access to the members-only developer blog.

No spam. Unsubscribe any time. By signing up you get a free member account.

v0.2.1

Latest Release

Full changelog

Fonts

  • →AssetLoader.loadFont(family, url, opts?) — register custom fonts via FontFace API
  • →AssetLoader.loadGoogleFonts(...families) — inject Google Fonts with preconnect hints
  • →New DEFAULT_FONT_FAMILY constant ("Science Gothic", sans-serif)

Rendering

  • →IRenderer.drawCircle(center, radius, color, fill?) — new circle primitive
  • →CanvasRenderer.drawText defaults to Science Gothic instead of monospace

UI Theming

  • →UITheme.fontFamily token — propagated to UIText, UIButton, UIGrid
  • →UITheme.createDefault({ … }) gains fontFamily option