littlejsengine 1.14.5 → 1.14.8

package/dist/littlejs.esm.js

@@ -33,7 +33,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}
@@ -172,15 +172,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();
@@ -205,6 +205,7 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
                 time = frame++ / frameRate;
 
                 // update game and objects
+                updateCanvas();
                 inputUpdate();
                 gameUpdate();
                 pluginUpdateList.forEach(f=>f());
@@ -214,14 +215,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();
@@ -251,7 +261,6 @@ async function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, game
             }
             drawCount = 0;
         }
-        requestAnimationFrame(engineUpdate);
     }
 
     function updateCanvas()
@@ -277,6 +286,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;
@@ -1179,7 +1196,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 = ()=>
@@ -1401,8 +1418,11 @@ function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
  *  @memberof Utilities */
 function isOverlapping(posA, sizeA, posB, sizeB=vec2())
 {
-    return abs(posA.x - posB.x)*2 < sizeA.x + sizeB.x
-        && abs(posA.y - posB.y)*2 < sizeA.y + sizeB.y;
+    const dx = (posA.x - posB.x)*2;
+    const dy = (posA.y - posB.y)*2;
+    const sx = sizeA.x + sizeB.x;
+    const sy = sizeA.y + sizeB.y;
+    return dx >= -sx && dx < sx && dy >= -sy && dy < sy;
 }
 
 /** Returns true if a line segment is intersecting an axis aligned box
@@ -2231,6 +2251,10 @@ class Timer
      * @return {number} */
     getPercent() { return this.isSet()? 1-percent(this.time - time, 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; }
+
     /** Returns this timer expressed as a string
      * @return {string} */
     toString() { if (debug) { return this.isSet() ? Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }}
@@ -2276,6 +2300,11 @@ let cameraScale = 32;
  *  @memberof Settings */
 let canvasColorTiles = true;
 
+/** Color to clear the canvas to before render
+ *  @type {Color}
+ *  @memberof Draw */
+let canvasClearColor = CLEAR_BLACK;
+
 /** The max size of the canvas, centered if window is larger
  *  @type {Vector2}
  *  @default Vector2(1920,1080)
@@ -2554,6 +2583,11 @@ function setCameraScale(scale) { cameraScale = scale; }
  *  @memberof Settings */
 function setCanvasColorTiles(colorTiles) { canvasColorTiles = colorTiles; }
 
+/** Set color to clear the canvas to before render
+ *  @param {Color} color
+ *  @memberof Settings */
+function setCanvasClearColor(color) { canvasClearColor = color; }
+
 /** Set max size of the canvas
  *  @param {Vector2} size
  *  @memberof Settings */
@@ -2619,7 +2653,7 @@ function setGLEnable(enable)
         glCanvas.style.visibility = enable ? 'visible' : 'hidden';
 }
 
-/** Set how many sided polygons to use when drawing circles and elipses with WebGL
+/** Set how many sided polygons to use when drawing circles and ellipses with WebGL
  *  @param {number} sides
  *  @memberof Settings */
 function setGLCircleSides(sides) { glCircleSides = sides; }
@@ -2830,7 +2864,7 @@ class EngineObject
         /** @property {Vector2} - World space position of the object */
         this.pos = pos.copy();
         /** @property {Vector2} - World space width and height of the object */
-        this.size = size;
+        this.size = size.copy();
         /** @property {Vector2} - Size of object used for drawing, uses size if not set */
         this.drawSize = undefined;
         /** @property {TileInfo} - Tile info to render object (undefined is untextured) */
@@ -2838,7 +2872,7 @@ class EngineObject
         /** @property {number} - Angle to rotate the object */
         this.angle = angle;
         /** @property {Color} - Color to apply when rendered */
-        this.color = color;
+        this.color = color.copy();
         /** @property {Color} - Additive color to apply when rendered */
         this.additiveColor = undefined;
         /** @property {boolean} - Should it flip along y axis when rendered */
