littlejsengine 1.14.5 → 1.14.8

package/examples/shorts/timers.js

@@ -1,40 +1,43 @@
-class TimerButton extends EngineObject
-{
-    constructor(pos, time)
-    {
-        super(pos, vec2(5.5));
-        this.time = time;
-        this.timer = new Timer;
-    }
+let timerButton, timerSlider;
 
-    update()
-    {
-        // start or stop the timer when clicked
-        if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
-            this.timer.isSet() ? this.timer.unset() : this.timer.set(this.time);
-    }
+function gameInit()
+{
+    // setup ui system plugin
+    new UISystemPlugin();
+    uiSystem.defaultCornerRadius = 10;
+    canvasClearColor = hsl(.3,.3,.2);
 
-    render()
+    // create timer button
+    const pos = mainCanvasSize.scale(.5).add(vec2(0, -40));
+    timerButton = new UIButton(pos, vec2(200, 90), 'Start');
+    timerButton.timer = new Timer;
+    timerButton.onClick = ()=>
     {
-        // get color based on timer state
-        this.color = this.timer.isSet() ? this.timer.active() ? BLUE : RED : GRAY;
-
-        // draw the button and timer text
-        drawRect(this.pos, this.size, this.color);
-        if (this.timer.isSet())
+        if (timerButton.timer.isSet())
         {
-            drawTextOverlay(this.timer.get().toFixed(1), this.pos.add(vec2(0,1)), 2);
-            const percent = this.timer.getPercent()*100|0;
-            drawTextOverlay(percent+'%', this.pos.add(vec2(0,-1)), 2);
+            timerButton.timer.unset();
+            timerButton.text = 'Start';
         }
         else
-            drawTextOverlay('Click\nto set', this.pos, 2);
+        {
+            timerButton.timer.set(3);
+            timerButton.text = 'Stop';
+        }
     }
-}
 
-function gameInit()
-{
-    // create some timer buttons
-    new TimerButton(vec2(-5, 0), 3);
-    new TimerButton(vec2( 5, 0), 0);
+    // create non-interactive slider to display timer
+    timerSlider = new UIScrollbar(vec2(0, 100), vec2(400, 50));
+    timerSlider.interactive = false;
+    timerSlider.update = ()=>
+    {
+        // update the timer display
+        const t = timerButton.timer.get();
+        const timeText = t.toFixed(2) + 's';
+        const isSet = timerButton.timer.isSet();
+        const setTime = timerButton.timer.getSetTime();
+        timerSlider.text = timeText;
+        timerSlider.value = setTime ? 1+t/setTime : 1;
+        timerSlider.color = isSet ? t < 0 ? CYAN : RED : GRAY;
+    }
+    timerButton.addChild(timerSlider);
 }

package/examples/shorts/topDown.js

@@ -23,13 +23,14 @@ class Player extends EngineObject
 function gameInit()
 {
     // setup level
+    canvasClearColor = hsl(.3,.2,.6);
     objectDefaultDamping = .7;
     new Player;
 
     // create collision objects
     for (let i=300; i--;)
     {
-        const o = new EngineObject(randInCircle(15+i,7), vec2(rand(4,9),rand(4,9)), 0, 0, hsl(0,0,rand(.8,1)));
+        const o = new EngineObject(randInCircle(15+i,7), vec2(rand(4,9),rand(4,9)), 0, 0, hsl(0,0,rand(.1,.3)));
         o.setCollision(); // make object collide
         o.mass = 0; // make object have static physics
     }

package/examples/shorts/uiSystem.js

@@ -4,30 +4,35 @@ let uiMenu;
 
 function gameInit()
 {
-    // load ui system plugin
+    // setup ui system plugin
     new UISystemPlugin;
     uiSystem.defaultSoundPress = new Sound([1,0,220]);
     uiSystem.defaultSoundClick = new Sound([1,0,440]);
     uiSystem.defaultCornerRadius = 8;
 
+    // example button that returns to menu
+    const buttonBack = new UIButton(mainCanvasSize.scale(.5), vec2(200), 'Back\nto\nMenu');
+    buttonBack.textHeight = 60;
+    buttonBack.onClick = ()=> uiMenu.visible = true;
+
     // setup example menu
-    uiBackground = new UIObject(mainCanvasSize.scale(.5), vec2(1e5));
-    uiBackground.color = hsl(0,0,.8);
-    const uiMenu = new UIObject(vec2(), vec2(450));
-    uiBackground.addChild(uiMenu);
+    const uiMenu = new UIObject(mainCanvasSize.scale(.5), vec2(600,450));
+    canvasClearColor = hsl(0,0,.8);
 
     // example text
-    const textTitle = new UIText(vec2(0,-120), vec2(400, 60), 'LittleJS UI\nSystem Demo');
-    uiMenu.addChild(textTitle);
+    uiMenu.addChild(new UIText(vec2(-80,-120), vec2(500, 80), 'LittleJS UI\nSystem Demo'));
+
+    // example image
+    uiMenu.addChild(new UITile(vec2(200,-140), vec2(128), tile(3, 128)));
 
     // example button
-    const button1 = new UIButton(vec2(70,0), vec2(140, 80), 'Test');
+    const button1 = new UIButton(vec2(80,0), vec2(140, 80), 'Test');
     button1.textHeight = 60;
     uiMenu.addChild(button1);
-    button1.onClick = ()=> uiBackground.color = randColor();
+    button1.onClick = ()=> canvasClearColor = randColor();
 
     // example checkbox
-    const checkbox = new UICheckbox(vec2(-70,0), vec2(50));
+    const checkbox = new UICheckbox(vec2(-80,0), vec2(50));
     checkbox.onChange = ()=> button1.disabled = checkbox.checked;
     uiMenu.addChild(checkbox);
 

package/examples/stress/index.html

@@ -47,7 +47,7 @@ function gameInit()
     LJS.setCanvasFixedSize(vec2(1920, 1080)); // 1080p
     LJS.setCameraScale(20);
     LJS.setCameraPos(tileLayer.size.scale(.5));
-    LJS.mainCanvas.style.background = '#555';
+    LJS.setCanvasClearColor(rgb(.4,.4,.4));
     LJS.setGravity(vec2(0,-.005));
     sprites = [];
 

package/examples/uiSystem/game.js

@@ -85,6 +85,7 @@ function gameInit()
 {
     new LJS.UISystemPlugin;
     createUI();
+    LJS.setCanvasClearColor(hsl(0,0,.2));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -110,7 +111,6 @@ function gameUpdatePost()
 function gameRender()
 {
     // test game rendering
-    LJS.drawRect(vec2(), vec2(1e3), hsl(0,0,.2));
     for (let i=0; i<1e3; ++i)
     {
         const pos = vec2(30*Math.sin(i+LJS.time/9),20*Math.sin(i*i+LJS.time/9));

package/package.json

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

package/plugins/uiSystem.js

@@ -49,6 +49,8 @@ class UISystemPlugin
         this.defaultLineWidth = 4;
         /** @property {number} - Default rounded rect corner radius for UI elements */
         this.defaultCornerRadius = 0;
+        /** @property {number} - Default scale to use for fitting text to object */
+        this.defaultTextScale = .8;
         /** @property {string} - Default font for UI elements */
         this.defaultFont = 'arial';
         /** @property {Sound} - Default sound when interactive UI element is pressed */
@@ -61,10 +63,15 @@ class UISystemPlugin
         this.uiObjects = [];
         /** @property {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} - Context to render UI elements to */
         this.uiContext = context;
+        /** @property {UIObject} - Top most object user is over */
+        this.hoverObject = undefined;
+        /** @property {UIObject} - Object user is currently interacting with */
+        this.activeObject = undefined;
             
         engineAddPlugin(uiUpdate, uiRender);
 
         // setup recursive update and render
+        // update in reverse order to detect mouse enter/leave
         function uiUpdate()
         {
             function updateInvisibleObject(o)
@@ -89,7 +96,13 @@ class UISystemPlugin
                 else
                     updateInvisibleObject(o);
             }
-            uiSystem.uiObjects.forEach(o=> o.parent || updateObject(o));
+            // reset hover object at start of update
+            uiSystem.hoverObject = undefined;
+            for (let i = uiSystem.uiObjects.length; i--;)
+            {
+                const o = uiSystem.uiObjects[i];
+                o.parent || updateObject(o)
+            }
         }
         function uiRender()
         {
@@ -168,10 +181,11 @@ class UISystemPlugin
     *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
     *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
     *  @param {string}  [align]
-    *  @param {string}  [font=uiSystem.defaultFont] */
-    drawText(text, pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, align='center', font=uiSystem.defaultFont)
+    *  @param {string}  [font=uiSystem.defaultFont]
+    *  @param {boolean} [applyMaxWidth=true] */
+    drawText(text, pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, align='center', font=uiSystem.defaultFont, applyMaxWidth=true)
     {
-        drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, size.x, uiSystem.uiContext);
+        drawTextScreen(text, pos, size.y, color, lineWidth, lineColor, align, font, applyMaxWidth ? size.x : undefined, uiSystem.uiContext);
     }
 }
 
@@ -195,6 +209,8 @@ class UIObject
         this.size = size.copy();
         /** @property {Color} - Color of the object */
         this.color = uiSystem.defaultColor;
+        /** @property {Color} - Color of the object when active, uses color if undefined */
+        this.activeColor = undefined;
         /** @property {string} - Text for this ui object */
         this.text = undefined;
         /** @property {Color} - Color when disabled */
@@ -213,15 +229,19 @@ class UIObject
         this.cornerRadius = uiSystem.defaultCornerRadius;
         /** @property {string} - Font for this objecct */
         this.font = uiSystem.defaultFont;
+        /** @property {number} - Override for text width */
+        this.textWidth = undefined;
         /** @property {number} - Override for text height */
         this.textHeight = undefined;
+        /** @property {number} - Scale text to fit in the object */
+        this.textScale = uiSystem.defaultTextScale;
         /** @property {boolean} - Should this object be drawn */
         this.visible  = true;
         /** @property {Array<UIObject>} - A list of this object's children */
         this.children = [];
         /** @property {UIObject} - This object's parent, position is in parent space */
         this.parent = undefined;
-        /** @property {number} - Extra size added to make small buttons easier to touch on mobile devices */
+        /** @property {number} - Added size to make small buttons easier to touch on mobile devices */
         this.extraTouchSize = 0;
         /** @property {Sound} - Sound when interactive element is pressed */
         this.soundPress = uiSystem.defaultSoundPress;
@@ -229,12 +249,10 @@ class UIObject
         this.soundRelease = uiSystem.defaultSoundRelease;
         /** @property {Sound} - Sound when interactive element is clicked */
         this.soundClick = uiSystem.defaultSoundClick;
-        /** @property {boolean} - Is the mouse over this element */
-        this.mouseIsOver = false;
         /** @property {boolean} - Is this element interactive */
         this.interactive = false;
-        /** @property {boolean} - Is the mouse held on this element (was pressed while over and hasn't been released) */
-        this.mouseIsHeld = false;
+        /** @property {boolean} - Activate when dragged over with mouse held down */
+        this.dragActivate = false;
         uiSystem.uiObjects.push(this);
     }
 
@@ -261,15 +279,18 @@ class UIObject
     /** Update the object, called automatically by plugin once each frame */
     update()
     {
-        const mouseWasOver = this.mouseIsOver;
-        const mousePress = mouseWasPressed(0);
+        const wasHover = this.isHoverObject();
+        const isActive = this.isActiveObject();
         const mouseDown = mouseIsDown(0);
-        if (mousePress || !mouseDown || this.mouseIsHeld)
+        const mousePress = this.dragActivate ? mouseDown : mouseWasPressed(0);
+        if (!uiSystem.hoverObject)
+        if (mousePress || !mouseDown || isActive)
         {
             const size = this.size.add(vec2(isTouchDevice && this.extraTouchSize || 0));
-            this.mouseIsOver = isOverlapping(this.pos, size, mousePosScreen);
+            if (isOverlapping(this.pos, size, mousePosScreen))
+                uiSystem.hoverObject = this;
         }
-        if (this.mouseIsOver)
+        if (this.isHoverObject())
         {
             if (mousePress)
                 inputClearKey(0,0,0,1,0); // clear mouse was pressed state
@@ -282,10 +303,12 @@ class UIObject
                         this.onPress();
                         if (this.soundPress)
                             this.soundPress.play();
+                        if (uiSystem.activeObject && !isActive)
+                            uiSystem.activeObject.onRelease();
+                        uiSystem.activeObject = this;
                     }
-                    this.mouseIsHeld = true;
                 }
-                if (!mouseDown && this.mouseIsHeld && this.interactive)
+                if (!mouseDown && uiSystem.activeObject === this && this.interactive)
                 {
                     this.onClick();
                     if (this.soundClick)
@@ -293,37 +316,52 @@ class UIObject
                 }
             }
         }
-        if (!mouseDown)
+        if (isActive && (!mouseDown || !this.isHoverObject()))
         {
-            if (this.mouseIsHeld && this.interactive)
-            {
-                this.onRelease();
-                if (this.soundRelease)
-                    this.soundRelease.play();
-            }
-            if (isTouchDevice)
-                this.mouseIsOver = false;
-            this.mouseIsHeld = false;
+            this.onRelease();
+            if (this.soundRelease)
+                this.soundRelease.play();
+            uiSystem.activeObject = undefined;
         }
 
-        if (this.mouseIsOver !== mouseWasOver)
-            this.mouseIsOver ? this.onEnter() : this.onLeave();
+        if (this.isHoverObject() !== wasHover)
+            this.isHoverObject() ? this.onEnter() : this.onLeave();
     }
 
     /** Render the object, called automatically by plugin once each frame */
     render()
     {
-        if (this.size.x && this.size.y)
-            uiSystem.drawRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor, this.cornerRadius);
+        if (!this.size.x || !this.size.y) return;
+
+        const lineColor = this.interactive && this.isActiveObject() && !this.disabled ? this.color : this.lineColor;
+        const color = this.interactive ? this.disabled ? this.disabledColor : 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);
     }
 
     /** Special update when object is not visible */
     updateInvisible()
     {
         // reset input state when not visible
-        this.mouseIsOver = this.mouseIsHeld = false;
+        if (this.isActiveObject())
+            uiSystem.activeObject = undefined;
+    }
+
+    /** Get the size for text with overrides and scale
+     *  @return {Vector2}
+     */
+    getTextSize()
+    {
+        return vec2(
+            this.textWidth  || this.textScale * this.size.x, 
+            this.textHeight || this.textScale * this.size.y);
     }
 
