littlejsengine 1.14.28 → 1.15.3

package/dist/littlejs.esm.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.15.0';
+const engineVersion = '1.15.3';
 
 /** Frames per second to update
  *  @type {number}
@@ -134,7 +134,7 @@ function engineAddPlugin(update, render, glContextLost, glContextRestored)
 
 /**
  * @callback GameInitCallback - Called after the engine starts, can be async
- * @returns {void|Promise<void>}
+ * @return {void|Promise<void>}
  * @memberof Engine
  */
 /**
@@ -490,10 +490,10 @@ function engineObjectsDestroy()
 }
 
 /** Collects all object within a given area
- *  @param {Vector2} [pos]                 - Center of test area, or undefined for all objects
- *  @param {Vector2|number} [size]         - Radius of circle if float, rectangle size if Vector2
+ *  @param {Vector2} [pos] - Center of test area, or undefined for all objects
+ *  @param {Vector2|number} [size] - Radius of circle if float, rectangle size if Vector2
  *  @param {Array<EngineObject>} [objects=engineObjects] - List of objects to check
- *  @return {Array<EngineObject>}                        - List of collected objects
+ *  @return {Array<EngineObject>} - List of collected objects
  *  @memberof Engine */
 function engineObjectsCollect(pos, size, objects=engineObjects)
 {
@@ -790,8 +790,9 @@ function LOG(...output) { console.log(...output); }
  *  @param {number} [time]
  *  @param {number} [angle]
  *  @param {boolean} [fill]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugRect(pos, size=vec2(), color=WHITE, time=0, angle=0, fill=false)
+function debugRect(pos, size=vec2(), color=WHITE, time=0, angle=0, fill=false, screenSpace=false)
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
     ASSERT(isVector2(size), 'size must be a vec2');
@@ -806,7 +807,7 @@ function debugRect(pos, size=vec2(), color=WHITE, time=0, angle=0, fill=false)
     pos = pos.copy();
     size = size.copy();
     const timer = new Timer(time);
-    debugPrimitives.push({pos:pos.copy(), size:size.copy(), color, timer, angle, fill});
+    debugPrimitives.push({pos:pos.copy(), size:size.copy(), color, timer, angle, fill, screenSpace});
 }
 
 /** Draw a debug poly in world space
@@ -816,8 +817,9 @@ function debugRect(pos, size=vec2(), color=WHITE, time=0, angle=0, fill=false)
  *  @param {number} [time]
  *  @param {number} [angle]
  *  @param {boolean} [fill]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugPoly(pos, points, color=WHITE, time=0, angle=0, fill=false)
+function debugPoly(pos, points, color=WHITE, time=0, angle=0, fill=false, screenSpace=false)
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
     ASSERT(isArray(points), 'points must be an array');
@@ -830,7 +832,7 @@ function debugPoly(pos, points, color=WHITE, time=0, angle=0, fill=false)
     pos = pos.copy();
     points = points.map(p=>p.copy());
     const timer = new Timer(time);
-    debugPrimitives.push({pos, points, color, timer, angle, fill});
+    debugPrimitives.push({pos, points, color, timer, angle, fill, screenSpace});
 }
 
 /** Draw a debug circle in world space
@@ -839,8 +841,9 @@ function debugPoly(pos, points, color=WHITE, time=0, angle=0, fill=false)
  *  @param {Color|string} [color]
  *  @param {number} [time]
  *  @param {boolean} [fill]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugCircle(pos, size=0, color=WHITE, time=0, fill=false)
+function debugCircle(pos, size=0, color=WHITE, time=0, fill=false, screenSpace=false)
 {
     ASSERT(isVector2(pos), 'pos must be a vec2');
     ASSERT(isNumber(size), 'size must be a number');
@@ -851,7 +854,7 @@ function debugCircle(pos, size=0, color=WHITE, time=0, fill=false)
         color = color.toString();
     pos = pos.copy();
     const timer = new Timer(time);
-    debugPrimitives.push({pos, size, color, timer, angle:0, fill});
+    debugPrimitives.push({pos, size, color, timer, angle:0, fill, screenSpace});
 }
 
 /** Draw a debug point in world space
@@ -859,9 +862,10 @@ function debugCircle(pos, size=0, color=WHITE, time=0, fill=false)
  *  @param {Color|string} [color]
  *  @param {number} [time]
  *  @param {number} [angle]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugPoint(pos, color, time, angle)
-{ debugRect(pos, undefined, color, time, angle); }
+function debugPoint(pos, color, time, angle, screenSpace=false)
+{ debugRect(pos, undefined, color, time, angle, false, screenSpace); }
 
 /** Draw a debug line in world space
  *  @param {Vector2} posA
@@ -869,8 +873,9 @@ function debugPoint(pos, color, time, angle)
  *  @param {Color|string} [color]
  *  @param {number} [width]
  *  @param {number} [time]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugLine(posA, posB, color, width=.1, time)
+function debugLine(posA, posB, color, width=.1, time, screenSpace=false)
 {
     ASSERT(isVector2(posA), 'posA must be a vec2');
     ASSERT(isVector2(posB), 'posB must be sa vec2');
@@ -878,7 +883,7 @@ function debugLine(posA, posB, color, width=.1, time)
 
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(width, halfDelta.length()*2);
-    debugRect(posA.add(halfDelta), size, color, time, halfDelta.angle(), true);
+    debugRect(posA.add(halfDelta), size, color, time, halfDelta.angle(), true, screenSpace);
 }
 
 /** Draw a debug combined axis aligned bounding box in world space
@@ -887,8 +892,10 @@ function debugLine(posA, posB, color, width=.1, time)
  *  @param {Vector2} posB
  *  @param {Vector2} sizeB
  *  @param {Color|string} [color]
+ *  @param {number} [time]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugOverlap(posA, sizeA, posB, sizeB, color)
+function debugOverlap(posA, sizeA, posB, sizeB, color, time, screenSpace=false)
 {
     ASSERT(isVector2(posA), 'posA must be a vec2');
     ASSERT(isVector2(posB), 'posB must be a vec2');
@@ -903,7 +910,7 @@ function debugOverlap(posA, sizeA, posB, sizeB, color)
         max(posA.x + sizeA.x/2, posB.x + sizeB.x/2),
         max(posA.y + sizeA.y/2, posB.y + sizeB.y/2)
     );
-    debugRect(minPos.lerp(maxPos,.5), maxPos.subtract(minPos), color);
+    debugRect(minPos.lerp(maxPos,.5), maxPos.subtract(minPos), color, time, 0, false, screenSpace);
 }
 
 /** Draw a debug axis aligned bounding box in world space
@@ -914,8 +921,9 @@ function debugOverlap(posA, sizeA, posB, sizeB, color)
  *  @param {number} [time]
  *  @param {number} [angle]
  *  @param {string} [font]
+ *  @param {boolean} [screenSpace]
  *  @memberof Debug */
