littlejsengine 1.14.7 → 1.14.8

package/dist/littlejs.release.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.14.7';
+const engineVersion = '1.14.8';
 
 /** Frames per second to update
  *  @type {number}
@@ -865,8 +865,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
@@ -2097,7 +2100,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; }
@@ -2308,7 +2311,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) */
@@ -2316,7 +2319,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 */
@@ -2440,7 +2443,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
@@ -2479,7 +2482,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)
@@ -3630,7 +3633,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)
     {
@@ -3897,6 +3900,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)
@@ -3955,6 +3959,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
@@ -5076,7 +5086,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 */
@@ -5175,7 +5185,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)=>
@@ -6773,7 +6783,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];
@@ -6810,7 +6820,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];
@@ -7373,6 +7383,10 @@ 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);
 
@@ -7402,6 +7416,8 @@ class UISystemPlugin
                 else
                     updateInvisibleObject(o);
             }
+            // reset hover object at start of update
+            uiSystem.hoverObject = undefined;
             for (let i = uiSystem.uiObjects.length; i--;)
             {
                 const o = uiSystem.uiObjects[i];
@@ -7513,6 +7529,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 */
@@ -7543,7 +7561,7 @@ class UIObject
         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;
@@ -7551,12 +7569,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);
     }
 
@@ -7583,15 +7599,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
@@ -7604,10 +7623,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)
@@ -7615,35 +7636,34 @@ 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
@@ -7656,6 +7676,12 @@ class UIObject
             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() {}
 
@@ -7766,10 +7792,7 @@ 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 scaled to fit
         const textSize = this.getTextSize();
@@ -7810,8 +7833,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;
@@ -7861,7 +7883,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);
@@ -7875,12 +7897,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);
@@ -7889,7 +7906,7 @@ 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 scaled to fit on the scrollbar

package/examples/index.html