+    /** @return {boolean} - Is the mouse hovering over this element */
+    isHoverObject() { return uiSystem.hoverObject === this; }
+
+    /** @return {boolean} - Is the mouse held onto this element */
+    isActiveObject() { return uiSystem.activeObject === this; }
+
     /** Called when the mouse enters the object */
     onEnter() {}
 
@@ -371,7 +409,7 @@ class UIText extends UIObject
     }
     render()
     {
-        const textSize = vec2(this.size.x, this.textHeight || this.size.y);
+        const textSize = this.getTextSize();
         uiSystem.drawText(this.text, this.pos, textSize, this.textColor, this.lineWidth, this.lineColor, this.align, this.font);
     }
 }
@@ -434,14 +472,10 @@ class UIButton extends UIObject
     }
     render()
     {
-        // draw the button
-        const lineColor = this.mouseIsHeld && !this.disabled ? this.color : this.lineColor;
-        const color = this.disabled ? this.disabledColor : this.mouseIsOver ? this.hoverColor : this.color;
-        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius);
+        super.render();
         
-        // draw the text
-        const textScale = .8; // scale text to fit
-        const textSize = vec2(this.size.x, this.textHeight || this.size.y*textScale);
+        // draw the text scaled to fit
+        const textSize = this.getTextSize();
         uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, 0, undefined, this.align, this.font);
     }
