/*
Palette Fade: smooth color transitions and flash effects.
@description Smooth color transitions and flash effects: fade a palette toward a target color and snap it back.
Part of the BLIT386 demo series.
Prerequisites:
- Basics: https://demos.blit386.dev/basics
- Primitives: https://demos.blit386.dev/primitives
- Palette Animation: https://demos.blit386.dev/palette-animation
Live version: https://demos.blit386.dev/palette-fade
Guides:
- Palette: https://blit386.dev/docs/guides/palette#runtime-palette-effects
- Overlay: https://blit386.dev/docs/guides/overlay#custom-rows
Reference:
- Palette: https://blit386.dev/docs/api/palette#palette-effects
- Easing: https://blit386.dev/docs/api/easing#curves
- Overlay: https://blit386.dev/docs/api/overlay#event-tags
---
WHAT YOU WILL SEE
-----------------
A pixel-art landscape: two bands of sky, three clouds, three mountains with lighter tops,
a square sun, two bands of ground, four trees, and a scatter of two-color flowers. Nothing
in the picture moves. Instead the whole scene changes color as the demo loops through six
phases:
1. Day - hold for 3 seconds.
2. Fade to night - 2 seconds, ease-in-out.
3. Night - hold for 3 seconds.
4. Lightning flash - every color turns white for 200 ms, then snaps back.
5. Night again - hold for 2 seconds.
6. Dawn - 2 seconds fading back to day, ease-out.
Then it starts over. A small UI kit panel in the top-left corner names the current phase.
The same label also appears as a custom row in the engine overlay, and each fade or flash
drops a tag on the overlay's timing chart.
WHAT YOU WILL LEARN
-------------------
- BT.paletteFade(target, durationMs, easing) blends the active palette toward a target
palette over time.
- BT.paletteFlash(color, durationMs) flashes one color and then restores the palette.
- Easing names: 'ease-in-out' for the dusk fade, 'ease-out' for the dawn fade.
- Palette effects run inside the engine once per tick, right after update(). render()
keeps drawing with the same palette indices and never passes new colors.
- Building a scene from a fixed set of palette slots, with separate day and night Palette
objects as fade targets.
- A tick-driven state machine: BT.ticks, a phase table, and a once-per-phase trigger flag.
- A custom overlay row via overlayRows() and timing-chart tags via BT.assignTag().
WHAT IS A PALETTE FADE?
-----------------------
Imagine two sets of paint buckets: one for a sunny day, one for a dark night. A palette
fade gradually mixes the day paints with the night paints over a few seconds, so the whole
picture slides from bright to dark - like watching a sunset.
BT.paletteFade(target, durationMs, easing) does this. You give it the destination palette,
how long the change should take, and optionally a curve that shapes the speed: 'ease-in'
starts slow, 'ease-out' starts fast, 'ease-in-out' is gentle at both ends, and the default
'linear' moves at one steady pace. Slot 0 stays transparent; every other slot blends.
WHAT IS A PALETTE FLASH?
------------------------
A flash paints every slot except slot 0 one single color (white here, for lightning) for a
short moment, then puts the original colors back. BT.paletteFlash(color, durationMs) does
this in one call - it snapshots the palette first, so the restore is exact.
UPDATE VS RENDER
----------------
- init() builds separate day and night Palette objects, fills a third one with the day
colors, and activates that third one with BT.paletteSet().
- update() runs the day/night state machine and calls BT.paletteFade() or
BT.paletteFlash() once at the start of a phase. The engine then blends the active
palette over the following ticks.
- render() draws the same landscape every frame using palette indices only. Sky, trees,
and ground change color because the engine updated the palette, not because render()
passes new Color32 values to draw calls.
The phase panel is drawn with the shared UI kit (src/shared/ui.js). Its theme colors live
in slots 240-251, and because BT.paletteFade() blends every slot except 0 toward the
target, init() writes the same theme colors into the day and night target palettes too.
The UI slots then "fade" from a color to the identical color, so the panel stays readable
while the scene changes around it.
TRY THIS
--------
- Press the backquote key (`) to open the engine overlay. The custom row near the bottom
repeats the phase label, and the timing chart gets a tag each time a fade or flash
starts.
- Watch the lightning flash closely: the whole screen, panel included, goes white for
200 ms, because the flash covers every slot except 0.
*/
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';
import { import applyThemeapplyTheme, import uiui, import UI_ANCHORSUI_ANCHORS } from './shared/ui.js';
/** @typedef {import('blit386').Palette} Palette */
// Phase durations in ticks. A tick is one fixed update; at 60 ticks per second, 60 ticks
// is one second.
const const PHASE_DAY_HOLD: 180PHASE_DAY_HOLD = 180; // 3 seconds
const const PHASE_FADE_TO_NIGHT: 120PHASE_FADE_TO_NIGHT = 120; // 2 seconds
const const PHASE_NIGHT_HOLD: 180PHASE_NIGHT_HOLD = 180; // 3 seconds
const const PHASE_FLASH: 12PHASE_FLASH = 12; // 200 ms
const const PHASE_NIGHT_HOLD_2: 120PHASE_NIGHT_HOLD_2 = 120; // 2 seconds
const const PHASE_FADE_TO_DAY: 120PHASE_FADE_TO_DAY = 120; // 2 seconds
// The day/night cycle as a lookup table: each phase holds for `duration` ticks, then
// advances to `next`. The last entry points back at the first, so the cycle never ends.
const const PHASE_TRANSITIONS: {
day: {
duration: number;
next: string;
};
'fade-to-night': {
duration: number;
next: string;
};
night: {
duration: number;
next: string;
};
flash: {
duration: number;
next: string;
};
'night-2': {
duration: number;
next: string;
};
'fade-to-day': {
duration: number;
next: string;
};
}
day: {
duration: number;
next: string;
}
duration: numberduration: const PHASE_DAY_HOLD: 180PHASE_DAY_HOLD, next: stringnext: 'fade-to-night' },
'fade-to-night': { duration: numberduration: const PHASE_FADE_TO_NIGHT: 120PHASE_FADE_TO_NIGHT, next: stringnext: 'night' },
night: {
duration: number;
next: string;
}
duration: numberduration: const PHASE_NIGHT_HOLD: 180PHASE_NIGHT_HOLD, next: stringnext: 'flash' },
flash: {
duration: number;
next: string;
}
duration: numberduration: const PHASE_FLASH: 12PHASE_FLASH, next: stringnext: 'night-2' },
'night-2': { duration: numberduration: const PHASE_NIGHT_HOLD_2: 120PHASE_NIGHT_HOLD_2, next: stringnext: 'fade-to-day' },
'fade-to-day': { duration: numberduration: const PHASE_FADE_TO_DAY: 120PHASE_FADE_TO_DAY, next: stringnext: 'day' },
};
// Text and overlay slots. Slot 0 is the engine's transparent slot and is never written.
const const C_LABEL: 3C_LABEL = 3;
const const C_DIM: 4C_DIM = 4;
const const C_OVERLAY_BAR: 6C_OVERLAY_BAR = 6; // overlay row background (same in day and night palettes)
// Scene slots: sky, sun, ground, tree trunk, tree leaves, flowers, clouds, mountains.
const const C_SKY: 10C_SKY = 10;
const const C_SKY_LIGHT: 11C_SKY_LIGHT = 11;
const const C_SUN: 12C_SUN = 12;
const const C_SUN_GLOW: 13C_SUN_GLOW = 13;
const const C_GROUND: 14C_GROUND = 14;
const const C_GROUND_DARK: 15C_GROUND_DARK = 15;
const const C_TRUNK: 16C_TRUNK = 16;
const const C_LEAVES: 17C_LEAVES = 17;
const const C_LEAVES_LIGHT: 18C_LEAVES_LIGHT = 18;
const const C_FLOWER_1: 19C_FLOWER_1 = 19;
const const C_FLOWER_2: 20C_FLOWER_2 = 20;
const const C_CLOUD: 21C_CLOUD = 21;
const const C_MOUNTAIN: 22C_MOUNTAIN = 22;
const const C_MOUNTAIN_LIGHT: 23C_MOUNTAIN_LIGHT = 23;
// Fills a palette with the "day" colors: bright, saturated outdoor tones.
function function fillDay(p: any): voidfillDay(p: anyp) {
p: anyp.set(const C_LABEL: 3C_LABEL, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(255, 210, 80));
p: anyp.set(const C_DIM: 4C_DIM, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(120, 130, 160));
p: anyp.set(const C_OVERLAY_BAR: 6C_OVERLAY_BAR, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(0, 0, 0, 200));
p: anyp.set(const C_SKY: 10C_SKY, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(100, 170, 255));
p: anyp.set(const C_SKY_LIGHT: 11C_SKY_LIGHT, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(150, 200, 255));
p: anyp.set(const C_SUN: 12C_SUN, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(255, 240, 100));
p: anyp.set(const C_SUN_GLOW: 13C_SUN_GLOW, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(255, 255, 180));
p: anyp.set(const C_GROUND: 14C_GROUND, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(80, 160, 60));
p: anyp.set(const C_GROUND_DARK: 15C_GROUND_DARK, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(50, 120, 40));
p: anyp.set(const C_TRUNK: 16C_TRUNK, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(100, 60, 30));
p: anyp.set(const C_LEAVES: 17C_LEAVES, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(40, 140, 50));
p: anyp.set(const C_LEAVES_LIGHT: 18C_LEAVES_LIGHT, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(80, 180, 70));
p: anyp.set(const C_FLOWER_1: 19C_FLOWER_1, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(255, 80, 120));
p: anyp.set(const C_FLOWER_2: 20C_FLOWER_2, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(255, 200, 60));
p: anyp.set(const C_CLOUD: 21C_CLOUD, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(240, 245, 255));
p: anyp.set(const C_MOUNTAIN: 22C_MOUNTAIN, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(100, 110, 140));
p: anyp.set(const C_MOUNTAIN_LIGHT: 23C_MOUNTAIN_LIGHT, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(140, 150, 175));
}
// Fills a palette with the "night" colors: dark, washed-out blues and purples. The sun
// slot becomes a pale moon.
function function fillNight(p: any): voidfillNight(p: anyp) {
p: anyp.set(const C_LABEL: 3C_LABEL, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(180, 160, 100));
p: anyp.set(const C_DIM: 4C_DIM, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(80, 80, 110));
p: anyp.set(const C_OVERLAY_BAR: 6C_OVERLAY_BAR, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(0, 0, 0, 200));
p: anyp.set(const C_SKY: 10C_SKY, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(15, 20, 50));
p: anyp.set(const C_SKY_LIGHT: 11C_SKY_LIGHT, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(25, 35, 70));
p: anyp.set(const C_SUN: 12C_SUN, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(200, 200, 160));
p: anyp.set(const C_SUN_GLOW: 13C_SUN_GLOW, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(60, 60, 80));
p: anyp.set(const C_GROUND: 14C_GROUND, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(20, 50, 30));
p: anyp.set(const C_GROUND_DARK: 15C_GROUND_DARK, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(15, 35, 20));
p: anyp.set(const C_TRUNK: 16C_TRUNK, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(40, 25, 15));
p: anyp.set(const C_LEAVES: 17C_LEAVES, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(15, 50, 25));
p: anyp.set(const C_LEAVES_LIGHT: 18C_LEAVES_LIGHT, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(25, 65, 35));
p: anyp.set(const C_FLOWER_1: 19C_FLOWER_1, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(100, 30, 50));
p: anyp.set(const C_FLOWER_2: 20C_FLOWER_2, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(100, 80, 30));
p: anyp.set(const C_CLOUD: 21C_CLOUD, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(40, 45, 60));
p: anyp.set(const C_MOUNTAIN: 22C_MOUNTAIN, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(30, 35, 55));
p: anyp.set(const C_MOUNTAIN_LIGHT: 23C_MOUNTAIN_LIGHT, new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(45, 50, 70));
}
// A pixel-art landscape that cycles between day and night with BT.paletteFade(), plus a
// lightning strike with BT.paletteFlash(). The picture itself is drawn the same way every
// frame; only the palette changes.
class class DemoDemo {
// The active palette: the one the engine draws with and the one the effects modify.
/** @type {Palette | null} */
Demo.palette: Palette | nullpalette = null;
// Fade target for dawn.
/** @type {Palette | null} */
Demo.day: Palette | nullday = null;
// Fade target for dusk.
/** @type {Palette | null} */
Demo.night: Palette | nullnight = null;
// Palette slot map for the shared UI kit theme, filled in init() by applyTheme().
// theme.text, theme.header, and friends are palette indices ready for BT draw calls.
Demo.theme: nulltheme = null;
// Which phase of the day/night cycle we are in - a key of PHASE_TRANSITIONS.
Demo.phase: stringphase = 'day';
// Tick when the current phase started.
Demo.phaseStartTick: numberphaseStartTick = 0;
// Whether the fade or flash for this phase has already been fired. Each effect must
// start exactly once per phase, and update() runs many times per phase.
Demo.effectTriggered: booleaneffectTriggered = false;
// Reused every frame for the overlay row, so no new array or object is allocated.
Demo.overlayRowData: {}overlayRowData = [{ leftText: stringleftText: 'Day', textPaletteIndex: numbertextPaletteIndex: const C_LABEL: 3C_LABEL }];
// Palette slots for the engine overlay bars and the timing chart. The chart is turned
// on so BT.assignTag() has somewhere to put its marks.
Demo.configure(): {
isOverlayVisibleAtStart: boolean;
isOverlayPaletteEnabled: boolean;
overlayPaletteRowsVisible: number;
overlayStyle: {
barPaletteIndex: number;
textPaletteIndex: number;
gapPaletteIndex: number;
};
isOverlayTimingChartEnabled: boolean;
overlayTimingChartStyle: {
updateBarPaletteIndex: number;
renderBarPaletteIndex: number;
warningPaletteIndex: number;
errorPaletteIndex: number;
tagPaletteIndex: number;
};
}
isOverlayVisibleAtStart: booleanisOverlayVisibleAtStart: true,
isOverlayPaletteEnabled: booleanisOverlayPaletteEnabled: true,
overlayPaletteRowsVisible: numberoverlayPaletteRowsVisible: 1,
overlayStyle: {
barPaletteIndex: number;
textPaletteIndex: number;
gapPaletteIndex: number;
}
barPaletteIndex: numberbarPaletteIndex: const C_OVERLAY_BAR: 6C_OVERLAY_BAR,
textPaletteIndex: numbertextPaletteIndex: const C_LABEL: 3C_LABEL,
gapPaletteIndex: numbergapPaletteIndex: const C_OVERLAY_BAR: 6C_OVERLAY_BAR,
},
isOverlayTimingChartEnabled: booleanisOverlayTimingChartEnabled: true,
overlayTimingChartStyle: {
updateBarPaletteIndex: number;
renderBarPaletteIndex: number;
warningPaletteIndex: number;
errorPaletteIndex: number;
tagPaletteIndex: number;
}
updateBarPaletteIndex: numberupdateBarPaletteIndex: const C_LABEL: 3C_LABEL,
renderBarPaletteIndex: numberrenderBarPaletteIndex: const C_SUN: 12C_SUN,
warningPaletteIndex: numberwarningPaletteIndex: const C_SUN_GLOW: 13C_SUN_GLOW,
errorPaletteIndex: numbererrorPaletteIndex: const C_FLOWER_2: 20C_FLOWER_2,
tagPaletteIndex: numbertagPaletteIndex: const C_DIM: 4C_DIM,
},
};
}
// Creates the day and night target palettes and activates a third palette that starts
// out with the day colors.
async Demo.init(): unknowninit() {
console.log('[PaletteFadeDemo] Initializing...');
// Build both fade targets.
this.Demo.day: Palette | nullday = 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);
function fillDay(p: any): voidfillDay(this.Demo.day: Paletteday);
this.Demo.night: Palette | nullnight = 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);
function fillNight(p: any): voidfillNight(this.Demo.night: Palettenight);
// The active palette starts as a copy of the day colors.
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);
function fillDay(p: any): voidfillDay(this.Demo.palette: Palettepalette);
// Install the shared UI kit colors (slots 240-251) into all three palettes. This
// matters because BT.paletteFade() blends every slot except 0 toward the target
// palette - if the day and night targets left those slots at their default black,
// the first fade would fade the UI colors away for good. Writing the identical
// theme colors into the targets turns the UI slots into fixed points: they "fade"
// from a color to the very same color, so nothing moves. (BT.paletteFlash() still
// whites them out for 200 ms, but it snapshots and restores every slot
// afterwards, so the flash heals itself - just like it always did for the scene
// colors.)
import applyThemeapplyTheme(this.Demo.day: Paletteday);
import applyThemeapplyTheme(this.Demo.night: Palettenight);
this.Demo.theme: nulltheme = import applyThemeapplyTheme(this.Demo.palette: Palettepalette);
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);
console.log('[PaletteFadeDemo] Initialized');
return true;
}
// Runs the day/night state machine. Each phase fires its palette effect once at its
// start, then waits for its duration to pass.
Demo.update(): voidupdate() {
const const tick: numbertick = 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;
}
ticks: numberCurrent fixed-update tick counter.
Increments once per engine update. Reset via
{@link
BT.ticksReset
}
.ticks;
const const elapsed: numberelapsed = const tick: numbertick - this.Demo.phaseStartTick: numberphaseStartTick;
// Fire the effect for this phase (only once).
this.Demo.triggerPhaseEffect(): voidtriggerPhaseEffect();
// Move on to the next phase once this one has run its course.
this.Demo.advancePhaseIfExpired(elapsed: any, tick: any): voidadvancePhaseIfExpired(const elapsed: numberelapsed, const tick: numbertick);
}
// Draws the pixel-art landscape. The geometry never changes; only the palette colors
// shift, driven by the fade and flash effects started in update().
Demo.render(): voidrender() {
// Sky color as the background.
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_SKY: 10C_SKY);
this.Demo.renderScene(): voidrenderScene();
// A small UI kit panel names the current phase, so viewers can follow the cycle
// without opening the engine overlay. Its colors come from the theme slots, which
// the fade leaves alone (see init()).
import uiui.begin(import UI_ANCHORSUI_ANCHORS.TOP_LEFT);
import uiui.panel('Palette Fade & Flash');
import uiui.label(this.Demo.getPhaseLabel(): anygetPhaseLabel());
import uiui.end();
}
// Supplies one custom overlay row with the current phase label (Day, Night, Dawn...).
// The engine calls this once per frame while the overlay is open.
Demo.overlayRows(): {}overlayRows() {
this.Demo.overlayRowData: {}overlayRowData[0].leftText = this.Demo.getPhaseLabel(): anygetPhaseLabel();
return this.Demo.overlayRowData: {}overlayRowData;
}
// Short label for the current phase. Falls back to the raw phase name if the table
// has no entry for it.
Demo.getPhaseLabel(): anygetPhaseLabel() {
const const phaseLabels: {
day: string;
'fade-to-night': string;
night: string;
flash: string;
'night-2': string;
'fade-to-day': string;
}
day: stringday: 'Day',
'fade-to-night': 'Fading to night... (ease-in-out)',
night: stringnight: 'Night',
flash: stringflash: 'Lightning flash!',
'night-2': 'Night',
'fade-to-day': 'Dawn... (ease-out)',
};
return const phaseLabels: {
day: string;
'fade-to-night': string;
night: string;
flash: string;
'night-2': string;
'fade-to-day': string;
}
Demo.phase: stringphase] ?? this.Demo.phase: stringphase;
}
// Enters a new phase at the given tick and re-arms the effect trigger.
Demo.startPhase(newPhase: any, tick: any): voidstartPhase(newPhase: anynewPhase, tick: anytick) {
this.Demo.phase: stringphase = newPhase: anynewPhase;
this.Demo.phaseStartTick: numberphaseStartTick = tick: anytick;
this.Demo.effectTriggered: booleaneffectTriggered = false;
}
// Fires the palette effect for the current phase, unless it already fired. The hold
// phases have no effect of their own; the palette simply stays where the last fade
// left it.
Demo.triggerPhaseEffect(): voidtriggerPhaseEffect() {
if (this.Demo.effectTriggered: booleaneffectTriggered) {
return;
}
if (this.Demo.phase: stringphase === 'fade-to-night') {
// Dusk: a 2-second fade from the current colors to the night palette.
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;
}
paletteFade: (target: Palette, durationMs: number, easing?: EasingFunction) => voidSmoothly interpolates all palette entries toward a target over time.
Snapshots the current palette at the moment this is called. Each fixed update the
entries are lerped between the snapshot and target using the easing curve.
Auto-removes when the fade completes.
Common patterns:
- Fade to black: `BT.paletteFade(blackPalette, 1000)`
- Fade to white: `BT.paletteFade(whitePalette, 500)`
- Cross-fade: `BT.paletteFade(nightPalette, 2000, 'ease-in-out')`paletteFade(this.Demo.night: Palette | nullnight, 2000, 'ease-in-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;
}
assignTag: (label?: string) => voidPlaces a labeled marker on the overlay timing chart at the current tick.
Requires `isOverlayTimingChartEnabled: true` in `configure()`. Tags scroll with the chart
history and are pruned when they leave the visible window. Empty labels become
`"Untitled"`. Chart width resets add an automatic `"Start"` tag.assignTag('Fade to night');
this.Demo.effectTriggered: booleaneffectTriggered = true;
} else if (this.Demo.phase: stringphase === 'flash') {
// Lightning: every slot except 0 goes white for 200 ms.
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;
}
paletteFlash: (color: Color32, durationMs: number) => voidTemporarily sets all non-zero palette entries to a single color, then restores.
Index 0 (transparent) is preserved. The original palette is saved internally
and restored after the duration elapses. Auto-removes when complete.paletteFlash(new new Color32(r?: number, g?: number, b?: number, a?: number): Color32Creates a clamped 8-bit RGBA color.Color32(255, 255, 255), 200);
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;
}
assignTag: (label?: string) => voidPlaces a labeled marker on the overlay timing chart at the current tick.
Requires `isOverlayTimingChartEnabled: true` in `configure()`. Tags scroll with the chart
history and are pruned when they leave the visible window. Empty labels become
`"Untitled"`. Chart width resets add an automatic `"Start"` tag.assignTag('Lightning flash');
this.Demo.effectTriggered: booleaneffectTriggered = true;
} else if (this.Demo.phase: stringphase === 'fade-to-day') {
// Dawn: a 2-second fade back to day, with ease-out for a quick start.
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;
}
paletteFade: (target: Palette, durationMs: number, easing?: EasingFunction) => voidSmoothly interpolates all palette entries toward a target over time.
Snapshots the current palette at the moment this is called. Each fixed update the
entries are lerped between the snapshot and target using the easing curve.
Auto-removes when the fade completes.
Common patterns:
- Fade to black: `BT.paletteFade(blackPalette, 1000)`
- Fade to white: `BT.paletteFade(whitePalette, 500)`
- Cross-fade: `BT.paletteFade(nightPalette, 2000, 'ease-in-out')`paletteFade(this.Demo.day: Palette | nullday, 2000, 'ease-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;
}
assignTag: (label?: string) => voidPlaces a labeled marker on the overlay timing chart at the current tick.
Requires `isOverlayTimingChartEnabled: true` in `configure()`. Tags scroll with the chart
history and are pruned when they leave the visible window. Empty labels become
`"Untitled"`. Chart width resets add an automatic `"Start"` tag.assignTag('Fade to day');
this.Demo.effectTriggered: booleaneffectTriggered = true;
}
}
// Checks whether the current phase has run for its full duration and, if so, moves to
// the next one. `elapsed` is ticks since the phase started, `tick` the current tick.
Demo.advancePhaseIfExpired(elapsed: any, tick: any): voidadvancePhaseIfExpired(elapsed: anyelapsed, tick: anytick) {
const const current: anycurrent = const PHASE_TRANSITIONS: {
day: {
duration: number;
next: string;
};
'fade-to-night': {
duration: number;
next: string;
};
night: {
duration: number;
next: string;
};
flash: {
duration: number;
next: string;
};
'night-2': {
duration: number;
next: string;
};
'fade-to-day': {
duration: number;
next: string;
};
}
Demo.phase: stringphase];
if (const current: anycurrent && elapsed: anyelapsed >= const current: anycurrent.duration) {
this.Demo.startPhase(newPhase: any, tick: any): voidstartPhase(const current: anycurrent.next, tick: anytick);
}
}
// Draws the landscape back to front: sky, clouds, mountains, sun, ground, trees,
// flowers. Every draw call uses a palette index, never a Color32.
Demo.renderScene(): voidrenderScene() {
// Sky in two bands: a darker top and a lighter strip near the horizon.
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(0, 0, 320, 80), const C_SKY: 10C_SKY);
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(0, 80, 320, 40), const C_SKY_LIGHT: 11C_SKY_LIGHT);
// Clouds.
this.Demo.drawCloud(x: any, y: any): voiddrawCloud(30, 20);
this.Demo.drawCloud(x: any, y: any): voiddrawCloud(180, 35);
this.Demo.drawCloud(x: any, y: any): voiddrawCloud(260, 15);
// Mountains.
this.Demo.drawMountain(x: any, baseY: any, width: any, height: any): voiddrawMountain(60, 105, 80, 35);
this.Demo.drawMountain(x: any, baseY: any, width: any, height: any): voiddrawMountain(160, 100, 100, 40);
this.Demo.drawMountain(x: any, baseY: any, width: any, height: any): voiddrawMountain(250, 108, 70, 32);
// Sun: a square with a wider, shorter glow across its middle.
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(250, 25, 20, 20), const C_SUN: 12C_SUN);
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(248, 27, 24, 16), const C_SUN_GLOW: 13C_SUN_GLOW);
// Ground in two bands, darker toward the bottom of the screen.
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(0, 120, 320, 120), const C_GROUND: 14C_GROUND);
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(0, 180, 320, 60), const C_GROUND_DARK: 15C_GROUND_DARK);
// Trees.
this.Demo.drawTree(x: any, groundY: any): voiddrawTree(40, 110);
this.Demo.drawTree(x: any, groundY: any): voiddrawTree(100, 115);
this.Demo.drawTree(x: any, groundY: any): voiddrawTree(200, 108);
this.Demo.drawTree(x: any, groundY: any): voiddrawTree(270, 118);
// Flowers.
this.Demo.drawFlowers(): voiddrawFlowers();
}
// Draws a simple cloud: a wide bar with a narrower bump on top. `x`, `y` is the
// top-left of the wide bar.
Demo.drawCloud(x: any, y: any): voiddrawCloud(x: anyx, y: anyy) {
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(x: anyx, y: anyy, 30, 8), const C_CLOUD: 21C_CLOUD);
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(x: anyx + 5, y: anyy - 4, 20, 6), const C_CLOUD: 21C_CLOUD);
}
// Draws a triangular mountain out of stacked one-pixel-high rectangles. `x` is the
// center, `baseY` the bottom row, `width` the base width, and `height` the number of
// rows.
Demo.drawMountain(x: any, baseY: any, width: any, height: any): voiddrawMountain(x: anyx, baseY: anybaseY, width: anywidth, height: anyheight) {
// Each row is a horizontal slice; the slices get narrower toward the top.
for (let let row: numberrow = 0; let row: numberrow < height: anyheight; let row: numberrow++) {
const const t: numbert = let row: numberrow / height: anyheight; // 0 at bottom, 1 at top
const const sliceW: anysliceW = Math.floor(width: anywidth * (1 - const t: numbert * 0.8));
const const sliceX: numbersliceX = x: anyx - Math.floor(const sliceW: anysliceW / 2);
const const sliceY: numbersliceY = baseY: anybaseY - let row: numberrow;
// The top 40 percent uses the lighter slot, like a snow cap.
const const slot: 22 | 23slot = const t: numbert > 0.6 ? const C_MOUNTAIN_LIGHT: 23C_MOUNTAIN_LIGHT : const C_MOUNTAIN: 22C_MOUNTAIN;
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 sliceX: numbersliceX, const sliceY: numbersliceY, const sliceW: anysliceW, 1), const slot: 22 | 23slot);
}
}
// Draws a simple tree: a trunk plus a leaf canopy. `x` is the trunk center, `groundY`
// the row the trunk stands on.
Demo.drawTree(x: any, groundY: any): voiddrawTree(x: anyx, groundY: anygroundY) {
// Trunk.
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(x: anyx - 2, groundY: anygroundY - 20, 4, 20), const C_TRUNK: 16C_TRUNK);
// Leaf canopy: three stacked rectangles, the top one in the lighter slot.
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(x: anyx - 10, groundY: anygroundY - 35, 20, 8), const C_LEAVES: 17C_LEAVES);
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(x: anyx - 14, groundY: anygroundY - 27, 28, 10), const C_LEAVES: 17C_LEAVES);
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(x: anyx - 8, groundY: anygroundY - 40, 16, 8), const C_LEAVES_LIGHT: 18C_LEAVES_LIGHT);
}
// Scatters small 2x2 flowers across the ground.
Demo.drawFlowers(): voiddrawFlowers() {
// A fixed list of positions, so the flowers do not jump around between frames.
const const flowers: {}flowers = [
[20, 140],
[55, 155],
[80, 145],
[120, 160],
[155, 142],
[190, 158],
[220, 148],
[255, 165],
[290, 138],
[35, 170],
[70, 175],
[140, 172],
[210, 170],
[260, 178],
];
for (let let i: numberi = 0; let i: numberi < const flowers: {}flowers.length; let i: numberi++) {
const [const fx: anyfx, const fy: anyfy] = const flowers: {}flowers[let i: numberi];
// Alternate between the two flower slots: `i % 2` is the remainder after
// dividing by 2, so it is 0 for even positions and 1 for odd ones.
const const slot: 19 | 20slot = let i: numberi % 2 === 0 ? const C_FLOWER_1: 19C_FLOWER_1 : const C_FLOWER_2: 20C_FLOWER_2;
// Four pixels make one 2x2 flower.
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(new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const fx: anyfx, const fy: anyfy), const slot: 19 | 20slot);
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(new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const fx: anyfx + 1, const fy: anyfy), const slot: 19 | 20slot);
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(new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const fx: anyfx, const fy: anyfy + 1), const slot: 19 | 20slot);
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(new new Vector2i(x?: number, y?: number): Vector2iCreates an integer 2D vector, truncating inputs toward zero.Vector2i(const fx: anyfx + 1, const fy: anyfy + 1), const slot: 19 | 20slot);
}
}
}
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);