littlejsengine 1.22.0 → 1.23.1

package/dist/littlejs.release.js

@@ -35,7 +35,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.22.0';
+const engineVersion = '1.23.1';
 
 /** Frames per second to update
  *  @type {number}
@@ -982,8 +982,23 @@ function tweak(){}
 function tweakButton(){}
 function tweakDivider(){}
 function tweakEngineDefaults(){}
-const levelEditor = {isOpen: false, open(){}, close(){}, onTile: undefined, onRestart: undefined, onPlayFrom: undefined,
-    paletteTiles: undefined, use3D: undefined};
+class LevelEditor
+{
+    constructor()
+    {
+        this.paletteTiles = this.use3D = this.tool = undefined;
+        this.keys = {}, this.buttons = [], this.tools = {};
+    }
+    get isOpen() { return false; }
+    get is3D() { return false; }
+    get edit2D() { return undefined; }
+    get edit3D() { return undefined; }
+    open(){} close(){} addKey(){} addButton(){} addTool(){}
+    onTile(){} onRestart(){} onPlayFrom(){} onOpen(){} onClose(){} onUpdate(){} onDraw(){} onPanel(){}
+    onSave(){ return false; }
+}
+let levelEditor = new LevelEditor;
+function setLevelEditor(editor){ levelEditor = editor; }
 function editorMapRestore(map){ return map; }
 function editorMapLoaded(){}
 function editorJSONFetched(){}
@@ -2281,295 +2296,295 @@ const PURPLE = debugProtectConstant(rgb(.5,0,1));
  *  @type {Color}
  *  @memberof Math */
 const MAGENTA = debugProtectConstant(rgb(1,0,1));