@@ -2962,7 +2996,7 @@ class EngineObject
             for (const o of engineObjectsCollide)
             {
                 // non solid objects don't collide with each other
-                if (!this.isSolid && !o.isSolid || o.destroyed || o.parent || o === this)
+                if ((!this.isSolid && !o.isSolid) || o.destroyed || o.parent || o === this)
                     continue;
 
                 // check collision
@@ -3001,7 +3035,7 @@ class EngineObject
                 {
                     // push outside object collision
                     this.pos.y = o.pos.y + (sizeBoth.y/2 + epsilon) * sign(oldPos.y - o.pos.y);
-                    if (o.groundObject && wasMovingDown || !o.mass)
+                    if ((o.groundObject && wasMovingDown) || !o.mass)
                     {
                         // set ground object if landed on something
                         if (wasMovingDown)
@@ -3382,8 +3416,9 @@ class TileInfo
      *  @param {Vector2} [size=tileSizeDefault] - Size of tile in pixels
      *  @param {number}  [textureIndex]         - Texture index to use
      *  @param {number}  [padding]              - How many pixels padding around tiles
+     *  @param {number}  [bleedScale]           - How many pixels smaller to draw tiles
      */
-    constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0)
+    constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0, bleedScale=tileFixBleedScale)
     {
         /** @property {Vector2} - Top left corner of tile in pixels */
         this.pos = pos.copy();
@@ -3395,6 +3430,8 @@ class TileInfo
         this.padding = padding;
         /** @property {TextureInfo} - The texture info for this tile */
         this.textureInfo = textureInfos[this.textureIndex];
+        /** @property {float} - Shrinks tile by this many pixels to prevent neighbors bleeding */
+        this.bleedScale = bleedScale;
     }
 
     /** Returns a copy of this tile offset by a vector
@@ -3402,7 +3439,7 @@ class TileInfo
     *  @return {TileInfo}
     */
     offset(offset)
-    { return new TileInfo(this.pos.add(offset), this.size, this.textureIndex); }
+    { return new TileInfo(this.pos.add(offset), this.size, this.textureIndex, this.padding, this.bleedScale); }
 
     /** Returns a copy of this tile offset by a number of animation frames
     *  @param {number} frame - Offset to apply in animation frames
@@ -3425,6 +3462,8 @@ class TileInfo
         this.pos = new Vector2;
         this.size = new Vector2(image.width, image.height);
         this.textureInfo = new TextureInfo(image, glTexture);
+        // do not use padding or bleed
+        this.bleedScale = this.padding = 0;
         return this;
     }
 }
@@ -3482,6 +3521,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
 
     const textureInfo = tileInfo && tileInfo.textureInfo;
+    const bleedScale = tileInfo ? tileInfo.bleedScale : 0;
     if (useWebGL)
     {
         if (screenSpace)
@@ -3499,10 +3539,10 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
             const w = tileInfo.size.x * sizeInverse.x;
             const h = tileInfo.size.y * sizeInverse.y;
             glSetTexture(textureInfo.glTexture);
-            if (tileFixBleedScale)
+            if (bleedScale)
             {
-                const tileImageFixBleedX = sizeInverse.x*tileFixBleedScale;
-                const tileImageFixBleedY = sizeInverse.y*tileFixBleedScale;
+                const tileImageFixBleedX = sizeInverse.x*bleedScale;
+                const tileImageFixBleedY = sizeInverse.y*bleedScale;
                 glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle,
                     x + tileImageFixBleedX,     y + tileImageFixBleedY,
                     x - tileImageFixBleedX + w, y - tileImageFixBleedY + h,
@@ -3533,7 +3573,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
                 // calculate uvs and render
                 const x = tileInfo.pos.x,  y = tileInfo.pos.y;
                 const w = tileInfo.size.x, h = tileInfo.size.y;
-                drawImageColor(context, textureInfo.image, x, y, w, h, -.5, -.5, 1, 1, color, additiveColor);
+                drawImageColor(context, textureInfo.image, x, y, w, h, -.5, -.5, 1, 1, color, additiveColor, bleedScale);
             }
             else
             {
@@ -4021,15 +4061,16 @@ function combineCanvases()
     *  @param {number} dHeight
     *  @param {Color} color
     *  @param {Color} [additiveColor]
+    *  @param {number} [bleedScale] - How much to shrink the source, used to fix bleeding
  *  @memberof Draw */
-function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, color, additiveColor)
+function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, color, additiveColor, bleedScale=0)
 {
     function isWhite(c) { return c.r >= 1 && c.g >= 1 && c.b >= 1; }
     function isBlack(c) { return c.r <= 0 && c.g <= 0 && c.b <= 0 && c.a <= 0; }
-    const sx2 = tileFixBleedScale;
-    const sy2 = tileFixBleedScale;
-    const sWidth2  = sWidth  - 2*tileFixBleedScale;
-    const sHeight2 = sHeight - 2*tileFixBleedScale;
+    const sx2 = bleedScale;
+    const sy2 = bleedScale;
+    const sWidth2  = sWidth  - 2*bleedScale;
+    const sHeight2 = sHeight - 2*bleedScale;
     if (!canvasColorTiles || (additiveColor ? isWhite(color.add(additiveColor)) && additiveColor.a <= 0 : isWhite(color)))
     {
         // white texture with no additive alpha, no need to tint
@@ -4145,7 +4186,7 @@ class FontImage
      *  @param {Vector2} pos
      *  @param {number}  [scale=.25]
      *  @param {boolean} [center]
-     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}[context=drawContext] 
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext] 
      */
     drawText(text, pos, scale=1, center, context=drawContext)
     {
@@ -4412,6 +4453,7 @@ function inputInit()
     document.addEventListener('wheel', onMouseWheel);
     document.addEventListener('contextmenu', onContextMenu);
     document.addEventListener('blur', onBlur);
+    document.addEventListener('mouseleave', onMouseLeave);
 
     // init touch input
     if (isTouchDevice && touchInputEnable)
@@ -4470,6 +4512,12 @@ function inputInit()
     function onMouseWheel(e) { mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY); }
     function onContextMenu(e) { e.preventDefault(); } // prevent right click menu
     function onBlur() { inputClear(); } // reset input when focus is lost