@@ -479,8 +513,7 @@ class UICheckbox extends UIObject
     }
     render()
     {
-        const color = this.disabled ? this.disabledColor : this.mouseIsOver ? this.hoverColor : this.color;
-        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, this.lineColor, this.cornerRadius);
+        super.render();
         if (this.checked)
         {
             const p = this.cornerRadius / min(this.size.x, this.size.y) * 2;
@@ -490,13 +523,11 @@ class UICheckbox extends UIObject
             uiSystem.drawLine(this.pos.add(s.multiply(vec2(-1,1))), this.pos.add(s.multiply(vec2(1,-1))), this.lineWidth, this.lineColor);
         }
         
-        // draw the text to the right side of the checkbox
-        const textScale = .8; // scale text to fit
-        const gapScale = .55;
-        const textSize = vec2(this.size.x, this.textHeight || this.size.y*textScale);
-        const pos = this.pos.add(vec2(this.size.x*gapScale,0));
+        // draw the text next to the checkbox
+        const textSize = this.getTextSize();
+        const pos = this.pos.add(vec2(this.size.x,0));
         uiSystem.drawText(this.text, pos, textSize, 
-            this.textColor, 0, undefined, 'left', this.font);
+            this.textColor, 0, undefined, 'left', this.font, false);
     }
 }
 
