/*
Primitives: every basic shape BLIT386 can draw, each with a small animation.
@description Every basic shape BLIT386 can draw: pixels, lines, rectangles, and the filled and outlined variants.
Part of the BLIT386 demo series.
Prerequisites:
- Basics: https://demos.blit386.dev/basics
Live version: https://demos.blit386.dev/primitives
Guides:
- Palette: https://blit386.dev/docs/guides/palette#draw-using-absolute-palette-indices
- Overlay: https://blit386.dev/docs/guides/overlay#optional-bands
Reference:
- Rendering: https://blit386.dev/docs/api/rendering#primitives
- Core types: https://blit386.dev/docs/api/core-types#color32
---
WHAT YOU WILL SEE
-----------------
Six captioned sections on a dark blue-gray screen, each showing one drawing call:
- Pixels: fifty scattered dots whose colors cycle through the rainbow.
- Lines: a red horizontal, a green vertical, and a blue diagonal line, plus a white line
spinning around a center point.
- Rect Outlines: red, green, and blue hollow rectangles, plus a yellow square that
grows and shrinks.
- Rect Fills: the same three rectangles filled in, plus a yellow square sliding
left and right.
- Clear Rect: a grid of steel-blue squares with a moving window erased out of it.
- Combined: a dark graph box with a gray border and a scrolling cyan sine wave inside.
The engine overlay is open from the start, with the palette grid showing 24 slots per row
and 3 rows at a time.
WHAT YOU WILL LEARN
-------------------
- "Primitives" are the simplest building blocks of drawing: single dots,
lines, and rectangles.
- BT.drawPixel(pos, slot), BT.drawLine(p0, p1, slot), BT.drawRect(rect, slot),
BT.drawRectFill(rect, slot), and BT.clearRect(rect, slot). Every call takes a palette
slot number, never a Color32.
- Rect2i(x, y, width, height) describes a rectangle; Vector2i(x, y) a point.
- Animating in update() with a tick counter, then reading it in render() to spin, pulse,
and slide shapes. Math.sin() and Math.cos() turn the counter into smooth motion.
- "Palette animation": update() computes fifty rainbow colors with Color32.fromHSL() and
writes them into palette slots 20-69, so render() only passes slot numbers.
- Section captions with the shared UI kit's ui.caption(x, y, text).
TRY THIS
--------
- The overlay is already open. Watch slots 20-69 in its palette grid at the bottom: they
cycle through the rainbow in step with the dots in the Pixels section.
- Press the backquote key (`) or click/tap the symbol in the bottom-left corner to hide
the overlay and see the whole screen.
*/
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;
... 124 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').Palette} Palette */
// Every color we draw with is registered first in a numbered palette slot. Think of each
// slot as a labeled jar of paint on a shelf. Slot 0 is always transparent (invisible), so
// our colors start at 1. Slot 3 is left unused.
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 squares
const const C_CYAN: 8C_CYAN = 8; // cyan (bright blue-green): the sine wave line
const const C_GRAY_BORDER: 9C_GRAY_BORDER = 9; // gray: the graph outline
const const C_DARK: 10C_DARK = 10; // very dark blue: graph background and overlay text
const const C_STEEL: 11C_STEEL = 11; // steel blue: the squares in the clearRect grid
// Animated palette slots for the rainbow pixels. Each pixel needs its own slot so they
// can all be different colors. update() stores each pixel's current color in slots
// 20-69 every tick, and render() just passes the slot number to BT.drawPixel() - no
// Color32 needed there.
const const C_PIXEL_BASE: 20C_PIXEL_BASE = 20; // pixel 0 uses slot 20, pixel 1 slot 21, ... pixel 49 slot 69
// How many rainbow pixels there are. init(), update(), and renderPixel() all loop over
// this same count, so it lives in one place instead of three repeated 50s.
const const PIXEL_COUNT: 50PIXEL_COUNT = 50;
// Shows every primitive drawing call, each in its own captioned section with
// a small animation.
class class DemoDemo {
// How many update ticks have passed since the demo started. Everything that moves
// reads this number.
Demo.animTicks: numberanimTicks = 0;
// The palette holding every color this demo uses.
/** @type {Palette | null} */
Demo.palette: Palette | nullpalette = null;
// Palette slot map for the shared UI kit theme, filled in init() by applyTheme(): a
// map like { bg, text, dim, header, ... } of slot numbers.
Demo.theme: nulltheme = null;
// Optional engine settings. We keep the default 320x240 screen, open the overlay from
// the start, and show its palette grid with 24 chips per row and 3 visible rows.
Demo.configure(): {
isOverlayPaletteEnabled: boolean;
overlayPaletteColumns: number;
overlayPaletteRowsVisible: number;
isOverlayVisibleAtStart: boolean;
overlayStyle: {
barPaletteIndex: number;
textPaletteIndex: number;
gapPaletteIndex: number;
};
}
isOverlayPaletteEnabled: booleanisOverlayPaletteEnabled: true,
overlayPaletteColumns: numberoverlayPaletteColumns: 24,
overlayPaletteRowsVisible: numberoverlayPaletteRowsVisible: 3,
isOverlayVisibleAtStart: booleanisOverlayVisibleAtStart: true,
// The overlay bars draw in white with very dark text, and the gaps between
// bars in the background color.
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 and sets up the palette.
async Demo.init(): unknowninit() {
// 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;
... 124 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 moving squares
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 graph background
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 grid squares
// Pre-fill the rainbow pixel slots with gray so no slot is empty on the very
// first frame, before update() has run.
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 gray
}
// Install the shared UI theme. It writes the series' twelve standard UI
// colors into high palette slots (240-251), far 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
// go live with the palette.
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;
... 124 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 (the engine default). 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(): voidupdate() {
// Add 1 each time update() runs. animTicks counts update ticks, not screen
// refreshes, so after one second it is 60.
this.Demo.animTicks: numberanimTicks++;
// Pre-compute the rainbow pixel colors. Each pixel gets a different hue, and the
// whole rainbow shifts forward by animTicks so it cycles over time. We do the
// color math here and store the result in the palette, so render() can just say
// "use slot 20", "use slot 21", and so on. 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 is red, 120 green, 240 blue, 360
// back to red. Multiplying i by 17 steps 17 degrees per pixel, so the
// sequence wraps around the wheel a few times across the fifty pixels - a
// denser rainbow than one even sweep. Adding animTicks rotates the whole
// rainbow each tick, and % 360 (the remainder after dividing by 360) keeps
// the value inside 0-359, like a clock wrapping past 12.
const const hue: numberhue = (let i: numberi * 17 + this.Demo.animTicks: numberanimTicks) % 360;
// Color32.fromHSL(hue, saturation, lightness) turns the hue into an RGB
// color. Saturation 100 is fully vivid, lightness 50 is 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. Each helper method draws one type
// of primitive in its own section.
Demo.render(): voidrender() {
// 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;
... 124 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(): voidrenderPixel();
this.Demo.renderLine(): voidrenderLine();
this.Demo.renderRectOutline(): voidrenderRectOutline();
this.Demo.renderRectFill(): voidrenderRectFill();
this.Demo.renderClearRect(): voidrenderClearRect();
this.Demo.renderCombined(): voidrenderCombined();
}
// Shows BT.drawPixel(): one colored dot. We scatter fifty dots, each in a different
// rainbow color. The colors shift over time because update() rotates them each tick.
Demo.renderPixel(): voidrenderPixel() {
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 dots scattered across a small area. Their colors were already
// computed in update() and stored in palette slots 20-69, so here we only
// pass slot numbers.
for (let let i: numberi = 0; let i: numberi < const PIXEL_COUNT: 50PIXEL_COUNT; let i: numberi++) {
// A formula spreads the dots out so they do not all overlap. Multiplying by
// 13 and 7 scatters them without an obvious pattern; % 60 and % 20 keep them
// inside a 60x20 box.
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;
... 124 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 BT.drawLine(): a straight line between two points. Three static lines
// (horizontal, vertical, diagonal) plus one that spins.
Demo.renderLine(): voidrenderLine() {
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;
... 124 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;
... 124 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;
... 124 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 turns 2 degrees per tick. Math.sin and Math.cos want the
// angle in radians, not degrees: a full circle is 2 * Math.PI radians, or 360
// degrees, so multiplying degrees by Math.PI / 180 converts them.
const const angle: numberangle = (this.Demo.animTicks: numberanimTicks * 2 * Math.PI) / 180;
// The center of the spinning line and how long it is.
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 turn the angle into horizontal and vertical distances.
// Adding them to the center gives the far end 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 white line from the center to the far end. Math.floor rounds the
// decimal result down to a whole pixel.
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;
... 124 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 BT.drawRect(): just the border of a rectangle, hollow inside. Three static
// rectangles in different colors plus a square that pulses in size.
Demo.renderRectOutline(): voidrenderRectOutline() {
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 in 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;
... 124 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);
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;
... 124 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);
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;
... 124 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);
// A yellow square that grows and shrinks. Math.sin swings smoothly between -1 and
// +1, so 10 + 5 * sin swings 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);
// Use pulse as both width and height, doubled so the pulsing is easier to see:
// the square swings between 10x10 and 30x30.
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;
... 124 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 BT.drawRectFill(): a rectangle filled with solid color. Same layout as the
// outlines above, but filled in.
Demo.renderRectFill(): voidrenderRectFill() {
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;
... 124 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);
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;
... 124 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);
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;
... 124 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);
// A yellow square that slides back and forth. Math.sin swings between -1 and 1;
// multiplying by 20 slides the square 20 pixels left and right of 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;
... 124 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 BT.clearRect(): erases a rectangle back to one color. We draw a grid of
// steel-blue squares, then erase a moving rectangular chunk, which shows the
// background color underneath. Like drawRect(), it takes the rectangle first and the
// slot second - it just paints over instead of drawing an outline or fill.
Demo.renderClearRect(): voidrenderClearRect() {
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 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 (one square
// 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;
... 124 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);
}
}
// A moving X position for the erased area. It swings between anchor.x + 5 and
// anchor.x + 35, centered on 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, like a window sliding
// 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;
... 124 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 several primitives working together as a sine wave graph: a filled rectangle
// for the background, an outline for the border, and short lines tracing the wave.
Demo.renderCombined(): voidrenderCombined() {
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;
... 124 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;
... 124 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 scrolling wave by connecting short line segments: walk across
// the graph one pixel at a time and work out the wave height at this column
// and the next.
for (let let x: numberx = 0; let x: numberx < const graphW: 180graphW - 1; let x: numberx++) {
// Math.sin produces the wave. Adding animTicks makes it scroll; multiplying
// by 0.1 sets how tightly it wiggles; multiplying by graphH / 3 sets how
// tall it 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 this column's point to the next one 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;
... 124 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 DemoDemo);