-/**
- * LittleJS Utility Classes and Functions
- * - Timer - tracks time automatically with support for pause and real-time modes
- * - Time formatting helper
- * - JSON file fetching
- * - File saving (text, canvas, data URLs)
- * - Native share dialog support
- * - Local storage save data management
- * - Value noise (1D and 2D)
- * @namespace Utilities
- */
-
-/**
- * Timer object tracks how long has passed since it was set
- * @memberof Engine
- * @example
- * let a = new Timer;    // creates a timer that is not set
- * a.set(3);             // sets the timer to 3 seconds
- *
- * let b = new Timer(1); // creates a timer with 1 second left
- * b.unset();            // unset the timer
- */
-class Timer
-{
-    /** Create a timer object set time passed in
-     *  @param {number} [timeLeft] - How much time left before the timer is elapsed in seconds (undefined = unset)
-     *  @param {boolean} [useRealTime] - Should the timer keep running even when the game is paused? (useful for UI) */
-    constructor(timeLeft, useRealTime=false)
-    {
-        false&&ASSERT(timeLeft === undefined || isNumber(timeLeft), 'Constructed Timer is invalid.', timeLeft);
-        this.useRealTime = useRealTime;
-        const globalTime = this.getGlobalTime();
-        /** @type {number|undefined} */
-        this.time = timeLeft === undefined ? undefined : globalTime + timeLeft;
-        /** @type {number|undefined} */
-        this.setTime = timeLeft;
-    }
-
-    /** Set the timer with seconds passed in
-     *  @param {number} [timeLeft] - How much time left before the timer is elapsed in seconds */
-    set(timeLeft=0)
-    {
-        false&&ASSERT(isNumber(timeLeft), 'Timer is invalid.', timeLeft);
-        const globalTime = this.getGlobalTime();
-        this.time = globalTime + timeLeft;
-        this.setTime = timeLeft;
-    }
-
-    /** Set if the timer should keep running even when the game is paused
-     *  @param {boolean} [useRealTime] */
-    setUseRealTime(useRealTime=true)
-    {
-        false&&ASSERT(!this.isSet(), 'Cannot change global time setting while timer is set.');
-        this.useRealTime = useRealTime;
-    }
-
-    /** Unset the timer */
-    unset() { this.time = undefined; }
-
-    /** Returns true if set
-     * @return {boolean} */
-    isSet() { return this.time !== undefined; }
-
-    /** Returns true if set and has not elapsed
-     * @return {boolean} */
-    active() { return this.getGlobalTime() < this.time; }
-
-    /** Returns true if set and elapsed
-     * @return {boolean} */
-    elapsed() { return this.getGlobalTime() >= this.time; }
-
-    /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
-     * @return {number} */
-    get() { return this.isSet()? this.getGlobalTime() - this.time : 0; }
-
-    /** Get percentage elapsed based on time it was set to, returns 0 if not set.
-     *  Zero-duration timers report 1 (already elapsed).
-     * @return {number} */
-    getPercent()
-    {
-        if (!this.isSet()) return 0;
-        if (!this.setTime) return 1;
-        return 1 - percent(this.time - this.getGlobalTime(), 0, this.setTime);
-    }
-
-    /** Get the time this timer was set to, returns 0 if not set
-     * @return {number} */
-    getSetTime() { return this.isSet() ? this.setTime : 0; }
-
-    /** Get the current global time this timer is based on
-     * @return {number} */
-    getGlobalTime() { return this.useRealTime ? timeReal : time; }
-
-    /** Returns this timer expressed as a string
-     * @return {string} */
-    toString() { return this.isSet() ? abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }
-
-    /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
-     * @return {number} */
-    valueOf() { return this.get(); }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
-/** Formats seconds to mm:ss style for display purposes
- *  @param {number} t - time in seconds
- *  @return {string}
- *  @memberof Utilities */
-function formatTime(t)
-{
-    const signStr = t <= -1 ? '-' : ''; // no sign when it shows 0:00
-    t = abs(t)|0;
-    return signStr + (t/60|0) + ':' + (t%60<10?'0':'') + t%60;
-}
-
-/** Fetches a JSON file from a URL and returns the parsed JSON object. Must be used with await!
- *  @param {string} url - URL of JSON file
- *  @return {Promise<object>}
- *  @memberof Utilities */
-async function fetchJSON(url)
-{
-    const response = await fetch(url);
-    if (!response.ok)
-        throw new Error(`Failed to fetch JSON from ${url}: ${response.status} ${response.statusText}`);
-    const json = await response.json();
-    editorJSONFetched(url, json); // debug builds remember the file a level came from, to save it by that name
-    return json;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
-/** Save a text file to disk
- *  @param {string} text
- *  @param {string} [filename]
- *  @param {string} [type]
- *  @memberof Utilities */
-function saveText(text, filename='text', type='text/plain')
-{ saveDataURL(URL.createObjectURL(new Blob([text], {'type':type})), filename, 1e3); } // freed once the download has it
-
-/** Create an offscreen canvas to draw into, and return its 2D context
- *  - The canvas is context.canvas, which is what TextureInfo and the like take
- *  @param {number} width - In pixels
- *  @param {number} [height] - In pixels, defaults to the width for a square
- *  @param {boolean} [willReadFrequently] - Keep it in software, faster when getImageData is called on it often
- *  @return {OffscreenCanvasRenderingContext2D}
- *  @memberof Utilities */
-function createCanvasContext(width, height=width, willReadFrequently=false)
-{
-    false&&ASSERT(isNumber(width) && isNumber(height), 'canvas width and height must be numbers', width, height);
-    return new OffscreenCanvas(width, height).getContext('2d', {willReadFrequently});
-}
-
-/** Save a canvas to disk
- *  @param {HTMLCanvasElement|OffscreenCanvas} canvas
- *  @param {string} [filename]
- *  @param {string} [type]
- *  @memberof Utilities */
-function saveCanvas(canvas, filename='screenshot', type='image/png')
-{
-    if (canvas instanceof OffscreenCanvas)
-    {
-        // copy to temporary canvas and save
-        const saveCanvas = document.createElement('canvas');
-        saveCanvas.width = canvas.width;
-        saveCanvas.height = canvas.height;
-        saveCanvas.getContext('2d').drawImage(canvas, 0, 0);
-        saveDataURL(saveCanvas.toDataURL(type), filename);
-    }
-    else
-        saveDataURL(canvas.toDataURL(type), filename);
-}
-
-/** Save a data url to disk
- *  @param {string} url
- *  @param {string} [filename]
- *  @param {number} [revokeTime] - how long before revoking the url
- *  @memberof Utilities */
-function saveDataURL(url, filename='download', revokeTime)
-{
-    false&&ASSERT(isStringLike(url), 'saveDataURL requires url string');
-    false&&ASSERT(isStringLike(filename), 'saveDataURL requires filename string');
-
-    // create link for saving screenshots
-    const link = document.createElement('a');
-    link.download = filename;
-    link.href = url;
-    link.click();
-    if (revokeTime !== undefined)
-        setTimeout(()=> URL.revokeObjectURL(url), revokeTime);
-}
-
-/** Share content using the native share dialog if available
- *  @param {string} title - title of the share
- *  @param {string} url - url to share
- *  @param {Function} [callback] - Called when share is complete
- *  @memberof Utilities */
-function shareURL(title, url, callback)
-{
-    false&&ASSERT(isStringLike(title), 'shareURL requires title string');
-    false&&ASSERT(isStringLike(url), 'shareURL requires url string');
-    navigator.share?.({title, url}).then(()=>callback?.(), ()=>{}); // a player who cancels is not an error
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
-/** Read save data from local storage
- *  - The result has the type of defaultSaveData, or any when there is none
- *  @template {Object<string, any>} [T=any]
- *  @param {string} saveName - unique name for the game/save
- *  @param {T} [defaultSaveData] - default values, result is {...default, ...loaded} so this must be an object
- *  @return {T}
- *  @memberof Utilities */
-function readSaveData(saveName, defaultSaveData)
-{
-    false&&ASSERT(isStringLike(saveName), 'readSaveData requires saveName string');
-    false&&ASSERT(defaultSaveData === undefined ||
-        (typeof defaultSaveData === 'object' && defaultSaveData !== null),
-        'readSaveData: default must be an object - the result is ' +
-        '{...default, ...loaded}, so a scalar default yields {}. ' +
-        'Use readSaveData(key, {best:0}).best');
-
-    // tolerate localStorage being unavailable (iOS private mode, sandboxed
-    // iframes) and corrupt JSON in stored data
-    let loadedData = {};
-    try
-    {
-        const data = localStorage.getItem(saveName); // not the brackets, a name like 'key' or 'length' is a Storage member
-        if (data)
-        {
-            try { loadedData = JSON.parse(data); }
-            catch { false&&LOG('readSaveData: corrupt JSON for', saveName, '— using defaults'); }
-        }
-    }
-    catch { false&&LOG('readSaveData: localStorage unavailable — using defaults'); }
-    return { .../** @type {object} */ (defaultSaveData), ...loadedData };
-}
-
-/** Write save data to local storage
- *  @param {string} saveName - unique name for the game/save
- *  @param {object} saveData - object containing data to be saved
- *  @memberof Utilities */
-function writeSaveData(saveName, saveData)
-{
-    false&&ASSERT(isStringLike(saveName), 'writeSaveData requires saveName string');
-    // tolerate localStorage being unavailable or quota exceeded
-    try { localStorage.setItem(saveName, JSON.stringify(saveData)); }
-    catch { false&&LOG('writeSaveData: failed to write', saveName); }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
-// Deterministic well-distributed hash of an integer lattice index to [0, 1).
-// Murmur3 finalizer — adjacent integers produce uncorrelated outputs.
-function noiseHash(i)
-{
-    let h = (i | 0) ^ 0x9e3779b9;
-    h = Math.imul(h ^ (h >>> 16), 0x85ebca6b);
-    h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);
-    h ^= h >>> 16;
-    return (h >>> 0) / 2**32;
-}
-
-/** 1D value noise — returns a smooth value in [0, 1] for any real x.
- *  Integer inputs land on deterministic lattice values; non-integer inputs
- *  are interpolated with smoothStep for C1 continuity.
- *  @param {number} x
- *  @return {number}
- *  @memberof Utilities */
-function noise1D(x)
-{
-    const i = floor(x);
-    return lerp(noiseHash(i), noiseHash(i + 1), smoothStep(x - i));
-}
-
-/** 2D value noise — returns a smooth value in [0, 1] for any real (x, y).
- *  @param {number} x
- *  @param {number} y
- *  @return {number}
- *  @memberof Utilities */
-function noise2D(x, y)
-{
-    const ix = floor(x), iy = floor(y);
-    const fx = smoothStep(x - ix), fy = smoothStep(y - iy);
-    // large prime decorrelates neighboring rows
-    const h = (a, b) => noiseHash(a + b * 374761393);
-    return lerp(
-        lerp(h(ix,     iy    ), h(ix + 1, iy    ), fx),
-        lerp(h(ix,     iy + 1), h(ix + 1, iy + 1), fx),
-        fy);
+/**
+ * LittleJS Utility Classes and Functions
+ * - Timer - tracks time automatically with support for pause and real-time modes
+ * - Time formatting helper
+ * - JSON file fetching
+ * - File saving (text, canvas, data URLs)
+ * - Native share dialog support
+ * - Local storage save data management
+ * - Value noise (1D and 2D)
+ * @namespace Utilities
+ */
+
+/**
+ * Timer object tracks how long has passed since it was set
+ * @memberof Engine
+ * @example
+ * let a = new Timer;    // creates a timer that is not set
+ * a.set(3);             // sets the timer to 3 seconds
+ *
+ * let b = new Timer(1); // creates a timer with 1 second left
+ * b.unset();            // unset the timer
+ */
+class Timer
+{
+    /** Create a timer object set time passed in
+     *  @param {number} [timeLeft] - How much time left before the timer is elapsed in seconds (undefined = unset)
+     *  @param {boolean} [useRealTime] - Should the timer keep running even when the game is paused? (useful for UI) */
+    constructor(timeLeft, useRealTime=false)
+    {
+        false&&ASSERT(timeLeft === undefined || isNumber(timeLeft), 'Constructed Timer is invalid.', timeLeft);
+        this.useRealTime = useRealTime;
+        const globalTime = this.getGlobalTime();
+        /** @type {number|undefined} */
+        this.time = timeLeft === undefined ? undefined : globalTime + timeLeft;
+        /** @type {number|undefined} */
+        this.setTime = timeLeft;
+    }
+
+    /** Set the timer with seconds passed in
+     *  @param {number} [timeLeft] - How much time left before the timer is elapsed in seconds */
+    set(timeLeft=0)
+    {
+        false&&ASSERT(isNumber(timeLeft), 'Timer is invalid.', timeLeft);
+        const globalTime = this.getGlobalTime();
+        this.time = globalTime + timeLeft;
+        this.setTime = timeLeft;
+    }
+
+    /** Set if the timer should keep running even when the game is paused
+     *  @param {boolean} [useRealTime] */
+    setUseRealTime(useRealTime=true)
+    {
+        false&&ASSERT(!this.isSet(), 'Cannot change global time setting while timer is set.');
+        this.useRealTime = useRealTime;
+    }
+
+    /** Unset the timer */
+    unset() { this.time = undefined; }
+
+    /** Returns true if set
+     * @return {boolean} */
+    isSet() { return this.time !== undefined; }
+
+    /** Returns true if set and has not elapsed
+     * @return {boolean} */
+    active() { return this.getGlobalTime() < this.time; }
+
+    /** Returns true if set and elapsed
+     * @return {boolean} */
+    elapsed() { return this.getGlobalTime() >= this.time; }
+
+    /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
+     * @return {number} */
+    get() { return this.isSet()? this.getGlobalTime() - this.time : 0; }
+
+    /** Get percentage elapsed based on time it was set to, returns 0 if not set.
+     *  Zero-duration timers report 1 (already elapsed).
+     * @return {number} */
+    getPercent()
+    {
+        if (!this.isSet()) return 0;
+        if (!(this.setTime > 0)) return 1;
+        return 1 - percent(this.time - this.getGlobalTime(), 0, this.setTime);
+    }
+
+    /** Get the time this timer was set to, returns 0 if not set
+     * @return {number} */
+    getSetTime() { return this.isSet() ? this.setTime : 0; }
+
+    /** Get the current global time this timer is based on
+     * @return {number} */
+    getGlobalTime() { return this.useRealTime ? timeReal : time; }
+
+    /** Returns this timer expressed as a string
+     * @return {string} */
+    toString() { return this.isSet() ? abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }
+
+    /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
+     * @return {number} */
+    valueOf() { return this.get(); }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** Formats seconds to mm:ss style for display purposes
+ *  @param {number} t - time in seconds
+ *  @return {string}
+ *  @memberof Utilities */
+function formatTime(t)
+{
+    const signStr = t <= -1 ? '-' : ''; // no sign when it shows 0:00
+    t = abs(t)|0;
+    return signStr + (t/60|0) + ':' + (t%60<10?'0':'') + t%60;
+}
+
+/** Fetches a JSON file from a URL and returns the parsed JSON object. Must be used with await!
+ *  @param {string} url - URL of JSON file
+ *  @return {Promise<object>}
+ *  @memberof Utilities */
+async function fetchJSON(url)
+{
+    const response = await fetch(url);
+    if (!response.ok)
+        throw new Error(`Failed to fetch JSON from ${url}: ${response.status} ${response.statusText}`);
+    const json = await response.json();
+    editorJSONFetched(url, json); // debug builds remember the file a level came from, to save it by that name
+    return json;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** Save a text file to disk
+ *  @param {string} text
+ *  @param {string} [filename]
+ *  @param {string} [type]
+ *  @memberof Utilities */
+function saveText(text, filename='text', type='text/plain')
+{ saveDataURL(URL.createObjectURL(new Blob([text], {'type':type})), filename, 1e3); } // freed once the download has it
+
+/** Create an offscreen canvas to draw into, and return its 2D context
+ *  - The canvas is context.canvas, which is what TextureInfo and the like take
+ *  @param {number} width - In pixels
+ *  @param {number} [height] - In pixels, defaults to the width for a square
+ *  @param {boolean} [willReadFrequently] - Keep it in software, faster when getImageData is called on it often
+ *  @return {OffscreenCanvasRenderingContext2D}
+ *  @memberof Utilities */
+function createCanvasContext(width, height=width, willReadFrequently=false)
+{
+    false&&ASSERT(isNumber(width) && isNumber(height), 'canvas width and height must be numbers', width, height);
+    return new OffscreenCanvas(width, height).getContext('2d', {willReadFrequently});
+}
+
+/** Save a canvas to disk
+ *  @param {HTMLCanvasElement|OffscreenCanvas} canvas
+ *  @param {string} [filename]
+ *  @param {string} [type]
+ *  @memberof Utilities */
+function saveCanvas(canvas, filename='screenshot', type='image/png')
+{
+    if (canvas instanceof OffscreenCanvas)
+    {
+        // copy to temporary canvas and save
+        const saveCanvas = document.createElement('canvas');
+        saveCanvas.width = canvas.width;
+        saveCanvas.height = canvas.height;
+        saveCanvas.getContext('2d').drawImage(canvas, 0, 0);
+        saveDataURL(saveCanvas.toDataURL(type), filename);
+    }
+    else
+        saveDataURL(canvas.toDataURL(type), filename);
+}
+
+/** Save a data url to disk
+ *  @param {string} url
+ *  @param {string} [filename]
+ *  @param {number} [revokeTime] - how long before revoking the url
+ *  @memberof Utilities */
+function saveDataURL(url, filename='download', revokeTime)
+{
+    false&&ASSERT(isStringLike(url), 'saveDataURL requires url string');
+    false&&ASSERT(isStringLike(filename), 'saveDataURL requires filename string');
+
+    // create link for saving screenshots
+    const link = document.createElement('a');
+    link.download = filename;
+    link.href = url;
+    link.click();
+    if (revokeTime !== undefined)
+        setTimeout(()=> URL.revokeObjectURL(url), revokeTime);
+}
+
+/** Share content using the native share dialog if available
+ *  @param {string} title - title of the share
+ *  @param {string} url - url to share
+ *  @param {Function} [callback] - Called when share is complete
+ *  @memberof Utilities */
+function shareURL(title, url, callback)
+{
+    false&&ASSERT(isStringLike(title), 'shareURL requires title string');
+    false&&ASSERT(isStringLike(url), 'shareURL requires url string');
+    navigator.share?.({title, url}).then(()=>callback?.(), ()=>{}); // a player who cancels is not an error
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** Read save data from local storage
+ *  - The result has the type of defaultSaveData, or any when there is none
+ *  @template {Object<string, any>} [T=any]
+ *  @param {string} saveName - unique name for the game/save
+ *  @param {T} [defaultSaveData] - default values, result is {...default, ...loaded} so this must be an object
+ *  @return {T}
+ *  @memberof Utilities */
+function readSaveData(saveName, defaultSaveData)
+{
+    false&&ASSERT(isStringLike(saveName), 'readSaveData requires saveName string');
+    false&&ASSERT(defaultSaveData === undefined ||
+        (typeof defaultSaveData === 'object' && defaultSaveData !== null),
+        'readSaveData: default must be an object - the result is ' +
+        '{...default, ...loaded}, so a scalar default yields {}. ' +
+        'Use readSaveData(key, {best:0}).best');
+
+    // tolerate localStorage being unavailable (iOS private mode, sandboxed
+    // iframes) and corrupt JSON in stored data
+    let loadedData = {};
+    try
+    {
+        const data = localStorage.getItem(saveName); // not the brackets, a name like 'key' or 'length' is a Storage member
+        if (data)
+        {
+            try { loadedData = JSON.parse(data); }
+            catch { false&&LOG('readSaveData: corrupt JSON for', saveName, '— using defaults'); }
+        }
+    }
+    catch { false&&LOG('readSaveData: localStorage unavailable — using defaults'); }
+    return { .../** @type {object} */ (defaultSaveData), ...loadedData };
+}
+
+/** Write save data to local storage
+ *  @param {string} saveName - unique name for the game/save
+ *  @param {object} saveData - object containing data to be saved
+ *  @memberof Utilities */
+function writeSaveData(saveName, saveData)
+{
+    false&&ASSERT(isStringLike(saveName), 'writeSaveData requires saveName string');
+    // tolerate localStorage being unavailable or quota exceeded
+    try { localStorage.setItem(saveName, JSON.stringify(saveData)); }
+    catch { false&&LOG('writeSaveData: failed to write', saveName); }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+// Deterministic well-distributed hash of an integer lattice index to [0, 1).
+// Murmur3 finalizer — adjacent integers produce uncorrelated outputs.
+function noiseHash(i)
+{
+    let h = (i | 0) ^ 0x9e3779b9;
+    h = Math.imul(h ^ (h >>> 16), 0x85ebca6b);
+    h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35);
+    h ^= h >>> 16;
+    return (h >>> 0) / 2**32;
+}
+
+/** 1D value noise — returns a smooth value in [0, 1] for any real x.
+ *  Integer inputs land on deterministic lattice values; non-integer inputs
+ *  are interpolated with smoothStep for C1 continuity.
+ *  @param {number} x
+ *  @return {number}
+ *  @memberof Utilities */
+function noise1D(x)
+{
+    const i = floor(x);
+    return lerp(noiseHash(i), noiseHash(i + 1), smoothStep(x - i));
+}
+
+/** 2D value noise — returns a smooth value in [0, 1] for any real (x, y).
+ *  @param {number} x
+ *  @param {number} y
+ *  @return {number}
+ *  @memberof Utilities */
+function noise2D(x, y)
+{
+    const ix = floor(x), iy = floor(y);
+    const fx = smoothStep(x - ix), fy = smoothStep(y - iy);
+    // large prime decorrelates neighboring rows
+    const h = (a, b) => noiseHash(a + b * 374761393);
+    return lerp(
+        lerp(h(ix,     iy    ), h(ix + 1, iy    ), fx),
+        lerp(h(ix,     iy + 1), h(ix + 1, iy + 1), fx),
+        fy);
 }
 /**
  * LittleJS Engine Settings
@@ -2884,6 +2899,15 @@ let touchGamepadEnable = false;
  *  @memberof Settings */
 let touchGamepadPassthrough = false;
 
+/** True if a pinch of two fingers turns the mouse wheel: touchPinch is added to mouseWheel, so what zooms with
+ *  the wheel zooms with a pinch, the mouse is between the two fingers, and a second finger lets go of the button
+ *  the first pressed, since a pinch is not a drag; turn it off for a game with its own use for two fingers, the
+ *  first finger stays the mouse and touchPinch can still be read
+ *  @type {boolean}
+ *  @default
+ *  @memberof Settings */
+let touchPinchWheel = true;
+
 /** Size of center button if touch gamepad should have start button in the center
  *  - Prevents activating when pressed near virtual stick or face buttons
  *  - When the game is paused, any touch will press the button
@@ -3279,6 +3303,11 @@ function setTouchInputEnable(enable) { touchInputEnable = enable; }
  *  @memberof Settings */
 function setTouchGamepadEnable(enable) { touchGamepadEnable = enable; }
 
+/** Set if a pinch of two fingers turns the mouse wheel
+ *  @param {boolean} enable
+ *  @memberof Settings */
+function setTouchPinchWheel(enable) { touchPinchWheel = enable; }
+
 /** Set if touches outside the gamepad controls should still drive mouse/touch input
  *  @param {boolean} passthrough
  *  @memberof Settings */
@@ -3318,776 +3347,776 @@ function setTouchGamepadLeftStick(enable)
 function setTouchGamepadLeftButtonCount(count)
 {
     touchGamepadLeftButtonCount = count;
-    if (count > 0)
-        touchGamepadLeftStick = false;
-}
-
-/** Set if the touch gamepad right side is an analog stick (or dpad) instead of face buttons
- *  @param {boolean} rightStick
- *  @memberof Settings */
-function setTouchGamepadRightStick(rightStick)
-{
-    touchGamepadRightStick = rightStick;
-    if (rightStick)
-        touchGamepadButtonCount = 0;
-}
-
-/** Set if touch gamepad should be analog stick or 8 way dpad
- *  @param {boolean} analog
- *  @memberof Settings */
-function setTouchGamepadAnalog(analog) { touchGamepadAnalog = analog; }
-
-/** Set if touch gamepad directional controls should float to where you press
- *  @param {boolean} floating
- *  @memberof Settings */
-function setTouchGamepadFloating(floating) { touchGamepadFloating = floating; }
-
-/** Set size of virtual gamepad for touch devices in viewport CSS pixels
- *  @param {number} size
- *  @memberof Settings */
-function setTouchGamepadSize(size) { touchGamepadSize = size; }
-
-/** Set transparency of touch gamepad overlay
- *  @param {number} alpha
- *  @memberof Settings */
-function setTouchGamepadAlpha(alpha) { touchGamepadAlpha = alpha; }
-
-/** Set how long to display the touch gamepad on screen in seconds, set to 0 to always display
- *  @param {number} time
- *  @memberof Settings */
-function setTouchGamepadDisplayTime(time) { touchGamepadDisplayTime = time; }
-
-/** Set duration in ms to vibrate when a touch gamepad face or start button is pressed (0 disables)
- *  @param {number} ms
- *  @memberof Settings */
-function setTouchGamepadVibration(ms) { touchGamepadVibration = ms; }
-
-/** Set to allow vibration hardware if it exists
- *  @param {boolean} enable
- *  @memberof Settings */
-function setVibrateEnable(enable) { vibrateEnable = enable; }
-
-/** Set if audio is enabled, false turns all sound off
- *  @param {boolean} enable
- *  @memberof Settings */
-function setSoundEnable(enable) { soundEnable = enable; }
-
-/** Set volume scale to apply to all sound, music and speech
- *  @param {number} volume
- *  @memberof Settings */
-function setSoundVolume(volume)
-{
-    soundVolume = volume;
-    audioUpdateVolume(); // update gain immediately, sound off or not
-}
-
-/** Set default range where sound no longer plays
- *  @param {number} range
- *  @memberof Settings */
-function setSoundDefaultRange(range) { soundDefaultRange = range; }
-
-/** Set default range percent to start tapering off sound
- *  @param {number} taper
- *  @memberof Settings */
-function setSoundDefaultTaper(taper) { soundDefaultTaper = taper; }
-
-/** Set if all sound pauses while the page is hidden
- *  @param {boolean} pause
- *  @memberof Settings */
-function setSoundPauseWhenHidden(pause) { soundPauseWhenHidden = pause; }
-
-/** Set if watermark with FPS should be shown
- *  @param {boolean} show
- *  @memberof Debug */
-function setDebugWatermark(show) { debugWatermark = show; }
-
-/** Set key code used to toggle debug mode, Esc by default
- *  @param {string} key
- *  @memberof Debug */
-function setDebugKey(key) { debugKey = key; }
-
-/** Set if the debug keys work while the overlay is closed, the number keys and the +/- time keys
- *  @param {boolean} [enable]
- *  @memberof Debug */
-function setDebugKeysAlways(enable=true) { debugKeysAlways = enable; }
-
-/** Set if the tweakables panel is shown, as 9 does while the debug overlay is open
- *  @param {boolean} [show]
- *  @memberof Debug */
-function setDebugTweakables(show=true) { debugTweakables = show; }
-/**
- * LittleJS Object System
- * - EngineObject is the base class for all game objects
- * - Handles automatic updating, rendering, physics, and collision
- * - Supports parent-child hierarchies with transform inheritance
- * - 2D physics with velocity, acceleration, damping, and gravity
- * - Collision system with tiles and other objects
- * - Renders sprites from tile sheets with color and rotation
- * - Objects sorted by renderOrder for layered rendering
- */
-
-/**
- * LittleJS Object Base Object Class
- * - Top level object class used by the engine
- * - Automatically adds self to object list
- * - Will be updated and rendered each frame
- * - Renders as a sprite from a tilesheet by default
- * - Can have color and additive color applied
- * - 2D Physics and collision system
- * - Sorted by renderOrder
- * - Objects can have children attached
- * - Parents are updated before children, and set child transform
- * - Call destroy() to get rid of objects
- *
- * The physics system used by objects is simple and fast with some caveats...
- * - Collision uses the axis aligned size, the object's rotation angle is only for rendering
- * - Objects are guaranteed to not intersect tile collision from physics
- * - If an object starts or is moved inside tile collision, it will not collide with that tile
- * - Collision for objects can be set to be solid to block other objects
- * - Objects may get pushed into overlapping other solid objects, if so they will push away
- * - A static solid (mass 0) moved by its velocity, like a door or an elevator, pushes objects out of its way
- * - Solid objects are more performance intensive and should be used sparingly
- * @memberof Engine
- * @example
- * // create an engine object, normally you would first extend the class with your own
- * const pos = vec2(2,3);
- * const object = new EngineObject(pos);
- */
-class EngineObject
-{
-    /** Create an engine object and adds it to the list of objects
-     *  @param {Vector2}  [pos=vec2()] - World space position of the object
-     *  @param {Vector2}  [size=vec2(1)] - World space size of the object
-     *  @param {TileInfo} [tileInfo] - Tile info to render object (undefined is untextured)
-     *  @param {number}   [angle] - Angle the object is rotated by
-     *  @param {Color}    [color=WHITE] - Color to apply to tile when rendered
-     *  @param {number}   [renderOrder] - Objects sorted by renderOrder before being rendered
-     */
-    constructor(pos=vec2(), size=vec2(1), tileInfo, angle=0, color=WHITE, renderOrder=0)
-    {
-        // check passed in params
-        false&&ASSERT(isVector2(pos), 'object pos must be a vec2');
-        false&&ASSERT(isVector2(size), 'object size must be a vec2');
-        false&&ASSERT(!tileInfo || tileInfo instanceof TileInfo, 'object tileInfo should be a TileInfo or undefined');
-        false&&ASSERT(typeof angle === 'number' && isFinite(angle), 'object angle should be a number');
-        false&&ASSERT(isColor(color), 'object color should be a valid rgba color');
-        false&&ASSERT(typeof renderOrder === 'number', 'object renderOrder should be a number');
-
-        /** @property {Vector2} - World space position of the object */
-        this.pos = pos.copy();
-        /** @property {Vector2} - World space width and height of the object */
-        this.size = size.copy();
-        /** @property {Vector2|undefined} - Size of object used for drawing, uses size if not set
-         *  @type {Vector2|undefined} */
-        this.drawSize = undefined;
-        /** @property {TileInfo|undefined} - Tile info to render object (undefined is untextured)
-         *  @type {TileInfo|undefined} */
-        this.tileInfo = tileInfo;
-        /** @property {number} - Angle to rotate the object */
-        this.angle = angle;
-        /** @property {Color} - Color to apply when rendered */
-        this.color = color.copy();
-        /** @property {Color|undefined} - Additive color to apply when rendered
-         *  @type {Color|undefined} */
-        this.additiveColor = undefined;
-        /** @property {Shader|undefined} - Custom shader to render with, undefined for the engine's own
-         *  @type {Shader|undefined} */
-        this.shader = undefined;
-        /** @property {boolean} - Does this object draw into the light system's shadow map; false for a floor layer, a background, a pickup */
-        this.castShadow = true;
-        /** @property {number} - With the light system, how much it lights itself: 0 lit only by the lights, 1 full
-         *  brightness in its own colors whatever the lights do, between partly; drawn into the lightmap through
-         *  renderEmissive, as 3D's emissive. Exact for solid pixels; a partly transparent one is self lit by its alpha
-         *  too, so a half alpha pixel shows at a quarter and a fading emissive sprite fades a little faster */
-        this.emissive = 0;
-        /** @property {boolean} - Should the rendered tile flip along the y axis. Affects rendering and the local→world transform of attached children (a mirrored parent flips its children's localPos.x and localAngle). Does not affect this object's own physics, collision, or localToWorld/worldToLocal. */
-        this.mirror = false;
-        /** @property {boolean} - Has object been destroyed? */
-        this.destroyed = false;
-        this.updatePass = 0; // the engine update pass it was last updated in, so nothing updates twice in one
-
-        // physical properties
-        /** @property {number} - How heavy the object is, static if 0: a static object moves by its velocity but does not
-         *  collide on its own, the moving ones collide with it */
-        this.mass = objectDefaultMass;
-        /** @property {number} - Fraction of velocity kept each frame, 1 keeps all of it, 0 stops at once */
-        this.damping = objectDefaultDamping;
-        /** @property {number} - Fraction of angular velocity kept each frame, 1 keeps all of it, 0 stops at once */
-        this.angleDamping = objectDefaultAngleDamping;
-        /** @property {number} - How bouncy the object is when colliding (0-1) */
-        this.restitution = objectDefaultRestitution;
-        /** @property {number} - Fraction of sliding speed kept each frame on the ground, 1 is no friction, 0 stops at
-         *  once, the more slippery of the object and its ground is used */
-        this.friction  = objectDefaultFriction;
-        /** @property {number} - How much to scale gravity by for this object */
-        this.gravityScale = 1;
-        /** @property {number} - Objects are sorted by render order */
-        this.renderOrder = renderOrder;
-        /** @property {Vector2} - Velocity of the object, in world units per frame */
-        this.velocity = vec2();
-        /** @property {number} - Angular velocity of the object, in radians per frame */
-        this.angleVelocity = 0;
-        /** @property {number} - Track when object was created  */
-        this.spawnTime = time;
-        /** @property {Array<EngineObject>} - List of children of this object
-         *  @type {Array<EngineObject>} */
-        this.children = [];
-        /** @property {boolean} - Limit object speed along x and y axis */
-        this.clampSpeed = true;
-        /** @property {EngineObject|undefined} - Object we are standing on, if any
-         *  @type {EngineObject|undefined} */
-        this.groundObject = undefined;
-
-        // parent child system
-        /** @property {EngineObject|undefined} - Parent of object if in local space
-         *  @type {EngineObject|undefined} */
-        this.parent = undefined;
-        /** @property {Vector2|undefined} - Position relative to the parent, only while attached to one
-         *  @type {Vector2|undefined} */
-        this.localPos = undefined;
-        /** @property {number} - Local angle if child  */
-        this.localAngle = 0;
-
-        // collision flags
-        /** @property {boolean} - Object collides with the level, its tile collision layers
-         *  @type {boolean} */
-        this.collideLevel = false;
-        /** @property {boolean} - Object collides with solid objects */
-        this.collideSolidObjects = false;
-        /** @property {boolean} - Object collides with and blocks other objects */
-        this.isSolid = false;
-        /** @property {boolean} - Object collides with raycasts */
-        this.collideRaycast = false;
-
-        /** @property {boolean} - Object is skipped by engineObjectsDestroy, for things that outlive a level like a camera
-         *  - Calling destroy on it still destroys it, and its children go with it either way */
-        this.persistent = false;
-
-        // add to list of objects
-        engineObjects.push(this);
-    }
-
-    /** Update the object transform, called automatically by engine even when paused
-     *  @param {boolean} [updateChildren] - Also update the children's transforms */
-    updateTransforms(updateChildren=true)
-    {
-        const parent = this.parent;
-        if (parent)
-        {
-            // compose with parent transform inline to avoid intermediate vector allocs
-            const mirror = parent.getMirrorSign();
-            const lp = this.localPos, pp = parent.pos;
-            const lx = lp.x*mirror, ly = lp.y, pa = parent.angle;
-            if (pa)
-            {
-                const c = cos(-pa), s = sin(-pa);
-                this.pos.set(lx*c - ly*s + pp.x, lx*s + ly*c + pp.y);
-            }
-            else
-                this.pos.set(lx + pp.x, ly + pp.y);
-            this.angle = mirror*this.localAngle + pa;
-        }
-
-        // update children
-        if (updateChildren)
-            for (const child of this.children)
-                child.updateTransforms();
-    }
-
-    /** Update the object physics, called automatically by engine once each frame. Can be overridden to stop or change how physics works for an object. */
-    updatePhysics()
-    {
-        // child objects do not have physics
-        false&&ASSERT(!this.parent);
-
-        // bail if a collision callback destroyed us mid-frame
-        if (this.destroyed) return;
-
-        // limit max speed to prevent missing collisions, only for what collides: with solids, or with tiles while it
-        // has a mass, which tile collision needs; anything else moves as fast as it is told
-        if (this.clampSpeed && enablePhysicsSolver && (this.collideSolidObjects || this.collideLevel && this.mass))
-        {
-            this.velocity.x = clamp(this.velocity.x, -objectMaxSpeed, objectMaxSpeed);
-            this.velocity.y = clamp(this.velocity.y, -objectMaxSpeed, objectMaxSpeed);
-        }
-
-        // physics sanity checks
-        false&&ASSERT(this.angleDamping >= 0 && this.angleDamping <= 1, 'angleDamping must be 0 to 1, the fraction kept each frame');
-        false&&ASSERT(this.damping >= 0 && this.damping <= 1, 'damping must be 0 to 1, the fraction of velocity kept each frame');
-
-        // apply physics; only the solver needs where the object was, so only then is it copied
-        const solve = enablePhysicsSolver && this.mass;
-        const oldPos = solve ? this.pos.copy() : undefined;
-        this.velocity.x *= this.damping;
-        this.velocity.y *= this.damping;
-        if (this.mass)
-        {
-            // apply gravity only if it has mass
-            this.velocity.x += gravity.x * this.gravityScale;
-            this.velocity.y += gravity.y * this.gravityScale;
-        }
-        this.pos.x += this.velocity.x;
-        this.pos.y += this.velocity.y;
-        this.angle += this.angleVelocity *= this.angleDamping;
-
-        // don't do collision for static objects or if solver disabled
-        if (!solve) return;
-
-        // which way is down for this object, a negative gravityScale falls up and lands on ceilings
-        const gravityY = this.gravityScale < 0 ? -gravity.y : gravity.y;
-        const wasFalling = this.velocity.y < 0 && gravityY < 0 || this.velocity.y > 0 && gravityY > 0;
-        if (this.groundObject)
-        {
-            // apply friction in local space of ground object
-            const friction = max(this.friction, this.groundObject.friction);
-            const groundSpeed = this.groundObject.velocity.x;
-            this.velocity.x = groundSpeed + (this.velocity.x - groundSpeed) * friction;
-            this.groundObject = undefined;
-        }
-
-        // an object with no width or height has no box to push out of, or to be pushed out of
-        if (this.collideSolidObjects && this.size.x && this.size.y)
-        {
-            // check collisions against solid objects
-            const epsilon = .001; // necessary to push slightly outside of the collision
-            for (const o of engineObjectsCollideStaticLast)
-            {
-                // skip destroyed, child objects, self collision, or objects with no box
-                if (o.destroyed || o.parent || o === this || !o.size.x || !o.size.y) continue;
-
-                // non solid objects don't collide with each other
-                if (!this.isSolid && !o.isSolid) continue;
-
-                // check collision
-                if (!this.isOverlappingObject(o)) continue;
-
-                // each moving object checks its own contacts, so a pair the other one already asked about this frame
-                // is not asked twice: left overlapping, ignored or only nudged apart it is skipped, and one both said
-                // to resolve, pushed back together since, is resolved again
-                const answer = engineObjectsCollidePairAnswer(o, this);
-                if (answer === false) continue;
-                if (!answer)
-                {
-                    // notify objects of collision and check if should be resolved
-                    const collide1 = this.collideWithObject(o);
-                    const collide2 = o.collideWithObject(this);
-                    if (!collide1 || !collide2)
-                    {
-                        engineObjectsCollidePairAdd(this, o);
-                        continue;
-                    }
-                }
-
-                const wasOverlapping = isOverlapping(oldPos, this.size, o.pos, o.size);
-                if (wasOverlapping && (!o.mass || o.groundObject))
-                {
-                    // a static solid that moved into it, like a door or an elevator, pushes it out the shortest way
-                    // at once and carries it along, it would only drift out slowly and the solid would pass through;
-                    // an object standing on something counts as fixed too, so a stack on an elevator rides together;
-                    // it bounces off relative to the mover, a paddle moved by setting pos bounces a ball as a wall does
-                    const push = collideBoxBox(this.pos, this.size, o.pos, o.size);
-                    if (push)
-                    {
-                        this.pos.x += push.x + sign(push.x) * epsilon;
-                        this.pos.y += push.y + sign(push.y) * epsilon;
-                        const restitution = max(this.restitution, o.restitution);
-                        if (push.x)
-                        {
-                            const v = this.velocity.x - o.velocity.x;
-                            if (v * push.x < 0) // moving into it
-                                this.velocity.x = o.velocity.x - v * restitution;
-                        }
-                        else
-                        {
-                            const v = this.velocity.y - o.velocity.y;
-                            if (v * push.y < 0) // moving into it
-                                this.velocity.y = o.velocity.y - v * restitution;
-                            if (push.y * gravityY < 0) // pushed up against gravity, it stands on it
-                                this.groundObject = o;
-                        }
-                    }
-                    engineObjectsCollidePairAdd(this, o);
-
-                    debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f00', undefined, false);
-                    continue;
-                }
-                if (wasOverlapping)
-                {
-                    // if already was touching, try to push away
-                    const deltaPos = oldPos.subtract(o.pos);
-                    const length = deltaPos.length();
-                    const pushAwayAccel = .001;
-                    const velocity = length < .001 ? vec2(0, pushAwayAccel) : deltaPos.scale(pushAwayAccel/length);
-                    this.velocity = this.velocity.add(velocity);
-                    if (o.mass) // push away other object if not fixed
-                        o.velocity = o.velocity.subtract(velocity);
-                    engineObjectsCollidePairAdd(this, o);
-
-                    debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f00', undefined, false);
-                    continue;
-                }
-
-                // check for collision
-                const sizeBoth = this.size.add(o.size);
-                // prefer to push up if small delta, up away from this object's own gravity
-                const smallStepUp = (gravityY > 0 ? o.pos.y - oldPos.y : oldPos.y - o.pos.y)*2 > sizeBoth.y - abs(gravityY);
-                const isBlockedX = abs(oldPos.y - o.pos.y)*2 < sizeBoth.y;
-                const isBlockedY = abs(oldPos.x - o.pos.x)*2 < sizeBoth.x;
-                const restitution = max(this.restitution, o.restitution);
-
-                if (smallStepUp || isBlockedY || !isBlockedX) // resolve y collision
-                {
-                    // push outside object collision
-                    this.pos.y = o.pos.y + (sizeBoth.y/2 + epsilon) * sign(oldPos.y - o.pos.y);
-                    if ((o.groundObject && wasFalling) || !o.mass)
-                    {
-                        // set ground object if landed on something
-                        if (wasFalling)
-                            this.groundObject = o;
-
-                        // bounce if other object is fixed or grounded, relative to it so a rider keeps up with a
-                        // platform moving down instead of landing on it again every few frames
-                        this.velocity.y = o.velocity.y - (this.velocity.y - o.velocity.y) * restitution;
-                    }
-                    else // o has mass here, the other branch already handled the massless case
-                    {
-                        // inelastic collision
-                        const inelastic = (this.mass * this.velocity.y + o.mass * o.velocity.y) / (this.mass + o.mass);
-
-                        // elastic collision
-                        const elastic0 = this.velocity.y * (this.mass - o.mass) / (this.mass + o.mass)
-                            + o.velocity.y * 2 * o.mass / (this.mass + o.mass);
-                        const elastic1 = o.velocity.y * (o.mass - this.mass) / (this.mass + o.mass)
-                            + this.velocity.y * 2 * this.mass / (this.mass + o.mass);
-
-                        // lerp between elastic or inelastic based on restitution
-                        this.velocity.y = lerp(inelastic, elastic0, restitution);
-                        o.velocity.y = lerp(inelastic, elastic1, restitution);
-                    }
-                }
-                if (!smallStepUp && isBlockedX) // resolve x collision
-                {
-                    // push outside collision
-                    this.pos.x = o.pos.x + (sizeBoth.x/2 + epsilon) * sign(oldPos.x - o.pos.x);
-                    if (o.mass)
-                    {
-                        // inelastic collision
-                        const inelastic = (this.mass * this.velocity.x + o.mass * o.velocity.x) / (this.mass + o.mass);
-
-                        // elastic collision
-                        const elastic0 = this.velocity.x * (this.mass - o.mass) / (this.mass + o.mass)
-                            + o.velocity.x * 2 * o.mass / (this.mass + o.mass);
-                        const elastic1 = o.velocity.x * (o.mass - this.mass) / (this.mass + o.mass)
-                            + this.velocity.x * 2 * this.mass / (this.mass + o.mass);
-
-                        // lerp between elastic or inelastic based on restitution
-                        this.velocity.x = lerp(inelastic, elastic0, restitution);
-                        o.velocity.x = lerp(inelastic, elastic1, restitution);
-                    }
-                    else // bounce if other object is fixed, relative to it as a landing is
-                        this.velocity.x = o.velocity.x - (this.velocity.x - o.velocity.x) * restitution;
-                }
-                engineObjectsCollidePairAdd(this, o, true);
-                debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f0f', undefined, false);
-            }
-        }
-        if (this.collideLevel)
-        {
-            // check collision against tiles
-            const hitLayer = tileCollisionTest(this.pos, this.size, this);
-            if (hitLayer)
-            {
-                // if already was stuck in collision, don't do anything
-                // this should not happen unless something starts in collision
-                if (!tileCollisionTest(oldPos, this.size, this))
-                {
-                    // test which side we bounced off (or both if a corner)
-                    const isBlockedX = tileCollisionTest(vec2(this.pos.x, oldPos.y), this.size, this);
-                    const isBlockedY = tileCollisionTest(vec2(oldPos.x, this.pos.y), this.size, this);
-                    const restitution = max(this.restitution, hitLayer.restitution);
-                    if (isBlockedX)
-                    {
-                        // a ledge caught less than maxMove below its top lifts the object onto it instead of stopping it,
-                        // down off a ceiling ledge when gravity points up; zero gravity counts as down
-                        const epsilon = 1e-3;
-                        const maxMove = .1;
-                        const y = gravityY > 0 ?
-                            ceil( oldPos.y+this.size.y/2-1) - this.size.y/2 - epsilon :
-                            floor(oldPos.y-this.size.y/2+1) + this.size.y/2 + epsilon;
-                        if (abs(y - this.pos.y) < maxMove && !tileCollisionTest(vec2(this.pos.x, y), this.size, this))
-                        {
-                            this.pos.y = y;
-                            debugPhysics && debugRect(this.pos, this.size, '#ff0', 0, 0, false, false);
-                            return;
-                        }
-
-                        // move to previous X position and bounce
-                        this.pos.x = oldPos.x;
-                        this.velocity.x *= -restitution;
-                    }
-                    if (isBlockedY || !isBlockedX)
-                    {
-                        if (wasFalling)
-                        {
-                            // adjust position to slightly away from nearest tile
-                            // this prevents gap between object and ground
-                            const epsilon = .0001;
-                            const offset = this.size.y/2 + epsilon;
-                            // rounded in the layer's space as its collision test is, or a bottom a hair below a
-                            // grid line would round to the row under it, inside the floor, and fall through
-                            const layerY = hitLayer.pos.y;
-                            this.pos.y = layerY + (gravityY < 0 ?
-                                floor(oldPos.y - layerY - this.size.y/2) + offset :
-                                ceil( oldPos.y - layerY + this.size.y/2) - offset);
-
-                            // set ground object for tile collision
-                            this.groundObject = hitLayer;
-                        }
-                        else
-                        {
-                            // move to previous Y position
-                            this.pos.y = oldPos.y;
-                            this.groundObject = undefined;
-                        }
-                        // bounce velocity
-                        this.velocity.y *= -restitution;
-                    }
-                    debugPhysics && debugRect(this.pos, this.size, '#f00', 0, 0, false, false);
-                }
-            }
-        }
-    }
-
-    /** Update the object, called automatically by engine once each frame. Does nothing by default. */
-    update() {}
-
-    /** Render the object, draws a tile by default, automatically called each frame, sorted by renderOrder */
-    render()
-    {
-        // default object render
-        drawTile(this.pos, this.drawSize || this.size, this.tileInfo, this.color, this.angle, this.mirror, this.additiveColor, glEnable, false);
-    }
-
-    /** Optional hook called during the light system plugin's lightmap pass to draw this object's lightmap contribution. Does nothing by default. */
-    renderLight() {}
-
-    /** Draw this object into the light system's shadow map, called during its shadow pass when castShadow is set.
-     *  Calls render() by default so the object casts its own shape; override to cast a different one, like a blob at a character's feet so its body stays lit;
-     *  screen space WebGL draws in render() are skipped during the pass */
-    renderShadow() { this.render(); }
-
-    /** Draw this object's shape into the light system's lightmap, called during its light pass when emissive is above
-     *  0; what it draws shows in its own colors that much brighter. Calls render() by default so the whole object
-     *  glows; override to glow a part, like a robot's eyes */
-    renderEmissive() { this.render(); }
-
-    /** Destroy this object, destroy its children, detach its parent, and mark it for removal
-     *  @param {boolean} [immediate] - true removes attached effects like particle emitters at once, false lets them finish first */
-    destroy(immediate=false)
-    {
-        if (this.destroyed) return;
-
-        // disconnect from parent and destroy children
-        this.destroyed = true;
-        this.parent?.removeChild(this);
-        for (const child of this.children)
-        {
-            child.parent = undefined;
-            child.destroy(immediate);
-        }
-    }
-
-    /** Convert from local space to world space
-     *  @param {Vector2} pos - local space point */
-    localToWorld(pos) { return this.pos.add(pos.rotate(this.angle)); }
-
-    /** Convert from world space to local space
-     *  @param {Vector2} pos - world space point */
-    worldToLocal(pos) { return pos.subtract(this.pos).rotate(-this.angle); }
-
-    /** Convert from local space to world space for a vector (rotation only)
-     *  @param {Vector2} vec - local space vector */
-    localToWorldVector(vec) { return vec.rotate(this.angle); }
-
-    /** Convert from world space to local space for a vector (rotation only)
-     *  @param {Vector2} vec - world space vector */
-    worldToLocalVector(vec) { return vec.rotate(-this.angle); }
-
-    /** Called to check if a tile collision should be resolved. Return true for physics to resolve the collision or false to ignore and resolve it manually.
-     *  - Called for each solid tile the physics tests, which can be several times a frame for the same tile, and for
-     *    positions it only tries, so keep it free of side effects or guard them to once a frame
-     *  - this.pos has already moved, so a check on where it came from, like a one way platform, needs the position
-     *    saved in update, as the platformer example does
-     *  @param {number}  tileData - the value of the tile at the position
-     *  @param {Vector2} pos - the tile's bottom left corner in world space
-     *  @return {boolean} - true if the collision should be resolved by modifying it's position and velocity */
-    collideWithTile(tileData, pos) { return tileData > 0; }
-
-    /** Called by the engine to check if an object collision should be resolved. Return true for physics to resolve the collision or false to ignore and resolve it manually.
-     *  - Both objects of a touching pair are asked once a frame, whichever order they update in; an object that
-     *    destroys itself here is gone at the end of the frame and is still asked about the pairs left this frame, so a
-     *    bullet that should hit one thing checks its own destroyed flag first
-     *  @param {EngineObject} object - the object to test against
-     *  @param {Vector3} [push] - what it would take to move this object clear, a Vector3 from the 3D plugin, undefined in 2D
-     *  @return {boolean} - true if the collision should be resolved by modifying it's position and velocity
-     */
-    collideWithObject(object, push) { return true; }
-
-    /** Get this object's up vector
-     *  @param {number} [scale] - length of the vector
-     *  @return {Vector2} */
-    getUp(scale=1) { return vec2().setAngle(this.angle, scale); }
-
-    /** Get this object's right vector
-     *  @param {number} [scale] - length of the vector
-     *  @return {Vector2} */
-    getRight(scale=1) { return vec2().setAngle(this.angle+PI/2, scale); }
-
-    /** How long since the object was created
-     *  @return {number} */
-    getAliveTime() { return time - this.spawnTime; }
+    if (count > 0)
+        touchGamepadLeftStick = false;
+}
 
-    /** Get the speed of this object
-     *  @return {number} */
-    getSpeed() { return this.velocity.length(); }
+/** Set if the touch gamepad right side is an analog stick (or dpad) instead of face buttons
+ *  @param {boolean} rightStick
+ *  @memberof Settings */
+function setTouchGamepadRightStick(rightStick)
+{
+    touchGamepadRightStick = rightStick;
+    if (rightStick)
+        touchGamepadButtonCount = 0;
+}
 
-    /** Apply acceleration to this object (adjust velocity, not affected by mass)
-     *  - Does nothing on a static object (mass 0), set its velocity instead
-     *  @param {Vector2} acceleration */
-    applyAcceleration(acceleration)
-    { if (this.mass) this.velocity = this.velocity.add(acceleration); }
+/** Set if touch gamepad should be analog stick or 8 way dpad
+ *  @param {boolean} analog
+ *  @memberof Settings */
+function setTouchGamepadAnalog(analog) { touchGamepadAnalog = analog; }
 
-    /** Apply angular acceleration to this object
-     *  - Does nothing on a static object (mass 0), set its angleVelocity instead
-     *  @param {number} acceleration */
-    applyAngularAcceleration(acceleration)
-    { if (this.mass) this.angleVelocity += acceleration; }
+/** Set if touch gamepad directional controls should float to where you press
+ *  @param {boolean} floating
+ *  @memberof Settings */
+function setTouchGamepadFloating(floating) { touchGamepadFloating = floating; }
 
-    /** Apply force to this object (adjust velocity, affected by mass)
-     *  - Does nothing on a static object (mass 0), set its velocity instead
-     *  @param {Vector2} force */
-    applyForce(force)
-    { if (this.mass) this.applyAcceleration(force.scale(1/this.mass)); }
+/** Set size of virtual gamepad for touch devices in viewport CSS pixels
+ *  @param {number} size
+ *  @memberof Settings */
+function setTouchGamepadSize(size) { touchGamepadSize = size; }
 
-    /** Get the direction of the mirror
-     *  @return {number} -1 if this.mirror is true, or 1 if not mirrored */
-    getMirrorSign() { return this.mirror ? -1 : 1; }
+/** Set transparency of touch gamepad overlay
+ *  @param {number} alpha
+ *  @memberof Settings */
+function setTouchGamepadAlpha(alpha) { touchGamepadAlpha = alpha; }
 
-    /** Attaches a child to this with a local transform, returns child for chaining
-     *  @param {EngineObject} child
-     *  @param {Vector2}      [localPos=vec2()]
-     *  @param {number}       [localAngle]
-     *  @return {EngineObject} The child object added */
-    addChild(child, localPos=vec2(), localAngle=0)
-    {
-        false&&ASSERT(!this.destroyed, 'cannot add child to destroyed object');
-        if (this.destroyed) return child;
-        false&&ASSERT(!child.parent && !this.children.includes(child), 'child already has a parent, removeChild it first or use attach');
-        false&&ASSERT(child instanceof EngineObject, 'child must be an EngineObject');
-        false&&ASSERT(!child.destroyed, 'cannot add a destroyed child');
-        for (let p = /** @type {EngineObject} */ (this); p; p = p.parent)
-            false&&ASSERT(p !== child, 'cannot add an object as a child of itself or of its own child');
-        this.children.push(child);
-        child.parent = this;
-        child.localPos = localPos.copy();
-        child.localAngle = localAngle;
-        child.updateTransforms();
-        return child;
-    }
+/** Set how long to display the touch gamepad on screen in seconds, set to 0 to always display
+ *  @param {number} time
+ *  @memberof Settings */
+function setTouchGamepadDisplayTime(time) { touchGamepadDisplayTime = time; }
 
-    /** Attaches a child to this without moving it: the local transform is worked out from where the child is now,
-     *  where addChild takes one; a child of something else is moved over, returns child for chaining
-     *  @param {EngineObject} child
-     *  @return {EngineObject} The child object attached */
-    attach(child)
-    {
-        false&&ASSERT(child instanceof EngineObject, 'child must be an EngineObject');
-        false&&ASSERT(child !== this, 'cannot attach self');
-        child.parent?.removeChild(child);
-        // the local values that updateTransforms turns back into the child's current pos and angle
-        const mirror = this.getMirrorSign(), local = this.worldToLocal(child.pos);
-        local.x *= mirror;
-        return this.addChild(child, local, mirror * (child.angle - this.angle));
-    }
+/** Set duration in ms to vibrate when a touch gamepad face or start button is pressed (0 disables)
+ *  @param {number} ms
+ *  @memberof Settings */
+function setTouchGamepadVibration(ms) { touchGamepadVibration = ms; }
 
-    /** Removes a child from this one, it stays where it is in the world
-     *  @param {EngineObject} child */
-    removeChild(child)
-    {
-        false&&ASSERT(child.parent === this && this.children.includes(child));
-        const i = this.children.indexOf(child);
-        if (i < 0) return; // not a child of this one, release has no assert
-        this.children.splice(i, 1);
-        child.parent = child.localPos = undefined;
-    }
+/** Set to allow vibration hardware if it exists
+ *  @param {boolean} enable
+ *  @memberof Settings */
+function setVibrateEnable(enable) { vibrateEnable = enable; }
 
-    /** Check if this object's box overlaps another object's box
-     *  @param {EngineObject} object
-     *  @return {boolean} */
-    isOverlappingObject(object)
-    { return this.isOverlapping(object.pos, object.size); }
+/** Set if audio is enabled, false turns all sound off
+ *  @param {boolean} enable
+ *  @memberof Settings */
+function setSoundEnable(enable) { soundEnable = enable; }
 
-    /** Check if overlapping a point or aligned bounding box
-     *  @param {Vector2} pos          - Center of box
-     *  @param {Vector2} [size=vec2()] - Size of box, uses a point if undefined
-     *  @return {boolean} */
-    isOverlapping(pos, size=vec2())
-    { return isOverlapping(this.pos, this.size, pos, size); }
+/** Set volume scale to apply to all sound, music and speech
+ *  @param {number} volume
+ *  @memberof Settings */
+function setSoundVolume(volume)
+{
+    soundVolume = volume;
+    audioUpdateVolume(); // update gain immediately, sound off or not
+}
 
-    /** Set how this object collides
-     *  @param {boolean} [collideSolidObjects] - Does it collide with solid objects?
-     *  @param {boolean} [isSolid]             - Does it collide with and block other objects? (expensive in large numbers)
-     *  @param {boolean} [collideLevel]        - Does it collide with the level, its tile collision layers?
-     *  @param {boolean} [collideRaycast]      - Does it collide with raycasts? */
-    setCollision(collideSolidObjects=true, isSolid=true, collideLevel=true, collideRaycast=true)
-    {
-        false&&ASSERT(collideSolidObjects || !isSolid, 'solid objects must be set to collide');
+/** Set default range where sound no longer plays
+ *  @param {number} range
+ *  @memberof Settings */
+function setSoundDefaultRange(range) { soundDefaultRange = range; }
 
-        this.collideSolidObjects = collideSolidObjects;
-        this.isSolid = isSolid;
-        this.collideLevel = collideLevel;
-        this.collideRaycast = collideRaycast;
-    }
+/** Set default range percent to start tapering off sound
+ *  @param {number} taper
+ *  @memberof Settings */
+function setSoundDefaultTaper(taper) { soundDefaultTaper = taper; }
 
-    /** @deprecated since 1.20, use collideLevel
-     *  @type {boolean} */
-    get collideTiles() { return this.collideLevel; }
-    set collideTiles(collide) { this.collideLevel = collide; }
+/** Set if all sound pauses while the page is hidden
+ *  @param {boolean} pause
+ *  @memberof Settings */
+function setSoundPauseWhenHidden(pause) { soundPauseWhenHidden = pause; }
 
-    /** Returns string containing info about this object for debugging
-     *  @return {string} */
-    toString()
-    {
-        let text = 'type = ' + this.constructor.name;
-        if (this.pos.x || this.pos.y)
-            text += '\npos = ' + this.pos;
-        if (this.velocity.x || this.velocity.y)
-            text += '\nvelocity = ' + this.velocity;
-        if (this.size.x || this.size.y)
-            text += '\nsize = ' + this.size;
-        if (this.angle)
-            text += '\nangle = ' + this.angle.toFixed(3);
-        text += '\ncolor = ' + this.color;
-        return text;
-    }
+/** Set if watermark with FPS should be shown
+ *  @param {boolean} show
+ *  @memberof Debug */
+function setDebugWatermark(show) { debugWatermark = show; }
 
-    /** Render debug info for this object  */
-    renderDebugInfo()
-    {
-        if (!debug) return;
+/** Set key code used to toggle debug mode, Esc by default
+ *  @param {string} key
+ *  @memberof Debug */
+function setDebugKey(key) { debugKey = key; }
 
-        // check if there is anything to show
-        const hasPhysics = this.collideLevel || this.collideSolidObjects || this.isSolid;
-        if (!hasPhysics && !this.parent) return;
+/** Set if the debug keys work while the overlay is closed, the number keys and the +/- time keys
+ *  @param {boolean} [enable]
+ *  @memberof Debug */
+function setDebugKeysAlways(enable=true) { debugKeysAlways = enable; }
 
-        // show object info for debugging
-        const size = vec2(max(this.size.x, .2), max(this.size.y, .2));
-        const color = rgb(this.collideLevel?1:0, this.collideSolidObjects?1:0, this.isSolid?1:0, .5);
-        debugRect(this.pos, size, color, 0, hasPhysics ? 0 : this.angle, hasPhysics, false); // collision ignores the angle
-        if (this.parent)
-            debugRect(this.pos, size.scale(.8), rgb(1,1,1,.5), 0, this.angle, false, false);
-        this.parent && debugLine(this.pos, this.parent.pos, rgb(1,1,1,.5), .5, 0, false);
-    }
+/** Set if the tweakables panel is shown, as 9 does while the debug overlay is open
+ *  @param {boolean} [show]
+ *  @memberof Debug */
+function setDebugTweakables(show=true) { debugTweakables = show; }
+/**
+ * LittleJS Object System
+ * - EngineObject is the base class for all game objects
+ * - Handles automatic updating, rendering, physics, and collision
+ * - Supports parent-child hierarchies with transform inheritance
+ * - 2D physics with velocity, acceleration, damping, and gravity
+ * - Collision system with tiles and other objects
+ * - Renders sprites from tile sheets with color and rotation
+ * - Objects sorted by renderOrder for layered rendering
+ */
+
+/**
+ * LittleJS Object Base Object Class
+ * - Top level object class used by the engine
+ * - Automatically adds self to object list
+ * - Will be updated and rendered each frame
+ * - Renders as a sprite from a tilesheet by default
+ * - Can have color and additive color applied
+ * - 2D Physics and collision system
+ * - Sorted by renderOrder
+ * - Objects can have children attached
+ * - Parents are updated before children, and set child transform
+ * - Call destroy() to get rid of objects
+ *
+ * The physics system used by objects is simple and fast with some caveats...
+ * - Collision uses the axis aligned size, the object's rotation angle is only for rendering
+ * - Objects are guaranteed to not intersect tile collision from physics
+ * - If an object starts or is moved inside tile collision, it will not collide with that tile
+ * - Collision for objects can be set to be solid to block other objects
+ * - Objects may get pushed into overlapping other solid objects, if so they will push away
+ * - A static solid (mass 0) moved by its velocity, like a door or an elevator, pushes objects out of its way
+ * - Solid objects are more performance intensive and should be used sparingly
+ * @memberof Engine
+ * @example
+ * // create an engine object, normally you would first extend the class with your own
+ * const pos = vec2(2,3);
+ * const object = new EngineObject(pos);
+ */
+class EngineObject
+{
+    /** Create an engine object and adds it to the list of objects
+     *  @param {Vector2}  [pos=vec2()] - World space position of the object
+     *  @param {Vector2}  [size=vec2(1)] - World space size of the object
+     *  @param {TileInfo} [tileInfo] - Tile info to render object (undefined is untextured)
+     *  @param {number}   [angle] - Angle the object is rotated by
+     *  @param {Color}    [color=WHITE] - Color to apply to tile when rendered
+     *  @param {number}   [renderOrder] - Objects sorted by renderOrder before being rendered
+     */
+    constructor(pos=vec2(), size=vec2(1), tileInfo, angle=0, color=WHITE, renderOrder=0)
+    {
+        // check passed in params
+        false&&ASSERT(isVector2(pos), 'object pos must be a vec2');
+        false&&ASSERT(isVector2(size), 'object size must be a vec2');
+        false&&ASSERT(!tileInfo || tileInfo instanceof TileInfo, 'object tileInfo should be a TileInfo or undefined');
+        false&&ASSERT(typeof angle === 'number' && isFinite(angle), 'object angle should be a number');
+        false&&ASSERT(isColor(color), 'object color should be a valid rgba color');
+        false&&ASSERT(typeof renderOrder === 'number', 'object renderOrder should be a number');
+
+        /** @property {Vector2} - World space position of the object */
+        this.pos = pos.copy();
+        /** @property {Vector2} - World space width and height of the object */
+        this.size = size.copy();
+        /** @property {Vector2|undefined} - Size of object used for drawing, uses size if not set
+         *  @type {Vector2|undefined} */
+        this.drawSize = undefined;
+        /** @property {TileInfo|undefined} - Tile info to render object (undefined is untextured)
+         *  @type {TileInfo|undefined} */
+        this.tileInfo = tileInfo;
+        /** @property {number} - Angle to rotate the object */
+        this.angle = angle;
+        /** @property {Color} - Color to apply when rendered */
+        this.color = color.copy();
+        /** @property {Color|undefined} - Additive color to apply when rendered
+         *  @type {Color|undefined} */
+        this.additiveColor = undefined;
+        /** @property {Shader|undefined} - Custom shader to render with, undefined for the engine's own
+         *  @type {Shader|undefined} */
+        this.shader = undefined;
+        /** @property {boolean} - Does this object draw into the light system's shadow map; false for a floor layer, a background, a pickup */
+        this.castShadow = true;
+        /** @property {number} - With the light system, how much it lights itself: 0 lit only by the lights, 1 full
+         *  brightness in its own colors whatever the lights do, between partly; drawn into the lightmap through
+         *  renderEmissive, as 3D's emissive. Exact for solid pixels; a partly transparent one is self lit by its alpha
+         *  too, so a half alpha pixel shows at a quarter and a fading emissive sprite fades a little faster */
+        this.emissive = 0;
+        /** @property {boolean} - Should the rendered tile flip along the y axis. Affects rendering and the local→world transform of attached children (a mirrored parent flips its children's localPos.x and localAngle). Does not affect this object's own physics, collision, or localToWorld/worldToLocal. */
+        this.mirror = false;
+        /** @property {boolean} - Has object been destroyed? */
+        this.destroyed = false;
+        this.updatePass = 0; // the engine update pass it was last updated in, so nothing updates twice in one
+
+        // physical properties
+        /** @property {number} - How heavy the object is, static if 0: a static object moves by its velocity but does not
+         *  collide on its own, the moving ones collide with it */
+        this.mass = objectDefaultMass;
+        /** @property {number} - Fraction of velocity kept each frame, 1 keeps all of it, 0 stops at once */
+        this.damping = objectDefaultDamping;
+        /** @property {number} - Fraction of angular velocity kept each frame, 1 keeps all of it, 0 stops at once */
+        this.angleDamping = objectDefaultAngleDamping;
+        /** @property {number} - How bouncy the object is when colliding (0-1) */
+        this.restitution = objectDefaultRestitution;
+        /** @property {number} - Fraction of sliding speed kept each frame on the ground, 1 is no friction, 0 stops at
+         *  once, the more slippery of the object and its ground is used */
+        this.friction  = objectDefaultFriction;
+        /** @property {number} - How much to scale gravity by for this object */
+        this.gravityScale = 1;
+        /** @property {number} - Objects are sorted by render order */
+        this.renderOrder = renderOrder;
+        /** @property {Vector2} - Velocity of the object, in world units per frame */
+        this.velocity = vec2();
+        /** @property {number} - Angular velocity of the object, in radians per frame */
+        this.angleVelocity = 0;
+        /** @property {number} - Track when object was created  */
+        this.spawnTime = time;
+        /** @property {Array<EngineObject>} - List of children of this object
+         *  @type {Array<EngineObject>} */
+        this.children = [];
+        /** @property {boolean} - Limit object speed along x and y axis */
+        this.clampSpeed = true;
+        /** @property {EngineObject|undefined} - Object we are standing on, if any
+         *  @type {EngineObject|undefined} */
+        this.groundObject = undefined;
+
+        // parent child system
+        /** @property {EngineObject|undefined} - Parent of object if in local space
+         *  @type {EngineObject|undefined} */
+        this.parent = undefined;
+        /** @property {Vector2|undefined} - Position relative to the parent, only while attached to one
+         *  @type {Vector2|undefined} */
+        this.localPos = undefined;
+        /** @property {number} - Local angle if child  */
+        this.localAngle = 0;
+
+        // collision flags
+        /** @property {boolean} - Object collides with the level, its tile collision layers
+         *  @type {boolean} */
+        this.collideLevel = false;
+        /** @property {boolean} - Object collides with solid objects */
+        this.collideSolidObjects = false;
+        /** @property {boolean} - Object collides with and blocks other objects */
+        this.isSolid = false;
+        /** @property {boolean} - Object collides with raycasts */
+        this.collideRaycast = false;
+
+        /** @property {boolean} - Object is skipped by engineObjectsDestroy, for things that outlive a level like a camera
+         *  - Calling destroy on it still destroys it, and its children go with it either way */
+        this.persistent = false;
+
+        // add to list of objects
+        engineObjects.push(this);
+    }
+
+    /** Update the object transform, called automatically by engine even when paused
+     *  @param {boolean} [updateChildren] - Also update the children's transforms */
+    updateTransforms(updateChildren=true)
+    {
+        const parent = this.parent;
+        if (parent)
+        {
+            // compose with parent transform inline to avoid intermediate vector allocs
+            const mirror = parent.getMirrorSign();
+            const lp = this.localPos, pp = parent.pos;
+            const lx = lp.x*mirror, ly = lp.y, pa = parent.angle;
+            if (pa)
+            {
+                const c = cos(-pa), s = sin(-pa);
+                this.pos.set(lx*c - ly*s + pp.x, lx*s + ly*c + pp.y);
+            }
+            else
+                this.pos.set(lx + pp.x, ly + pp.y);
+            this.angle = mirror*this.localAngle + pa;
+        }
+
+        // update children
+        if (updateChildren)
+            for (const child of this.children)
+                child.updateTransforms();
+    }
+
+    /** Update the object physics, called automatically by engine once each frame. Can be overridden to stop or change how physics works for an object. */
+    updatePhysics()
+    {
+        // child objects do not have physics
+        false&&ASSERT(!this.parent);
+
+        // bail if a collision callback destroyed us mid-frame
+        if (this.destroyed) return;
+
+        // limit max speed to prevent missing collisions, only for what collides: with solids, or with tiles while it
+        // has a mass, which tile collision needs; anything else moves as fast as it is told
+        if (this.clampSpeed && enablePhysicsSolver && (this.collideSolidObjects || this.collideLevel && this.mass))
+        {
+            this.velocity.x = clamp(this.velocity.x, -objectMaxSpeed, objectMaxSpeed);
+            this.velocity.y = clamp(this.velocity.y, -objectMaxSpeed, objectMaxSpeed);
+        }
+
+        // physics sanity checks
+        false&&ASSERT(this.angleDamping >= 0 && this.angleDamping <= 1, 'angleDamping must be 0 to 1, the fraction kept each frame');
+        false&&ASSERT(this.damping >= 0 && this.damping <= 1, 'damping must be 0 to 1, the fraction of velocity kept each frame');
+
+        // apply physics; only the solver needs where the object was, so only then is it copied
+        const solve = enablePhysicsSolver && this.mass;
+        const oldPos = solve ? this.pos.copy() : undefined;
+        this.velocity.x *= this.damping;
+        this.velocity.y *= this.damping;
+        if (this.mass)
+        {
+            // apply gravity only if it has mass
+            this.velocity.x += gravity.x * this.gravityScale;
+            this.velocity.y += gravity.y * this.gravityScale;
+        }
+        this.pos.x += this.velocity.x;
+        this.pos.y += this.velocity.y;
+        this.angle += this.angleVelocity *= this.angleDamping;
+
+        // don't do collision for static objects or if solver disabled
+        if (!solve) return;
+
+        // which way is down for this object, a negative gravityScale falls up and lands on ceilings
+        const gravityY = this.gravityScale < 0 ? -gravity.y : gravity.y;
+        const wasFalling = this.velocity.y < 0 && gravityY < 0 || this.velocity.y > 0 && gravityY > 0;
+        if (this.groundObject)
+        {
+            // apply friction in local space of ground object
+            const friction = max(this.friction, this.groundObject.friction);
+            const groundSpeed = this.groundObject.velocity.x;
+            this.velocity.x = groundSpeed + (this.velocity.x - groundSpeed) * friction;
+            this.groundObject = undefined;
+        }
+
+        // an object with no width or height has no box to push out of, or to be pushed out of
+        if (this.collideSolidObjects && this.size.x && this.size.y)
+        {
+            // check collisions against solid objects
+            const epsilon = .001; // necessary to push slightly outside of the collision
+            for (const o of engineObjectsCollideStaticLast)
+            {
+                // skip destroyed, child objects, self collision, or objects with no box
+                if (o.destroyed || o.parent || o === this || !o.size.x || !o.size.y) continue;
+
+                // non solid objects don't collide with each other
+                if (!this.isSolid && !o.isSolid) continue;
+
+                // check collision
+                if (!this.isOverlappingObject(o)) continue;
+
+                // each moving object checks its own contacts, so a pair the other one already asked about this frame
+                // is not asked twice: left overlapping, ignored or only nudged apart it is skipped, and one both said
+                // to resolve, pushed back together since, is resolved again
+                const answer = engineObjectsCollidePairAnswer(o, this);
+                if (answer === false) continue;
+                if (!answer)
+                {
+                    // notify objects of collision and check if should be resolved
+                    const collide1 = this.collideWithObject(o);
+                    const collide2 = o.collideWithObject(this);
+                    if (!collide1 || !collide2)
+                    {
+                        engineObjectsCollidePairAdd(this, o);
+                        continue;
+                    }
+                }
+
+                const wasOverlapping = isOverlapping(oldPos, this.size, o.pos, o.size);
+                if (wasOverlapping && (!o.mass || o.groundObject))
+                {
+                    // a static solid that moved into it, like a door or an elevator, pushes it out the shortest way
+                    // at once and carries it along, it would only drift out slowly and the solid would pass through;
+                    // an object standing on something counts as fixed too, so a stack on an elevator rides together;
+                    // it bounces off relative to the mover, a paddle moved by setting pos bounces a ball as a wall does
+                    const push = collideBoxBox(this.pos, this.size, o.pos, o.size);
+                    if (push)
+                    {
+                        this.pos.x += push.x + sign(push.x) * epsilon;
+                        this.pos.y += push.y + sign(push.y) * epsilon;
+                        const restitution = max(this.restitution, o.restitution);
+                        if (push.x)
+                        {
+                            const v = this.velocity.x - o.velocity.x;
+                            if (v * push.x < 0) // moving into it
+                                this.velocity.x = o.velocity.x - v * restitution;
+                        }
+                        else
+                        {
+                            const v = this.velocity.y - o.velocity.y;
+                            if (v * push.y < 0) // moving into it
+                                this.velocity.y = o.velocity.y - v * restitution;
+                            if (push.y * gravityY < 0) // pushed up against gravity, it stands on it
+                                this.groundObject = o;
+                        }
+                    }
+                    engineObjectsCollidePairAdd(this, o);
+
+                    debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f00', undefined, false);
+                    continue;
+                }
+                if (wasOverlapping)
+                {
+                    // if already was touching, try to push away
+                    const deltaPos = oldPos.subtract(o.pos);
+                    const length = deltaPos.length();
+                    const pushAwayAccel = .001;
+                    const velocity = length < .001 ? vec2(0, pushAwayAccel) : deltaPos.scale(pushAwayAccel/length);
+                    this.velocity = this.velocity.add(velocity);
+                    if (o.mass) // push away other object if not fixed
+                        o.velocity = o.velocity.subtract(velocity);
+                    engineObjectsCollidePairAdd(this, o);
+
+                    debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f00', undefined, false);
+                    continue;
+                }
+
+                // check for collision
+                const sizeBoth = this.size.add(o.size);
+                // prefer to push up if small delta, up away from this object's own gravity
+                const smallStepUp = (gravityY > 0 ? o.pos.y - oldPos.y : oldPos.y - o.pos.y)*2 > sizeBoth.y - abs(gravityY);
+                const isBlockedX = abs(oldPos.y - o.pos.y)*2 < sizeBoth.y;
+                const isBlockedY = abs(oldPos.x - o.pos.x)*2 < sizeBoth.x;
+                const restitution = max(this.restitution, o.restitution);
+
+                if (smallStepUp || isBlockedY || !isBlockedX) // resolve y collision
+                {
+                    // push outside object collision
+                    this.pos.y = o.pos.y + (sizeBoth.y/2 + epsilon) * sign(oldPos.y - o.pos.y);
+                    if ((o.groundObject && wasFalling) || !o.mass)
+                    {
+                        // set ground object if landed on something
+                        if (wasFalling)
+                            this.groundObject = o;
+
+                        // bounce if other object is fixed or grounded, relative to it so a rider keeps up with a
+                        // platform moving down instead of landing on it again every few frames
+                        this.velocity.y = o.velocity.y - (this.velocity.y - o.velocity.y) * restitution;
+                    }
+                    else // o has mass here, the other branch already handled the massless case
+                    {
+                        // inelastic collision
+                        const inelastic = (this.mass * this.velocity.y + o.mass * o.velocity.y) / (this.mass + o.mass);
+
+                        // elastic collision
+                        const elastic0 = this.velocity.y * (this.mass - o.mass) / (this.mass + o.mass)
+                            + o.velocity.y * 2 * o.mass / (this.mass + o.mass);
+                        const elastic1 = o.velocity.y * (o.mass - this.mass) / (this.mass + o.mass)
+                            + this.velocity.y * 2 * this.mass / (this.mass + o.mass);
+
+                        // lerp between elastic or inelastic based on restitution
+                        this.velocity.y = lerp(inelastic, elastic0, restitution);
+                        o.velocity.y = lerp(inelastic, elastic1, restitution);
+                    }
+                }
+                if (!smallStepUp && isBlockedX) // resolve x collision
+                {
+                    // push outside collision
+                    this.pos.x = o.pos.x + (sizeBoth.x/2 + epsilon) * sign(oldPos.x - o.pos.x);
+                    if (o.mass)
+                    {
+                        // inelastic collision
+                        const inelastic = (this.mass * this.velocity.x + o.mass * o.velocity.x) / (this.mass + o.mass);
+
+                        // elastic collision
+                        const elastic0 = this.velocity.x * (this.mass - o.mass) / (this.mass + o.mass)
+                            + o.velocity.x * 2 * o.mass / (this.mass + o.mass);
+                        const elastic1 = o.velocity.x * (o.mass - this.mass) / (this.mass + o.mass)
+                            + this.velocity.x * 2 * this.mass / (this.mass + o.mass);
+
+                        // lerp between elastic or inelastic based on restitution
+                        this.velocity.x = lerp(inelastic, elastic0, restitution);
+                        o.velocity.x = lerp(inelastic, elastic1, restitution);
+                    }
+                    else // bounce if other object is fixed, relative to it as a landing is
+                        this.velocity.x = o.velocity.x - (this.velocity.x - o.velocity.x) * restitution;
+                }
+                engineObjectsCollidePairAdd(this, o, true);
+                debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f0f', undefined, false);
+            }
+        }
+        if (this.collideLevel)
+        {
+            // check collision against tiles
+            const hitLayer = tileCollisionTest(this.pos, this.size, this);
+            if (hitLayer)
+            {
+                // if already was stuck in collision, don't do anything
+                // this should not happen unless something starts in collision
+                if (!tileCollisionTest(oldPos, this.size, this))
+                {
+                    // test which side we bounced off (or both if a corner)
+                    const isBlockedX = tileCollisionTest(vec2(this.pos.x, oldPos.y), this.size, this);
+                    const isBlockedY = tileCollisionTest(vec2(oldPos.x, this.pos.y), this.size, this);
+                    const restitution = max(this.restitution, hitLayer.restitution);
+                    if (isBlockedX)
+                    {
+                        // a ledge caught less than maxMove below its top lifts the object onto it instead of stopping it,
+                        // down off a ceiling ledge when gravity points up; zero gravity counts as down
+                        const epsilon = 1e-3;
+                        const maxMove = .1;
+                        const y = gravityY > 0 ?
+                            ceil( oldPos.y+this.size.y/2-1) - this.size.y/2 - epsilon :
+                            floor(oldPos.y-this.size.y/2+1) + this.size.y/2 + epsilon;
+                        if (abs(y - this.pos.y) < maxMove && !tileCollisionTest(vec2(this.pos.x, y), this.size, this))
+                        {
+                            this.pos.y = y;
+                            debugPhysics && debugRect(this.pos, this.size, '#ff0', 0, 0, false, false);
+                            return;
+                        }
+
+                        // move to previous X position and bounce
+                        this.pos.x = oldPos.x;
+                        this.velocity.x *= -restitution;
+                    }
+                    if (isBlockedY || !isBlockedX)
+                    {
+                        if (wasFalling)
+                        {
+                            // adjust position to slightly away from nearest tile
+                            // this prevents gap between object and ground
+                            const epsilon = .0001;
+                            const offset = this.size.y/2 + epsilon;
+                            // rounded in the layer's space as its collision test is, or a bottom a hair below a
+                            // grid line would round to the row under it, inside the floor, and fall through
+                            const layerY = hitLayer.pos.y;
+                            this.pos.y = layerY + (gravityY < 0 ?
+                                floor(oldPos.y - layerY - this.size.y/2) + offset :
+                                ceil( oldPos.y - layerY + this.size.y/2) - offset);
+
+                            // set ground object for tile collision
+                            this.groundObject = hitLayer;
+                        }
+                        else
+                        {
+                            // move to previous Y position
+                            this.pos.y = oldPos.y;
+                            this.groundObject = undefined;
+                        }
+                        // bounce velocity
+                        this.velocity.y *= -restitution;
+                    }
+                    debugPhysics && debugRect(this.pos, this.size, '#f00', 0, 0, false, false);
+                }
+            }
+        }
+    }
+
+    /** Update the object, called automatically by engine once each frame. Does nothing by default. */
+    update() {}
+
+    /** Render the object, draws a tile by default, automatically called each frame, sorted by renderOrder */
+    render()
+    {
+        // default object render
+        drawTile(this.pos, this.drawSize || this.size, this.tileInfo, this.color, this.angle, this.mirror, this.additiveColor, glEnable, false);
+    }
+
+    /** Optional hook called during the light system plugin's lightmap pass to draw this object's lightmap contribution. Does nothing by default. */
+    renderLight() {}
+
+    /** Draw this object into the light system's shadow map, called during its shadow pass when castShadow is set.
+     *  Calls render() by default so the object casts its own shape; override to cast a different one, like a blob at a character's feet so its body stays lit;
+     *  screen space WebGL draws in render() are skipped during the pass */
+    renderShadow() { this.render(); }
+
+    /** Draw this object's shape into the light system's lightmap, called during its light pass when emissive is above
+     *  0; what it draws shows in its own colors that much brighter. Calls render() by default so the whole object
+     *  glows; override to glow a part, like a robot's eyes */
+    renderEmissive() { this.render(); }
+
+    /** Destroy this object, destroy its children, detach its parent, and mark it for removal
+     *  @param {boolean} [immediate] - true removes attached effects like particle emitters at once, false lets them finish first */
+    destroy(immediate=false)
+    {
+        if (this.destroyed) return;
+
+        // disconnect from parent and destroy children
+        this.destroyed = true;
+        this.parent?.removeChild(this);
+        for (const child of this.children)
+        {
+            child.parent = undefined;
+            child.destroy(immediate);
+        }
+    }
+
+    /** Convert from local space to world space
+     *  @param {Vector2} pos - local space point */
+    localToWorld(pos) { return this.pos.add(pos.rotate(this.angle)); }
+
+    /** Convert from world space to local space
+     *  @param {Vector2} pos - world space point */
+    worldToLocal(pos) { return pos.subtract(this.pos).rotate(-this.angle); }
+
+    /** Convert from local space to world space for a vector (rotation only)
+     *  @param {Vector2} vec - local space vector */
+    localToWorldVector(vec) { return vec.rotate(this.angle); }
+
+    /** Convert from world space to local space for a vector (rotation only)
+     *  @param {Vector2} vec - world space vector */
+    worldToLocalVector(vec) { return vec.rotate(-this.angle); }
+
+    /** Called to check if a tile collision should be resolved. Return true for physics to resolve the collision or false to ignore and resolve it manually.
+     *  - Called for each solid tile the physics tests, which can be several times a frame for the same tile, and for
+     *    positions it only tries, so keep it free of side effects or guard them to once a frame
+     *  - this.pos has already moved, so a check on where it came from, like a one way platform, needs the position
+     *    saved in update, as the platformer example does
+     *  @param {number}  tileData - the value of the tile at the position
+     *  @param {Vector2} pos - the tile's bottom left corner in world space
+     *  @return {boolean} - true if the collision should be resolved by modifying it's position and velocity */
+    collideWithTile(tileData, pos) { return tileData > 0; }
+
+    /** Called by the engine to check if an object collision should be resolved. Return true for physics to resolve the collision or false to ignore and resolve it manually.
+     *  - Both objects of a touching pair are asked once a frame, whichever order they update in; an object that
+     *    destroys itself here is gone at the end of the frame and is still asked about the pairs left this frame, so a
+     *    bullet that should hit one thing checks its own destroyed flag first
+     *  @param {EngineObject} object - the object to test against
+     *  @param {Vector3} [push] - what it would take to move this object clear, a Vector3 from the 3D plugin, undefined in 2D
+     *  @return {boolean} - true if the collision should be resolved by modifying it's position and velocity
+     */
+    collideWithObject(object, push) { return true; }
+
+    /** Get this object's up vector
+     *  @param {number} [scale] - length of the vector
+     *  @return {Vector2} */
+    getUp(scale=1) { return vec2().setAngle(this.angle, scale); }
+
+    /** Get this object's right vector
+     *  @param {number} [scale] - length of the vector
+     *  @return {Vector2} */
+    getRight(scale=1) { return vec2().setAngle(this.angle+PI/2, scale); }
+
+    /** How long since the object was created
+     *  @return {number} */
+    getAliveTime() { return time - this.spawnTime; }
+
+    /** Get the speed of this object
+     *  @return {number} */
+    getSpeed() { return this.velocity.length(); }
+
+    /** Apply acceleration to this object (adjust velocity, not affected by mass)
+     *  - Does nothing on a static object (mass 0), set its velocity instead
+     *  @param {Vector2} acceleration */
+    applyAcceleration(acceleration)
+    { if (this.mass) this.velocity = this.velocity.add(acceleration); }
+
+    /** Apply angular acceleration to this object
+     *  - Does nothing on a static object (mass 0), set its angleVelocity instead
+     *  @param {number} acceleration */
+    applyAngularAcceleration(acceleration)
+    { if (this.mass) this.angleVelocity += acceleration; }
+
+    /** Apply force to this object (adjust velocity, affected by mass)
+     *  - Does nothing on a static object (mass 0), set its velocity instead
+     *  @param {Vector2} force */
+    applyForce(force)
+    { if (this.mass) this.applyAcceleration(force.scale(1/this.mass)); }
+
+    /** Get the direction of the mirror
+     *  @return {number} -1 if this.mirror is true, or 1 if not mirrored */
+    getMirrorSign() { return this.mirror ? -1 : 1; }
+
+    /** Attaches a child to this with a local transform, returns child for chaining
+     *  @param {EngineObject} child
+     *  @param {Vector2}      [localPos=vec2()]
+     *  @param {number}       [localAngle]
+     *  @return {EngineObject} The child object added */
+    addChild(child, localPos=vec2(), localAngle=0)
+    {
+        false&&ASSERT(!this.destroyed, 'cannot add child to destroyed object');
+        if (this.destroyed) return child;
+        false&&ASSERT(!child.parent && !this.children.includes(child), 'child already has a parent, removeChild it first or use attach');
+        false&&ASSERT(child instanceof EngineObject, 'child must be an EngineObject');
+        false&&ASSERT(!child.destroyed, 'cannot add a destroyed child');
+        for (let p = /** @type {EngineObject} */ (this); p; p = p.parent)
+            false&&ASSERT(p !== child, 'cannot add an object as a child of itself or of its own child');
+        this.children.push(child);
+        child.parent = this;
+        child.localPos = localPos.copy();
+        child.localAngle = localAngle;
+        child.updateTransforms();
+        return child;
+    }
+
+    /** Attaches a child to this without moving it: the local transform is worked out from where the child is now,
+     *  where addChild takes one; a child of something else is moved over, returns child for chaining
+     *  @param {EngineObject} child
+     *  @return {EngineObject} The child object attached */
+    attach(child)
+    {
+        false&&ASSERT(child instanceof EngineObject, 'child must be an EngineObject');
+        false&&ASSERT(child !== this, 'cannot attach self');
+        child.parent?.removeChild(child);
+        // the local values that updateTransforms turns back into the child's current pos and angle
+        const mirror = this.getMirrorSign(), local = this.worldToLocal(child.pos);
+        local.x *= mirror;
+        return this.addChild(child, local, mirror * (child.angle - this.angle));
+    }
+
+    /** Removes a child from this one, it stays where it is in the world
+     *  @param {EngineObject} child */
+    removeChild(child)
+    {
+        false&&ASSERT(child.parent === this && this.children.includes(child));
+        const i = this.children.indexOf(child);
+        if (i < 0) return; // not a child of this one, release has no assert
+        this.children.splice(i, 1);
+        child.parent = child.localPos = undefined;
+    }
+
+    /** Check if this object's box overlaps another object's box
+     *  @param {EngineObject} object
+     *  @return {boolean} */
+    isOverlappingObject(object)
+    { return this.isOverlapping(object.pos, object.size); }
+
+    /** Check if overlapping a point or aligned bounding box
+     *  @param {Vector2} pos          - Center of box
+     *  @param {Vector2} [size=vec2()] - Size of box, uses a point if undefined
+     *  @return {boolean} */
+    isOverlapping(pos, size=vec2())
+    { return isOverlapping(this.pos, this.size, pos, size); }
+
+    /** Set how this object collides
+     *  @param {boolean} [collideSolidObjects] - Does it collide with solid objects?
+     *  @param {boolean} [isSolid]             - Does it collide with and block other objects? (expensive in large numbers)
+     *  @param {boolean} [collideLevel]        - Does it collide with the level, its tile collision layers?
+     *  @param {boolean} [collideRaycast]      - Does it collide with raycasts? */
+    setCollision(collideSolidObjects=true, isSolid=true, collideLevel=true, collideRaycast=true)
+    {
+        false&&ASSERT(collideSolidObjects || !isSolid, 'solid objects must be set to collide');
+
+        this.collideSolidObjects = collideSolidObjects;
+        this.isSolid = isSolid;
+        this.collideLevel = collideLevel;
+        this.collideRaycast = collideRaycast;
+    }
+
+    /** @deprecated since 1.20, use collideLevel
+     *  @type {boolean} */
+    get collideTiles() { return this.collideLevel; }
+    set collideTiles(collide) { this.collideLevel = collide; }
+
+    /** Returns string containing info about this object for debugging
+     *  @return {string} */
+    toString()
+    {
+        let text = 'type = ' + this.constructor.name;
+        if (this.pos.x || this.pos.y)
+            text += '\npos = ' + this.pos;
+        if (this.velocity.x || this.velocity.y)
+            text += '\nvelocity = ' + this.velocity;
+        if (this.size.x || this.size.y)
+            text += '\nsize = ' + this.size;
+        if (this.angle)
+            text += '\nangle = ' + this.angle.toFixed(3);
+        text += '\ncolor = ' + this.color;
+        return text;
+    }
+
+    /** Render debug info for this object  */
+    renderDebugInfo()
+    {
+        if (!debug) return;
+
+        // check if there is anything to show
+        const hasPhysics = this.collideLevel || this.collideSolidObjects || this.isSolid;
+        if (!hasPhysics && !this.parent) return;
+
+        // show object info for debugging
+        const size = vec2(max(this.size.x, .2), max(this.size.y, .2));
+        const color = rgb(this.collideLevel?1:0, this.collideSolidObjects?1:0, this.isSolid?1:0, .5);
+        debugRect(this.pos, size, color, 0, hasPhysics ? 0 : this.angle, hasPhysics, false); // collision ignores the angle
+        if (this.parent)
+            debugRect(this.pos, size.scale(.8), rgb(1,1,1,.5), 0, this.angle, false, false);
+        this.parent && debugLine(this.pos, this.parent.pos, rgb(1,1,1,.5), .5, 0, false);
+    }
 }
 /**
  * LittleJS Drawing System
@@ -4585,17 +4614,29 @@ class SpriteAnimator
      *  @return {SpriteAnimation} */
     get clip() { return this.clips[this.name]; }
 
+    /** The clip showing now, once a clip that has ended has called its onEnd: the callback may switch clips, and a
+     *  read gives the clip it switched to, not the one that ended
+     *  @return {SpriteAnimation}
+     *  @ignore */
+    get settledClip()
+    {
+        // each clip's own isDone calls its onEnd once; a few switches in a row at most
+        for (let i = 4, clip; i-- && clip !== this.clip;)
+            (clip = this.clip).isDone;
+        return this.clip;
+    }
+
     /** The tile of the frame showing now
      *  @return {TileInfo} */
-    get tileInfo() { return this.clip.tileInfo; }
+    get tileInfo() { return this.settledClip.tileInfo; }
 
     /** The frame of the clip showing now
      *  @return {number} */
-    get frame() { return this.clip.frame; }
+    get frame() { return this.settledClip.frame; }
 
     /** True once the clip showing now is a play that has ended
      *  @return {boolean} */
-    get isDone() { return this.clip.isDone; }
+    get isDone() { return this.settledClip.isDone; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -5020,7 +5061,7 @@ function drawRegularPoly(pos, size=vec2(1), sides=3, color=WHITE, lineWidth=0, l
     // build regular polygon points
     const points = [];
     const sizeX = size.x/2, sizeY = size.y/2;
-    for (let i=sides; i--;)
+    for (let i=sides; i-- > 0;) // a count that is not whole, or below zero, still ends
     {
         const a = (i/sides)*PI*2;
         points.push(vec2(sin(a)*sizeX, cos(a)*sizeY));
@@ -5131,7 +5172,7 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
         if (!ring)
         {
             const points = [];
-            for (let i=sides; i--;)
+            for (let i=sides; i-- > 0;)
             {
                 const a = (i/sides)*PI*2;
                 points.push(vec2(sin(a), cos(a)));
@@ -5231,7 +5272,7 @@ function drawEllipseGradient(pos, size=vec2(1), colorInner=WHITE, colorOuter=CLE
         const startA = (offset%sides)/sides*PI*2;
         const points = [rim(startA)];
         const colors = [outerInt];
-        for (let i=sides; i--;)
+        for (let i=sides; i-- > 0;)
         {
             const a = ((i+offset)%sides)/sides*PI*2;
             points.push(pos);
@@ -5654,7 +5695,8 @@ function isOnScreen(pos, size=0)
 function setAdditiveBlendMode(additive=true)
 {
     glAdditive = additive;
-    drawContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    if (drawContext) // none headless
+        drawContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
 /** Set the Shader that 2D draws use from now on, none for the engine's own
@@ -5777,9 +5819,12 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
     }
     else
     {
-        // copy to offscreen canvas
-        workReadCanvas.width = sWidth;
-        workReadCanvas.height = sHeight;
+        // copy to offscreen canvas, sized again only when the size changes: setting a size remakes the canvas even
+        // to the same one, and a game's tinted tiles are mostly of one size
+        if (workReadCanvas.width !== sWidth || workReadCanvas.height !== sHeight)
+            workReadCanvas.width = sWidth, workReadCanvas.height = sHeight;
+        else
+            workReadContext.clearRect(0, 0, sWidth, sHeight);
         workReadContext.drawImage(image, sx|0, sy|0, sWidth, sHeight, 0, 0, sWidth, sHeight);
 
         // tint image using offscreen work context
@@ -6034,6 +6079,13 @@ let mouseDeltaScreen = vec2();
  *  @memberof Input */
 let mouseWheel = 0;
 
+/** Touch pinch delta this frame, in the mouse wheel's units: two fingers moving apart are negative, as the wheel
+ *  turned up is, and moving together positive, 1 for every 50 pixels; added to mouseWheel while touchPinchWheel
+ *  is on, so a game that zooms with the wheel zooms with a pinch
+ *  @type {number}
+ *  @memberof Input */
+let touchPinch = 0;
+
 /** True if mouse was inside the document window, set to false when mouse leaves
  *  @type {boolean}
  *  @memberof Input */
@@ -6122,6 +6174,7 @@ function inputClearKey(key, device=0, clearDown=true, clearPressed=true, clearRe
 const inputWASDToArrow = {KeyW:'ArrowUp', KeyS:'ArrowDown', KeyA:'ArrowLeft', KeyD:'ArrowRight'};
 const inputArrowToWASD = {ArrowUp:'KeyW', ArrowDown:'KeyS', ArrowLeft:'KeyA', ArrowRight:'KeyD'};
 const inputKeysHeld = new Set; // the keys physically down, since an arrow's slot is shared with its alias
+let inputPinch; // the two fingers pinching and how far apart they were, undefined with no pinch
 let inputWasTouching = 0, inputTouchIdentifier; // the touch driving the mouse, cleared with the input so only a new touch presses
 let inputLastTouchTime = -1e9; // when a touch event last came, the mouse events a browser makes from a tap follow it
 
@@ -6164,6 +6217,7 @@ function inputClear()
         if (!i || inputData[i]) inputData[i] = [];
     inputKeysHeld.clear();
     inputWasTouching = 0;
+    inputPinch = undefined;
     // release the touch gamepad, a finger still on it has to lift before it can take a control again
     touchGamepadPointerRole.clear();
     touchGamepadButtons.length = 0;
@@ -6691,19 +6745,52 @@ function inputInit()
                     const pressTouch = !inputWasTouching && e.type == 'touchstart' &&
                         [...e.changedTouches].find(t=> !isGamepadTouch(t));
                     const touch = pressTouch || gameTouches[0];
+                    let pos = vec2(touch.clientX, touch.clientY);
+
+                    // two fingers pinch: how far they moved together or apart is the touch screen's wheel, a
+                    // click for every 50 pixels, and the mouse is between them, the place to zoom about; with
+                    // touchPinchWheel off the pinch is only measured, and the first finger is the mouse as ever
+                    const pinching = touching > 1 && touchPinchWheel;
+                    if (touching > 1)
+                    {
+                        const [a, b] = gameTouches, key = a.identifier + ' ' + b.identifier;
+                        const distance = hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+                        if (inputPinch && inputPinch.key === key)
+                        {
+                            const delta = (inputPinch.distance - distance) / 50;
+                            touchPinch += delta;
+                            if (touchPinchWheel)
+                                mouseWheel += delta;
+                        }
+                        inputPinch = {key, distance}; // other fingers start it over, with no jump
+                        if (pinching)
+                            pos = vec2((a.clientX + b.clientX) / 2, (a.clientY + b.clientY) / 2);
+                    }
+                    else
+                        inputPinch = undefined;
 
                     // set event pos and pass it along
-                    const pos = vec2(touch.clientX, touch.clientY);
                     const mousePosScreenLast = mousePosScreen;
                     mousePosScreen = mouseEventToScreen(pos);
-                    if (inputWasTouching && touch.identifier === inputTouchIdentifier)
+                    if (pinching)
+                    {
+                        // a pinch is not a press or a drag, the finger that pressed lets go
+                        if (inputData[0][button] & 1)
+                            inputData[0][button] = inputData[0][button] & 2 | 4;
+                    }
+                    else if (inputWasTouching && touch.identifier === inputTouchIdentifier)
                         mouseDeltaScreen = mouseDeltaScreen.add(mousePosScreen.subtract(mousePosScreenLast));
                     else if (pressTouch)
                         inputData[0][button] = 3;
-                    inputTouchIdentifier = touch.identifier;
+                    // the finger left after a pinch moves the mouse from where it is, with no jump and no press
+                    inputTouchIdentifier = pinching ? undefined : touch.identifier;
+                }
+                else
+                {
+                    inputPinch = undefined;
+                    if (inputWasTouching && (inputData[0][button] & 1))
+                        inputData[0][button] = inputData[0][button] & 2 | 4; // released only if it was pressed
                 }
-                else if (inputWasTouching && (inputData[0][button] & 1))
-                    inputData[0][button] = inputData[0][button] & 2 | 4; // released only if it was pressed
 
                 // set was touching
                 inputWasTouching = touching;
@@ -6962,7 +7049,7 @@ function inputUpdatePost()
     for (const deviceInputData of inputData)
     for (const i in deviceInputData)
         deviceInputData[i] &= 1;
-    mouseWheel = 0;
+    mouseWheel = touchPinch = 0;
     mouseDelta = vec2();
     mouseDeltaScreen = vec2();
 }
@@ -7683,7 +7770,13 @@ class Sound
      */
     constructor(asset, randomness, range, taper=soundDefaultTaper, onloadCallback)
     {
-        if (!soundEnable || headlessMode) return;
+        if (!soundEnable || headlessMode)
+        {
+            // no sound is made: it counts as loaded, so a game that waits for its sounds goes on
+            this.loadedPercent = 1;
+            onloadCallback?.(this);
+            return;
+        }
         const rangeIsDefault = range === undefined;
         if (rangeIsDefault)
             range = soundDefaultRange;
@@ -7694,10 +7787,9 @@ class Sound
         false&&ASSERT(isNumber(range), 'range must be a number');
         false&&ASSERT(isNumber(taper), 'taper must be a number');
 
-        /** @property {number} - World space max range of sound */
         this.range = range;
         /** @property {boolean} - No range was given, so it got soundDefaultRange; played in 3D such a sound is heard
-         *  to render3D.soundDefaultRange instead, which is further */
+         *  to render3D.soundDefaultRange instead, which is further; setting range makes it false */
         this.rangeIsDefault = rangeIsDefault;
         /** @property {number} - At what percentage of range should it start tapering */
         this.taper = taper;
@@ -7753,6 +7845,15 @@ class Sound
         }
     }
 
+    /** World space max range of sound, 0 for no limit; a range that is set is the sound's own, in 3D too
+     *  @type {number} */
+    get range() { return this.rangeValue; }
+    set range(range)
+    {
+        this.rangeValue = range;
+        this.rangeIsDefault = false;
+    }
+
     /** Sample data for each channel
      *  Sounds keep their samples in an audio buffer, so reading this rebuilds
      *  the arrays from it and caches them. The copies are safe to hold onto,
@@ -8822,7 +8923,8 @@ function objectLayersMake(tileMapData, object)
     const name = object.type || object.class, type = objectLayersTypes.get(name);
     if (!type)
     {
-        debug && console.warn(`objectLayersLoad: no type added for ${name}, skipped`);
+        // an object with no type, a shape or a text someone drew in Tiled, is not one a game makes
+        debug && name && console.warn(`objectLayersLoad: no type added for ${name}, skipped`);
         return;
     }
     const {height=0, tilewidth=1, tileheight=1} = tileMapData;
@@ -10906,6 +11008,9 @@ function glDrawUntextured(x, y, sizeX, sizeY, angle, rgba)
     glDraw(x, y, sizeX, sizeY, angle, 0, 0, 0, 0, 0, rgba);
 }
 
+// the list and the vectors glDrawPointsTransform writes its points into
+const glPointsOut = [], glPointsPool = [];
+
 /** Transform and add a polygon to the gl draw list
  *  @param {Array<Vector2>} points - Array of Vector2 points
  *  @param {number} rgba - Color of the polygon as a 32-bit integer
@@ -10918,15 +11023,21 @@ function glDrawUntextured(x, y, sizeX, sizeY, angle, rgba)
  *  @memberof WebGL */
 function glDrawPointsTransform(points, rgba, x, y, sx, sy, angle, tristrip=true)
 {
-    const pointsOut = [];
+    // written into vectors kept for this, a circle would make one for each of its sides at every draw; they are
+    // read into the batch before this returns
+    const pointsOut = glPointsOut, pool = glPointsPool, count = points.length;
+    pointsOut.length = count;
     const sa = sin(-angle);
     const ca = cos(-angle);
-    for (const p of points)
+    for (let i = 0; i < count; ++i)
     {
         // transform the point
+        const p = points[i], out = pool[i] ||= vec2();
         const px = p.x*sx;
         const py = p.y*sy;
-        pointsOut.push(vec2(x + ca*px - sa*py, y + sa*px + ca*py));
+        out.x = x + ca*px - sa*py;
+        out.y = y + sa*px + ca*py;
+        pointsOut[i] = out;
     }
     const drawPoints = tristrip ? glPolyStrip(pointsOut) : pointsOut;
     glDrawPoints(drawPoints, rgba);
@@ -12361,8 +12472,11 @@ class PostProcessPlugin
             {
                 // copy main canvas to work canvas at the backing store size,
                 // mainCanvasSize is css pixels so it would lose resolution
-                workCanvas.width = mainCanvas.width;
-                workCanvas.height = mainCanvas.height;
+                // sized again only when the canvas changed, setting a size remakes the canvas even to the same one
+                if (workCanvas.width !== mainCanvas.width || workCanvas.height !== mainCanvas.height)
+                    workCanvas.width = mainCanvas.width, workCanvas.height = mainCanvas.height;
+                else
+                    workContext.clearRect(0, 0, workCanvas.width, workCanvas.height);
                 glCopyToContext(workContext);
                 workContext.drawImage(mainCanvas, 0, 0);
                 // clear the main canvas with clearRect, resizing it would also
@@ -13118,13 +13232,13 @@ class LightSystemPlugin
             // an automatic size follows the canvas, so reallocate the lightmap when
             // the canvas changed size, after the flush so the batch keeps its texture
             const size = lightSystem.textureSize;
-            if (lightSystem.textureSizeAuto &&
-                (size.x !== mainCanvasSize.x || size.y !== mainCanvasSize.y))
+            const wantX = glClampTextureSize(mainCanvasSize.x), wantY = glClampTextureSize(mainCanvasSize.y);
+            if (lightSystem.textureSizeAuto && (size.x !== wantX || size.y !== wantY))
             {
-                lightSystem.textureSize = mainCanvasSize.copy();
+                lightSystem.textureSize = vec2(wantX, wantY);
                 glContext.bindTexture(glContext.TEXTURE_2D, lightSystem.texture);
                 glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA,
-                    mainCanvasSize.x, mainCanvasSize.y, 0,
+                    wantX, wantY, 0,
                     glContext.RGBA, glContext.UNSIGNED_BYTE, null);
                 // put back the texture the engine tracks, a draw in renderLight must not sample the lightmap
                 if (glActiveTexture)
@@ -13264,8 +13378,10 @@ class LightSystemPlugin
         this.shadowMapSize = glClampTextureSize(this.shadowMapSize);
         this.shadowTextureSize = glClampTextureSize(this.shadowTextureSize);
         const size = this.textureSize;
-        if (size)
-            this.textureSize = vec2(glClampTextureSize(size.x), glClampTextureSize(size.y));
+        if (!size) return;
+        const x = glClampTextureSize(size.x), y = glClampTextureSize(size.y);
+        if (x !== size.x || y !== size.y)
+            this.textureSize = vec2(x, y); // only when it is too large, this runs every frame
     }
 
     /** Draw a single Light's falloff blob into the currently bound lightmap.
@@ -13454,163 +13570,165 @@ class Light extends EngineObject
     }
 }
 
-/**
- * LittleJS ZzFXM Plugin
- * @namespace ZzFXM
- */
-
-/**
- * Music Object - Stores a zzfx music track for later use
- * 
- * <a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a>
- * @extends Sound
- * @memberof ZzFXM
- * @example
- * // create some music
- * const music_example = new ZzFXMusic(
- * [
- *     [                         // instruments
- *       [,0,400]                // simple note
- *     ], 
- *     [                         // patterns
- *         [                     // pattern 1
- *             [                 // channel 0
- *                 0, -1,        // instrument 0, left speaker
- *                 1, 0, 9, 1    // channel notes
- *             ], 
- *             [                 // channel 1
- *                 0, 1,         // instrument 0, right speaker
- *                 0, 12, 17, -1 // channel notes
- *             ]
- *         ],
- *     ],
- *     [0, 0, 0, 0], // sequence, play pattern 0 four times
- *     90            // BPM
- * ]);
- * 
- * // play the music on a loop
- * music_example.playMusic();
- */
-class ZzFXMusic extends Sound
-{
-    /** Create a music object and cache the zzfx music samples for later use
-     *  @param {[Array, Array, Array, number?, ...any[]]} zzfxMusic - Array of zzfx music parameters: instruments, patterns, sequence, and an optional BPM; anything after it, like the tracker's metadata, is ignored
-     */
-    constructor(zzfxMusic)
-    {
-        super(undefined);
-
-        if (!soundEnable || headlessMode) return;
-        const [instruments, patterns, sequence, BPM] = zzfxMusic;
-        super.sampleChannels = zzfxM(instruments, patterns, sequence, BPM); // the setter, without declaring a field that hides it in the typings
-        this.buildSampleBuffer(); // hand the samples to an audio buffer now, like a zzfx sound, so the arrays are released
-        this.loadedPercent = 1; // generated in place, so it is loaded like a zzfx sound
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// ZzFX Music Renderer v2.0.3 by Keith Clark and Frank Force
-
-/** Generate samples for a ZzFM song with given parameters
- *  @param {Array} instruments - Array of ZzFX sound parameters
- *  @param {Array} patterns - Array of pattern data
- *  @param {Array} sequence - Array of pattern indexes
- *  @param {number} [BPM] - Playback speed of the song in BPM
- *  @return {Array} - Left and right channel sample data
- *  @memberof ZzFXM */
-function zzfxM(instruments, patterns, sequence, BPM = 125) 
-{
-  let i, j, k;
-  let instrumentParameters;
-  let note;
-  let sample;
-  let patternChannel;
-  let notFirstBeat;
-  let stop;
-  let instrument;
-  let attenuation;
-  let outSampleOffset;
-  let isSequenceEnd;
-  let sampleOffset = 0;
-  let nextSampleOffset;
-  let sampleBuffer = [];
-  let leftChannelBuffer = [];
-  let rightChannelBuffer = [];
-  let channelIndex = 0;
-  let panning = 0;
-  let hasMore = 1;
-  let sampleCache = {};
-  let beatLength = audioDefaultSampleRate / BPM * 60 >> 2;
-
-  // for each channel in order until there are no more
-  for (; hasMore; channelIndex++) {
-
-    // reset current values
-    sampleBuffer = [hasMore = notFirstBeat = outSampleOffset = 0];
-
-    // for each pattern in sequence
-    sequence.forEach((patternIndex, sequenceIndex)=> {
-      // get pattern for current channel, use empty 1 note pattern if none found
-      patternChannel = patterns[patternIndex][channelIndex] || [0, 0, 0];
-
-      // check if there are more channels
-      hasMore |= patterns[patternIndex][channelIndex]&&1;
-
-      // get next offset, use the length of first channel
-      nextSampleOffset = outSampleOffset + (patterns[patternIndex][0].length - 2 - (notFirstBeat?0:1)) * beatLength;
-      // for each beat in pattern, plus one extra if end of sequence
-      isSequenceEnd = sequenceIndex === sequence.length - 1;
-      for (i = 2, k = outSampleOffset; i < patternChannel.length + isSequenceEnd; notFirstBeat = ++i) {
-
-        // <channel-note>
-        note = patternChannel[i];
-
-        // stop if end, different instrument or new note
-        stop = i === patternChannel.length + isSequenceEnd - 1 && isSequenceEnd ||
-            instrument !== (patternChannel[0] || 0) || note | 0;
-
-        // fill buffer with samples for previous beat, most cpu intensive part
-        for (j = 0; j < beatLength && notFirstBeat;
-
-            // fade off attenuation at end of beat if stopping note, prevents clicking
-            j++ > beatLength - 99 && stop && attenuation < 1? attenuation += 1 / 99 : 0
-        ) {
-          // copy sample to stereo buffers with panning
-          sample = (1 - attenuation) * sampleBuffer[sampleOffset++] / 2 || 0;
-          leftChannelBuffer[k] = (leftChannelBuffer[k] || 0) - sample * panning + sample;
-          rightChannelBuffer[k] = (rightChannelBuffer[k++] || 0) + sample * panning + sample;
-        }
-
-        // set up for next note
-        if (note) {
-          // set attenuation
-          attenuation = note % 1;
-          panning = patternChannel[1] || 0;
-          if (note |= 0) {
-            // get cached sample
-            sampleBuffer = sampleCache[
-              [
-                instrument = patternChannel[sampleOffset = 0] || 0,
-                note
-              ]
-            ] = sampleCache[[instrument, note]] || (
-                // add sample to cache
-                instrumentParameters = [...instruments[instrument]],
-                instrumentParameters[2] = (instrumentParameters[2] || 220) * 2**(note / 12 - 1),
-
-                // allow negative values to stop notes
-                note > 0 ? zzfxG(...instrumentParameters) : []
-            );
-          }
-        }
-      }
-
-      // update the sample offset
-      outSampleOffset = nextSampleOffset;
-    });
-  }
-
-  return [leftChannelBuffer, rightChannelBuffer];
+/**
+ * LittleJS ZzFXM Plugin
+ * - A port of ZzFXM, the Zuper Zmall Zound Zynth music player, by Keith Clark and Frank Force, MIT licensed,
+ *   https://github.com/keithclark/ZzFXM; its notice is in COPYRIGHT.txt
+ * @namespace ZzFXM
+ */
+
+/**
+ * Music Object - Stores a zzfx music track for later use
+ * 
+ * <a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a>
+ * @extends Sound
+ * @memberof ZzFXM
+ * @example
+ * // create some music
+ * const music_example = new ZzFXMusic(
+ * [
+ *     [                         // instruments
+ *       [,0,400]                // simple note
+ *     ], 
+ *     [                         // patterns
+ *         [                     // pattern 1
+ *             [                 // channel 0
+ *                 0, -1,        // instrument 0, left speaker
+ *                 1, 0, 9, 1    // channel notes
+ *             ], 
+ *             [                 // channel 1
+ *                 0, 1,         // instrument 0, right speaker
+ *                 0, 12, 17, -1 // channel notes
+ *             ]
+ *         ],
+ *     ],
+ *     [0, 0, 0, 0], // sequence, play pattern 0 four times
+ *     90            // BPM
+ * ]);
+ * 
+ * // play the music on a loop
+ * music_example.playMusic();
+ */
+class ZzFXMusic extends Sound
+{
+    /** Create a music object and cache the zzfx music samples for later use
+     *  @param {[Array, Array, Array, number?, ...any[]]} zzfxMusic - Array of zzfx music parameters: instruments, patterns, sequence, and an optional BPM; anything after it, like the tracker's metadata, is ignored
+     */
+    constructor(zzfxMusic)
+    {
+        super(undefined);
+
+        if (!soundEnable || headlessMode) return;
+        const [instruments, patterns, sequence, BPM] = zzfxMusic;
+        super.sampleChannels = zzfxM(instruments, patterns, sequence, BPM); // the setter, without declaring a field that hides it in the typings
+        this.buildSampleBuffer(); // hand the samples to an audio buffer now, like a zzfx sound, so the arrays are released
+        this.loadedPercent = 1; // generated in place, so it is loaded like a zzfx sound
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// ZzFX Music Renderer v2.0.3 by Keith Clark and Frank Force
+
+/** Generate samples for a ZzFM song with given parameters
+ *  @param {Array} instruments - Array of ZzFX sound parameters
+ *  @param {Array} patterns - Array of pattern data
+ *  @param {Array} sequence - Array of pattern indexes
+ *  @param {number} [BPM] - Playback speed of the song in BPM
+ *  @return {Array} - Left and right channel sample data
+ *  @memberof ZzFXM */
+function zzfxM(instruments, patterns, sequence, BPM = 125) 
+{
+  let i, j, k;
+  let instrumentParameters;
+  let note;
+  let sample;
+  let patternChannel;
+  let notFirstBeat;
+  let stop;
+  let instrument;
+  let attenuation;
+  let outSampleOffset;
+  let isSequenceEnd;
+  let sampleOffset = 0;
+  let nextSampleOffset;
+  let sampleBuffer = [];
+  let leftChannelBuffer = [];
+  let rightChannelBuffer = [];
+  let channelIndex = 0;
+  let panning = 0;
+  let hasMore = 1;
+  let sampleCache = {};
+  let beatLength = audioDefaultSampleRate / BPM * 60 >> 2;
+
+  // for each channel in order until there are no more
+  for (; hasMore; channelIndex++) {
+
+    // reset current values
+    sampleBuffer = [hasMore = notFirstBeat = outSampleOffset = 0];
+
+    // for each pattern in sequence
+    sequence.forEach((patternIndex, sequenceIndex)=> {
+      // get pattern for current channel, use empty 1 note pattern if none found
+      patternChannel = patterns[patternIndex][channelIndex] || [0, 0, 0];
+
+      // check if there are more channels
+      hasMore |= patterns[patternIndex][channelIndex]&&1;
+
+      // get next offset, use the length of first channel
+      nextSampleOffset = outSampleOffset + (patterns[patternIndex][0].length - 2 - (notFirstBeat?0:1)) * beatLength;
+      // for each beat in pattern, plus one extra if end of sequence
+      isSequenceEnd = sequenceIndex === sequence.length - 1;
+      for (i = 2, k = outSampleOffset; i < patternChannel.length + isSequenceEnd; notFirstBeat = ++i) {
+
+        // <channel-note>
+        note = patternChannel[i];
+
+        // stop if end, different instrument or new note
+        stop = i === patternChannel.length + isSequenceEnd - 1 && isSequenceEnd ||
+            instrument !== (patternChannel[0] || 0) || note | 0;
+
+        // fill buffer with samples for previous beat, most cpu intensive part
+        for (j = 0; j < beatLength && notFirstBeat;
+
+            // fade off attenuation at end of beat if stopping note, prevents clicking
+            j++ > beatLength - 99 && stop && attenuation < 1? attenuation += 1 / 99 : 0
+        ) {
+          // copy sample to stereo buffers with panning
+          sample = (1 - attenuation) * sampleBuffer[sampleOffset++] / 2 || 0;
+          leftChannelBuffer[k] = (leftChannelBuffer[k] || 0) - sample * panning + sample;
+          rightChannelBuffer[k] = (rightChannelBuffer[k++] || 0) + sample * panning + sample;
+        }
+
+        // set up for next note
+        if (note) {
+          // set attenuation
+          attenuation = note % 1;
+          panning = patternChannel[1] || 0;
+          if (note |= 0) {
+            // get cached sample
+            sampleBuffer = sampleCache[
+              [
+                instrument = patternChannel[sampleOffset = 0] || 0,
+                note
+              ]
+            ] = sampleCache[[instrument, note]] || (
+                // add sample to cache
+                instrumentParameters = [...instruments[instrument]],
+                instrumentParameters[2] = (instrumentParameters[2] || 220) * 2**(note / 12 - 1),
+
+                // allow negative values to stop notes
+                note > 0 ? zzfxG(...instrumentParameters) : []
+            );
+          }
+        }
+      }
+
+      // update the sample offset
+      outSampleOffset = nextSampleOffset;
+    });
+  }
+
+  return [leftChannelBuffer, rightChannelBuffer];
 }
 /**
  * LittleJS Audio Effects Plugin
@@ -14601,8 +14719,7 @@ class UISystemPlugin
         }
     }
 
-    /** Destroy and remove all objects
-    *  @memberof UISystem */
+    /** Destroy and remove all objects */
     destroyObjects()
     {
         for (const o of this.uiObjects)
@@ -15123,8 +15240,10 @@ class UIObject
                             return void inputClearKey(0, 0, false, true, false);
                     }
                 }
+                // the object that was the active one going into this update: one pressed and let go inside a
+                // frame is clicked on the next, with its release, not on both
                 if (!uiSystem.activateOnPress)
-                if (!mouseDown && this.isActiveObject() && this.interactive)
+                if (!mouseDown && isActive && this.isActiveObject() && this.interactive)
                     this.click();
                 if (this.destroyed) return;
             }
@@ -15867,7 +15986,10 @@ class UIVideo extends UIObject
         if (this.destroyed)
             return;
 
+        // let go of the media too, a paused video keeps what it has loaded
         this.video.pause();
+        this.video.removeAttribute?.('src');
+        this.video.load?.();
         this.video.remove();
         super.destroy();
     }
@@ -19206,6 +19328,7 @@ function loadAtlas(imageSrc, jsonSrc, padding=textureSheetPadding)
             for (const group of parseAtlas(data))
             {
                 // reserve a block of full size cells, one per frame
+                if (!group.frames.length) continue; // a tag with no frames, the groups after it still load
                 const sourceSize = group.frames[0].sourceSize;
                 const blockSize = vec2(sourceSize.x*group.frames.length, sourceSize.y);
                 const added = textureSheetAdd(blockSize, sourceSize, padding);
@@ -19991,45 +20114,50 @@ function tweenUpdate(gameDelta, realDelta)
     const list = tweenUpdateList.length ? [] : tweenUpdateList, pass = ++tweenUpdatePass;
     for (const t of tweenActive)
         list.push(t);
-    for (let i = list.length; i--;)
+    // the list is let go however the walk ends: a callback that throws must not leave it held, or every
+    // update after would take it for an update still going and make a list of its own
+    try
     {
-        const t = list[i];
-        // stopped, or started again by a callback this update, or during an update a callback ran inside it, which
-        // counts on from this one
-        if (!t.active || t.activePass >= pass) continue;
-        let dt;
-        if (enginePath)
+        for (let i = list.length; i--;)
         {
-            // a paused tween keeps count too, so it does not jump when resumed
-            dt = t.useRealTime ? timeReal - t.lastTimeReal : time - t.lastTime;
-            t.lastTime = time;
-            t.lastTimeReal = timeReal;
-        }
-        else
-            dt = t.useRealTime ? realDelta : gameDelta;
-        if (t.target?.destroyed) { t.stop(); continue; } // its object is gone, paused or not
-        if (t.paused || dt <= 0) continue;
+            const t = list[i];
+            // stopped, or started again by a callback this update, or during an update a callback ran inside it, which
+            // counts on from this one
+            if (!t.active || t.activePass >= pass) continue;
+            let dt;
+            if (enginePath)
+            {
+                // a paused tween keeps count too, so it does not jump when resumed
+                dt = t.useRealTime ? timeReal - t.lastTimeReal : time - t.lastTime;
+                t.lastTime = time;
+                t.lastTimeReal = timeReal;
+            }
+            else
+                dt = t.useRealTime ? realDelta : gameDelta;
+            if (t.target?.destroyed) { t.stop(); continue; } // its object is gone, paused or not
+            if (t.paused || dt <= 0) continue;
 
-        t.life -= dt;
-        if (t.life > 1e-9) // the engine's deltas add up a rounding error short of the duration
-        {
-            t.callback(t.interp(t.life));
-        }
-        else
-        {
-            // Completion: fire end value, remove from active, start the next iteration
-            // of a loop or pingPong, or when there is none it has completed, fire onComplete
-            t.callback(t.interp(0));
-            if (!t.active || t.activePass >= pass)
-                continue; // stopped or restarted by its own callback, the run it was on ends without completing
-            tweenDeactivate(t);
-            const next = t.thenCallback;
-            t.thenCallback = undefined;
-            if (!(next && next()) && t.onComplete)
-                t.onComplete();
+            t.life -= dt;
+            if (t.life > 1e-9) // the engine's deltas add up a rounding error short of the duration
+            {
+                t.callback(t.interp(t.life));
+            }
+            else
+            {
+                // Completion: fire end value, remove from active, start the next iteration
+                // of a loop or pingPong, or when there is none it has completed, fire onComplete
+                t.callback(t.interp(0));
+                if (!t.active || t.activePass >= pass)
+                    continue; // stopped or restarted by its own callback, the run it was on ends without completing
+                tweenDeactivate(t);
+                const next = t.thenCallback;
+                t.thenCallback = undefined;
+                if (!(next && next()) && t.onComplete)
+                    t.onComplete();
+            }
         }
     }
-    list.length = 0;
+    finally { list.length = 0; }
 }
 
 /** Stop every active tween, ending loops too, without calling their then-callbacks.
@@ -20103,6 +20231,179 @@ function sceneUpdate() { paused || !timeScale || sceneCurrent?.update?.(); }
 function sceneRender() { sceneCurrent?.render?.(); }
 function sceneRenderPost() { sceneCurrent?.renderPost?.(); }
 
+/**
+ * LittleJS Parallax Plugin
+ * - A background layer that follows the camera by a part of its movement, so it looks far away
+ * - Repeats across the view, so a level of any width has a background
+ * - Draws mountains by default, or anything a game draws into it
+ * @namespace Parallax
+ */
+
+///////////////////////////////////////////////////////////////////////////////
+
+/**
+ * A background layer with parallax: an image that follows the camera by a part of its movement and repeats across
+ * the view, drawn once into a canvas by a function, mountains when none is given
+ * - A far layer has a parallax near 1 and a low renderOrder, a near one a smaller parallax and a higher renderOrder
+ * - The image should meet itself at its left and right edges to repeat without a seam, as the mountains do
+ * @memberof Parallax
+ * @extends CanvasLayer
+ * @example
+ * // three ranges of mountains, the far ones lighter and slower
+ * for (let i = 3; i--;)
+ *     new ParallaxLayer(vec2(0, i*2), vec2(40, 20), .9 - i*.2, -1e3 + i,
+ *         parallaxMountains(hsl(.6, .3, .7 - i*.2), hsl(.6, .5, .2), i));
+ *
+ * // or draw your own image into the layer
+ * new ParallaxLayer(vec2(), vec2(40, 20), .5, -1e3, (context, size)=>
+ * {
+ *     context.fillStyle = '#fff';
+ *     context.fillRect(size.x/2 - 20, size.y/2 - 20, 40, 40);
+ * });
+ */
+class ParallaxLayer extends CanvasLayer
+{
+    /** Create a parallax layer and draw its image
+     *  @param {Vector2} [pos] - Where the middle of the image is in the world when the camera is there too
+     *  @param {Vector2} [size] - World size of one copy of the image
+     *  @param {number|Vector2} [parallax] - How much of the camera's movement it follows, 0 stays with the world
+     *    and 1 with the screen, a Vector2 to follow x and y by different amounts
+     *  @param {number} [renderOrder] - Low to draw behind the game, far layers lowest
+     *  @param {function(OffscreenCanvasRenderingContext2D, Vector2, ParallaxLayer): void} [drawFunction] - Draws
+     *    the image, given the canvas context, its size in pixels and the layer; mountains when not given
+     *  @param {Vector2} [canvasSize] - Size of the image in pixels */
+    constructor(pos=vec2(), size=vec2(32, 16), parallax=.5, renderOrder=-1e3, drawFunction=parallaxMountains(),
+        canvasSize=vec2(512, 256))
+    {
+        false&&ASSERT(isNumber(parallax) || isVector2(parallax), 'parallax must be a number or a Vector2');
+        false&&ASSERT(typeof drawFunction == 'function', 'drawFunction must be a function');
+        super(pos, size, 0, renderOrder, canvasSize);
+
+        /** @property {Vector2} - How much of the camera's movement it follows on each axis, 0 stays with the world
+         *  and 1 with the screen */
+        this.parallax = isVector2(parallax) ? /** @type {Vector2} */ (parallax).copy() :
+            vec2(/** @type {number} */ (parallax));
+        /** @property {boolean} - Repeat the image across the view, left and right */
+        this.wrapX = true;
+        /** @property {boolean} - Repeat the image up and down the view */
+        this.wrapY = false;
+        /** @property {number} - How much the camera's zoom changes its size on the screen: 1 like the world, 0 not
+         *  at all, the same on the screen at any zoom as it is at zoomScale */
+        this.zoomFollow = 1;
+        /** @property {number} - The camera scale its size is given for, used when zoomFollow is under 1 */
+        this.zoomScale = cameraScale;
+        /** @property {function(OffscreenCanvasRenderingContext2D, Vector2, ParallaxLayer): void} - Draws the
+         *  image, redraw() after changing it */
+        this.drawFunction = drawFunction;
+        this.redraw();
+    }
+
+    /** Draw the image again with drawFunction, after changing it or what it draws from */
+    redraw()
+    {
+        const context = this.context;
+        if (!context) return; // headless
+        const size = vec2(this.canvas.width, this.canvas.height);
+        context.clearRect(0, 0, size.x, size.y);
+        this.drawFunction(context, size, this);
+        this.updateWebGL();
+    }
+
+    // how much smaller it is drawn than its size, from the camera's zoom and how much of it the layer follows
+    zoomFactor()
+    { return this.zoomFollow < 1 && cameraScale > 0 ? (this.zoomScale / cameraScale) ** (1 - this.zoomFollow) : 1; }
+
+    /** World size one copy of the image is drawn at now, its size unless zoomFollow is under 1
+     *  @return {Vector2} */
+    getDrawSize() { return this.size.scale(this.zoomFactor()); }
+
+    /** Where each copy of the image is drawn now, in the world: one place, or with wrapping every place that
+     *  shows in the view
+     *  @return {Array<Vector2>} */
+    getDrawPositions()
+    {
+        // its place seen from the camera is cut down by the parallax, and by the zoom it does not follow
+        const zoom = this.zoomFactor(), size = this.size.scale(zoom), p = this.parallax;
+        const offset = this.pos.subtract(cameraPos);
+        const center = cameraPos.add(vec2(offset.x * (1 - p.x) * zoom, offset.y * (1 - p.y) * zoom));
+
+        // the copies that reach into the view; a turned camera sees as far as its corner each way
+        const view = mainCanvasSize.scale(.5 / (cameraScale || 1));
+        const reach = cameraAngle ? vec2(view.length()) : view;
+        const range = (wrap, axis)=>
+        {
+            if (!wrap || !(size[axis] > 0)) return [0, 0];
+            const from = cameraPos[axis] - reach[axis] - size[axis] / 2 - center[axis];
+            const to = cameraPos[axis] + reach[axis] + size[axis] / 2 - center[axis];
+            const first = ceil(from / size[axis]);
+            return [first, min(floor(to / size[axis]), first + 99)]; // a tiny image does not draw without end
+        };
+        const [x0, x1] = range(this.wrapX, 'x'), [y0, y1] = range(this.wrapY, 'y'), positions = [];
+        for (let y = y0; y <= y1; ++y)
+        for (let x = x0; x <= x1; ++x)
+            positions.push(vec2(center.x + x * size.x, center.y + y * size.y));
+        return positions;
+    }
+
+    // Render the layer, called automatically by the engine
+    render()
+    {
+        const size = this.getDrawSize();
+        for (const pos of this.getDrawPositions())
+            this.draw(pos, size, this.color, 0, this.mirror, this.additiveColor, false);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+// the ridge of a range of mountains: a height for each column of an image and one more, the last the same as the
+// first so the image repeats with no step; it wanders about the middle, turning now and then
+function parallaxRidge(width, height, random)
+{
+    const pointiness = .2, levelness = .005, slopeRange = height / 256; // how often it turns, how hard it is
+    const ridge = new Float32Array(width + 1), middle = height / 2;     // pulled level, how steep it gets
+    let y = middle, slope = random.float(-slopeRange, slopeRange);
+    for (let x = 0; x <= width; ++x)
+    {
+        ridge[x] = y;
+        y += slope -= (y - middle) * levelness;
+        if (random.float() < pointiness)
+            slope = random.float(-slopeRange, slopeRange);
+    }
+    // take out the difference between its ends, a little from each column, and keep it inside the image
+    const drift = ridge[width] - ridge[0];
+    for (let x = 0; x <= width; ++x)
+        ridge[x] = clamp(ridge[x] - drift * x / width, 0, height);
+    return ridge;
+}
+
+/** A draw function for a ParallaxLayer: a range of mountains across the image, shaded from the color of their
+ *  peaks down to the color of their feet, that repeats with no seam
+ *  @param {Color} [topColor] - Color at the peaks
+ *  @param {Color} [bottomColor] - Color at the bottom of the image
+ *  @param {number} [seed] - The same seed gives the same mountains, random when not given
+ *  @return {function(OffscreenCanvasRenderingContext2D, Vector2): void}
+ *  @memberof Parallax */
+function parallaxMountains(topColor=hsl(.6, .2, .6), bottomColor=hsl(.6, .3, .25), seed)
+{
+    return (context, size)=>
+    {
+        const w = size.x, h = size.y;
+        const random = new RandomGenerator(seed === undefined ? randInt(1e9) + 1 : seed * 7919 + 1);
+        const ridge = parallaxRidge(w, h, random);
+
+        // a strip one pixel wide with the shading, stretched down each column from its peak
+        const strip = createCanvasContext(1, h);
+        for (let i = h; i--;)
+        {
+            strip.fillStyle = topColor.lerp(bottomColor, i / h).toString();
+            strip.fillRect(0, i, 1, 1);
+        }
+        for (let x = w; x--;)
+            ridge[x] < h && context.drawImage(strip.canvas, 0, 0, 1, h, x, ridge[x], 1, h - ridge[x]);
+    };
+}
+
 /**
  * LittleJS PathFinder Plugin
  * - Grid-based A* pathfinder with two-pass smoothing for natural-looking paths
@@ -22238,17 +22539,19 @@ function render3DInstance(mesh, matrix, tileInfo, color)
 // make room for one more instance of a mesh under a texture and the current draw state, flushing a batch that
 // differs first, and return where its 24 floats go in mesh.instanceData: the matrix, the tint and the uv rect
 // drawMesh passes whether its matrix mirrors, and its batch then culls by the mesh and winds by that at the flush,
-// so it never sets the draw state for them, which would move the state's version at every draw
-function render3DInstanceSlot(mesh, textureInfo, mirrored)
+// so it never sets the draw state for them, which would move the state's version at every draw; drawBillboard
+// passes that its batch is unlit, for the same reason
+function render3DInstanceSlot(mesh, textureInfo, mirrored, unlit=false)
 {
     const r = render3D;
     if (mesh.instanceCount && (mesh.instanceTextureInfo !== textureInfo || mesh.instanceMirrored !== mirrored
-        || render3DStateChanged(mesh.instanceState)))
+        || mesh.instanceUnlit !== unlit || render3DStateChanged(mesh.instanceState)))
         render3DFlushInstances(mesh);
     if (!mesh.instanceCount)
     {
         mesh.instanceTextureInfo = textureInfo;
         mesh.instanceMirrored = mirrored;
+        mesh.instanceUnlit = unlit;
         mesh.instanceState = render3DCaptureBatchState();
         r.instanceMeshes.push(mesh);
     }
@@ -22282,6 +22585,8 @@ function render3DFlushInstances(only)
         const state = mesh.instanceState;
         if (mesh.instanceMirrored !== undefined) // a drawMesh batch: culled by its mesh, wound by its matrices
             state.cullBackFaces = !mesh.doubleSided, state.mirrored = mesh.instanceMirrored;
+        if (mesh.instanceUnlit) // a batch of sprites
+            state.lighting = false;
         render3DDrawInstanced(mesh, buffer, count, mesh.instanceTextureInfo, state);
     }
     if (!only)
@@ -22369,12 +22674,17 @@ function render3DShadowCaster()
         light.intensity > 0 && light.color.a > 0 ? light : undefined;
 }
 
+// the widest cone a shadow map can look down, to each side; the light that casts the shadows lights no wider, or
+// what is past the map's edge would be lit with nothing to shade it
+const RENDER3D_SHADOW_CONE_MAX = 1.35;
+
 // a light's cone as the four numbers the shader gets: the way it shines, scaled so that its dot with the way to
 // a point, less the fourth number, is 0 at the edge of the cone and 1 where its fade starts; a light with no cone
 // gets numbers that make it 1 every way
 function render3DLightCone(light)
 {
-    const angle = light.directional ? 0 : min(light.coneAngle, PI);
+    const widest = light === render3DShadowCaster() ? RENDER3D_SHADOW_CONE_MAX : PI;
+    const angle = light.directional ? 0 : min(light.coneAngle, widest);
     if (!(angle > 0)) return [0, 0, 0, -1];
     const outer = cos(angle), inner = cos(angle * (1 - clamp(light.coneSoftness)));
     const k = 1 / max(inner - outer, 1e-4), forward = light.getForward3D();
@@ -22633,6 +22943,7 @@ class Render3DPlugin
         /** @type {TextureInfo|undefined} */
         this.streamTileInfo = undefined;
         this.streamState = undefined; // captured state the pending batch was drawn under
+        this.streamUnlit = false;     // the pending batch is drawn unlit whatever that state says, billboards are
         /** @type {Mesh|undefined} */
         this.capture = undefined;     // the mesh a bake is filling
         /** @type {Array<{distance: number, state: Object, draw: function(): void}>|undefined} */
@@ -23023,6 +23334,8 @@ class Render3DPlugin
     {
         if (!this.streamCount || !render3DCanDraw()) return;
         const gl = glContext;
+        if (this.streamUnlit)
+            this.streamState.lighting = false; // its own copy of the state
         render3DSetDrawUniforms(RENDER3D_IDENTITY, this.streamTileInfo, WHITE, RENDER3D_FULL_UV_RECT, this.streamState);
         render3DBindVertexBuffer(this.streamBuffer);
         gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.streamFloats, 0, this.streamCount * RENDER3D_VERTEX_FLOATS);
@@ -23161,8 +23474,9 @@ class Render3DPlugin
             // a spotlight's map looks down its cone with perspective, from just in front of it out to its radius
             const pos = caster.getWorldPos3D(), forward = caster.getForward3D();
             const up = abs(forward.y) > .99 ? vec3(0, 0, 1) : vec3(0, 1, 0);
-            const far = caster.radius, near = max(far / 500, .02);
-            const fov = min(min(caster.coneAngle, PI) * 2 + .1, 2.8);
+            // the near plane stays in front of the far one however small the light
+            const far = caster.radius, near = min(max(far / 500, .02), far / 2);
+            const fov = min(caster.coneAngle, RENDER3D_SHADOW_CONE_MAX) * 2 + .1;
             this.shadowMatrix = Matrix4.perspective(fov, 1, near, far).multiply(
                 Matrix4.lookAt(pos, pos.add(forward), up).invert());
             this.shadowPlanes = render3DFrustumPlanes(this.shadowMatrix);
@@ -23256,13 +23570,34 @@ class Render3DPlugin
             return this.queueTransparent(p, ()=> this.drawBillboard(p, s, tileInfo, c, angle, upright));
         }
 
-        // the quad's six stream vertices written straight in with no vectors made, unlit, for sprites, and for
-        // particles when instancing is off
-        const lit = this.lighting;
-        this.lighting = this.shadowPass && lit; // unlit on screen, in the shadow map the object's flag decides
-        let uvRect;
-        try { uvRect = render3DBeginStrip(6, tileInfo); }
-        finally { this.lighting = lit; }
+        // unlit on screen, in the shadow map the object's flag decides; the batch is told, the draw state is not
+        // set, which would move its version at every sprite
+        const unlit = !this.shadowPass;
+        if (!this.blend && this.depthTest && this.instancing)
+        {
+            // an opaque sprite is one more instance of the shared quad, as a mesh's uses are: every sprite of a
+            // sheet is one instanced draw at the end of the stage, with nothing written per corner; the shader
+            // drops its see through texels, so it needs no sorting
+            if (!render3DCanDraw() || this.shadowPass && !this.lighting) return; // unlit things cast no shadow
+            if (this.frustumCulling && !render3DSphereVisible(pos.x, pos.y, pos.z, hypot(size.x, size.y) / 2))
+                return;
+            const quad = this.billboardMesh, cb = this.cameraBack, uv = render3DGetTileUVs(tileInfo);
+            render3DMeshUpload(quad);
+            // the quad's half axes, doubled for its unit square
+            const a = render3DBillboardAxes(size, angle, upright);
+            const k = render3DInstanceSlot(quad, render3DTextureOf(tileInfo), false, unlit), data = quad.instanceData;
+            data[k]    = a[0] * 2; data[k+1]  = a[1] * 2; data[k+2]  = a[2] * 2; data[k+3]  = 0;
+            data[k+4]  = a[3] * 2; data[k+5]  = a[4] * 2; data[k+6]  = a[5] * 2; data[k+7]  = 0;
+            data[k+8]  = cb.x;     data[k+9]  = cb.y;     data[k+10] = cb.z;     data[k+11] = 0;
+            data[k+12] = pos.x;    data[k+13] = pos.y;    data[k+14] = pos.z;    data[k+15] = 1;
+            data[k+16] = color.r;  data[k+17] = color.g;  data[k+18] = color.b;  data[k+19] = color.a;
+            data[k+20] = uv.x;     data[k+21] = uv.y;     data[k+22] = uv.w;     data[k+23] = uv.h;
+            return;
+        }
+
+        // one that blends is drawn in its sorted place: the quad's six stream vertices written straight in with no
+        // vectors made, for sprites that blend, and for particles when instancing is off
+        const uvRect = render3DBeginStrip(6, tileInfo, unlit);
         if (!uvRect) return;
         const a = render3DBillboardAxes(size, angle, upright);
         const rx = a[0], ry = a[1], rz = a[2], ux = a[3], uy = a[4], uz = a[5];
@@ -24374,8 +24709,9 @@ function render3DRenderDepth()
 // which way they face, so keeping the count even keeps every strip facing out.
 
 // make room in the stream for a strip of count vertices under the current state and texture, flushing a batch that
-// differs first; returns the uv rect to map the vertices with, or undefined when nothing can be drawn
-function render3DBeginStrip(count, tileInfo)
+// differs first; returns the uv rect to map the vertices with, or undefined when nothing can be drawn; unlit draws
+// the batch unlit whatever the state says, so a billboard does not set the state and set it back at every draw
+function render3DBeginStrip(count, tileInfo, unlit=false)
 {
     const r = render3D;
     if (!render3DCanDraw()) return;
@@ -24383,12 +24719,13 @@ function render3DBeginStrip(count, tileInfo)
     false&&ASSERT(count <= RENDER3D_MAX_STREAM_VERTS, 'strip is too large for the stream, bake it into a mesh');
     if (count > RENDER3D_MAX_STREAM_VERTS) return;
     const textureInfo = render3DTextureOf(tileInfo);
-    if (r.streamCount && (textureInfo !== r.streamTileInfo || render3DStateChanged(r.streamState)
-        || r.streamCount + count > RENDER3D_MAX_STREAM_VERTS))
+    if (r.streamCount && (textureInfo !== r.streamTileInfo || r.streamUnlit !== unlit
+        || render3DStateChanged(r.streamState) || r.streamCount + count > RENDER3D_MAX_STREAM_VERTS))
         r.flush();
     render3DFlushBeforeOverlay();
     if (!r.streamCount)
         r.streamState = render3DCaptureBatchState();
+    r.streamUnlit = unlit;
     r.streamTileInfo = textureInfo;
     return render3DGetTileUVs(tileInfo);
 }
@@ -26596,7 +26933,7 @@ class InstancedMesh3D extends EngineObject3D
  * - intensity multiplies the color, above 1 for a light brighter than white
  * - radius is a world distance, so scale3D does not change it
  * - An alpha, an intensity or a radius of 0 switches it off, and a light that is off takes none of those slots
- * - Draws nothing itself, add a glow with drawSoftDisc or a small emissive mesh if it should be seen
+ * - Draws nothing but its glow, when it has one; add a small emissive mesh if the lamp itself should be seen
  * @extends EngineObject3D
  * @memberof Render3D
  * @example
@@ -26645,8 +26982,10 @@ class Light3D extends EngineObject3D
         const r = render3D, c = this.color, pos = render3DObjectMatrix(this).getTranslation();
         const toCamera = r.camera.pos.subtract(pos), distance = toCamera.length();
         const at = distance ? pos.add(toCamera.scale(min(this.glow, distance) / 2 / distance)) : pos;
-        const color = rgb(c.r, c.g, c.b, c.a * min(this.intensity, 1));
-        r.drawBillboard(at, vec2(this.glow), engineGlowTexture(this.glowFalloff), color);
+        const color = rgb(c.r, c.g, c.b, c.a * min(this.intensity, 1)), texture = engineGlowTexture(this.glowFalloff);
+        // a browser that can not make the glow's texture draws no glow, not a plain square
+        if (texture || !glContext)
+            r.drawBillboard(at, vec2(this.glow), texture, color);
     }
 }
 
@@ -26656,7 +26995,7 @@ class Light3D extends EngineObject3D
  * - It shines from its position toward the origin, like a three.js DirectionalLight: only the direction to it
  *   counts, so moving it or its parent swings the light around; parent it to a sun in the sky and it follows
  * - It cannot sit on the origin, since that leaves no direction
- * - Like every Light3D it casts no shadow, only the sun, render3D.sunDirection, does
+ * - It casts no shadow: the sun, render3D.sunDirection, does, or a spotlight set as render3D.shadowLight
  * @extends Light3D
  * @memberof Render3D
  * @example
@@ -27733,6 +28072,9 @@ class ParticleEmitter3D extends EngineObject3D
         /** @property {boolean} - Particles hit the level, the height maps and voxel maps, bouncing by restitution and
          *  sliding along by friction; off by default, it tests each particle's move against the level every frame */
         this.collideLevel = false;
+        /** @property {number} - How much a particle grips where it lands, 0 to 1: its speed along the surface is
+         *  cut by this much on each hit, on top of the friction, 1 stops it there */
+        this.stick = 0;
         /** @property {Particle3DCallback|undefined} - Called with each particle as it is made
          *  @type {Particle3DCallback|undefined} */
         this.particleCreateCallback = undefined;
@@ -27752,7 +28094,7 @@ class ParticleEmitter3D extends EngineObject3D
         /** @property {Vector3|undefined} - Where the emitter was at its last update, for when its parent is destroyed
          *  @type {Vector3|undefined} */
         this.worldPos3D = undefined;
-        this.emitTimeBuffer = 0;
+        this.emitTimeBuffer = 1; // the first particle comes at once, as the 2D emitter's does
     }
 
     /** Spawn new particles, move the live ones, and go away when done */
@@ -27769,9 +28111,10 @@ class ParticleEmitter3D extends EngineObject3D
         {
             // a rate of zero is an emitter fed by hand, and the global scale only quiets it,
             // neither is a reason to stop counting down the emit time
-            if (this.emitRate && particleEmitRateScale)
+            const rate = this.emitRate * particleEmitRateScale;
+            if (rate > 0 && rate < Infinity)
             {
-                this.emitTimeBuffer += this.emitRate * particleEmitRateScale * timeDelta;
+                this.emitTimeBuffer += rate * timeDelta;
                 for (; this.emitTimeBuffer >= 1; --this.emitTimeBuffer)
                     this.emitParticle();
             }
@@ -27811,7 +28154,9 @@ class ParticleEmitter3D extends EngineObject3D
             const vz = data[k+5] = data[k+5] * damping + gravityZ;
             data[k] += vx, data[k+1] += vy, data[k+2] += vz;
             data[k+18] += data[k+19] *= angleDamping;
-            collideLevel && (this.particleCollide(k, data[k] - vx, data[k+1] - vy, data[k+2] - vz), reread());
+            // true when its collide callback destroyed it, it has had its last callback but the destroy one
+            const gone = collideLevel && this.particleCollide(k, data[k] - vx, data[k+1] - vy, data[k+2] - vz);
+            collideLevel && reread();
             const t = i * trailMax * 3;
             if (trailMax)
             {
@@ -27823,7 +28168,7 @@ class ParticleEmitter3D extends EngineObject3D
                 trail[j] = data[k], trail[j+1] = data[k+1], trail[j+2] = data[k+2];
                 data[k+20] = n + 1;
             }
-            updateCallback && (this.particleCall(updateCallback, k), reread());
+            updateCallback && !gone && (this.particleCall(updateCallback, k), reread());
             if ((data[k+17] += timeDelta) >= data[k+16])
             {
                 // dead: the last particle takes its slot, trail and all, order does not matter
@@ -27925,13 +28270,14 @@ class ParticleEmitter3D extends EngineObject3D
         out[k] = view.pos.x, out[k+1] = view.pos.y, out[k+2] = view.pos.z;
         out[k+3] = view.velocity.x, out[k+4] = view.velocity.y, out[k+5] = view.velocity.z;
         if (view.destroyed)
-            out[k+17] = max(out[k+17], out[k+16] - timeDelta); // aged past its life this update
+            out[k+17] = max(out[k+17], out[k+16]); // its life lived: a step short of it can round to just under
         return result;
     }
 
     // stop the particle at k where its last move went into the level, from where it was: back at the surface, a hair
     // off it, its speed into it turned around by restitution and its speed along it kept by friction, unless the
-    // collide callback lets it through; one that starts inside is let go, as a 2D one is
+    // collide callback lets it through; one that starts inside is let go, as a 2D one is; true when the callback
+    // destroyed it
     particleCollide(k, x, y, z)
     {
         let data = this.particleData;
@@ -27944,18 +28290,21 @@ class ParticleEmitter3D extends EngineObject3D
             if (h && (!hit || h.distance < hit.distance))
                 hit = h, level = l;
         }
-        if (!hit) return;
+        if (!hit) return false;
         const point = from.lerp(to, hit.distance);
         const callback = this.particleCollideCallback;
         if (callback && (!this.particleCall(callback, k, level, point.copy()) || this.particleView.destroyed))
-            return; // let through, or destroyed by the callback
+            return this.particleView.destroyed; // let through, or destroyed by the callback
         data = this.particleData; // as the callback left it, an emit may have grown it
 
         const n = hit.normal, v = vec3(data[k+3], data[k+4], data[k+5]), into = n.scale(v.dot(n));
-        const restitution = max(this.restitution, level.restitution), friction = max(this.friction, level.friction);
+        // the larger friction of the two, as objects take it, then the emitter's own grip, which a level can not undo
+        const restitution = max(this.restitution, level.restitution);
+        const friction = max(this.friction, level.friction) * (1 - clamp(this.stick));
         const out = v.subtract(into).scale(friction).subtract(into.scale(restitution)), p = point.add(n.scale(1e-3));
         data[k] = p.x, data[k+1] = p.y, data[k+2] = p.z;
         data[k+3] = out.x, data[k+4] = out.y, data[k+5] = out.z;
+        return false;
     }
 
     /** Draw the particles, as flat squares or as streaks when trailTime is set
@@ -28219,6 +28568,11 @@ class LensFlare3D extends EngineObject3D
          *  height; shape is glow, disc or ring
          *  @type {Array<{at: number, size: number, color: Color, shape: string}>|undefined} */
         this.elements = undefined;
+        /** @property {Light3D|undefined} - A light the flare is of in place of the sun, a lamp or a spotlight: the
+         *  flare is at the light and in its color, smaller from farther than the light reaches, hidden by what is
+         *  in front of the light, and a spotlight's shows from inside its beam only
+         *  @type {Light3D|undefined} */
+        this.light = undefined;
         /** @property {boolean} - Fade out when something is between the camera and the sun */
         this.occlusion = true;
         /** @property {number} - Seconds the flare takes to fade out or in when the sun is hidden or shows again */
@@ -28257,13 +28611,30 @@ class LensFlare3D extends EngineObject3D
         return this.made;
     }
 
-    /** Where the sun is on the screen, in pixels like mousePosScreen, undefined when it is behind the camera
+    // what the flare is of, seen from the camera: the way to it, how far it is, Infinity for the sun, and a point
+    // to find it on the screen by; undefined with no sun direction, or a light that is gone or at the camera
+    flareSource()
+    {
+        const camera = render3D.camera.pos, light = this.light;
+        if (!light)
+        {
+            const sun = render3D.sunDirection;
+            if (!sun.lengthSquared()) return;
+            const direction = sun.normalize();
+            return {direction, distance: Infinity, pos: camera.add(direction.scale(100))};
+        }
+        if (light.destroyed) return;
+        const pos = light.getWorldPos3D(), offset = pos.subtract(camera), distance = offset.length();
+        return distance ? {direction: offset.scale(1 / distance), distance, pos} : undefined;
+    }
+
+    /** Where the sun, or the flare's light, is on the screen, in pixels like mousePosScreen, undefined when it is
+     *  behind the camera
      *  @return {Vector2|undefined} */
     getSunScreenPos()
     {
-        const direction = render3D.sunDirection;
-        if (!direction.lengthSquared()) return;
-        return render3D.worldToScreen(render3D.camera.pos.add(direction.normalize(100)));
+        const source = this.flareSource();
+        return source && render3D.worldToScreen(source.pos);
     }
 
     /** The parts of the flare as they are drawn now: each one's place on the screen, its size in pixels and its
@@ -28277,7 +28648,19 @@ class LensFlare3D extends EngineObject3D
         const off = max(abs(sun.x - center.x) / center.x, abs(sun.y - center.y) / center.y);
         const strength = this.visible * clamp((1.3 - off) / .5) * this.intensity;
         if (!(strength > 0)) return [];
-        const tint = this.color.multiply(render3D.sunColor), height = mainCanvasSize.y * this.flareSize;
+        let tint = this.color.multiply(render3D.sunColor), height = mainCanvasSize.y * this.flareSize;
+        const light = this.light, source = light && this.flareSource();
+        if (light)
+        {
+            if (!source) return [];
+            // a light's flare is the light's color, as bright as the light up to 1, and only from inside its cone
+            const cone = render3DLightCone(light), d = source.direction;
+            const inCone = clamp(-(cone[0] * d.x + cone[1] * d.y + cone[2] * d.z) - cone[3]);
+            const c = light.color, bright = c.a * clamp(light.intensity) * inCone;
+            if (!(bright > 0)) return [];
+            tint = this.color.multiply(rgb(c.r, c.g, c.b, bright));
+            height *= min(1, light.radius / source.distance); // smaller from farther than it reaches
+        }
         return this.getElements().map((e)=>
         {
             const c = e.color.multiply(tint);
@@ -28287,15 +28670,32 @@ class LensFlare3D extends EngineObject3D
         });
     }
 
-    /** Is something between the camera and the sun: the level, or an object that is not see through
+    /** Is something between the camera and the sun, or the flare's light: the level, or an object that is not see
+     *  through
      *  @return {boolean} */
     isSunHidden()
     {
-        const direction = render3D.sunDirection;
-        if (!direction.lengthSquared()) return true;
-        const blockers = engineObjects.filter((o)=> o !== this && o instanceof EngineObject3D && !o.transparent &&
-            !o.additive);
-        return !!render3D.pick(new Ray3D(render3D.camera.pos, direction.normalize()), blockers);
+        const source = this.flareSource();
+        if (!source) return true;
+        const ray = new Ray3D(render3D.camera.pos, source.direction), reach = source.distance;
+        const blockers = engineObjects.filter((o)=> o !== this && o instanceof EngineObject3D && !o.destroyed &&
+            !o.transparent && !o.additive);
+        // a voxel map says block by block what is see through: glass, water and leaves let the sun by, and the
+        // ray goes on to the blocks behind them
+        const maps = /** @type {Array<VoxelMap>} */ (typeof VoxelMap == 'undefined' ? [] :
+            blockers.filter((o)=> o instanceof VoxelMap));
+        for (const map of maps)
+            if (map.raycast(ray, reach, (type)=> !map.blockType(type).seeThrough))
+                return true;
+        // an object is hit by its box, and a box the camera is inside, a room, a wide floor or the player's own
+        // body, says nothing of what is in the way: the ray the other way hits it too, and it is left out; so is
+        // one the light is inside, its lamp
+        const backward = ray.direction.scale(-1), back = new Ray3D(ray.origin, backward);
+        const lamp = this.light && [new Ray3D(source.pos, ray.direction), new Ray3D(source.pos, backward)];
+        const hits = (r, o)=> render3DRaycastObject(r, o) !== undefined;
+        const around = (o)=> !(o instanceof HeightMap) && (hits(back, o) || lamp && hits(lamp[0], o) && hits(lamp[1], o));
+        const hit = render3D.pick(ray, blockers.filter((o)=> !maps.some((map)=> map === o) && !around(o)));
+        return !!hit && hit.distance < reach;
     }
 
     /** Ease visible toward whether the sun shows, called automatically each frame */
@@ -29425,7 +29825,10 @@ function level3DAddMesh(name, mesh, tileInfo, color=WHITE)
  *    returned, see level3DVoxelSetup for its sheet
  *  - A level may hold a terrain, in a terrain block: pos, its center, size, its size in the world along x and z,
  *    height, how tall a full height is, color, and heights, rows of 0 to 1 from -z to +z, each from -x to +x; it
- *    is made a HeightMap, returned with what else was made
+ *    is made a HeightMap, returned with what else was made; paint, when it has it, colors its samples: colors, a
+ *    list, and cells, runs of a count and a color along the rows, 0 for the terrain's own and 1 the list's first
+ *  - A level may hold prefabs of its own, in a prefabs block, each by its name as level3DAddPrefab takes it; they
+ *    are added before its objects are made, one the game added itself keeps its place
  *  - A level may set the scene too, in a scene block beside its objects: sky, three colors for straight up, the
  *    horizon and straight down, ambient, how much of them lights the scene, .5 when not given, sunDirection and
  *    sunColor, fog, its start and end, fogColor, the horizon color when not given, and shadows; what the block
@@ -29438,6 +29841,7 @@ function level3DLoad(level)
     false&&ASSERT(!!level && typeof level === 'object', 'a level is an object, {} for a new one');
     false&&ASSERT(!(level.littlejs3D > LEVEL3D_VERSION), 'the level was made by a newer LittleJS');
     editor3DLevelLoaded(level); // debug builds: the 3D editor takes the level, its autosaved edits go in first
+    level3DPrefabsAdd(level.prefabs);
     level3DSceneApply(level.scene);
     const made = [], map = level3DVoxelMap = level3DVoxelsMake(level.voxels);
     map && made.push(map);
@@ -29459,7 +29863,8 @@ let level3DVoxelTiles, level3DVoxelSetupMap, level3DVoxelMap;
 
 /** How a level's block map is made: the sheet its blocks show tiles of, and a function to set it up
  *  - A level's voxels block makes a VoxelMap when the level loads, with texture 0 and the default tile size unless
- *    a sheet is given here; a block's type shows that tile of the sheet on every face
+ *    a sheet is given here; a block's type shows that tile of the sheet on every face; a game that has loaded no
+ *    image gets plain blocks, a color for each type
  *  - setup is called with each map a level makes, to give block types their own faces or make them see-through
  *  - Call it before level3DLoad; with no arguments the defaults are back
  *  @param {TileInfo} [tileInfo] - The sheet's first tile, as for a VoxelMap
@@ -29521,7 +29926,7 @@ function level3DVoxelsMake(voxels)
 {
     const shape = level3DVoxelsShape(voxels);
     if (!shape || typeof VoxelMap == 'undefined') return;
-    const map = new VoxelMap(shape.pos, shape.size, level3DVoxelTiles || tile());
+    const map = new VoxelMap(shape.pos, shape.size, level3DVoxelTiles || level3DVoxelPlainTiles());
     level3DVoxelsDecode(voxels.blocks, map.data);
     level3DVoxelSetupMap?.(map);
     map.rebuild();
@@ -29548,14 +29953,74 @@ function level3DTerrainShape(terrain)
         height: isNumber(terrain.height) && terrain.height > 0 ? terrain.height : 1, heights};
 }
 
+// a hex color of a level as a Color, undefined when it is not one
+function level3DHexColor(hex)
+{ return /^#([0-9a-f]{6}|[0-9a-f]{8})$/i.test(hex) ? new Color().setHex(hex) : undefined; }
+
+// the paint of a level's terrain block, for a terrain of so many samples: its colors as they are written and a
+// color for each sample, row after row, 0 for none and 1 the first of the colors; undefined when it has none or
+// it does not fit the terrain
+function level3DTerrainPaint(terrain, samples)
+{
+    const paint = terrain?.paint, colors = paint?.colors, runs = paint?.cells;
+    if (!isArray(colors) || !isArray(runs) || colors.length > 255 || !colors.every(level3DHexColor)) return;
+    const cells = new Uint8Array(samples);
+    let at = 0;
+    for (let i = 0; i < runs.length; i += 2)
+    {
+        const count = runs[i], color = runs[i + 1];
+        if (!(count > 0 && count % 1 === 0 && color >= 0 && color % 1 === 0) || color > colors.length ||
+            at + count > samples) return;
+        cells.fill(color, at, at += count);
+    }
+    return at === samples ? {colors: colors.slice(), cells} : undefined;
+}
+
+// give a terrain's map the colors of its block: its own color over the whole of it, or with paint a color for
+// each sample, the terrain's own where it is not painted; the caller builds the map again
+function level3DTerrainSetColors(map, terrain, paint=level3DTerrainPaint(terrain, map.rows * map.columns))
+{
+    const base = level3DHexColor(terrain.color) || WHITE;
+    map.color = base, map.colors = undefined;
+    if (!paint || !paint.cells.some((v)=> v)) return;
+    const palette = [base, ...paint.colors.map(level3DHexColor)];
+    map.color = WHITE;
+    map.colors = map.heights.map((row, r)=> row.map((v, c)=> palette[paint.cells[r * map.columns + c]] || base));
+}
+
+// the sheet a level's blocks show when the game gave none with level3DVoxelSetup: the game's first image, as a
+// VoxelMap takes it, or, for a game that has loaded no image, plain tiles made here, a color for each type, so a
+// block map in a game with no art can still be seen and painted
+let level3DVoxelPlain;
+function level3DVoxelPlainTiles()
+{
+    if (textureInfos[0]?.size.x || headlessMode || typeof OffscreenCanvas == 'undefined')
+        return tile();
+    if (!level3DVoxelPlain)
+    {
+        // 16 by 16 tiles of 16 pixels, each a color of its own with a darker edge, so the blocks read as blocks
+        const context = createCanvasContext(256);
+        for (let i = 0; i < 256; ++i)
+        {
+            const x = i % 16 * 16, y = (i / 16 | 0) * 16, hue = i * .618 % 1;
+            context.fillStyle = hsl(hue, .45, .4).toString();
+            context.fillRect(x, y, 16, 16);
+            context.fillStyle = hsl(hue, .5, .55).toString();
+            context.fillRect(x + 1, y + 1, 14, 14);
+        }
+        level3DVoxelPlain = new TextureInfo(context.canvas);
+    }
+    return tile(0, 16, level3DVoxelPlain, 0);
+}
+
 // the HeightMap of a level's terrain block, undefined when it has none or it is wrong
 function level3DTerrainMake(terrain)
 {
     const shape = level3DTerrainShape(terrain);
     if (!shape || typeof HeightMap == 'undefined') return;
     const map = new HeightMap(shape.heights, shape.size, shape.height, undefined, shape.pos);
-    if (/^#([0-9a-f]{6}|[0-9a-f]{8})$/i.test(terrain.color))
-        map.color = new Color().setHex(terrain.color);
+    level3DTerrainSetColors(map, terrain);
+    map.colors && map.rebuild();
     return map;
 }
 
@@ -29628,6 +30093,14 @@ function level3DProperties(type, object)
 // make one object of a level from the type added for its name, undefined when there is no such type or it made
 // nothing
 function level3DMake(object)
+{
+    return level3DMakeAt(object, level3DVector(object.pos, vec3()),
+        level3DVector(object.rotation, vec3()).scale(PI / 180), level3DVector(object.scale, vec3(1)));
+}
+
+// make a level object's game object at a place, a rotation in radians and a scale, its own as level3DMake gives
+// them or the ones a prefab's instance puts it at
+function level3DMakeAt(object, pos, rotation, scale)
 {
     const type = level3DTypes.get(object.type);
     if (!type)
@@ -29635,7 +30108,7 @@ function level3DMake(object)
         debug && console.warn(`level3DLoad: no type added for ${object.type}, skipped`);
         return;
     }
-    const pos = level3DVector(object.pos, vec3()), properties = level3DProperties(type, object);
+    const properties = level3DProperties(type, object);
     const {make} = type, count = engineObjects.length;
     let result;
     try { result = make.prototype ? new make(pos, properties) : make(pos, properties); }
@@ -29653,16 +30126,263 @@ function level3DMake(object)
     if (result instanceof EngineObject3D)
     {
         level3DBaseScale.set(result, result.scale3D.copy());
-        result.rotation3D = level3DVector(object.rotation, vec3()).scale(PI / 180);
-        result.scale3D = result.scale3D.multiply(level3DVector(object.scale, vec3(1)));
+        result.rotation3D = rotation.copy();
+        result.scale3D = result.scale3D.multiply(scale);
     }
 
     // the type's own properties are set on it, one the type has no default for could be a field of the engine's
     for (const key in type.defaults)
         result[key] = properties[key];
+    // a prefab's instance makes its parts now that it is where it goes
+    result instanceof Prefab3D && result.placeAt(pos);
     return result;
 }
 
+/** Make one object of a type added with level3DAddType, level3DAddMesh or level3DAddPrefab, from code, with no
+ *  level: a prefab's instance, or a plain type
+ *  @param {string} type - The type's name
+ *  @param {Vector3} [pos3D]
+ *  @param {Vector3} [rotation3D] - In radians, as an object has it
+ *  @param {Vector3} [scale3D] - Times the scale the type makes it with
+ *  @param {Object} [properties] - Over the type's defaults
+ *  @return {any} - What the type made, a Prefab3D for a prefab, undefined when there is no such type
+ *  @memberof Level3D
+ *  @example
+ *  level3DAddPrefab('House', await fetchJSON('house.json'));
+ *  level3DSpawn('House', vec3(10, 0, 0), vec3(0, PI/2, 0)); */
+function level3DSpawn(type, pos3D=vec3(), rotation3D=vec3(), scale3D=vec3(1), properties)
+{
+    false&&ASSERT(isVector3(pos3D) && isVector3(rotation3D) && isVector3(scale3D), 'pos3D, rotation3D and scale3D are vec3');
+    return level3DMakeAt(properties ? {type, properties} : {type}, pos3D.copy(), rotation3D, scale3D);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// prefabs: a prefab is a small level, a list of objects about its own origin, placed many times
+
+// the prefabs by name: how an instance is built, its objects, fromLevel, true for one a level's own prefabs
+// block added, which one the game adds takes the place of, and source, the object it was added from, which the
+// level editor knows a level that is a prefab by
+/** @type {Map<string, {attached: boolean, objects: Array<Object>, fromLevel: boolean, source: Object}>} */
+const level3DPrefabs = new Map;
+
+// how many prefabs deep an instance being made is, a prefab that holds itself is stopped; and how many of those
+// are attached: a prefab inside an attached one is attached too, or its parts would be left behind in the world
+let level3DPrefabDepth = 0, level3DPrefabAttached = 0;
+
+/** Add a prefab: a small level, its objects placed about its own origin, to place many times under one name
+ *  - It is a type from then on: a level's object of that type, the level editor's Place list and level3DSpawn make
+ *    an instance, a Prefab3D; an instance is made of the prefab as it is then, so the level editor, where a prefab
+ *    changes, makes its instances again
+ *  - The prefab is a level as the level editor saves it, {objects: [...]}, so the editor is the prefab editor too;
+ *    only its objects are used, and they may be of other prefabs
+ *  - With attached true in it the parts are children of the instance and move with it as one body, without
+ *    collision of their own, a prefab inside it too; its handle is at the middle of the box around them and its
+ *    size3D is that box, so setCollision makes the body solid where it is seen; otherwise each part is an object of its own in the world and collides as one placed
+ *    by hand does
+ *  - Adding a name again replaces it
+ *  @param {string} name - The type its instances have in a level
+ *  @param {Object} prefab - {objects, attached}
+ *  @memberof Level3D
+ *  @example
+ *  level3DAddPrefab('Tower', {objects: [{type: 'Box', pos: [0, 1, 0], scale: [2, 2, 2]},
+ *      {type: 'Cylinder', pos: [0, 3, 0]}]});
+ *  level3DLoad({objects: [{type: 'Tower', pos: [5, 0, 5]}, {type: 'Tower', pos: [-5, 0, 5], rotation: [0, 45, 0]}]}); */
+function level3DAddPrefab(name, prefab) { level3DPrefabSet(name, prefab, false); }
+
+// add a prefab, the game's or a level's own
+function level3DPrefabSet(name, prefab, fromLevel)
+{
+    false&&ASSERT(!!prefab && typeof prefab === 'object', 'a prefab is an object, {objects: [...]}');
+    name = String(name);
+    const objects = isArray(prefab?.objects) ? prefab.objects.filter((o)=> o && typeof o === 'object') : [];
+    // a copy, what the game or the editor does to its own afterwards does not change the instances made later
+    level3DPrefabs.set(name, {attached: !!prefab?.attached, objects: JSON.parse(JSON.stringify(objects)), fromLevel,
+        source: prefab});
+    // a class of its own, so the level editor makes its instances again as it does a class's
+    level3DTypes.set(name, {make: class extends Prefab3D { constructor(pos) { super(pos, name); } }, defaults: {},
+        tileInfo: undefined});
+}
+
+// add a level's own prefabs, each unless the game added one of that name or it is a plain type's name
+function level3DPrefabsAdd(prefabs)
+{
+    if (!prefabs || typeof prefabs !== 'object' || isArray(prefabs)) return;
+    for (const name in prefabs)
+    {
+        const known = level3DPrefabs.get(name);
+        if (known ? !known.fromLevel : level3DTypes.has(name)) continue;
+        prefabs[name] && typeof prefabs[name] === 'object' && level3DPrefabSet(name, prefabs[name], true);
+    }
+}
+
+/** Load a prefab from a file the level editor saved and add it
+ *  @param {string} name - The type its instances have in a level
+ *  @param {string} url
+ *  @return {Promise<void>}
+ *  @memberof Level3D */
+async function level3DLoadPrefab(name, url) { level3DAddPrefab(name, await fetchJSON(url)); }
+
+// where an instance puts one of its prefab's objects: the object's own place, turn and size inside the instance's
+function level3DPrefabPartTransform(instance, object)
+{
+    const pos = level3DVector(object.pos, vec3()), scale = level3DVector(object.scale, vec3(1));
+    const rotation = level3DVector(object.rotation, vec3()).scale(PI / 180);
+    // the two turns one after the other; the sizes multiply along each axis, which is exact for an instance sized
+    // evenly or a part that is not turned, and as near as a box can be otherwise
+    const turn = buildMatrix(vec3(), instance.rotation3D).multiply(buildMatrix(vec3(), rotation));
+    return {pos: buildMatrix(instance.pos3D, instance.rotation3D, instance.scale3D).transformPoint(pos),
+        rotation: turn.getRotation(), scale: scale.multiply(instance.scale3D)};
+}
+
+/**
+ * An instance of a prefab, what a prefab's type makes: a handle with no shape of its own, and its parts, what the
+ * prefab's objects made
+ * - Parts of a prefab that is not attached are objects of their own in the world: moving, turning or sizing the
+ *   handle puts them where it now says with its next update, or call placeParts; destroying it destroys them
+ * - Parts of an attached prefab are its children and move with it as one body
+ * @extends EngineObject3D
+ * @memberof Level3D
+ */
+class Prefab3D extends EngineObject3D
+{
+    /** Create an instance of a prefab, made by its type: place one with a level or level3DSpawn
+     *  @param {Vector3} [pos3D]
+     *  @param {string} [prefabName] - A prefab added with level3DAddPrefab */
+    constructor(pos3D, prefabName='')
+    {
+        super(pos3D);
+        /** @property {string} - The prefab it is an instance of */
+        this.prefabName = prefabName;
+        /** @property {boolean} - Are its parts its children, moving with it as one body */
+        this.attached = !!level3DPrefabs.get(prefabName)?.attached || level3DPrefabAttached > 0;
+        /** @property {Array<any>} - What the prefab's objects made, in the prefab's order */
+        this.parts = [];
+        /** @property {Vector3} - From the prefab's origin to the handle, in the prefab's own space: nothing for
+         *  separate parts, and for an attached prefab the middle of the box around its parts, where its handle
+         *  is, as an object's place is the middle of its body */
+        this.originOffset = vec3();
+        this.partObjects = []; // the prefab's object of each part
+        this.partsPlaced = ''; // where the handle was when its parts were last placed, undefined parts not made
+        this.partsMade = false;
+    }
+
+    /** Put the instance with its prefab's origin at a place, turned and sized as the handle is: where a level's
+     *  object or level3DSpawn says it goes; the handle of an attached prefab is then at the middle of its body
+     *  @param {Vector3} pos3D */
+    placeAt(pos3D)
+    {
+        this.pos3D = pos3D.copy();
+        this.placeParts();
+        const o = this.originOffset;
+        if (o.x || o.y || o.z)
+            this.pos3D = buildMatrix(pos3D, this.rotation3D, this.scale3D).transformPoint(o);
+    }
+
+    /** Put the parts where the handle is now, making them the first time; called by the handle's update when it
+     *  has moved, turned or changed size */
+    placeParts()
+    {
+        if (this.destroyed) return;
+        this.partsMade ||= (this.makeParts(), true);
+        this.partsPlaced = this.placeKey();
+        if (this.attached) return; // children follow by themselves
+        this.parts.forEach((part, i)=>
+        {
+            if (!(part instanceof EngineObject3D)) return; // what a function made is where it was made
+            const to = level3DPrefabPartTransform(this, this.partObjects[i]);
+            part.rotation3D = to.rotation;
+            part.scale3D = (level3DBaseScale.get(part) ?? vec3(1)).multiply(to.scale);
+            // a prefab inside this one goes by its origin, which is not where an attached one's handle is
+            part instanceof Prefab3D ? part.placeAt(to.pos) : part.pos3D = to.pos;
+        });
+    }
+
+    // the handle's place, turn and size as one text, to tell when it has changed
+    placeKey()
+    {
+        const p = this.pos3D, r = this.rotation3D, s = this.scale3D;
+        return [p.x, p.y, p.z, r.x, r.y, r.z, s.x, s.y, s.z].join();
+    }
+
+    // make the parts, each where the instance puts it, or attached at its own place inside the instance
+    makeParts()
+    {
+        const prefab = level3DPrefabs.get(this.prefabName);
+        if (!prefab) return;
+        if (level3DPrefabDepth >= 8)
+        {
+            debug && console.error(`level3DLoad: the prefab ${this.prefabName} holds itself, left out there`);
+            return;
+        }
+        ++level3DPrefabDepth;
+        this.attached && ++level3DPrefabAttached;
+        try
+        {
+            const low = vec3(Infinity), high = vec3(-Infinity), children = [];
+            for (const object of prefab.objects)
+            {
+                const local = {pos: level3DVector(object.pos, vec3()), scale: level3DVector(object.scale, vec3(1)),
+                    rotation: level3DVector(object.rotation, vec3()).scale(PI / 180)};
+                const at = this.attached ? local : level3DPrefabPartTransform(this, object);
+                const part = level3DMakeAt(object, at.pos, at.rotation, at.scale);
+                if (!part) continue; // level3DMakeAt gives an object or nothing
+                this.parts.push(part);
+                this.partObjects.push(object);
+                if (!this.attached || !(part instanceof EngineObject3D)) continue;
+                // a child rides with its parent and has no collision of its own
+                part.setCollision(false, false, false);
+                children.push(part);
+                // the corners of its box as it is turned; its place is its middle, a prefab inside this one too
+                const box = buildMatrix(part.pos3D, part.rotation3D, part.size3D.multiply(part.scale3D));
+                for (let i = 8; i--;)
+                {
+                    const p = box.transformPoint(vec3(i & 1 ? .5 : -.5, i & 2 ? .5 : -.5, i & 4 ? .5 : -.5));
+                    for (const k of ['x', 'y', 'z'])
+                        low[k] = min(low[k], p[k]), high[k] = max(high[k], p[k]);
+                }
+            }
+            // an attached instance is the box around its parts, its handle at the middle of it as an object's
+            // place is the middle of its body, so a game that makes it solid has it solid where it is seen
+            if (children.length)
+            {
+                this.size3D = high.subtract(low);
+                this.originOffset = low.add(high).scale(.5);
+            }
+            for (const part of children)
+            {
+                part.pos3D = part.pos3D.subtract(this.originOffset);
+                this.addChild(part);
+            }
+        }
+        finally
+        {
+            --level3DPrefabDepth;
+            this.attached && --level3DPrefabAttached;
+        }
+    }
+
+    /** Keep the parts with the handle, called automatically each frame */
+    update()
+    {
+        super.update();
+        if (!this.attached && this.partsPlaced !== this.placeKey())
+            this.placeParts();
+    }
+
+    /** Destroy the instance and its parts
+     *  @param {boolean} [immediate] */
+    destroy(immediate)
+    {
+        if (this.destroyed) return;
+        for (const part of this.parts)
+            part.parent === this || part.destroy?.(immediate); // children go with their parent
+        super.destroy(immediate);
+    }
+
+    /** A prefab's instance has nothing of its own to draw */
+    render3D() {}
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 // the built-in types
 
@@ -29876,7 +30596,9 @@ function particleEffectSanitize(raw)
             settings[setting.name] = value === '' || particleEffectShapes.includes(value) ? value : fallback;
         else if (isNumber(value))
         {
-            const clamped = clamp(value, setting.hardMin, setting.hardMax);
+            // an angle past half a turn comes around, a clamp would point it the other way
+            const wraps = setting.name === 'angle' && isFinite(value) && abs(value) > PI;
+            const clamped = clamp(wraps ? mod(value + PI, 2*PI) - PI : value, setting.hardMin, setting.hardMax);
             settings[setting.name] = setting.step >= 1 ? round(clamped) : clamped;
         }
         else
@@ -29955,9 +30677,11 @@ function particleEffectsGet(name) { return particleEffectsByName.get(String(name
  *  @param {string} text
  *  @return {Array<Object>}
  *  @memberof ParticleEffects */
-function particleEffectsParse(text)
+function particleEffectsParse(text) { return particleEffectsFromData(JSON.parse(text)); }
+
+// a library file's data, or one effect's, into sanitized effects
+function particleEffectsFromData(data)
 {
-    const data = JSON.parse(text);
     const list = isArray(data?.effects) ? data.effects : data?.settings ? [data] : undefined;
     if (!list || !list.length)
         throw new Error('no effects in this file');
@@ -29976,7 +30700,7 @@ function particleEffectsText(effects) { return JSON.stringify({version:1, effect
  *  @memberof ParticleEffects */
 async function particleEffectsLoad(url)
 {
-    const effects = particleEffectsParse(JSON.stringify(await fetchJSON(url)));
+    const effects = particleEffectsFromData(await fetchJSON(url));
     particleEffectsAdd(effects);
     return effects;
 }
@@ -30154,7 +30878,13 @@ function particleEffectTileInfo(s)
  *  @memberof ParticleEffects */
 function particleEffectApply(emitter, effect)
 {
-    effect = particleEffectSanitize(effect); // an effect written by hand or changed since it was added
+    // an effect written by hand or changed since it was added
+    particleEffectSet(emitter, particleEffectSanitize(effect));
+}
+
+// set a 2D emitter to an effect that is sanitized already, as a play's is
+function particleEffectSet(emitter, effect)
+{
     const s = effect.settings, ended = emitter.emitTime < 0; // destroyed, its last particles going
     for (const setting of particleEffectSettings)
         if (!particleEffectIndirect.includes(setting.name))
@@ -30190,15 +30920,14 @@ function particleEffectResolve(nameOrEffect, options)
  *  - Attach it to an object with addChild to follow it
  *  @param {string|Object} nameOrEffect - A built-in or added effect's name, or an effect
  *  @param {Vector2} [pos]
- *  @param {Object} [options]
- *  @param {number} [options.scale] - Grows the whole effect, the built-ins fit a one unit object at 1
- *  @param {number} [options.hue] - Turns its colors around the color wheel, 1 is all the way
- *  @param {number} [options.saturation] - Multiplies its saturation, 0 is grey
- *  @param {number} [options.angle] - Direction, 0 is up; the effect's own angle when not given
- *  @param {TileInfo|TextureInfo} [options.tileInfo] - The game's own art to draw with in place of the effect's shape,
- *    tinted by its colors; a whole texture draws as one tile
- *  @param {*} [options.settings] - Any effect setting by its name, emitTime, emitRate, speed and the rest, replacing
- *    the effect's own for this play
+ *  @param {Object} [options] - What to change for this play, each left out when not wanted:
+ *    scale grows the whole effect, the built-ins fit a one unit object at 1;
+ *    hue turns its colors around the color wheel, 1 is all the way;
+ *    saturation multiplies its saturation, 0 is grey;
+ *    angle is its direction, 0 is up, the effect's own angle when not given;
+ *    tileInfo, a TileInfo or a TextureInfo, is the game's own art to draw with in place of the effect's shape,
+ *    tinted by its colors, a whole texture drawn as one tile;
+ *    and any effect setting by its name, emitTime, emitRate, speed and the rest, replaces the effect's own
  *  @return {ParticleEmitter|undefined} - undefined when there is no such effect
  *  @memberof ParticleEffects */
 function particleEffect(nameOrEffect, pos=vec2(), options={})
@@ -30206,7 +30935,7 @@ function particleEffect(nameOrEffect, pos=vec2(), options={})
     const effect = particleEffectResolve(nameOrEffect, options);
     if (!effect) return;
     const emitter = new ParticleEmitter(pos.copy());
-    particleEffectApply(emitter, effect);
+    particleEffectSet(emitter, effect);
     emitter.scale = options.scale ?? 1;
     if (options.angle !== undefined)
         emitter.angle = options.angle;
@@ -30270,7 +30999,7 @@ function particleEffectFromEmitter(emitter, name='Effect')
         p.velocity.y += (p.pos.x - c.x) * s * .002;
     };
     b('wind').update3D = (p, s)=> p.velocity.x += s * .004 * p.scale * min(p.age / p.lifeTime, 1);
-    // stick has no 3D push: particleEffect3D makes it the friction a particle lands with
+    // stick has no 3D push: particleEffectApply3D makes it the emitter's stick, its grip on landing
 }
 
 /** Set a 3D emitter to an effect, live, so a running one keeps its particles; its place, scale and flatten stay
@@ -30279,7 +31008,13 @@ function particleEffectFromEmitter(emitter, name='Effect')
  *  @memberof ParticleEffects */
 function particleEffectApply3D(emitter, effect)
 {
-    effect = particleEffectSanitize(effect); // an effect written by hand or changed since it was added
+    // an effect written by hand or changed since it was added
+    particleEffectSet3D(emitter, particleEffectSanitize(effect));
+}
+
+// set a 3D emitter to an effect that is sanitized already, as a play's is
+function particleEffectSet3D(emitter, effect)
+{
     const s = effect.settings, e = emitter;
     // a circle is a sphere and a rectangle a box as deep as it is wide
     e.emitSize = s.emitRect ? vec3(s.emitSize, s.emitHeight, s.emitSize) : s.emitSize;
@@ -30292,8 +31027,8 @@ function particleEffectApply3D(emitter, effect)
         'randomness', 'additive', 'gravityScale', 'angleSpeed', 'angleDamping', 'collideLevel', 'restitution'])
         e[name] = s[name];
     e.trailTime = s.trailScale / 60; // a stretch of speed times trailScale is a streak of that many frames
-    const stick = effect.behaviors.find(b=> b.name == 'stick'); // in 3D, a grip on landing is less sliding
-    e.friction = stick ? min(s.friction, 1 - stick.strength) : s.friction;
+    e.friction = s.friction;
+    e.stick = effect.behaviors.find(b=> b.name == 'stick')?.strength ?? 0; // in 3D the emitter grips on landing
     // a 2D emitter at angle a shoots along (sin a, cos a), a z turn r takes up to (-sin r, cos r), so r is -a
     e.rotation3D = vec3(0, 0, -s.angle);
     e.particleUpdateCallback = particleEffectUpdateCallback(effect.behaviors, true);
@@ -30303,8 +31038,8 @@ function particleEffectApply3D(emitter, effect)
  *  - The same effect data as particleEffect, so the look carries across: a circle spawn area becomes a sphere and a
  *    rectangle a box as deep as it is wide, both flat across the way it emits with options.flatten, a disc or a
  *    sheet; a trail becomes a streak of the same length, and the settings the 3D emitter lacks (particleConeAngle,
- *    randomColorLinear, velocityInheritance, localSpace) are left out; the stick behavior becomes the friction a
- *    particle lands with
+ *    randomColorLinear, velocityInheritance, localSpace) are left out; the stick behavior becomes the emitter's
+ *    stick, its grip where a particle lands
  *  @param {string|Object} nameOrEffect - A built-in or added effect's name, or an effect
  *  @param {Vector3} [pos3D]
  *  @param {Object} [options] - scale, hue, saturation, angle, tileInfo and any setting as particleEffect; angle turns it
@@ -30316,7 +31051,7 @@ function particleEffect3D(nameOrEffect, pos3D=vec3(), options={})
     const effect = particleEffectResolve(nameOrEffect, options);
     if (!effect) return;
     const e = new ParticleEmitter3D(pos3D.copy());
-    particleEffectApply3D(e, effect);
+    particleEffectSet3D(e, effect);
     if (options.angle !== undefined)
         e.rotation3D = vec3(0, 0, -options.angle);
     e.scale3D = vec3(options.scale ?? 1);
@@ -30847,6 +31582,11 @@ async function parseGLTF(data, baseUrl='')
     for (const name of json.extensionsRequired || [])
         if (name === 'KHR_draco_mesh_compression' || name === 'EXT_meshopt_compression')
             throw new Error(`glTF with ${name} is not read, export it uncompressed`);
+        else if (name === 'KHR_texture_basisu')
+            throw new Error('glTF with KHR_texture_basisu textures is not read, export them as png or jpeg');
+    // one that only may use them has other images to fall back on, or none: said, since it loads with them left out
+    if (json.extensionsUsed?.includes('KHR_texture_basisu') && !json.extensionsRequired?.includes('KHR_texture_basisu'))
+        console.warn('glTF: KHR_texture_basisu textures are not read and are left out, export them as png or jpeg');
 
     // the buffers: the GLB's own, a data uri, or a file beside the model
     const buffers = await Promise.all((json.buffers || []).map((buffer, i)=>
@@ -30889,7 +31629,8 @@ async function parseGLTF(data, baseUrl='')
             const bitmap = normalTextures.has(index) ?
                 await createImageBitmap(blob, {colorSpaceConversion: 'none', premultiplyAlpha: 'none'}) :
                 opaque ? await createImageBitmap(blob, {premultiplyAlpha: 'none'}).then(gltfOpaqueImage) : await createImageBitmap(blob);
-            return new TextureInfo(bitmap, true, [sampler.wrapS ?? 10497, sampler.wrapT ?? 10497]); // REPEAT by default
+            // REPEAT by default, and hard edged only when its sampler says NEAREST, not as the game's tiles are
+            return new TextureInfo(bitmap, true, [sampler.wrapS ?? 10497, sampler.wrapT ?? 10497], sampler.magFilter === 9728);
         }
         catch (e) { false&&LOG('glTF image not loaded', e); }
     }));
@@ -30999,17 +31740,25 @@ function gltfOpaqueImage(image)
 {
     const gl = glContext, {width, height} = image;
     if (gl.isContextLost()) return image; // nothing to read back through, it keeps its alpha
-    const texture = gl.createTexture(), framebuffer = gl.createFramebuffer(), bound = gl.getParameter(gl.FRAMEBUFFER_BINDING);
-    gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+    // the room to read into first: for a huge image it can fail, and must not with the framebuffer bound
     const data = new Uint8ClampedArray(width * height * 4);
-    gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data); // row 0 is the image's first row, as uploaded
-    gl.bindFramebuffer(gl.FRAMEBUFFER, bound);
-    gl.bindTexture(gl.TEXTURE_2D, glActiveTexture);
-    gl.deleteFramebuffer(framebuffer);
-    gl.deleteTexture(texture);
+    const texture = gl.createTexture(), framebuffer = gl.createFramebuffer(), bound = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+    try
+    {
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, data); // row 0 is the image's first row, as uploaded
+    }
+    finally
+    {
+        // the 2D renderer's own bindings back, whatever happened
+        gl.bindFramebuffer(gl.FRAMEBUFFER, bound);
+        gl.bindTexture(gl.TEXTURE_2D, glActiveTexture);
+        gl.deleteFramebuffer(framebuffer);
+        gl.deleteTexture(texture);
+    }
     for (let i = 3; i < data.length; i += 4)
         data[i] = 255;
     image.close();
@@ -31146,7 +31895,7 @@ function gltfAccessor(json, buffers, index)
     }
     if (scale !== 1)
         for (let i = 0; i < out.length; ++i)
-            out[i] /= scale;
+            out[i] = max(out[i] / scale, -1); // a signed type's lowest value is -1 too, as the format says
     return {data: out, components, count: a.count};
 }
 
@@ -31210,8 +31959,10 @@ function gltfPart(json, buffers, textures, primitive, matrix, name)
     const [er, eg, eb] = material.emissiveFactor || [0, 0, 0];
     if (er || eg || eb)
     {
+        // KHR_materials_emissive_strength makes it that many times brighter, emission above 1 in Blender
+        const strength = material.extensions?.KHR_materials_emissive_strength?.emissiveStrength ?? 1;
         part.emissiveMap = emissiveRef ? textures[emissiveRef.index] : gltfWhiteTexture();
-        part.emissiveMapColor = rgb(gltfSRGB(er), gltfSRGB(eg), gltfSRGB(eb));
+        part.emissiveMapColor = rgb(gltfSRGB(er) * strength, gltfSRGB(eg) * strength, gltfSRGB(eb) * strength);
     }
     return part;
 }