/**
* Primitives Demo - shows all the basic shapes you can draw with BLIT386.
* @description Every basic shape BLIT386 can draw: pixels, lines, rectangles, and the filled and outlined variants.
*
* Prerequisites: Basics - https://demos.blit386.dev/basics
* Live version: https://demos.blit386.dev/primitives
*
* "Primitives" means the simplest building blocks of drawing:
* pixels (single dots), lines, rectangles, and filled rectangles.
* This demo shows each one with a live animation so you can see them in action.
*
* update() advances animTicks (logical time). render() reads animTicks to spin and slide shapes.
* FPS and tick stats appear in the engine overlay automatically - this file does not draw them.
* The amber section captions are drawn with the shared UI kit (src/shared/ui.js), so they
* look the same as the text in every other demo of the series.
*/
import { function bootstrap(DemoClass: DemoConstructor, options?: BootstrapOptions): Promise<boolean>One-liner bootstrap function for BLIT386 demos.
Handles canvas retrieval and engine initialization. Backend selection
(WebGPU or software fallback) is managed internally by BTAPI.
This function provides a streamlined way to start a demo with sensible defaults
while allowing customization through options.bootstrap, const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
class Color32Mutable 32-bit RGBA color value with 8-bit channels.Color32, class Rect2iInteger rectangle for pixel-perfect bounds and regions.
Used throughout the engine for sprite regions, display-space bounds, and
zero-allocation geometry helpers. Both convenience getters and allocation-free
`*To()` helpers are provided so callers can choose between readability and
hot-path efficiency.Rect2i, class Vector2iInteger 2D vector for pixel-perfect positioning.
Used for points, sizes, directions, and camera offsets throughout the engine.
The API includes both allocation-free `*To()` / `*InPlace()` variants and
convenience methods that return new vectors.Vector2i } from 'blit386';
// The shared demo UI kit: applyTheme() installs the series' standard UI colors into the
// palette, and ui.caption() prints the section captions with them. We met the kit in the
// Basics demo: https://demos.blit386.dev/basics
import { import applyThemeapplyTheme, import uiui } from './shared/ui.js';
/** @typedef {import('blit386').IBTDemo} IBTDemo */
/** @typedef {import('blit386').HardwareSettings} HardwareSettings */
/** @typedef {import('blit386').Palette} Palette */
// Every color used for drawing is pre-registered in a numbered palette slot.
// Think of each slot like a labeled jar of paint on an art shelf.
// Index 0 is always transparent (invisible). Custom colors start at 1.
// (Slot 3 is intentionally skipped: it used to hold the caption amber, but the
// captions now come from the shared UI theme in slots 240-251 instead.)
const const C_WHITE: 1C_WHITE = 1; // Pure white: the spinning line and the overlay bar
const const C_BG: 2C_BG = 2; // Dark blue-gray: background and the clearRect erase color
const const C_RED: 4C_RED = 4; // Red: first rectangle in each row
const const C_GREEN: 5C_GREEN = 5; // Green: second rectangle in each row
const const C_BLUE: 6C_BLUE = 6; // Blue: third rectangle in each row
const const C_YELLOW: 7C_YELLOW = 7; // Yellow: the pulsing and sliding rectangles
const const C_CYAN: 8C_CYAN = 8; // Cyan (bright blue-green): sine wave graph line
const const C_GRAY_BORDER: 9C_GRAY_BORDER = 9; // Gray: the graph outline border
const const C_DARK: 10C_DARK = 10; // Very dark blue: graph background fill
const const C_STEEL: 11C_STEEL = 11; // Steel blue: background squares in the clearRect grid
// Dynamic palette slots for the rainbow pixel animation.
// Each animated pixel needs its own slot so they can all be different colors.
// update() will compute and store each pixel's current color in slots 20..69 every tick.
// render() then simply passes the slot number to BT.drawPixel() - no Color32 needed there!
const const C_PIXEL_BASE: 20C_PIXEL_BASE = 20; // slot for pixel 0 = 20, pixel 1 = 21, ... last pixel = 20 + PIXEL_COUNT - 1
// How many rainbow pixels renderPixel() draws. init(), update(), and renderPixel() all loop
// over this same count, so it lives in one place instead of three repeated "50"s.
const const PIXEL_COUNT: 50PIXEL_COUNT = 50;
/**
* Demonstrates all primitive drawing operations with animated examples.
* Each section shows a different drawing function in action with real-time animation.
*
* @implements {IBTDemo}
*/
class class DemoDemonstrates all primitive drawing operations with animated examples.
Each section shows a different drawing function in action with real-time animation.Demo {
// animTicks counts how many update ticks have passed since the demo started.
// We use it to make things move and change over time.
Demo.animTicks: numberanimTicks = 0;
// palette holds all the colors this demo uses.
/** @type {Palette | null} */
Demo.palette: Palette | nullpalette = null;
// theme remembers which palette slots the shared UI kit colors landed in.
// applyTheme() in init() fills it with a map like { bg, text, dim, header, ... }.
Demo.theme: nulltheme = null;
/**
* Optional engine settings. We keep the default 320x240 screen and show the
* palette grid in the overlay with 24 swatches per row and 3 visible rows.
*
* @returns {Partial<HardwareSettings>}
*/
Demo.configure(): Partial<HardwareSettings>Optional engine settings. We keep the default 320x240 screen and show the
palette grid in the overlay with 24 swatches per row and 3 visible rows.configure() {
return {
isOverlayPaletteEnabled: booleanisOverlayPaletteEnabled: true,
overlayPaletteColumns: numberoverlayPaletteColumns: 24,
overlayPaletteRowsVisible: numberoverlayPaletteRowsVisible: 3,
isOverlayVisibleAtStart: booleanisOverlayVisibleAtStart: true,
overlayStyle: {
barPaletteIndex: number;
textPaletteIndex: number;
gapPaletteIndex: number;
}
barPaletteIndex: numberbarPaletteIndex: const C_WHITE: 1C_WHITE,
textPaletteIndex: numbertextPaletteIndex: const C_DARK: 10C_DARK,
gapPaletteIndex: numbergapPaletteIndex: const C_BG: 2C_BG,
},
};
}
/**
* Runs once when the demo starts. Sets up the palette.
*
* @returns {Promise<boolean>} Returns true when everything is ready.
*/
async Demo.init(): Promise<boolean>Runs once when the demo starts. Sets up the palette.init() {
// Set up the color palette
// We pick all the colors we need BEFORE drawing anything - like an artist
// squeezing paint onto a palette before picking up the brush.
this.Demo.palette: Palette | nullpalette = const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
paletteCreate: (size?: number) => PaletteCreates a standalone palette instance.paletteCreate(256);
// Static colors (these never change from frame to frame).
this.Demo.palette: Palettepalette.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.set(const C_WHITE: 1C_WHITE, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(255, 255, 255)); // pure white
this.Demo.palette: Palettepalette.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.set(const C_BG: 2C_BG, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(40, 50, 80)); // dark blue-gray background
this.Demo.palette: Palettepalette.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.set(const C_RED: 4C_RED, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(255, 100, 100)); // red shapes
this.Demo.palette: Palettepalette.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.set(const C_GREEN: 5C_GREEN, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(100, 255, 100)); // green shapes
this.Demo.palette: Palettepalette.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.set(const C_BLUE: 6C_BLUE, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(100, 100, 255)); // blue shapes
this.Demo.palette: Palettepalette.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.set(const C_YELLOW: 7C_YELLOW, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(255, 255, 100)); // yellow pulsing/sliding shapes
this.Demo.palette: Palettepalette.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.set(const C_CYAN: 8C_CYAN, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(100, 255, 255)); // cyan sine wave line
this.Demo.palette: Palettepalette.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.set(const C_GRAY_BORDER: 9C_GRAY_BORDER, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(100, 100, 100)); // graph border gray
this.Demo.palette: Palettepalette.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.set(const C_DARK: 10C_DARK, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(10, 15, 25)); // very dark background for graph area
this.Demo.palette: Palettepalette.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.set(const C_STEEL: 11C_STEEL, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(100, 150, 200)); // steel blue clearRect grid squares
// Pre-fill the rainbow pixel slots with a placeholder color so no slot is empty
// on the very first frame (before update() has run for the first time).
for (let let i: numberi = 0; let i: numberi < const PIXEL_COUNT: 50PIXEL_COUNT; let i: numberi++) {
this.Demo.palette: Palettepalette.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.set(const C_PIXEL_BASE: 20C_PIXEL_BASE + let i: numberi, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(128, 128, 128)); // start as gray
}
// Install the shared UI theme. It writes the series' twelve standard UI colors
// into high palette slots (240-251), far away from our scene slots (1-11) and the
// animated rainbow slots (20-69). The section captions draw with these colors.
// This must happen BEFORE BT.paletteSet() below so the colors are included.
this.Demo.theme: nulltheme = import applyThemeapplyTheme(this.Demo.palette: Palettepalette);
// Tell the engine "use this palette from now on."
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
paletteSet: (palette: Palette) => voidStores the active engine palette.
Use this to swap the **entire palette** (e.g. switch between a day and night
theme). After this call the renderer uploads the new palette uniform on the
next frame.
**Palette-value swap (change what a slot looks like):** mutate the live
{@link
BT.palette
}
in place with `palette.set(slot, newColor)`. The renderer
uploads dirty slots on the next frame; no `paletteSet()` or
{@link
BT.spritesRefresh
}
needed.
**Palette-layout swap (same colors, different slot positions):** build a new
palette with the same colors at new indices, call `paletteSet()`, then call
{@link
BT.spritesRefresh
}
so every sprite sheet re-maps its original RGBA
pixels against the new slot layout.paletteSet(this.Demo.palette: Palettepalette);
return true;
}
/**
* Runs at a fixed rate (60 times per second). See the Basics demo for the full explanation:
* https://demos.blit386.dev/basics
* We count ticks AND pre-compute the rainbow pixel colors here so render() stays fast.
*/
Demo.update(): voidRuns at a fixed rate (60 times per second). See the Basics demo for the full explanation:
https://demos.blit386.dev/basics
We count ticks AND pre-compute the rainbow pixel colors here so render() stays fast.update() {
// Add 1 each time update() runs. animTicks counts update ticks, not screen refreshes.
// After 1 second at 60 update ticks per second, animTicks will be 60.
this.Demo.animTicks: numberanimTicks++;
// Pre-compute the rainbow pixel colors
// Each animated pixel gets a different hue, and the whole rainbow
// rotates forward by animTicks so it appears to cycle over time.
// We compute the color here in update() and store it in the palette so that
// render() can just say "use slot 20", "use slot 21", etc.
// This keeps ALL color math out of render() - the "palette animation" technique.
for (let let i: numberi = 0; let i: numberi < const PIXEL_COUNT: 50PIXEL_COUNT; let i: numberi++) {
// hue is a position on the color wheel (0 = red, 120 = green, 240 = blue, 360 = back to red).
// Multiplying i by 17 applies a 17-degree stride on the wheel - the sequence wraps
// several times across the PIXEL_COUNT pixels, which makes a denser rainbow than
// spacing hues evenly once around the circle.
// Adding animTicks makes the whole rainbow rotate forward each tick.
// The % 360 keeps the value inside 0-359 (it wraps around like a clock).
const const hue: numberhue = (let i: numberi * 17 + this.Demo.animTicks: numberanimTicks) % 360;
// Color32.fromHSL(hue, saturation, lightness) converts the hue to an RGB color.
// Saturation=100 means fully vivid, Lightness=50 means a medium brightness.
const const color: Color32color = class Color32Mutable 32-bit RGBA color value with 8-bit channels.Color32.Color32.fromHSL(h: number, s: number, l: number, a?: number): Color32Creates a color from HSL values.fromHSL(const hue: numberhue, 100, 50);
// Store this pixel's current color in its reserved palette slot.
this.Demo.palette: Palette | nullpalette.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.set(const C_PIXEL_BASE: 20C_PIXEL_BASE + let i: numberi, const color: Color32color);
}
}
/**
* Runs once per screen refresh to draw everything on screen.
* Each helper method draws one type of primitive in its own section.
*/
Demo.render(): voidRuns once per screen refresh to draw everything on screen.
Each helper method draws one type of primitive in its own section.render() {
// Fill the whole screen with the dark background to start fresh each frame.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
clear: (paletteIndex: number) => voidSets the frame clear color using a palette index.
The renderer uses this color when clearing the full display at the start
of the next frame.clear(const C_BG: 2C_BG);
// Draw each type of primitive in its own area of the screen.
this.Demo.renderPixel(): voidShows how BT.drawPixel() works - it draws a single colored dot.
We draw a scattered pattern of dots, each with a different rainbow color.
The colors shift over time because update() rotates them each tick.renderPixel();
this.Demo.renderLine(): voidShows how BT.drawLine() works - it draws a straight line between two points.
We show three static lines (horizontal, vertical, diagonal) plus one that spins.renderLine();
this.Demo.renderRectOutline(): voidShows how BT.drawRect() works - it draws just the border of a rectangle (hollow).
We draw three static rectangles in different colors plus one that pulses in size.renderRectOutline();
this.Demo.renderRectFill(): voidShows how BT.drawRectFill() works - it fills a rectangle with solid color.
Same as the outline demo but these rectangles are filled in.renderRectFill();
this.Demo.renderClearRect(): voidShows how BT.clearRect() works - it erases a rectangle back to a specific color.
We first draw a grid of blue squares, then erase a moving rectangular chunk.
The erased area reveals the background color underneath. Like drawRect(), it takes
the rectangle first and the color index second - it just "paints over" instead of
drawing an outline or fill.renderClearRect();
this.Demo.renderCombined(): voidShows multiple primitives working together to draw a sine wave graph.
A filled rectangle for the background, an outline for the border,
and lines that trace a wave across the graph.renderCombined();
}
/**
* Shows how BT.drawPixel() works - it draws a single colored dot.
* We draw a scattered pattern of dots, each with a different rainbow color.
* The colors shift over time because update() rotates them each tick.
*/
Demo.renderPixel(): voidShows how BT.drawPixel() works - it draws a single colored dot.
We draw a scattered pattern of dots, each with a different rainbow color.
The colors shift over time because update() rotates them each tick.renderPixel() {
const const anchor: Vector2ianchor = new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(10, 7);
// Print the section caption with ui.caption() from the shared UI kit. Every demo
// in the series uses this same widget, so all captions look identical everywhere.
import uiui.caption(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y, 'Pixels');
// Draw the pixels scattered across a small area.
// The colors were already computed in update() and stored in palette slots 20..69.
// Here we just pass the slot index number - no Color32 math needed in render()!
for (let let i: numberi = 0; let i: numberi < const PIXEL_COUNT: 50PIXEL_COUNT; let i: numberi++) {
// Use a formula to spread the pixels out so they don't all overlap.
// Multiplying by 13 and 7 spreads them without an obvious pattern.
const const x: numberx = const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + ((let i: numberi * 13) % 60);
const const y: numbery = const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + ((let i: numberi * 7) % 20) + 15;
const const pos: Vector2ipos = new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const x: numberx, const y: numbery);
// C_PIXEL_BASE + i is the palette slot for pixel i (slot 20, 21, ..., 69).
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawPixel: (posOrX: Vector2i | number, yOrColor: number, maybeColor?: number) => voidDraws a single pixel.
Accepts either:
- `(posOrX: Vector2i, yOrColor: number)` where `yOrColor` is the palette index.
- `(posOrX: number, yOrColor: number, maybeColor: number)` for `(x, y, paletteIndex)`.drawPixel(const pos: Vector2ipos, const C_PIXEL_BASE: 20C_PIXEL_BASE + let i: numberi);
}
}
/**
* Shows how BT.drawLine() works - it draws a straight line between two points.
* We show three static lines (horizontal, vertical, diagonal) plus one that spins.
*/
Demo.renderLine(): voidShows how BT.drawLine() works - it draws a straight line between two points.
We show three static lines (horizontal, vertical, diagonal) plus one that spins.renderLine() {
const const anchor: Vector2ianchor = new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(10, 75);
import uiui.caption(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y, 'Lines');
// A horizontal line goes straight left-to-right. Color: red.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawLine: (p0: Vector2i, p1: Vector2i, paletteIndex: number) => voidDraws a pixel-perfect line between two points.
Uses rasterized line drawing without antialiasing.drawLine(new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 15), new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + 60, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 15), const C_RED: 4C_RED);
// A vertical line goes straight up-and-down. Color: green.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawLine: (p0: Vector2i, p1: Vector2i, paletteIndex: number) => voidDraws a pixel-perfect line between two points.
Uses rasterized line drawing without antialiasing.drawLine(new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + 10, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 20), new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + 10, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 40), const C_GREEN: 5C_GREEN);
// A diagonal line goes from top-left to bottom-right. Color: blue.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawLine: (p0: Vector2i, p1: Vector2i, paletteIndex: number) => voidDraws a pixel-perfect line between two points.
Uses rasterized line drawing without antialiasing.drawLine(new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + 20, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 20), new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + 50, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 40), const C_BLUE: 6C_BLUE);
// A spinning line that rotates from the center point.
// Math.PI * 2 is a full circle in radians. We divide by 180 to convert
// from degrees (which are easier to think about) to radians (what Math uses).
const const angle: numberangle = (this.Demo.animTicks: numberanimTicks * 2 * Math.PI) / 180;
// The center of the spinning line.
const const centerX: numbercenterX = const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + 40;
const const centerY: numbercenterY = const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 30;
const const radius: 15radius = 15;
// Math.cos and Math.sin convert an angle into X and Y distances.
// Adding them to centerX/Y gives us the end point of the line.
const const endX: numberendX = const centerX: numbercenterX + Math.cos(const angle: numberangle) * const radius: 15radius;
const const endY: numberendY = const centerY: numbercenterY + Math.sin(const angle: numberangle) * const radius: 15radius;
// Draw the spinning white line from center to the calculated end point.
// Math.floor rounds the floating-point result down to a whole pixel number.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawLine: (p0: Vector2i, p1: Vector2i, paletteIndex: number) => voidDraws a pixel-perfect line between two points.
Uses rasterized line drawing without antialiasing.drawLine(new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const centerX: numbercenterX, const centerY: numbercenterY), new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(Math.floor(const endX: numberendX), Math.floor(const endY: numberendY)), const C_WHITE: 1C_WHITE);
}
/**
* Shows how BT.drawRect() works - it draws just the border of a rectangle (hollow).
* We draw three static rectangles in different colors plus one that pulses in size.
*/
Demo.renderRectOutline(): voidShows how BT.drawRect() works - it draws just the border of a rectangle (hollow).
We draw three static rectangles in different colors plus one that pulses in size.renderRectOutline() {
const const anchor: Vector2ianchor = new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(90, 30);
import uiui.caption(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y, 'Rect Outlines');
// Three rectangles with different colors. Rect2i takes (x, y, width, height).
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRect: (rect: Rect2i, paletteIndex: number) => voidDraws an unfilled rectangle outline.drawRect(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 15, 40, 25), const C_RED: 4C_RED); // Red outline.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRect: (rect: Rect2i, paletteIndex: number) => voidDraws an unfilled rectangle outline.drawRect(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + 50, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 15, 30, 30), const C_GREEN: 5C_GREEN); // Green outline.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRect: (rect: Rect2i, paletteIndex: number) => voidDraws an unfilled rectangle outline.drawRect(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + 90, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 15, 25, 35), const C_BLUE: 6C_BLUE); // Blue outline.
// A yellow rectangle that pulses - it grows and shrinks over time.
// Math.sin goes smoothly between -1 and +1, so adding 10 to 5*sin gives
// a size that oscillates between 5 and 15. Math.floor rounds to whole pixels.
const const pulse: anypulse = Math.floor(10 + Math.sin(this.Demo.animTicks: numberanimTicks * 0.1) * 5);
// Draw a square using pulse as both the width and height.
// We multiply by 2 so the pulsing is more visible.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRect: (rect: Rect2i, paletteIndex: number) => voidDraws an unfilled rectangle outline.drawRect(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + 130, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 15, const pulse: anypulse * 2, const pulse: anypulse * 2), const C_YELLOW: 7C_YELLOW);
}
/**
* Shows how BT.drawRectFill() works - it fills a rectangle with solid color.
* Same as the outline demo but these rectangles are filled in.
*/
Demo.renderRectFill(): voidShows how BT.drawRectFill() works - it fills a rectangle with solid color.
Same as the outline demo but these rectangles are filled in.renderRectFill() {
const const anchor: Vector2ianchor = new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(90, 90);
import uiui.caption(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y, 'Rect Fills');
// Three filled rectangles in different colors.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 15, 40, 25), const C_RED: 4C_RED); // Red fill.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + 50, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 15, 30, 30), const C_GREEN: 5C_GREEN); // Green fill.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + 90, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 15, 25, 35), const C_BLUE: 6C_BLUE); // Blue fill.
// A yellow square that slides back and forth.
// Math.sin oscillates between -1 and 1. Multiplying by 20 makes it slide
// 20 pixels left and right from the starting position (anchor.x + 130).
const const slideX: anyslideX = const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + 130 + Math.floor(Math.sin(this.Demo.animTicks: numberanimTicks * 0.05) * 20);
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(const slideX: anyslideX, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 15, 20, 20), const C_YELLOW: 7C_YELLOW);
}
/**
* Shows how BT.clearRect() works - it erases a rectangle back to a specific color.
* We first draw a grid of blue squares, then erase a moving rectangular chunk.
* The erased area reveals the background color underneath. Like drawRect(), it takes
* the rectangle first and the color index second - it just "paints over" instead of
* drawing an outline or fill.
*/
Demo.renderClearRect(): voidShows how BT.clearRect() works - it erases a rectangle back to a specific color.
We first draw a grid of blue squares, then erase a moving rectangular chunk.
The erased area reveals the background color underneath. Like drawRect(), it takes
the rectangle first and the color index second - it just "paints over" instead of
drawing an outline or fill.renderClearRect() {
const const anchor: Vector2ianchor = new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(10, 135);
import uiui.caption(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y, 'Clear Rect');
// Draw a background grid of steel-blue squares.
// The outer loop goes across (i = 0 to 9), the inner loop goes down (j = 0 to 4).
for (let let i: numberi = 0; let i: numberi < 10; let i: numberi++) {
for (let let j: numberj = 0; let j: numberj < 5; let j: numberj++) {
// Each square is 8x8 pixels with a 2-pixel gap (placed every 10 pixels).
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + let i: numberi * 10, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 15 + let j: numberj * 10, 8, 8), const C_STEEL: 11C_STEEL);
}
}
// Calculate a moving X position for the clear area.
// It slides between anchor.x + 5 and anchor.x + 35 (oscillating around anchor.x + 20).
const const clearX: anyclearX = const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x + 20 + Math.floor(Math.sin(this.Demo.animTicks: numberanimTicks * 0.03) * 15);
// Erase a 40x30 rectangle back to the background color.
// This makes it look like a window is moving across the grid.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
clearRect: (rect: Rect2i, paletteIndex: number) => voidFills a rectangular display region with a palette-indexed color.clearRect(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(const clearX: anyclearX, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 25, 40, 30), const C_BG: 2C_BG);
}
/**
* Shows multiple primitives working together to draw a sine wave graph.
* A filled rectangle for the background, an outline for the border,
* and lines that trace a wave across the graph.
*/
Demo.renderCombined(): voidShows multiple primitives working together to draw a sine wave graph.
A filled rectangle for the background, an outline for the border,
and lines that trace a wave across the graph.renderCombined() {
const const anchor: Vector2ianchor = new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(130, 165);
import uiui.caption(const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x, const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y, 'Combined');
// The graph's position and size on screen (offset from the section anchor).
const const graphX: numbergraphX = const anchor: Vector2ianchor.Vector2i.x: numberHorizontal component (defaults to 0).x;
const const graphY: numbergraphY = const anchor: Vector2ianchor.Vector2i.y: numberVertical component (defaults to 0).y + 15;
const const graphW: 180graphW = 180;
const const graphH: 50graphH = 50;
// Fill the graph area with a very dark color so the wave stands out.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(const graphX: numbergraphX, const graphY: numbergraphY, const graphW: 180graphW, const graphH: 50graphH), const C_DARK: 10C_DARK);
// Draw a gray border around the graph.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRect: (rect: Rect2i, paletteIndex: number) => voidDraws an unfilled rectangle outline.drawRect(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(const graphX: numbergraphX, const graphY: numbergraphY, const graphW: 180graphW, const graphH: 50graphH), const C_GRAY_BORDER: 9C_GRAY_BORDER);
// Draw the animated sine wave by connecting small line segments.
// We go across the graph one pixel at a time and calculate the wave height.
for (let let x: numberx = 0; let x: numberx < const graphW: 180graphW - 1; let x: numberx++) {
// Math.sin produces a wave. Adding animTicks makes it scroll.
// Multiplying by 0.1 controls how fast the wave oscillates horizontally.
// Multiplying by graphH/3 controls how tall the wave is.
const const y1: anyy1 = Math.floor(const graphH: 50graphH / 2 + Math.sin((let x: numberx + this.Demo.animTicks: numberanimTicks) * 0.1) * (const graphH: 50graphH / 3));
const const y2: anyy2 = Math.floor(const graphH: 50graphH / 2 + Math.sin((let x: numberx + 1 + this.Demo.animTicks: numberanimTicks) * 0.1) * (const graphH: 50graphH / 3));
// Connect the current point to the next point with a cyan line.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawLine: (p0: Vector2i, p1: Vector2i, paletteIndex: number) => voidDraws a pixel-perfect line between two points.
Uses rasterized line drawing without antialiasing.drawLine(new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const graphX: numbergraphX + let x: numberx, const graphY: numbergraphY + const y1: anyy1), new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const graphX: numbergraphX + let x: numberx + 1, const graphY: numbergraphY + const y2: anyy2), const C_CYAN: 8C_CYAN);
}
}
}
// Hand the Demo class to the BLIT386 engine to start running it.
function bootstrap(DemoClass: DemoConstructor, options?: BootstrapOptions): Promise<boolean>One-liner bootstrap function for BLIT386 demos.
Handles canvas retrieval and engine initialization. Backend selection
(WebGPU or software fallback) is managed internally by BTAPI.
This function provides a streamlined way to start a demo with sensible defaults
while allowing customization through options.bootstrap(class DemoDemonstrates all primitive drawing operations with animated examples.
Each section shows a different drawing function in action with real-time animation.Demo);