-function debugText(text, pos, size=1, color=WHITE, time=0, angle=0, font='monospace')
+function debugText(text, pos, size=1, color=WHITE, time=0, angle=0, font='monospace', screenSpace=false)
 {
     ASSERT(isString(text), 'text must be a string');
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -929,7 +937,7 @@ function debugText(text, pos, size=1, color=WHITE, time=0, angle=0, font='monosp
         color = color.toString();
     pos = pos.copy();
     const timer = new Timer(time);
-    debugPrimitives.push({text, pos, size, color, timer, angle, font});
+    debugPrimitives.push({text, pos, size, color, timer, angle, font, screenSpace});
 }
 
 /** Clear all debug primitives in the list
@@ -1139,21 +1147,26 @@ function debugRender()
     {
         // draw debug primitives
         overlayContext.lineWidth = 2;
-        const pointSize = debugPointSize * cameraScale;
         debugPrimitives.forEach(p=>
         {
             overlayContext.save();
 
             // create canvas transform from world space to screen space
-            const pos = worldToScreen(p.pos);
+            // without scaling because we want consistent pixel sizes
+            let pos = p.pos, scale = 1, angle = p.angle;
+            if (!p.screenSpace)
+            {
+                pos = worldToScreen(p.pos);
+                scale = cameraScale;
+                angle -= cameraAngle;
+            }
             overlayContext.translate(pos.x|0, pos.y|0);
-            overlayContext.rotate(p.angle);
+            overlayContext.rotate(angle);
             overlayContext.scale(1, p.text ? 1 : -1);
             overlayContext.fillStyle = overlayContext.strokeStyle = p.color;
-
             if (p.text !== undefined)
             {
-                overlayContext.font = p.size*cameraScale + 'px '+ p.font;
+                overlayContext.font = p.size*scale + 'px '+ p.font;
                 overlayContext.textAlign = 'center';
                 overlayContext.textBaseline = 'middle';
                 overlayContext.fillText(p.text, 0, 0);
@@ -1164,7 +1177,7 @@ function debugRender()
                 overlayContext.beginPath();
                 for (const point of p.points)
                 {
-                    const p2 = point.scale(cameraScale).floor();
+                    const p2 = point.scale(scale).floor();
                     overlayContext.lineTo(p2.x, p2.y);
                 }
                 overlayContext.closePath();
@@ -1174,13 +1187,14 @@ function debugRender()
             else if (p.size === 0 || (p.size.x === 0 && p.size.y === 0))
             {
                 // point
+                const pointSize = debugPointSize * scale;
                 overlayContext.fillRect(-pointSize/2, -1, pointSize, 3);
                 overlayContext.fillRect(-1, -pointSize/2, 3, pointSize);
             }
             else if (p.size.x !== undefined)
             {
                 // rect
-                const s = p.size.scale(cameraScale).floor();
+                const s = p.size.scale(scale).floor();
                 const w = s.x, h = s.y;
                 p.fill && overlayContext.fillRect(-w/2|0, -h/2|0, w, h);
                 overlayContext.strokeRect(-w/2|0, -h/2|0, w, h);
@@ -1189,7 +1203,7 @@ function debugRender()
             {
                 // circle
                 overlayContext.beginPath();
-                overlayContext.arc(0, 0, p.size*cameraScale/2, 0, 9);
+                overlayContext.arc(0, 0, p.size*scale/2, 0, 9);
                 p.fill && overlayContext.fill();
                 overlayContext.stroke();
             }
@@ -1555,7 +1569,7 @@ function percentLerp(value, percentA, percentB, lerpA, lerpB)
  *  @param {number} valueA
  *  @param {number} valueB
  *  @param {number} [wrapSize]
- *  @returns {number}
+ *  @return {number}
  *  @memberof Utilities */
 function distanceWrap(valueA, valueB, wrapSize=1)
 { const d = (valueA - valueB) % wrapSize; return d*2 % wrapSize - d; }
@@ -1565,7 +1579,7 @@ function distanceWrap(valueA, valueB, wrapSize=1)
  *  @param {number} valueB
  *  @param {number} percent
  *  @param {number} [wrapSize]
- *  @returns {number}
+ *  @return {number}
  *  @memberof Utilities */
 function lerpWrap(valueA, valueB, percent, wrapSize=1)
 {
@@ -1577,7 +1591,7 @@ function lerpWrap(valueA, valueB, percent, wrapSize=1)
 /** Returns signed wrapped distance between the two angles passed in
  *  @param {number} angleA
  *  @param {number} angleB
- *  @returns {number}
+ *  @return {number}
  *  @memberof Utilities */
 function distanceAngle(angleA, angleB) { return distanceWrap(angleA, angleB, 2*PI); }
 
@@ -1585,7 +1599,7 @@ function distanceAngle(angleA, angleB) { return distanceWrap(angleA, angleB, 2*P
  *  @param {number} angleA
  *  @param {number} angleB
  *  @param {number} percent
- *  @returns {number}
+ *  @return {number}
  *  @memberof Utilities */
 function lerpAngle(angleA, angleB, percent) { return lerpWrap(angleA, angleB, percent, 2*PI); }
 
@@ -2554,11 +2568,14 @@ const MAGENTA = debugProtectConstant(rgb(1,0,1));
 class Timer
 {
     /** Create a timer object set time passed in
-     *  @param {number} [timeLeft] - How much time left before the timer elapses in seconds */
-    constructor(timeLeft)
+     *  @param {number} [timeLeft] - How much time left before the timer 
+     *  @param {boolean} [useRealTime] - Should the timer keep running even when the game is paused? (useful for UI) */
+    constructor(timeLeft, useRealTime=false)
     {
         ASSERT(timeLeft === undefined || isNumber(timeLeft), 'Constructed Timer is invalid.', timeLeft);
-        this.time = timeLeft === undefined ? undefined : time + timeLeft;
+        this.useRealTime = useRealTime;
+        const globalTime = this.getGlobalTime();
+        this.time = timeLeft === undefined ? undefined : globalTime + timeLeft;
         this.setTime = timeLeft;
     }
 
@@ -2567,10 +2584,19 @@ class Timer
     set(timeLeft=0)
     {
         ASSERT(isNumber(timeLeft), 'Timer is invalid.', timeLeft);
-        this.time = time + 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)
+    {
+        ASSERT(!this.isSet(), 'Cannot change global time setting while timer is set.');
+        this.useRealTime = useRealTime;
+    }
+
     /** Unset the timer */
     unset() { this.time = undefined; }
 
@@ -2580,24 +2606,28 @@ class Timer
 
     /** Returns true if set and has not elapsed
      * @return {boolean} */
-    active() { return time < this.time; }
+    active() { return this.getGlobalTime() < this.time; }
 
     /** Returns true if set and elapsed
      * @return {boolean} */
-    elapsed() { return time >= this.time; }
+    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()? time - this.time : 0; }
+    get() { return this.isSet()? this.getGlobalTime() - this.time : 0; }
 
     /** Get percentage elapsed based on time it was set to, returns 0 if not set
      * @return {number} */
-    getPercent() { return this.isSet()? 1-percent(this.time - time, 0, this.setTime) : 0; }
+    getPercent() { return this.isSet()? 1-percent(this.time - this.getGlobalTime(), 0, this.setTime) : 0; }
 
     /** 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'; }
@@ -3628,7 +3658,9 @@ class EngineObject
     {
         ASSERT(child.parent === this && this.children.includes(child));
         ASSERT(child instanceof EngineObject, 'child must be an EngineObject');
-        this.children.splice(this.children.indexOf(child), 1);
+        const index = this.children.indexOf(child);
+        ASSERT(index >= 0, 'child not found in children array');
+        index >= 0 && this.children.splice(index, 1);
         child.parent = 0;
     }
 
@@ -3947,15 +3979,11 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
 
     const textureInfo = tileInfo && tileInfo.textureInfo;
     const bleedScale = tileInfo ? tileInfo.bleedScale : 0;
-    if (useWebGL)
+    if (useWebGL && glEnable)
     {
         ASSERT(!!glContext, 'WebGL is not enabled!');
         if (screenSpace)
-        {
-            // convert to world space
-            pos = screenToWorld(pos);
-            size = size.scale(1/cameraScale);
-        }
+            [pos, size, angle] = screenToWorldTransform(pos, size, angle);
         if (textureInfo)
         {
             // calculate uvs and render
@@ -3991,7 +4019,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     {
         // normal canvas 2D rendering method (slower)
         ++drawCount;
-        size = new Vector2(size.x, -size.y); // fix upside down sprites
+        size = new Vector2(size.x, -size.y); // flip upside down sprites
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
             if (textureInfo)
@@ -4043,7 +4071,8 @@ function drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0,
     ASSERT(isColor(colorTop) && isColor(colorBottom), 'color is invalid');
     ASSERT(isNumber(angle), 'angle must be a number');
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
-    if (useWebGL)
+
+    if (useWebGL && glEnable)
     {
         ASSERT(!!glContext, 'WebGL is not enabled!');
         if (screenSpace)
@@ -4051,6 +4080,7 @@ function drawRectGradient(pos, size, colorTop=WHITE, colorBottom=BLACK, angle=0,
             // convert to world space
             pos = screenToWorld(pos);
             size = size.scale(1/cameraScale);
+            angle += cameraAngle;
         }
         // build 4 corner points for the rectangle
         const points = [], colors = [];
@@ -4106,17 +4136,14 @@ function drawLineList(points, width=.1, color, wrap=false, pos=vec2(), angle=0,
     ASSERT(isVector2(pos), 'pos must be a vec2');
     ASSERT(isNumber(angle), 'angle must be a number');
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
-    if (useWebGL)
+
+    if (useWebGL && glEnable)
     {
         ASSERT(!!glContext, 'WebGL is not enabled!');
-        let scale = 1;
+        let size = vec2(1);
         if (screenSpace)
-        {
-            // convert to world space
-            pos = screenToWorld(pos);
-            scale = 1/cameraScale;
-        }
-        glDrawOutlineTransform(points, color.rgbaInt(), width, pos.x, pos.y, scale, scale, angle, wrap);
+            [pos, size, angle] = screenToWorldTransform(pos, size, angle);
+        glDrawOutlineTransform(points, color.rgbaInt(), width, pos.x, pos.y, size.x, size.y, angle, wrap);
     }
     else
     {
@@ -4212,19 +4239,15 @@ function drawPoly(points, color=WHITE, lineWidth=0, lineColor=BLACK, pos=vec2(),
     ASSERT(isNumber(angle), 'angle must be a number');
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
 
-    if (useWebGL)
+    if (useWebGL && glEnable)
     {
         ASSERT(!!glContext, 'WebGL is not enabled!');
-        let scale = 1;
+        let size = vec2(1);
         if (screenSpace)
-        {
-            // convert to world space
-            pos = screenToWorld(pos);
-            scale = 1/cameraScale;
-        }
-        glDrawPointsTransform(points, color.rgbaInt(), pos.x, pos.y, scale, scale, angle);
+            [pos, size, angle] = screenToWorldTransform(pos, size, angle);
+        glDrawPointsTransform(points, color.rgbaInt(), pos.x, pos.y, size.x, size.y, angle);
         if (lineWidth > 0)
-            glDrawOutlineTransform(points, lineColor.rgbaInt(), lineWidth, pos.x, pos.y, scale, scale, angle);
+            glDrawOutlineTransform(points, lineColor.rgbaInt(), lineWidth, pos.x, pos.y, size.x, size.y, angle);
     }
     else
     {
@@ -4267,7 +4290,7 @@ function drawEllipse(pos, size=vec2(1), color=WHITE, angle=0, lineWidth=0, lineC
     ASSERT(lineWidth >= 0 && lineWidth < size.x && lineWidth < size.y, 'invalid lineWidth');
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
 
-    if (useWebGL)
+    if (useWebGL && glEnable)
     {
         // draw as a regular polygon
         const sides = glCircleSides;
@@ -4330,14 +4353,10 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
     ASSERT(typeof drawFunction === 'function', 'drawFunction must be a function');
 
     if (!screenSpace)
-    {
-        // transform from world space to screen space
-        pos = worldToScreen(pos);
-        size = size.scale(cameraScale);
-    }
+        [pos, size, angle] = worldToScreenTransform(pos, size, angle);
     context.save();
     context.translate(pos.x+.5, pos.y+.5);
-    context.rotate(angle-cameraAngle);
+    context.rotate(angle);
     context.scale(mirror ? -size.x : size.x, -size.y);
     drawFunction(context);
     context.restore();
@@ -4363,7 +4382,14 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
  *  @memberof Draw */
 function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, fontStyle, maxWidth, angle=0, context=drawContext)
 {
-    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, fontStyle, maxWidth, angle, context);
+    // convert to screen space
+    pos = worldToScreen(pos);
+    size *= cameraScale;
+    lineWidth *= cameraScale;
+    angle -= cameraAngle;
+    angle *= -1;
+
+    drawTextScreen(text, pos, size, color, lineWidth, lineColor, textAlign, font, fontStyle, maxWidth, angle, context);
 }
 
 /** Draw text on overlay canvas in world space
@@ -4522,6 +4548,36 @@ function worldToScreenDelta(worldDelta)
     return new Vector2(x *  cameraScale, y * -cameraScale);
 }
 
+/** Convert screen space transform to world space
+ *  @param {Vector2} screenPos
+ *  @param {Vector2} screenSize  
+ *  @param {number} [screenAngle]
+ *  @return {[Vector2, Vector2, number]} - [pos, size, angle]
+ *  @memberof Draw */
+function screenToWorldTransform(screenPos, screenSize, screenAngle=0)
+{
+    return [
+        screenToWorld(screenPos),
+        screenSize.scale(1/cameraScale),
+        screenAngle + cameraAngle
+    ];
+}
+
+/** Convert world space transform to screen space
+ *  @param {Vector2} worldPos
+ *  @param {Vector2} worldSize  
+ *  @param {number} [worldAngle]
+ *  @return {[Vector2, Vector2, number]} - [pos, size, angle]
+ *  @memberof Draw */
+function worldToScreenTransform(worldPos, worldSize, worldAngle=0)
+{
+    return [
+        worldToScreen(worldPos),
+        worldSize.scale(cameraScale),
+        worldAngle - cameraAngle
+    ];
+}
+
 /** Get the camera's visible area in world space
  *  @return {Vector2}
  *  @memberof Draw */
@@ -4929,7 +4985,7 @@ function inputUpdate()
     if (headlessMode) return;
 
     // clear input when lost focus (prevent stuck keys)
-    if(!(touchInputEnable && isTouchDevice) && !document.hasFocus())
+    if (!(touchInputEnable && isTouchDevice) && !document.hasFocus())
         inputClear();
 
     // update mouse world space position and delta
@@ -5487,7 +5543,6 @@ class Sound
         ASSERT(isNumber(pitch), 'pitch must be a number');
         ASSERT(isNumber(randomnessScale), 'randomnessScale must be a number');
 
-
         if (!soundEnable || headlessMode) return;
         if (!this.sampleChannels) return;
 
@@ -6620,7 +6675,7 @@ class TileCollisionLayer extends TileLayer
         // remove from collision layers array and destroy
         const index = tileCollisionLayers.indexOf(this);
         ASSERT(index >= 0, 'tile collision layer not found in array');
-        tileCollisionLayers.splice(index, 1);
+        index >= 0 && tileCollisionLayers.splice(index, 1);
         super.destroy();
     }
 
@@ -6882,6 +6937,9 @@ class ParticleEmitter extends EngineObject
         this.previousPos = this.pos.copy();
     }
 
