// Palette Fade & Flash: 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 series.
//
// Prerequisites:
// Basics https://demos.blit386.dev/basics
// Primitives https://demos.blit386.dev/primitives
// Palette Presets https://demos.blit386.dev/palette-presets
// Palette Animation https://demos.blit386.dev/palette-animation
// Palette Cycling https://demos.blit386.dev/palette-cycling
// (guides: https://blit386.dev/docs/guides/palette-presets,
// https://blit386.dev/docs/guides/palette#runtime-palette-effects)
//
// Live version: https://demos.blit386.dev/palette-fade
// Guide: https://blit386.dev/docs/guides/palette#runtime-palette-effects
//
// WHAT ARE PALETTE FADES?
//
// Imagine you have 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 several seconds, so the whole picture smoothly transitions from
// bright to dark - like watching a sunset.
//
// BLIT386 does this with BT.paletteFade(targetPalette, durationMs, easing).
// You give it the destination paint set, how long the transition should take,
// and optionally a curve that controls how fast the change happens ("ease-in"
// starts slow, "ease-out" starts fast, "ease-in-out" is smooth on both ends).
//
// WHAT IS A PALETTE FLASH?
//
// A "flash" instantly turns every color to one single color (like white for
// lightning) for a short moment, then snaps everything back to normal.
// BT.paletteFlash(color, durationMs) does this in one call.
//
// UPDATE VS RENDER (palette work split):
// init() builds separate day and night Palette objects and activates the day set.
// update() runs the day/night state machine and calls BT.paletteFade() or
// BT.paletteFlash() once per phase - the engine blends active palette slots over time.
// render() draws the same landscape geometry 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 caption 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 toward
// the target palette, init() writes the same theme colors into the day and night target
// palettes too. That makes the UI slots "fade" from a color to the identical color, so
// the panel stays readable while the whole scene transitions around it.
//
// WHAT YOU WILL SEE:
// A pixel-art landscape (sky, ground, trees, sun) that loops through:
// 1. Day (bright) - hold 3 seconds
// 2. Fade to night - 2 seconds, ease-in-out
// 3. Night (dark) - hold 3 seconds
// 4. Lightning flash - 200 ms white flash
// 5. Night hold - 2 seconds
// 6. Fade to day - 2 seconds, ease-out (dawn)
// Repeat forever.
// The current phase (Day, Night, Dawn, etc.) shows in a UI kit panel in the top-left
// corner, and also as an engine overlay row above the FPS bar.
import { function bootstrap(DemoClass: DemoConstructor, options?: BootstrapOptions): Promise<boolean>One-liner bootstrap function for BLIT386 demos.
Handles canvas retrieval and engine initialization. Backend selection
(WebGPU or software fallback) is managed internally by BTAPI.
This function provides a streamlined way to start a demo with sensible defaults
while allowing customization through options.bootstrap, const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
class Color32Mutable 32-bit RGBA color value with 8-bit channels.Color32, class Rect2iInteger rectangle for pixel-perfect bounds and regions.
Used throughout the engine for sprite regions, display-space bounds, and
zero-allocation geometry helpers. Both convenience getters and allocation-free
`*To()` helpers are provided so callers can choose between readability and
hot-path efficiency.Rect2i, class Vector2iInteger 2D vector for pixel-perfect positioning.
Used for points, sizes, directions, and camera offsets throughout the engine.
The API includes both allocation-free `*To()` / `*InPlace()` variants and
convenience methods that return new vectors.Vector2i } from 'blit386';
import { import applyThemeapplyTheme, import uiui, import UI_ANCHORSUI_ANCHORS } from './shared/ui.js';
/** @typedef {import('blit386').IBTDemo} IBTDemo */
/** @typedef {import('blit386').HardwareSettings} HardwareSettings */
/** @typedef {import('blit386').Palette} Palette */
// Phase durations in ticks (at 60 FPS, 60 ticks = 1 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
// Fixed day/night cycle graph: each phase holds for `duration` ticks, then advances to `next`.
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' },
};
// Slot 0: always transparent.
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 colors: sky, sun, ground, tree trunk, tree leaves, flowers.
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;
/**
* Builds the "day" palette - bright, saturated outdoor colors.
*
* @param {Palette} p - Palette to fill.
*/
function function fillDay(p: Palette): voidBuilds the "day" palette - bright, saturated outdoor colors.fillDay(p: Palette- Palette to fill.p) {
p: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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));
}
/**
* Builds the "night" palette - dark, desaturated blues and purples.
*
* @param {Palette} p - Palette to fill.
*/
function function fillNight(p: Palette): voidBuilds the "night" palette - dark, desaturated blues and purples.fillNight(p: Palette- Palette to fill.p) {
p: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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: Palette- Palette to fill.p.Palette.set(index: number, color: Color32): voidWrites a color into a palette slot.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));
}
/**
* Demonstrates BT.paletteFade() and BT.paletteFlash().
* A pixel-art landscape transitions between day and night with smooth fades,
* plus a lightning flash effect.
*
* @implements {IBTDemo}
*/
class class DemoDemonstrates BT.paletteFade() and BT.paletteFlash().
A pixel-art landscape transitions between day and night with smooth fades,
plus a lightning flash effect.Demo {
/** @type {Palette | null} */
Demo.palette: Palette | nullpalette = null;
/** @type {Palette | null} */
Demo.day: Palette | nullday = null;
/** @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, ... are palette indices ready for BT draw calls.
Demo.theme: nulltheme = null;
// Which phase of the day/night cycle we are in.
Demo.phase: stringphase = 'day';
// Tick when the current phase started.
Demo.phaseStartTick: numberphaseStartTick = 0;
// Whether a fade/flash has been triggered for this phase.
Demo.effectTriggered: booleaneffectTriggered = false;
// Reused every frame for the overlay (current day/night phase label).
Demo.overlayRowData: {}overlayRowData = [{ leftText: stringleftText: 'Day', textPaletteIndex: numbertextPaletteIndex: const C_LABEL: 3C_LABEL }];
/**
* Palette slots for the engine overlay bars.
*
* @returns {Partial<HardwareSettings>}
*/
Demo.configure(): Partial<HardwareSettings>Palette slots for the engine overlay bars.configure() {
return {
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 day and night palettes and activates the day palette.
*
* @returns {Promise<boolean>}
*/
async Demo.init(): Promise<boolean>Creates day and night palettes and activates the day palette.init() {
console.log('[PaletteFadeDemo] Initializing...');
// Build both palettes.
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;
... 106 more ...;
spritesRefresh: () => void;
}
paletteCreate: (size?: number) => PaletteCreates a standalone palette instance.paletteCreate(256);
function fillDay(p: Palette): voidBuilds the "day" palette - bright, saturated outdoor colors.fillDay(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;
... 106 more ...;
spritesRefresh: () => void;
}
paletteCreate: (size?: number) => PaletteCreates a standalone palette instance.paletteCreate(256);
function fillNight(p: Palette): voidBuilds the "night" palette - dark, desaturated blues and purples.fillNight(this.Demo.night: Palettenight);
// Start with the day palette.
this.Demo.palette: Palette | nullpalette = const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
paletteCreate: (size?: number) => PaletteCreates a standalone palette instance.paletteCreate(256);
function fillDay(p: Palette): voidBuilds the "day" palette - bright, saturated outdoor colors.fillDay(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 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;
... 106 more ...;
spritesRefresh: () => void;
}
paletteSet: (palette: Palette) => voidStores the active engine palette.
Use this to swap the **entire palette** (e.g. switch between a day and night
theme). After this call the renderer uploads the new palette uniform on the
next frame.
**Palette-value swap (change what a slot looks like):** mutate the live
{@link
BT.palette
}
in place with `palette.set(slot, newColor)`. The renderer
uploads dirty slots on the next frame; no `paletteSet()` or
{@link
BT.spritesRefresh
}
needed.
**Palette-layout swap (same colors, different slot positions):** build a new
palette with the same colors at new indices, call `paletteSet()`, then call
{@link
BT.spritesRefresh
}
so every sprite sheet re-maps its original RGBA
pixels against the new slot layout.paletteSet(this.Demo.palette: Palettepalette);
console.log('[PaletteFadeDemo] Initialized');
return true;
}
/**
* Manages the day/night cycle state machine.
* Each phase triggers a palette effect at its start and waits for a duration.
*/
Demo.update(): voidManages the day/night cycle state machine.
Each phase triggers a palette effect at its start and waits for a duration.update() {
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;
... 106 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;
// Trigger the effect for this phase (only once).
this.Demo.triggerPhaseEffect(): voidFires the palette effect for the current phase, if not already triggered.triggerPhaseEffect();
// Check if the current phase has expired and advance to the next one.
this.Demo.advancePhaseIfExpired(elapsed: number, tick: number): voidChecks whether the current phase has run long enough and advances to the next.advancePhaseIfExpired(const elapsed: numberelapsed, const tick: numbertick);
}
/**
* Draws the pixel-art landscape. The scene geometry never changes; only the
* palette colors shift via the fade/flash effects running in update().
*/
Demo.render(): voidDraws the pixel-art landscape. The scene geometry never changes; only the
palette colors shift via the fade/flash effects running in update().render() {
// Sky fills the whole screen as 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;
... 106 more ...;
spritesRefresh: () => void;
}
clear: (paletteIndex: number) => voidSets the frame clear color using a palette index.
The renderer uses this color when clearing the full display at the start
of the next frame.clear(const C_SKY: 10C_SKY);
this.Demo.renderScene(): voidDraws the landscape: sky gradient, clouds, mountains, sun, ground, trees, flowers.
All draw calls use palette indices only.renderScene();
// 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(): stringShort label for the current day/night cycle phase.getPhaseLabel());
import uiui.end();
}
/**
* Current fade/flash phase for the engine overlay (Day, Night, Dawn, etc.).
*
* @returns {readonly { leftText: string }[]}
*/
Demo.overlayRows(): readonly {
leftText: string;
}[]
Demo.overlayRowData: {}overlayRowData[0].leftText = this.Demo.getPhaseLabel(): stringShort label for the current day/night cycle phase.getPhaseLabel();
return this.Demo.overlayRowData: {}overlayRowData;
}
/**
* Short label for the current day/night cycle phase.
*
* @returns {string}
*/
Demo.getPhaseLabel(): stringShort label for the current day/night cycle phase.getPhaseLabel() {
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;
}
/**
* Transitions to a new phase of the day/night cycle.
*
* @param {string} newPhase - Name of the phase to enter.
* @param {number} tick - Current tick when the phase starts.
*/
Demo.startPhase(newPhase: string, tick: number): voidTransitions to a new phase of the day/night cycle.startPhase(newPhase: string- Name of the phase to enter.newPhase, tick: number- Current tick when the phase starts.tick) {
this.Demo.phase: stringphase = newPhase: string- Name of the phase to enter.newPhase;
this.Demo.phaseStartTick: numberphaseStartTick = tick: number- Current tick when the phase starts.tick;
this.Demo.effectTriggered: booleaneffectTriggered = false;
}
/**
* Fires the palette effect for the current phase, if not already triggered.
*/
Demo.triggerPhaseEffect(): voidFires the palette effect for the current phase, if not already triggered.triggerPhaseEffect() {
if (this.Demo.effectTriggered: booleaneffectTriggered) {
return;
}
if (this.Demo.phase: stringphase === 'fade-to-night') {
// Smooth 2-second fade from current palette to night.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
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 frame 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;
... 106 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! White flash for 200ms.
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
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;
... 106 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: 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;
... 106 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 frame 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;
... 106 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 long enough and advances to the next.
*
* @param {number} elapsed - Ticks since the current phase started.
* @param {number} tick - Current tick count.
*/
Demo.advancePhaseIfExpired(elapsed: number, tick: number): voidChecks whether the current phase has run long enough and advances to the next.advancePhaseIfExpired(elapsed: number- Ticks since the current phase started.elapsed, tick: number- Current tick count.tick) {
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: number- Ticks since the current phase started.elapsed >= const current: anycurrent.duration) {
this.Demo.startPhase(newPhase: string, tick: number): voidTransitions to a new phase of the day/night cycle.startPhase(const current: anycurrent.next, tick: number- Current tick count.tick);
}
}
/**
* Draws the landscape: sky gradient, clouds, mountains, sun, ground, trees, flowers.
* All draw calls use palette indices only.
*/
Demo.renderScene(): voidDraws the landscape: sky gradient, clouds, mountains, sun, ground, trees, flowers.
All draw calls use palette indices only.renderScene() {
// Sky gradient (two bands)
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(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;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(0, 80, 320, 40), const C_SKY_LIGHT: 11C_SKY_LIGHT);
// Clouds
this.Demo.drawCloud(x: number, y: number): voidDraws a simple cloud shape at the given position.drawCloud(30, 20);
this.Demo.drawCloud(x: number, y: number): voidDraws a simple cloud shape at the given position.drawCloud(180, 35);
this.Demo.drawCloud(x: number, y: number): voidDraws a simple cloud shape at the given position.drawCloud(260, 15);
// Mountains
this.Demo.drawMountain(x: number, baseY: number, width: number, height: number): voidDraws a triangular mountain shape using stacked rectangles.drawMountain(60, 105, 80, 35);
this.Demo.drawMountain(x: number, baseY: number, width: number, height: number): voidDraws a triangular mountain shape using stacked rectangles.drawMountain(160, 100, 100, 40);
this.Demo.drawMountain(x: number, baseY: number, width: number, height: number): voidDraws a triangular mountain shape using stacked rectangles.drawMountain(250, 108, 70, 32);
// 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;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(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;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(248, 27, 24, 16), const C_SUN_GLOW: 13C_SUN_GLOW);
// 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;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(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;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(0, 180, 320, 60), const C_GROUND_DARK: 15C_GROUND_DARK);
// Trees
this.Demo.drawTree(x: number, groundY: number): voidDraws a simple tree (trunk + leaf canopy).drawTree(40, 110);
this.Demo.drawTree(x: number, groundY: number): voidDraws a simple tree (trunk + leaf canopy).drawTree(100, 115);
this.Demo.drawTree(x: number, groundY: number): voidDraws a simple tree (trunk + leaf canopy).drawTree(200, 108);
this.Demo.drawTree(x: number, groundY: number): voidDraws a simple tree (trunk + leaf canopy).drawTree(270, 118);
// Flowers
this.Demo.drawFlowers(): voidScatters small flower pixels across the ground.drawFlowers();
}
/**
* Draws a simple cloud shape at the given position.
*
* @param {number} x - Left position.
* @param {number} y - Top position.
*/
Demo.drawCloud(x: number, y: number): voidDraws a simple cloud shape at the given position.drawCloud(x: number- Left position.x, y: number- Top position.y) {
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(x: number- Left position.x, y: number- Top position.y, 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;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(x: number- Left position.x + 5, y: number- Top position.y - 4, 20, 6), const C_CLOUD: 21C_CLOUD);
}
/**
* Draws a triangular mountain shape using stacked rectangles.
*
* @param {number} x - Center x.
* @param {number} baseY - Bottom of the mountain.
* @param {number} width - Base width.
* @param {number} height - Mountain height.
*/
Demo.drawMountain(x: number, baseY: number, width: number, height: number): voidDraws a triangular mountain shape using stacked rectangles.drawMountain(x: number- Center x.x, baseY: number- Bottom of the mountain.baseY, width: number- Base width.width, height: number- Mountain height.height) {
// Draw the mountain as a series of horizontal slices getting narrower toward the top.
for (let let row: numberrow = 0; let row: numberrow < height: number- Mountain height.height; let row: numberrow++) {
const const t: numbert = let row: numberrow / height: number- Mountain height.height; // 0 at bottom, 1 at top
const const sliceW: anysliceW = Math.floor(width: number- Base width.width * (1 - const t: numbert * 0.8));
const const sliceX: numbersliceX = x: number- Center x.x - Math.floor(const sliceW: anysliceW / 2);
const const sliceY: numbersliceY = baseY: number- Bottom of the mountain.baseY - let row: numberrow;
// Upper half is lighter (snow-capped effect).
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;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(const sliceX: numbersliceX, const sliceY: numbersliceY, const sliceW: anysliceW, 1), const slot: 22 | 23slot);
}
}
/**
* Draws a simple tree (trunk + leaf canopy).
*
* @param {number} x - Trunk center x.
* @param {number} groundY - Y position of the ground line.
*/
Demo.drawTree(x: number, groundY: number): voidDraws a simple tree (trunk + leaf canopy).drawTree(x: number- Trunk center x.x, groundY: number- Y position of the ground line.groundY) {
// 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;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(x: number- Trunk center x.x - 2, groundY: number- Y position of the ground line.groundY - 20, 4, 20), const C_TRUNK: 16C_TRUNK);
// Leaf canopy (rounded-ish shape from stacked rects).
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(x: number- Trunk center x.x - 10, groundY: number- Y position of the ground line.groundY - 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;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(x: number- Trunk center x.x - 14, groundY: number- Y position of the ground line.groundY - 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;
... 106 more ...;
spritesRefresh: () => void;
}
drawRectFill: (rect: Rect2i, paletteIndex: number) => voidDraws a filled rectangle.drawRectFill(new new Rect2i(x?: number, y?: number, width?: number, height?: number): Rect2iCreates an integer rectangle, truncating all inputs toward zero.Rect2i(x: number- Trunk center x.x - 8, groundY: number- Y position of the ground line.groundY - 40, 16, 8), const C_LEAVES_LIGHT: 18C_LEAVES_LIGHT);
}
/**
* Scatters small flower pixels across the ground.
*/
Demo.drawFlowers(): voidScatters small flower pixels across the ground.drawFlowers() {
// A fixed set of flower positions so they don't jump around.
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 two flower colors.
const const slot: 19 | 20slot = let i: numberi % 2 === 0 ? const C_FLOWER_1: 19C_FLOWER_1 : const C_FLOWER_2: 20C_FLOWER_2;
const BT: {
FLIP_H: number;
FLIP_V: number;
ROT_90_CW: number;
ROT_180_CW: number;
ROT_270_CW: number;
BTN_UP: number;
BTN_DOWN: number;
BTN_LEFT: number;
BTN_RIGHT: number;
BTN_A: number;
BTN_B: number;
BTN_X: number;
BTN_Y: number;
BTN_L: number;
BTN_R: number;
BTN_START: number;
BTN_SELECT: number;
BTN_POINTER_A: number;
BTN_POINTER_B: number;
BTN_POINTER_C: number;
BTN_POINTER_D: number;
PLAYER_ONE: number;
PLAYER_TWO: number;
PLAYER_THREE: number;
PLAYER_FOUR: number;
AXIS_LEFT_X: number;
AXIS_LEFT_Y: number;
AXIS_RIGHT_X: number;
AXIS_RIGHT_Y: number;
AXIS_TRIGGER_L: number;
... 106 more ...;
spritesRefresh: () => void;
}
drawPixel: (posOrX: Vector2i | number, yOrColor: number, maybeColor?: number) => voidDraws a single pixel.
Accepts either:
- `(posOrX: Vector2i, yOrColor: number)` where `yOrColor` is the palette index.
- `(posOrX: number, yOrColor: number, maybeColor: number)` for `(x, y, paletteIndex)`.drawPixel(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;
... 106 more ...;
spritesRefresh: () => void;
}
drawPixel: (posOrX: Vector2i | number, yOrColor: number, maybeColor?: number) => voidDraws a single pixel.
Accepts either:
- `(posOrX: Vector2i, yOrColor: number)` where `yOrColor` is the palette index.
- `(posOrX: number, yOrColor: number, maybeColor: number)` for `(x, y, paletteIndex)`.drawPixel(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;
... 106 more ...;
spritesRefresh: () => void;
}
drawPixel: (posOrX: Vector2i | number, yOrColor: number, maybeColor?: number) => voidDraws a single pixel.
Accepts either:
- `(posOrX: Vector2i, yOrColor: number)` where `yOrColor` is the palette index.
- `(posOrX: number, yOrColor: number, maybeColor: number)` for `(x, y, paletteIndex)`.drawPixel(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;
... 106 more ...;
spritesRefresh: () => void;
}
drawPixel: (posOrX: Vector2i | number, yOrColor: number, maybeColor?: number) => voidDraws a single pixel.
Accepts either:
- `(posOrX: Vector2i, yOrColor: number)` where `yOrColor` is the palette index.
- `(posOrX: number, yOrColor: number, maybeColor: number)` for `(x, y, paletteIndex)`.drawPixel(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 DemoDemonstrates BT.paletteFade() and BT.paletteFlash().
A pixel-art landscape transitions between day and night with smooth fades,
plus a lightning flash effect.Demo);