@@ -532,7 +563,7 @@ class UIScrollbar extends UIObject
     update()
     {
         super.update();
-        if (this.mouseIsHeld && this.interactive)
+        if (this.isActiveObject() && this.interactive)
         {
             // check if value changed
             const handleSize = vec2(this.size.y);
@@ -546,12 +577,7 @@ class UIScrollbar extends UIObject
     }
     render()
     {
-        // draw the scrollbar background
-        const lineColor = this.interactive && this.mouseIsHeld && !this.disabled ? 
-            this.color : this.lineColor;
-        const color = this.disabled ? this.disabledColor : 
-            this.interactive && this.mouseIsHeld ? this.hoverColor : this.color;
-        uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius);
+        super.render();
     
         // draw the scrollbar handle
         const handleSize = vec2(this.size.y);
@@ -560,12 +586,11 @@ class UIScrollbar extends UIObject
         const p2 = this.pos.x + handleWidth/2;
         const handlePos = vec2(lerp(p1, p2, this.value), this.pos.y);
         const handleColor = this.disabled ? this.disabledColor : 
-            this.interactive && this.mouseIsHeld ? this.color : this.handleColor;
+            this.interactive && this.isActiveObject() ? this.color : this.handleColor;
         uiSystem.drawRect(handlePos, handleSize, handleColor, this.lineWidth, this.lineColor, this.cornerRadius);
 
-        // draw the text on the scrollbar
-        const textScale = .8; // scale text to fit in scrollbar
-        const textSize = vec2(this.size.x, this.textHeight || this.size.y*textScale);
+        // draw the text scaled to fit on the scrollbar
+        const textSize = this.getTextSize();
         uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, 0, undefined, this.align, this.font);
     }