+    /** Emitters do not have physics */
+    updatePhysics() {}
+
     /** Update the emitter to spawn particles, called automatically by engine once each frame */
     update()
     {
@@ -8663,6 +8721,7 @@ class UISystemPlugin
         ASSERT(!uiSystem, 'UI system already initialized');
         uiSystem = this;
 
+        // default settings
         /** @property {Color} - Default fill color for UI elements */
         this.defaultColor = WHITE;
         /** @property {Color} - Default outline color for UI elements */
@@ -8691,6 +8750,13 @@ class UISystemPlugin
         this.defaultSoundRelease = undefined;
         /** @property {Sound} - Default sound when interactive UI element is clicked */
         this.defaultSoundClick = undefined;
+        /** @property {Color} - Color for shadow */
+        this.defaultShadowColor = CLEAR_BLACK;
+        /** @property {number} - Size of shadow blur */
+        this.defaultShadowBlur = 5;
+        /** @property {Vector2} - Offset of shadow blur */
+        this.defaultShadowOffset = vec2(5);
+        // system state
         /** @property {Array<UIObject>} - List of all UI elements */
         this.uiObjects = [];
         /** @property {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} - Context to render UI elements to */
@@ -8735,11 +8801,16 @@ class UISystemPlugin
             // reset hover object at start of update
             uiSystem.lastHoverObject = uiSystem.hoverObject;
             uiSystem.hoverObject = undefined;
+
+            // update in reverse order so topmost objects get priority
             for (let i = uiSystem.uiObjects.length; i--;)
             {
                 const o = uiSystem.uiObjects[i];
                 o.parent || updateObject(o)
             }
+
+            // remove destroyed objects
+            uiSystem.uiObjects = uiSystem.uiObjects.filter(o=>!o.destroyed);
         }
         function uiRender()
         {
@@ -8776,8 +8847,11 @@ class UISystemPlugin
     *  @param {number}  [lineWidth]
     *  @param {Color}   [lineColor]
     *  @param {number}  [cornerRadius]
-    *  @param {Color}   [gradientColor] */
-    drawRect(pos, size, color=WHITE, lineWidth=0, lineColor=BLACK, cornerRadius=0, gradientColor)
+    *  @param {Color}   [gradientColor]
+    *  @param {Color}   [shadowColor]
+    *  @param {number}  [shadowBlur]
+    *  @param {Color}   [shadowOffset] */
+    drawRect(pos, size, color=WHITE, lineWidth=0, lineColor=BLACK, cornerRadius=0, gradientColor, shadowColor=BLACK, shadowBlur=0, shadowOffset=vec2())
     {
         ASSERT(isVector2(pos), 'pos must be a vec2');
         ASSERT(isVector2(size), 'size must be a vec2');
@@ -8799,12 +8873,22 @@ class UISystemPlugin
         }
         else
             context.fillStyle = color.toString();
+        if (shadowBlur || shadowOffset.x || shadowOffset.y)
+        if (shadowColor.a > 0)
+        {
+            // setup shadow
+            context.shadowColor = shadowColor.toString();
+            context.shadowBlur = shadowBlur;
+            context.shadowOffsetX = shadowOffset.x;
+            context.shadowOffsetY = shadowOffset.y;
+        }
         context.beginPath();
         if (cornerRadius && context['roundRect'])
             context['roundRect'](pos.x-size.x/2, pos.y-size.y/2, size.x, size.y, cornerRadius);
         else
             context.rect(pos.x-size.x/2, pos.y-size.y/2, size.x, size.y);
         context.fill();
+        context.shadowColor = '#0000'
         if (lineWidth)
         {
             context.strokeStyle = lineColor.toString();
@@ -8909,6 +8993,15 @@ class UISystemPlugin
         p.x -= sInv*mainCanvasSize.x/2;
         return p;
     }
+
+    /** Destroy and remove all objects
+    *  @memberof Engine */
+    destroyObjects()
+    {
+        for (const o of this.uiObjects)
+            o.parent || o.destroy();
+        this.uiObjects = this.uiObjects.filter(o=>!o.destroyed);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -8984,6 +9077,12 @@ class UIObject
         this.dragActivate = false;
         /** @property {boolean} - True if this can be a hover object */
         this.canBeHover = true;
+        /** @property {Color} - Color for shadow, undefined if no shadow */
+        this.shadowColor = uiSystem.defaultShadowColor?.copy();
+        /** @property {number} - Size of shadow blur */
+        this.shadowBlur = uiSystem.defaultShadowBlur;
+        /** @property {Vector2} - Offset of shadow blur */
+        this.shadowOffset = uiSystem.defaultShadowOffset.copy();
         uiSystem.uiObjects.push(this);
         
         /** @property {Vector2} - How much to offset the text shadow or undefined */
@@ -9010,6 +9109,22 @@ class UIObject
         child.parent = undefined;
     }
 
+
+    /** Destroy this object, destroy its children, detach its parent, and mark it for removal */
+    destroy()
+    {
+        if (this.destroyed)
+            return;
+
+        // disconnect from parent and destroy children
+        this.destroyed = 1;
+        this.parent && this.parent.removeChild(this);
+        for (const child of this.children)
+        {
+            child.parent = 0;
+            child.destroy();
+        }
+    }
     /** Check if the mouse is overlapping a box in screen space
      *  @return {boolean} - True if overlapping
      */
@@ -9085,7 +9200,7 @@ class UIObject
 
         const lineColor = this.interactive && this.isActiveObject() && !this.disabled ? this.color : this.lineColor;
         const color = this.disabled ? this.disabledColor : this.interactive ? this.isActiveObject() ? this.activeColor || this.color : this.isHoverObject() ? this.hoverColor : this.color : this.color;
-        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius, this.gradientColor);
+        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius, this.gradientColor, this.shadowColor, this.shadowBlur, this.shadowOffset);
     }
 
     /** Special update when object is not visible */
