Blit-Tech Examples

WebGPU Retro Game Engine — Phase 1 Demos

Bouncing square demo. Demonstrates a basic setup and rendering.

Getting Started

Showcase of all drawing primitives: pixels, lines, rectangles, and filled shapes.

Demonstrates camera scrolling in a large world with mini-map and UI overlay.

Animated mathematical patterns: spirals, waves, Lissajous curves, and more.

Textured sprite rendering with color tinting, transparency, and animation effects.

Bitmap font rendering with colors, effects, and custom font loading.

Practical tinting effects: damage flash, shadows, team colors, and ambient lighting.

Animation & Timing

Tick-based animation with state machines, cooldowns, and frame-based game logic.

Phase 1 Features Implemented:

Core type system: Vector2i, Rect2i, Color32
WebGPU dual-pipeline renderer (primitives + sprites)
Primitive rendering: pixels, lines, rectangles
Sprite rendering with texture batching and color tinting
Bitmap font system with fixed-width font support
Asset loading: SpriteSheet, BitmapFont
Camera system with offset and reset
Fixed timestep game loop (60 FPS)
Clear operations (full-screen and rectangular regions)

Not Yet Implemented (Planned):

Keyboard input (WASD, Arrow Keys) - BT.keyDown(), BT.keyPressed()
Gamepad support: BT.buttonDown()
Mouse input
Palette system (indexed colors, color cycling)
Tilemap rendering
Audio playback

Requirements:

Chrome/Edge 113+ or Firefox Nightly
WebGPU support enabled
Compatible GPU and drivers

Assets and Fonts:

Bitmap font examples use PragmataPro by Fabrizio Schiavi.
Available at https://fsd.it/shop/fonts/pragmatapro/

Blit-Tech - Inspired by RetroBlit | Built with WebGPU