package/reference.md

@@ -186,6 +186,7 @@ getCameraSize()          // Get the camera's visible area in world space
 // Display settings
 canvasMaxSize = (1920, 1200)  // The max size of the canvas
 canvasFixedSize = (0, 0)      // Fixed size of the canvas
+canvasClearColor = BLACK      // Color used to clear the canvas at start of frame
 fontDefault = 'arial'         // Default font used for text rendering
 canvasPixelated = true        // Use nearest neighbor canvas scaling for more pixelated look
 tilesPixelated = true         // Disable filtering for crisper pixel art

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.14.5';
+const engineVersion = '1.14.8';
 
 /** Frames per second to update
  *  @type {number}
@@ -169,15 +169,15 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
         frameTimeBufferMS += paused ? 0 : frameTimeDeltaMS;
         if (!debugSpeedUp)
             frameTimeBufferMS = min(frameTimeBufferMS, 50); // clamp min framerate
-        if (debugVideoCaptureIsActive())
-            frameTimeBufferMS = 0; // no time smoothing when capturing video
-        updateCanvas();
 
         if (paused)
         {
+            updateCanvas();
+
             // update object transforms even when paused
             for (const o of engineObjects)
                 o.parent || o.updateTransforms();
+
             inputUpdate();
             pluginUpdateList.forEach(f=>f());
             debugUpdate();
@@ -202,6 +202,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 time = frame++ / frameRate;
 
                 // update game and objects
+                updateCanvas();
                 inputUpdate();
                 gameUpdate();
                 pluginUpdateList.forEach(f=>f());
@@ -211,14 +212,23 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 debugUpdate();
                 gameUpdatePost();
                 inputUpdatePost();
+
+                if (debugVideoCaptureIsActive())
+                    renderFrame();
             }
 
             // add the time smoothing back in
             frameTimeBufferMS += deltaSmooth;
         }
 
-        if (!headlessMode)
+        if (!debugVideoCaptureIsActive())
+            renderFrame();
+        requestAnimationFrame(engineUpdate);
+
+        function renderFrame()
         {
+            if (headlessMode) return;
+
             // render sort then render while removing destroyed objects
             enginePreRender();
             gameRender();
@@ -248,7 +258,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             }
             drawCount = 0;
         }
-        requestAnimationFrame(engineUpdate);
     }
 
     function updateCanvas()
@@ -274,6 +283,14 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             mainCanvas.height = min(innerHeight, canvasMaxSize.y);
         }
 
+        // apply the clear color to main canvas
+        if (canvasClearColor.a > 0)
+        {
+            mainContext.fillStyle = canvasClearColor.toString();
+            mainContext.fillRect(0, 0, mainCanvasSize.x, mainCanvasSize.y);
+            mainContext.fillStyle = BLACK.toString();
+        }
+
         // clear overlay canvas and set size
         overlayCanvas.width  = mainCanvas.width;
         overlayCanvas.height = mainCanvas.height;

package/src/engineDebug.js

@@ -524,7 +524,7 @@ function debugVideoCaptureStart()
     const chunks = [];
     debugVideoCaptureTrack = stream.getVideoTracks()[0];
     if (debugVideoCaptureTrack.applyConstraints)
-        debugVideoCaptureTrack.applyConstraints({frameRate:frameRate}); // force 60 fps
+        debugVideoCaptureTrack.applyConstraints({frameRate:60}); // force 60 fps
     debugVideoCapture = new MediaRecorder(stream, {mimeType:'video/webm;codecs=vp8'});
     debugVideoCapture.ondataavailable = (e)=> chunks.push(e.data);
     debugVideoCapture.onstop = ()=>