@@ -9389,6 +9504,150 @@ class UIScrollbar extends UIObject
         uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, 0, undefined, this.align, this.font, this.fontStyle, true, this.textShadow);
     }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+/** 
+ * VideoPlayerUIObject - A UI object that plays video
+ * @extends UIObject
+ * @example
+ * // Create a video player UI object
+ * const video = new VideoPlayerUIObject(vec2(400, 300), vec2(320, 240), 'cutscene.mp4', true);
+ * video.play();
+ * @memberof UISystem
+ */
+class UIVideo extends UIObject
+{
+    /** Create a video player UI object
+     *  @param {Vector2} [pos]
+     *  @param {Vector2} [size]
+     *  @param {string} src - Video file path or URL
+     *  @param {boolean} [autoplay=false] - Start playing immediately?
+     *  @param {boolean} [loop=false] - Loop the video?
+     *  @param {number} [volume=1] - Volume percent scaled by global volume (0-1)
+     */
+    constructor(pos, size, src, autoplay=false, loop=false, volume=1)
+    {
+        super(pos, size || vec2());
+        
+        ASSERT(isString(src), 'video src must be a string');
+        ASSERT(isNumber(volume), 'video volume must be a number');
+
+        this.color = BLACK; // default to black background
+        this.cornerRadius = 0; // default to no corner radius
+
+        /** @property {float} - The video volume */
+        this.volume = volume;
+
+        // create video element
+        /** @property {HTMLVideoElement} - The video player */
+        this.video = document.createElement('video');
+        this.video.loop = loop;
+        this.video.volume = clamp(volume * soundVolume);
+        this.video.muted = !soundEnable;
+        this.video.style.display = 'none';
+        this.video.src = src;
+        document.body.appendChild(this.video);
+        autoplay && this.play();
+    }
+    
+    /** Play or resume the video
+     *  @return {Promise} Promise that resolves when playback starts */
+    play()
+    {
+        // try to play the video, catch any errors (autoplay may be blocked)
+        const promise = this.video.play();
+        promise?.catch(()=>{});
+        return promise;
+    }
+    
+    /** Pause the video */
+    pause() { this.video.pause(); }
+    
+    /** Stop and reset the video */
+    stop() { this.video.pause(); this.video.currentTime = 0; }
+    
+    /** Check if video is currently loading
+     *  @return {boolean} */
+    isLoadng()
+    { return this.video.readyState < this.video.HAVE_CURRENT_DATA; }
+    
+    /** Check if video is currently paused
+     *  @return {boolean} */
+    isPaused() { return this.video.paused; }
+    
+    /** Check if video is currently playing
+     *  @return {boolean} */
+    isPlaying()
+    { return !this.isPaused() && !this.hasEnded() && !this.isLoadng(); }
+    
+    /** Check if video has ended playing
+     *  @return {boolean} */
+    hasEnded() { return this.video.ended; }
+    
+    /** Set volume (0-1)
+     *  @param {number} volume - Volume level (0-1) */
+    setVolume(volume)
+    {
+        this.volume = volume;
+        this.video.volume = clamp(volume * soundVolume);
+    }
+    
+    /** Set playback speed
+     *  @param {number} rate - Playback rate multiplier */
+    setPlaybackRate(rate) { this.video.playbackRate = rate; }
+    
+    /** Get current time in seconds
+     *  @return {number} Current playback time */
+    getCurrentTime() { return this.video.currentTime || 0; }
+    
+    /** Get duration in seconds
+     *  @return {number} Total video duration */
+    getDuration() { return this.video.duration || 0; }
+    
+    /** Get the native video dimensions 
+     *  @return {Vector2} Video dimensions (may be 0,0 if metadata not loaded) */
+    getVideoSize()
+    { return vec2(this.video.videoWidth, this.video.videoHeight); }
+    
+    /** Seek to time in seconds
+     *  @param {number} time - Time in seconds to seek to */
+    setTime(time)
+    { this.video.currentTime = clamp(time, 0, this.getDuration()); }
+
+    update()
+    {
+        super.update();
+
+        // update volume based on global sound volume
+        this.video.volume = clamp(this.volume * soundVolume);
+    }
+    
+    /** Render video to UI canvas */
+    render()
+    {
+        super.render();
+
+        if (this.isLoadng())
+            return;
+        const context = uiSystem.uiContext;
+        const s = this.size;
+        context.save();
+        context.translate(this.pos.x, this.pos.y);
+        context.drawImage(this.video, -s.x/2, -s.y/2, s.x, s.y);
+        context.restore();
+    }
+    
+    /** Clean up video on destroy */
+    destroy()
+    {
+        if (this.destroyed)
+            return;
+
+        this.video.pause();
+        this.video.remove();
+        super.destroy();
+    }
 }
 /**
  * LittleJS Box2D Physics Plugin
@@ -11819,6 +12078,7 @@ export
     UIButton,
     UICheckbox,
     UIScrollbar,
+    UIVideo,
 
     // Box2D Physics
     box2d,