+    function onMouseLeave()
+    {
+        // set mouse position and delta when leaving canvas
+        mousePosScreen = vec2(Infinity);
+        mouseDeltaScreen = vec2(0);
+    }
 }
 
 // convert a mouse or touch event position to screen space
@@ -5591,7 +5639,7 @@ class TileLayerData
         /** @property {boolean} - If the tile should be mirrored along the x axis */
         this.mirror    = mirror;
         /** @property {Color}   - Color of the tile */
-        this.color     = color;
+        this.color     = color.copy();
     }
 
     /** Set this tile to clear, it will not be rendered */
@@ -5690,7 +5738,7 @@ class CanvasLayer extends EngineObject
      *  @param {TileInfo} [tileInfo]
      *  @param {Color}    [color=(1,1,1,1)]
      *  @param {number}   [angle=0]
-     *  @param {boolean}  [mirror=0] */
+     *  @param {boolean}  [mirror=false] */
     drawTile(pos, size=vec2(1), tileInfo, color=new Color, angle, mirror)
     {
         this.drawCanvas2D(pos, size, angle, mirror, (context)=>
@@ -6869,7 +6917,8 @@ function glSetTexture(texture, wrap=false)
         return;
 
     glFlush();
-    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture = texture);
+    glActiveTexture = texture;
+    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
 
     // set wrap mode
     const wrapMode = wrap ? glContext.REPEAT : glContext.CLAMP_TO_EDGE;
@@ -6919,6 +6968,7 @@ function glCreateProgram(vsSource, fsSource)
 }
 
 /** Create WebGL texture from an image and init the texture settings
+ *  Restores the active texture when done
  *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} [image]
  *  @return {WebGLTexture}
  *  @memberof WebGL */
@@ -6928,30 +6978,29 @@ function glCreateTexture(image)
 
     // build the texture
     const texture = glContext.createTexture();
-    glContext.bindTexture(glContext.TEXTURE_2D, texture);
+    let mipMap = false;
     if (image && image.width)
     {
         glSetTextureData(texture, image);
-        if (!tilesPixelated && isPowerOfTwo(image.width) && isPowerOfTwo(image.height))
-        {
-            // use mipmap filtering
-            glContext.generateMipmap(glContext.TEXTURE_2D);
-            glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, glContext.LINEAR_MIPMAP_LINEAR);
-            glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, glContext.LINEAR);
-            return texture;
-        }
+        glContext.bindTexture(glContext.TEXTURE_2D, texture);
+        mipMap = !tilesPixelated && isPowerOfTwo(image.width) && isPowerOfTwo(image.height);
     }
     else
     {
         // create a white texture
         const whitePixel = new Uint8Array([255, 255, 255, 255]);
+        glContext.bindTexture(glContext.TEXTURE_2D, texture);
         glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, 1, 1, 0, glContext.RGBA, glContext.UNSIGNED_BYTE, whitePixel);
     }
 
     // set texture filtering
