littlejsengine 1.15.2 → 1.15.3

package/dist/littlejs.release.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}
@@ -2997,7 +2997,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;
     }
 
@@ -3316,15 +3318,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
@@ -3412,7 +3410,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)
@@ -3420,6 +3419,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 = [];
@@ -3475,17 +3475,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
     {
@@ -3581,19 +3578,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
     {
@@ -3636,7 +3629,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;
@@ -3699,14 +3692,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();
@@ -3732,7 +3721,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
@@ -3891,6 +3887,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 */
@@ -4298,7 +4324,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
@@ -4856,7 +4882,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;
 
@@ -5989,7 +6014,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();
     }
 
@@ -8035,6 +8060,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 */
@@ -8063,6 +8089,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 */
@@ -8153,8 +8186,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');
@@ -8176,12 +8212,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();
@@ -8370,6 +8416,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 */
@@ -8487,7 +8539,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 */

package/examples/electron/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1.15.2></script>
+<script src=../../dist/littlejs.js?1.15.3></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1.15.2></script>
+<script src=game.js?1.15.3></script>

package/examples/shorts/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html><meta charset=utf-8><body>
-<script src=../../dist/littlejs.js?1.15.2></script>
+<script src=../../dist/littlejs.js?1.15.3></script>
 <script src=../../dist/box2d.wasm.js></script>
 
 <!-- LittleJS Engine Source

package/examples/shorts/box2dCar.js

@@ -39,7 +39,7 @@ class CarObject extends Box2dObject
             joint.setSpringFrequencyHz(frequency);
             joint.setMaxMotorTorque(maxTorque);
             joint.enableMotor(!i);
-            const friction = 1;
+            const friction = 20;
             wheel.addCircle(2, vec2(), 1, friction);
             wheel.motorJoint = joint;
             this.wheels[i] = wheel;

package/examples/shorts/music.js

@@ -8,6 +8,7 @@ function gameInit()
     uiSystem.defaultSoundPress = new Sound([.5,0,220]);
     uiSystem.defaultSoundClick = new Sound([.5,0,440]);
     uiSystem.defaultCornerRadius = 20;
+    uiSystem.defaultShadowColor = BLACK;
     canvasClearColor = hsl(.9,.3,.2);
 
     // setup music player UI

package/examples/shorts/musicPlayer.js

@@ -9,6 +9,7 @@ function gameInit()
     uiSystem.defaultSoundClick = new Sound([.5,0,440]);
     uiSystem.defaultCornerRadius = 20;
     uiSystem.defaultGradientColor = WHITE;
+    uiSystem.defaultShadowColor = BLACK;
     canvasClearColor = hsl(.9,.3,.2);
 
     // setup music player UI

package/examples/shorts/sequencer.js

@@ -28,6 +28,7 @@ class UISequencerButton extends UIButton
         this.cornerRadius = 0;
         this.dragActivate = true;
         this.isOn = false;
+        this.shadowColor = CLEAR_BLACK;
 
         // set instrument and color based on track
         const pianoStart = 2;
@@ -70,6 +71,7 @@ function gameInit()
     // initialize UI system
     new UISystemPlugin;
     uiSystem.defaultCornerRadius = 8;
+    uiSystem.defaultShadowColor = BLACK;
     canvasClearColor = hsl(0,0,.3);
 
     // create sequencer buttons

package/examples/shorts/sound.js

@@ -2,6 +2,7 @@ function gameInit()
 {
     // initialize UI system
     new UISystemPlugin;
+    uiSystem.defaultShadowColor = BLACK;
     canvasClearColor = hsl(.6,.3,.2);
 
     // create a grid of buttons with different sounds

package/examples/shorts/timers.js

@@ -5,6 +5,7 @@ function gameInit()
     // setup ui system plugin
     new UISystemPlugin();
     uiSystem.defaultCornerRadius = 10;
+    uiSystem.defaultShadowColor = BLACK;
     canvasClearColor = hsl(.3,.3,.2);
 
     // create timer button

package/examples/shorts/uiSystem.js

@@ -5,6 +5,7 @@ function gameInit()
     uiSystem.defaultSoundPress = new Sound([.5,0,220]);
     uiSystem.defaultSoundClick = new Sound([.5,0,440]);
     uiSystem.defaultCornerRadius = 8;
+    uiSystem.defaultShadowColor = BLACK;
 
     // example button that returns to menu
     const buttonBack = new UIButton(mainCanvasSize.scale(.5), vec2(200),

package/examples/shorts/videoPlayer.js

@@ -1,8 +1,9 @@
 function gameInit()
 {
     new UISystemPlugin;
-    canvasClearColor = hsl(0,0,.1);
     uiSystem.defaultCornerRadius = 20;
+    uiSystem.defaultShadowColor = BLACK;
+    canvasClearColor = hsl(0,0,.1);
 
     // video player
     const center = mainCanvasSize.scale(.5);

package/examples/starter/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1.15.2></script>
+<script src=../../dist/littlejs.js?1.15.3></script>
 
 <!-- LittleJS Engine Source
 <script src=../../src/engine.js></script>
@@ -31,4 +31,4 @@
 -->
 
 <!-- Add your game scripts here -->
-<script src=game.js?1.15.2></script>
+<script src=game.js?1.15.3></script>

package/examples/uiSystem/game.js

@@ -25,6 +25,7 @@ function createUI()
     LJS.uiSystem.defaultSoundClick = new LJS.Sound([.5,0,440]);
     LJS.uiSystem.defaultCornerRadius = 8;
     LJS.uiSystem.defaultGradientColor = LJS.WHITE;
+    LJS.uiSystem.defaultShadowColor = LJS.BLACK;
 
     // setup root to attach all ui elements to
     uiRoot = new LJS.UIObject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.15.2",
+  "version": "1.15.3",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",

package/plugins/uiSystem.js

@@ -36,6 +36,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 */
@@ -64,6 +65,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 */
@@ -154,8 +162,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');
@@ -177,12 +188,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();
@@ -371,6 +392,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 */
@@ -488,7 +515,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 */

package/src/engine.js

@@ -30,7 +30,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}

package/src/engineAudio.js

@@ -113,7 +113,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;