littlejsengine 1.15.2 → 1.15.3

package/dist/littlejs.d.ts

@@ -216,8 +216,9 @@ declare module "littlejsengine" {
      *  @param {number} [time]
      *  @param {number} [angle]
      *  @param {boolean} [fill]
+     *  @param {boolean} [screenSpace]
      *  @memberof Debug */
-    export function debugRect(pos: Vector2, size?: Vector2, color?: Color | string, time?: number, angle?: number, fill?: boolean): void;
+    export function debugRect(pos: Vector2, size?: Vector2, color?: Color | string, time?: number, angle?: number, fill?: boolean, screenSpace?: boolean): void;
     /** Draw a debug poly in world space
      *  @param {Vector2} pos
      *  @param {Array<Vector2>} points
@@ -225,39 +226,45 @@ declare module "littlejsengine" {
      *  @param {number} [time]
      *  @param {number} [angle]
      *  @param {boolean} [fill]
+     *  @param {boolean} [screenSpace]
      *  @memberof Debug */
-    export function debugPoly(pos: Vector2, points: Array<Vector2>, color?: Color | string, time?: number, angle?: number, fill?: boolean): void;
+    export function debugPoly(pos: Vector2, points: Array<Vector2>, color?: Color | string, time?: number, angle?: number, fill?: boolean, screenSpace?: boolean): void;
     /** Draw a debug circle in world space
      *  @param {Vector2} pos
      *  @param {number} [size] - diameter
      *  @param {Color|string} [color]
      *  @param {number} [time]
      *  @param {boolean} [fill]
+     *  @param {boolean} [screenSpace]
      *  @memberof Debug */
-    export function debugCircle(pos: Vector2, size?: number, color?: Color | string, time?: number, fill?: boolean): void;
+    export function debugCircle(pos: Vector2, size?: number, color?: Color | string, time?: number, fill?: boolean, screenSpace?: boolean): void;
     /** Draw a debug point in world space
      *  @param {Vector2} pos
      *  @param {Color|string} [color]
      *  @param {number} [time]
      *  @param {number} [angle]
+     *  @param {boolean} [screenSpace]
      *  @memberof Debug */
-    export function debugPoint(pos: Vector2, color?: Color | string, time?: number, angle?: number): void;
+    export function debugPoint(pos: Vector2, color?: Color | string, time?: number, angle?: number, screenSpace?: boolean): void;
     /** Draw a debug line in world space
      *  @param {Vector2} posA
      *  @param {Vector2} posB
      *  @param {Color|string} [color]
      *  @param {number} [width]
      *  @param {number} [time]
+     *  @param {boolean} [screenSpace]
      *  @memberof Debug */
-    export function debugLine(posA: Vector2, posB: Vector2, color?: Color | string, width?: number, time?: number): void;
+    export function debugLine(posA: Vector2, posB: Vector2, color?: Color | string, width?: number, time?: number, screenSpace?: boolean): void;
     /** Draw a debug combined axis aligned bounding box in world space
      *  @param {Vector2} posA
      *  @param {Vector2} sizeA
      *  @param {Vector2} posB
      *  @param {Vector2} sizeB
      *  @param {Color|string} [color]
+     *  @param {number} [time]
+     *  @param {boolean} [screenSpace]
      *  @memberof Debug */
-    export function debugOverlap(posA: Vector2, sizeA: Vector2, posB: Vector2, sizeB: Vector2, color?: Color | string): void;
+    export function debugOverlap(posA: Vector2, sizeA: Vector2, posB: Vector2, sizeB: Vector2, color?: Color | string, time?: number, screenSpace?: boolean): void;
     /** Draw a debug axis aligned bounding box in world space
      *  @param {string} text
      *  @param {Vector2} pos
@@ -266,8 +273,9 @@ declare module "littlejsengine" {
      *  @param {number} [time]
      *  @param {number} [angle]
      *  @param {string} [font]
+     *  @param {boolean} [screenSpace]
      *  @memberof Debug */
-    export function debugText(text: string, pos: Vector2, size?: number, color?: Color | string, time?: number, angle?: number, font?: string): void;
+    export function debugText(text: string, pos: Vector2, size?: number, color?: Color | string, time?: number, angle?: number, font?: string, screenSpace?: boolean): void;
     /** Clear all debug primitives in the list
      *  @memberof Debug */
     export function debugClear(): void;
@@ -3146,6 +3154,12 @@ declare module "littlejsengine" {
         defaultSoundRelease: any;
         /** @property {Sound} - Default sound when interactive UI element is clicked */
         defaultSoundClick: any;
+        /** @property {Color} - Color for shadow */
+        defaultShadowColor: Color;
+        /** @property {number} - Size of shadow blur */
+        defaultShadowBlur: number;
+        /** @property {Vector2} - Offset of shadow blur */
+        defaultShadowOffset: Vector2;
         /** @property {Array<UIObject>} - List of all UI elements */
         uiObjects: any[];
         /** @property {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} - Context to render UI elements to */
@@ -3165,8 +3179,11 @@ declare module "littlejsengine" {
         *  @param {number}  [lineWidth]
         *  @param {Color}   [lineColor]
         *  @param {number}  [cornerRadius]
-        *  @param {Color}   [gradientColor] */
-        drawRect(pos: Vector2, size: Vector2, color?: Color, lineWidth?: number, lineColor?: Color, cornerRadius?: number, gradientColor?: Color): void;
+        *  @param {Color}   [gradientColor]
+        *  @param {Color}   [shadowColor]
+        *  @param {number}  [shadowBlur]
+        *  @param {Color}   [shadowOffset] */
+        drawRect(pos: Vector2, size: Vector2, color?: Color, lineWidth?: number, lineColor?: Color, cornerRadius?: number, gradientColor?: Color, shadowColor?: Color, shadowBlur?: number, shadowOffset?: Color): void;
         /** Draw a line to the UI context
         *  @param {Vector2} posA
         *  @param {Vector2} posB
@@ -3283,6 +3300,12 @@ declare module "littlejsengine" {
         dragActivate: boolean;
         /** @property {boolean} - True if this can be a hover object */
         canBeHover: boolean;
+        /** @property {Color} - Color for shadow, undefined if no shadow */
+        shadowColor: Color;
+        /** @property {number} - Size of shadow blur */
+        shadowBlur: number;
+        /** @property {Vector2} - Offset of shadow blur */
+        shadowOffset: Vector2;
         /** @property {Vector2} - How much to offset the text shadow or undefined */
         textShadow: any;
         /** Add a child UIObject to this object

package/dist/littlejs.esm.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.15.2';
+const engineVersion = '1.15.3';
 
 /** Frames per second to update
  *  @type {number}
@@ -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();
             }
@@ -3644,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;
     }
 
@@ -3963,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
@@ -4059,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)
@@ -4067,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 = [];
@@ -4122,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
     {
@@ -4228,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
     {
@@ -4283,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;
@@ -4346,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();
@@ -4379,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
@@ -4538,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 */
@@ -4945,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
@@ -5503,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;
 
@@ -6636,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();
     }
 
@@ -8682,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 */
@@ -8710,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 */
@@ -8800,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');
@@ -8823,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();
@@ -9017,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 */
@@ -9134,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 */