-    const filter = tilesPixelated ? glContext.NEAREST : glContext.LINEAR;
-    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, filter);
-    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, filter);
+    const magFilter = tilesPixelated ? glContext.NEAREST : glContext.LINEAR;
+    const minFilter = mipMap ? glContext.LINEAR_MIPMAP_LINEAR : magFilter;
+    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, magFilter);
+    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, minFilter);
+    if (mipMap)
+        glContext.generateMipmap(glContext.TEXTURE_2D);
+    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture); // rebind active texture
     return texture;
 }
 
@@ -6964,7 +7013,7 @@ function glDeleteTexture(texture)
     glContext.deleteTexture(texture);
 }
 
-/** Set WebGL texture data from an image
+/** Set WebGL texture data from an image, restores the active texture when done
  *  @param {WebGLTexture} texture
  *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} image
  *  @memberof WebGL */
@@ -6976,6 +7025,7 @@ function glSetTextureData(texture, image)
     ASSERT(!!image && image.width > 0, 'Invalid image data.');
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
     glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, image);
+    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture); // rebind active texture
 }
 
 /** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
@@ -7121,7 +7171,7 @@ function glDrawPoints(points, rgba)
   
     // setup triangle strip with degenerate verts at start and end
     let offset = glBatchCount * gl_INDICES_PER_POLY_VERTEX;
-    for(let i = vertCount; i--;)
+    for (let i = vertCount; i--;)
     {
         const j = clamp(i-1, 0, vertCount-3);
         const point = points[j];
@@ -7149,7 +7199,7 @@ function glDrawColoredPoints(points, pointColors)
   
     // setup triangle strip with degenerate verts at start and end
     let offset = glBatchCount * gl_INDICES_PER_POLY_VERTEX;
-    for(let i = vertCount; i--;)
+    for (let i = vertCount; i--;)
     {
         const j = clamp(i-1, 0, vertCount-3);
         const point = points[j];
@@ -7286,7 +7336,7 @@ function glPolyStrip(points)
     while (indices.length > 3 && attempts++ < maxAttempts)
     {
         let foundEar = false;
-        for (let i = indices.length; --i;)
+        for (let i = 0; i < indices.length; i++)
         {
             const i0 = indices[(i + indices.length - 1) % indices.length];
             const i1 = indices[i];
@@ -7323,7 +7373,7 @@ function glPolyStrip(points)
         if (!foundEar)
         {
             let worstIndex = -1, worstValue = Infinity;
-            for (let i = indices.length; --i;)
+            for (let i = 0; i < indices.length; i++)
             {
                 const i0 = indices[(i + indices.length - 1) % indices.length];
                 const i1 = indices[i];
@@ -7872,6 +7922,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 */
@@ -7884,10 +7936,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)
@@ -7912,7 +7969,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()
         {
@@ -7991,10 +8054,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);
     }
 }
 
@@ -8018,6 +8082,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 */
@@ -8036,15 +8102,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;
@@ -8052,12 +8122,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);
     }
 
@@ -8084,15 +8152,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
@@ -8105,10 +8176,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)
@@ -8116,37 +8189,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() {}
 
@@ -8194,7 +8282,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);
     }
 }
@@ -8257,14 +8345,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);
     }
@@ -8302,8 +8386,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;
@@ -8313,13 +8396,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);
     }
 }
 
@@ -8355,7 +8436,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);
@@ -8369,12 +8450,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);
@@ -8383,12 +8459,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);
     }
@@ -10367,6 +10442,7 @@ export
 	cameraAngle,
 	cameraScale,
 	canvasColorTiles,
+	canvasClearColor,
 	canvasMaxSize,
 	canvasFixedSize,
 	canvasPixelated,
@@ -10408,6 +10484,7 @@ export
 	setCameraAngle,
 	setCameraScale,
 	setCanvasColorTiles,
+	setCanvasClearColor,
 	setCanvasMaxSize,
 	setCanvasFixedSize,
 	setCanvasPixelated,
@@ -10506,8 +10583,6 @@ export
 	MAGENTA,
 
 	// Draw
-	textureInfos,
-	drawCount,
 	tile,
 	TileInfo,
 	TextureInfo,
@@ -10518,6 +10593,8 @@ export
 	overlayCanvas,
 	overlayContext,
 	mainCanvasSize,
+	textureInfos,
+	drawCount,
 	screenToWorld,
 	worldToScreen,
 	drawTile,