@@ -72,12 +72,12 @@ const exampleList =
 [
     new ExampleInfo('--- SHORT EXAMPLES ---'),
     new ExampleInfo('Hello World', 'helloWorld.js', 'Minimal starter example'),
-    new ExampleInfo('Starfield', 'starfield.js', 'Animated parallax starfield'),
+    new ExampleInfo('Texture', 'texture.js', 'Texture display and manipulation'),
+    new ExampleInfo('Animation', 'animation.js', 'Sprite animation system'),
     new ExampleInfo('Shapes', 'shapes.js', 'Draw geometric shapes and primitives'),
     new ExampleInfo('Colors', 'colors.js', 'Color manipulation and HSL'),
-    new ExampleInfo('Texture', 'texture.js', 'Texture display and manipulation'),
+    new ExampleInfo('Starfield', 'starfield.js', 'Animated parallax starfield'),
     new ExampleInfo('Sprite Atlas', 'spriteAtlas.js', 'Sprite atlas and tile rendering'),
-    new ExampleInfo('Animation', 'animation.js', 'Sprite animation system'),
     new ExampleInfo('Blending', 'blending.js', 'Additive blending and transparency'),
     new ExampleInfo('Tile Layer', 'tileLayer.js', 'Tile layer rendering system'),
     new ExampleInfo('Particles', 'particles.js', 'Particle system'),
@@ -423,7 +423,7 @@ function setCode(code, filename)
         {
             // try to extract line number from stack trace
             // look for <anonymous> or injectedScript to find user code
-            const anonymousMatch = stack.match(/(<anonymous>|injectedScript):(\d+)/);
+            const anonymousMatch = stack?.match(/(<anonymous>|injectedScript):(\d+)/);
             return anonymousMatch ? parseInt(anonymousMatch[2]) : -1;            
         }
         iframeContent.onerror = (message, source, lineno, colno, error) =>
@@ -520,7 +520,12 @@ function setCode(code, filename)
             const errorLine = getErrorLine(error.stack);
             if (errorLine >= 0)
                 setErrorLine(errorLine);
-            setErrorMessage(error.message + '\n' + error.stack);
+            let message = error;
+            if (error.message)
+                message = error.message;
+            if (error.stack)
+                message += '\n' + error.stack;
+            setErrorMessage(message);
             throw error;
         })
         .then(()=>

package/examples/shorts/piano.js

@@ -1,51 +1,50 @@
-const pianoSound = new Sound([,0,220,,9]), keys = [];
+const pianoSound = new Sound([,0,220,,9]);
 
-class PianoKey extends EngineObject
+class PianoKey extends UIButton
 {
     constructor(pos, size, semitone, isWhite)
     {
-        const keySize = 2;
+        const keySize = 65;
         size = size.scale(keySize);
-        pos = pos.scale(keySize).add(vec2(0,4-size.y/2));
-        super(pos, size, 0, 0, hsl(0,0,isWhite ? 1 : .3));
-        this.drawSize = size.subtract(vec2(.1,0));
+        pos = pos.scale(keySize).add(vec2(0,size.y/2-keySize*2));
+        pos = pos.add(mainCanvasSize.scale(.5));
+        super(pos, size, '', hsl(0,0,isWhite ? 1 : .3));
         this.semitone = semitone;
+        this.dragActivate = true;
+        this.hoverColor = hsl(0,1,isWhite ? .9 : .3);
+        this.activeColor = RED;
     }
-    press()
+    onPress()
     {
         if (!this.soundInstance)
             this.soundInstance = pianoSound.playNote(this.semitone);
     }
-    release()
+    onRelease()
     {
         if (this.soundInstance)
             this.soundInstance.stop(.2);
         this.soundInstance = 0;
     }
-    render()
-    {
-        const color = this.soundInstance ? RED : this.color;
-        drawRect(this.pos, this.drawSize, color);
-    }
 }
 
 function gameInit()
 {
+    // initialize UI system
+    new UISystemPlugin;
+
     // create piano keyboard
     for (let i=15; i--;)
-        keys.unshift(new PianoKey(vec2(i-7,0), vec2(1,4), [0,2,4,5,7,9,11][i%7]+(i/7|0)*12, 1));
+    {
+        const pos = vec2(i-7,0);
+        const size = vec2(1,4);
+        const semitone = [0,2,4,5,7,9,11][i%7]+(i/7|0)*12;
+        new PianoKey(pos, size, semitone, true);
+    }
     for (let i=10; i--;)
-        keys.unshift(new PianoKey(vec2([1,2,4,5,6][i%5]+(i/5|0)*7-7.5,0), vec2(1,2), [1,3,6,8,10][i%5]+(i/5|0)*12));
-}
-
-function gameUpdate()
-{
-    // update state of piano keys
-    const pressedKey = keys.find(k=>k.soundInstance);
-    const newPressedKey = mouseIsDown(0) && keys.find(k=>isOverlapping(k.pos, k.size, mousePos));
-    if (newPressedKey != pressedKey)
     {
-        pressedKey && pressedKey.release();
-        newPressedKey && newPressedKey.press();
+        const pos = vec2([1,2,4,5,6][i%5]+(i/5|0)*7-7.5,0)
+        const size = vec2(1,2);
+        const semitone = [1,3,6,8,10][i%5]+(i/5|0)*12;
+        new PianoKey(pos, size, semitone);
     }
 }

package/examples/shorts/sound.js

@@ -1,38 +1,26 @@
-class SoundButton extends EngineObject
+function gameInit()
 {
-    constructor(pos, icon, sound)
-    {
-        super(pos, vec2(5,4));
-        this.icon = icon;
-        this.sound = sound;
-    }
-
-    update()
-    {
-        // play sound when clicked
-        if (mouseWasPressed(0) && isOverlapping(this.pos, this.size, mousePos))
-            this.sound.play(this.pos);
-    }
+    // initialize UI system
+    new UISystemPlugin;
+    canvasClearColor = hsl(.6,.3,.2);
 
-    render()
+    // create a grid of buttons with different sounds
+    const w = 200, h = 150, gap = 20;
+    function makeSoundButton(pos, icon, sound)
     {
-        // draw the button and icon
-        drawRect(this.pos, this.size, hsl(0,0,.8));
-        drawTextOverlay(this.icon, this.pos, 3);
+        pos = pos.multiply(vec2(w+gap, h+gap));
+        pos = pos.add(mainCanvasSize.scale(.5));
+        const button = new UIButton(pos, vec2(w, h), icon);
+        button.textHeight = 100;
+        button.onClick = ()=> sound.play();
     }
-}
-
-function gameInit()
-{
-    // create a grid of buttons with different sounds
-    new SoundButton(vec2(-6, 5),'💰', new Sound([,,1675,,.06,.24,1,1.82,,,837,.06]));
-    new SoundButton(vec2( 0, 5),'🥊', new Sound([,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]));
-    new SoundButton(vec2( 6, 5),'✨', new Sound([,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04]));
-    new SoundButton(vec2(-6, 0),'🐁', new Sound([,.2,1e3,.02,,.01,2,,18,,475,.01,.01]));
-    new SoundButton(vec2( 0, 0),'🎹', new Sound([1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01]));
-    new SoundButton(vec2( 6, 0),'🏌️', new Sound([,,150,.05,,.05,,1.3,,,,,,3])); 
-    new SoundButton(vec2(-6,-5),'🌊', new Sound([,.2,40,.5,,1.5,,11,,,,,,199]));
-    new SoundButton(vec2( 0,-5),'🛰️', new Sound([,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1]));
-    new SoundButton(vec2( 6,-5),'⚡', new Sound([,,471,,.09,.47,4,1.06,-6.7,,,,,.9,61,.1,,.82,.1]));
-    canvasClearColor = hsl(.6,.3,.2); // background color
+    makeSoundButton(vec2(-1, 1),'💰', new Sound([,,1675,,.06,.24,1,1.82,,,837,.06]));
+    makeSoundButton(vec2( 0, 1),'🥊', new Sound([,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]));
+    makeSoundButton(vec2( 1, 1),'✨', new Sound([,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04]));
+    makeSoundButton(vec2(-1, 0),'🐁', new Sound([,.2,1e3,.02,,.01,2,,18,,475,.01,.01]));
+    makeSoundButton(vec2( 0, 0),'🎹', new Sound([1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01]));
+    makeSoundButton(vec2( 1, 0),'🏌️', new Sound([,,150,.05,,.05,,1.3,,,,,,3])); 
+    makeSoundButton(vec2(-1,-1),'🌊', new Sound([,.2,40,.5,,1.5,,11,,,,,,199]));
+    makeSoundButton(vec2( 0,-1),'🛰️', new Sound([,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1]));
+    makeSoundButton(vec2( 1,-1),'⚡', new Sound([,,471,,.09,.47,4,1.06,-6.7,,,,,.9,61,.1,,.82,.1]));
 }

package/examples/shorts/uiSystem.js

@@ -10,22 +10,29 @@ function gameInit()
     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
-    const uiMenu = new UIObject(mainCanvasSize.scale(.5), vec2(450));
+    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/package.json

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