Something went wrong. Try again.
A WebGPU retro game engine for TypeScript, inspired by RetroBlit. Build pixel-perfect 2D games with a clean, fantasy-console-style API.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899<!doctype html><html lang="en">
<head> <meta charset="UTF-8" /> <title>Visual Test: Camera</title> <style> body { margin: 0; background: #000; } canvas { image-rendering: pixelated; } </style></head>
<body> <div id="canvas-container"> <canvas height="240" id="blit-tech-canvas" width="320"></canvas> </div>
<script type="module"> import { bootstrap, BT, Color32, Palette, Rect2i, Vector2i } from 'blit-tech';
window.__RENDER_COMPLETE__ = false; window.__INIT_FAILED__ = false;
// Palette indices for this test. const BLACK = 1; const RED = 2; const GREEN = 3; const BLUE = 4; const YELLOW = 5; const CYAN = 6; const WHITE = 8;
class CameraTest { configure() { return { displaySize: new Vector2i(320, 240), targetFPS: 60, }; }
async init() { const palette = new Palette(16); palette.set(BLACK, Color32.black); palette.set(RED, Color32.red); palette.set(GREEN, Color32.green); palette.set(BLUE, Color32.blue); palette.set(YELLOW, Color32.yellow); palette.set(CYAN, Color32.cyan); palette.set(8, Color32.white); BT.paletteSet(palette);
return true; }
update() {}
render() { BT.clear(BLACK);
// Apply camera offset: shift everything left by 50px and up by 30px. BT.cameraSet(new Vector2i(50, 30));
// Draw a grid of colored rectangles at known world positions. // With camera (50, 30), a rect at world (60, 40) appears at screen (10, 10). BT.drawRectFill(new Rect2i(60, 40, 20, 20), RED);
// World (110, 40) -> screen (60, 10). BT.drawRectFill(new Rect2i(110, 40, 20, 20), GREEN);
// World (60, 90) -> screen (10, 60). BT.drawRectFill(new Rect2i(60, 90, 20, 20), BLUE);
// World (110, 90) -> screen (60, 60). BT.drawRectFill(new Rect2i(110, 90, 20, 20), YELLOW);
// Draw a line crossing the viewport. // World (50, 30) -> screen (0, 0) to world (370, 270) -> screen (320, 240). BT.drawLine(new Vector2i(50, 30), new Vector2i(370, 270), WHITE);
// Draw a rect outline at the edge of the viewport. BT.drawRect(new Rect2i(55, 35, 260, 200), CYAN);
// Reset camera after drawing. BT.cameraReset();
window.__RENDER_COMPLETE__ = true; } }
bootstrap(CameraTest, { onError: () => { window.__INIT_FAILED__ = true; }, }); </script></body>
</html>