littlejsengine 1.1.17 → 1.2.0

package/engine/engine.all.js

@@ -1,8 +1,15 @@
+/*
+    LittleJS - Debug Build
+    MIT License - Copyright 2021 Frank Force
+*/
+
 /** 
  * LittleJS Debug System
- * <br> - Debug overlay with mouse pick
+ * <br> - Press ~ to show debug overlay with mouse pick
+ * <br> - Number keys toggle debug functions
+ * <br> - +/- apply time scale
  * <br> - Debug primitive rendering
- * <br> - Save screenshots to disk
+ * <br> - Save a 2d canvas as an image
  * @namespace Debug
  */
 
@@ -34,7 +41,7 @@ let showWatermark = 1;
 let godMode = 0;
 
 // Engine internal variables not exposed to documentation
-let debugPrimitives = [], debugOverlay = 0, debugPhysics = 0, debugRaycast = 0, 
+let debugPrimitives = [], debugOverlay = 0, debugPhysics = 0, debugRaycast = 0,
 debugParticles = 0, debugGamepads = 0, debugMedals = 0, debugTakeScreenshot, downloadLink;
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -156,22 +163,25 @@ const debugUpdate = ()=>
         
     if (keyWasPressed(192)) // ~
         debugOverlay = !debugOverlay;
-    if (keyWasPressed(49)) // 1
-        debugPhysics = !debugPhysics, debugParticles = 0;
-    if (keyWasPressed(50)) // 2
-        debugParticles = !debugParticles, debugPhysics = 0;
-    if (keyWasPressed(51)) // 3
-        godMode = !godMode;
-    if (keyWasPressed(53)) // 5
-        debugTakeScreenshot = 1;
-    //if (keyWasPressed(54)) // 6
-    //    debugToggleParticleEditor();
-    if (keyWasPressed(55)) // 7
-        debugGamepads = !debugGamepads;
-    //if (keyWasPressed(56)) // 8
-    //if (keyWasPressed(57)) // 9
-    if (keyWasPressed(48)) // 0
-        showWatermark = !showWatermark;
+    if (debugOverlay)
+    {
+        if (keyWasPressed(48)) // 0
+            showWatermark = !showWatermark;
+        if (keyWasPressed(49)) // 1
+            debugPhysics = !debugPhysics, debugParticles = 0;
+        if (keyWasPressed(50)) // 2
+            debugParticles = !debugParticles, debugPhysics = 0;
+        if (keyWasPressed(51)) // 3
+            debugGamepads = !debugGamepads;
+        if (keyWasPressed(52)) // 4
+            godMode = !godMode;
+        if (keyWasPressed(53)) // 5
+            debugTakeScreenshot = 1;
+        //if (keyWasPressed(54)) // 6
+        //if (keyWasPressed(55)) // 7
+        //if (keyWasPressed(56)) // 8
+        //if (keyWasPressed(57)) // 9
+    }
 }
 
 const debugRender = ()=>
@@ -191,21 +201,20 @@ const debugRender = ()=>
 
     if (debugGamepads && gamepadsEnable && navigator.getGamepads)
     {
-        // poll gamepads
+        // gamepad debug display
         const gamepads = navigator.getGamepads();
         for (let i = gamepads.length; i--;)
         {
             const gamepad = gamepads[i];
             if (gamepad)
             {
-                // gamepad debug display
                 const stickScale = 1;
                 const buttonScale = .2;
                 const centerPos = cameraPos;
                 const sticks = stickData[i];
                 for (let j = sticks.length; j--;)
                 {
-                    const drawPos = centerPos.add(vec2(j*stickScale*2,i*stickScale*3));
+                    const drawPos = centerPos.add(vec2(j*stickScale*2, i*stickScale*3));
                     const stickPos = drawPos.add(sticks[j].scale(stickScale));
                     debugCircle(drawPos, stickScale, '#fff7',0,1);
                     debugLine(drawPos, stickPos, '#f00');
@@ -224,38 +233,36 @@ const debugRender = ()=>
 
     if (debugOverlay)
     {
+        // mouse pick
+        let bestDistance = Infinity, bestObject;
         for (const o of engineObjects)
         {
-            if (o.canvas)
+            if (o.canvas || o.destroyed)
                 continue; // skip tile layers
 
             const size = o.size.copy();
-            size.x = max(size.x, .2);
-            size.y = max(size.y, .2);
+            if (!size.x || !size.y)
+                continue;
 
+            const distance = mousePos.distanceSquared(o.pos);
+            if (distance < bestDistance)
+            {
+                bestDistance = distance;
+                bestObject = o
+            }
+
+            // show object info
             const color = new Color(
                 o.collideTiles?1:0, 
                 o.collideSolidObjects?1:0,
                 o.isSolid?1:0, 
                 o.parent ? .2 : .5);
-
-            // show object info
+            size.x = max(size.x, .2);
+            size.y = max(size.y, .2);
             drawRect(o.pos, size, color);
             drawRect(o.pos, size.scale(.8), o.parent ? new Color(1,1,1,.5) : new Color(0,0,0,.8));
             o.parent && drawLine(o.pos, o.parent.pos, .1, new Color(0,0,1,.5));
         }
-
-        // mouse pick
-        let bestDistance = Infinity, bestObject;
-        for (const o of engineObjects)
-        {
-            const distance = mousePos.distanceSquared(o.pos);
-            if (distance < bestDistance)
-            {
-                bestDistance = distance;
-                bestObject = o
-            }
-        }
         
         if (bestObject)
         {
@@ -275,7 +282,8 @@ const debugRender = ()=>
                 pos = pos.add(height), ...args);
             drawText('vel = ' + printVec2(bestObject.velocity), pos = pos.add(height), ...args);
             drawText('size = ' + printVec2(bestObject.size), pos = pos.add(height), ...args);
-            drawText('collision = ' + getTileCollisionData(mousePos), pos = mousePos.subtract(height), ...args);
+            drawText('type = ' + ( bestObject.constructor.name), pos = mousePos.subtract(height), ...args);
+            drawText('collision = ' + getTileCollisionData(mousePos), pos = mousePos.subtract(height.scale(2)), ...args);
             mainContext = saveContext;
         }
 
@@ -283,16 +291,15 @@ const debugRender = ()=>
     }
 
     {
-        // render debug rects
-        overlayContext.lineWidth = 1;
+        // draw debug primitives
+        overlayContext.save();
+        overlayContext.lineWidth = 2;
         const pointSize = debugPointSize * cameraScale;
         debugPrimitives.forEach(p=>
         {
             // create canvas transform from world space to screen space
             const pos = worldToScreen(p.pos);
             
-            overlayContext.save();
-            overlayContext.lineWidth = 2;
             overlayContext.translate(pos.x|0, pos.y|0);
             overlayContext.rotate(p.angle);
             overlayContext.fillStyle = overlayContext.strokeStyle = p.color;
@@ -325,15 +332,17 @@ const debugRender = ()=>
                 p.fill && overlayContext.fill();
                 overlayContext.stroke();
             }
-
-            overlayContext.restore();
         });
 
-        overlayContext.fillStyle = overlayContext.strokeStyle = '#fff';
+        // remove expired pritives
+        debugPrimitives = debugPrimitives.filter(r=>r.time.get()<0);
+
+        overlayContext.restore();
     }
 
     {
-        let x = 9, y = -20, h = 30;
+        // draw debug overlay
+        overlayContext.save();
         overlayContext.fillStyle = '#fff';
         overlayContext.textAlign = 'left';
         overlayContext.textBaseline = 'top';
@@ -341,6 +350,7 @@ const debugRender = ()=>
         overlayContext.shadowColor = '#000';
         overlayContext.shadowBlur = 9;
 
+        let x = 9, y = -20, h = 30;
         if (debugOverlay)
         {
             overlayContext.fillText(engineName, x, y += h);
@@ -353,217 +363,41 @@ const debugRender = ()=>
             overlayContext.fillText('1: Debug Physics', x, y += h);
             overlayContext.fillStyle = debugParticles ? '#f00' : '#fff';
             overlayContext.fillText('2: Debug Particles', x, y += h);
+            overlayContext.fillStyle = debugGamepads ? '#f00' : '#fff';
+            overlayContext.fillText('3: Debug Gamepads', x, y += h);
             overlayContext.fillStyle = godMode ? '#f00' : '#fff';
-            overlayContext.fillText('3: God Mode', x, y += h);
+            overlayContext.fillText('4: God Mode', x, y += h);
             overlayContext.fillStyle = '#fff';
             overlayContext.fillText('5: Save Screenshot', x, y += h);
-            //overlayContext.fillStyle = debugParticleEditor ? '#f00' : '#fff';
-            //overlayContext.fillText('6: Particle Editor', x, y += h);
-            overlayContext.fillStyle = debugGamepads ? '#f00' : '#fff';
-            overlayContext.fillText('7: Debug Gamepads', x, y += h);
-        }
-        else
-        {
-            overlayContext.fillText(debugPhysics ? 'Debug Physics' : '', x, y += h);
-            overlayContext.fillText(debugParticles ? 'Debug Particles' : '', x, y += h);
-            overlayContext.fillText(godMode ? 'God Mode' : '', x, y += h);
-            overlayContext.fillText(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
-        }
-    
-        overlayContext.shadowBlur = 0;
-    }
-
-    debugPrimitives = debugPrimitives.filter(r=>r.time.get()<0);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// particle system editor (work in progress)
-let debugParticleEditor = 0, debugParticleSystem, debugParticleSystemDiv, particleSystemCode;
-
-const debugToggleParticleEditor = ()=>
-{
-    debugParticleEditor = !debugParticleEditor;
-
-    if (debugParticleEditor)
-    {
-        if (!debugParticleSystem || debugParticleSystem.destroyed)
-            debugParticleSystem = new ParticleEmitter(cameraPos);
-    }
-    else if (debugParticleSystem && !debugParticleSystem.destroyed)
-        debugParticleSystem.destroy();
-
-
-    const colorToHex = (color)=>
-    {
-        const componentToHex = (c)=>
-        {
-            const hex = (c*255|0).toString(16);
-            return hex.length == 1 ? '0' + hex : hex;
-        }
 
-        return '#' + componentToHex(color.r) + componentToHex(color.g) + componentToHex(color.b);
-    }
-    const hexToColor = (hex)=>
-    {
-        return new Color(
-            parseInt(hex.substr(1,2), 16)/255,
-            parseInt(hex.substr(3,2), 16)/255,
-            parseInt(hex.substr(5,2), 16)/255)
-    }
-
-    if (!debugParticleSystemDiv)
-    {
-        const div = debugParticleSystemDiv = document.createElement('div');
-        div.innerHTML = '<big><b>Particle Editor';
-        div.style = 'position:absolute;top:10;left:10;color:#fff';
-        document.body.appendChild(div);
-
-        for ( const setting of debugParticleSettings)
-        {
-            const input = setting[2] = document.createElement('input');
-            const name = setting[0];
-            const type = setting[1];
-            if (type)
+            let keysPressed = '';
+            for(const i in inputData[0])
             {
-                if (type == 'color')
-                {
-                    input.type = type;
-                    const color = debugParticleSystem[name];
-                    input.value = colorToHex(color);
-                }
-                else if (type == 'alpha' && name == 'colorStartAlpha')
-                    input.value = debugParticleSystem.colorStartA.a;
-                else if (type == 'alpha' && name == 'colorEndAlpha')
-                    input.value = debugParticleSystem.colorEndA.a;
-                else if (name == 'tileSizeX')
-                    input.value = debugParticleSystem.tileSize.x;
-                else if (name == 'tileSizeY')
-                    input.value = debugParticleSystem.tileSize.y;
+                if (i && keyIsDown(i, 0))
+                    keysPressed += i + ' ' ;
             }
-            else
-                input.value = debugParticleSystem[name] || '0';
+            keysPressed && overlayContext.fillText('Keys Down: ' + keysPressed, x, y += h);
 
-            input.oninput = (e)=>
+            let buttonsPressed = '';
+            if (inputData[1])
+            for(const i in inputData[1])
             {
-                const inputFloat = parseFloat(input.value) || 0;
-                if (type)
-                {
-                    if (type == 'color')
-                    {
-                        const color = hexToColor(input.value);
-                        debugParticleSystem[name].r = color.r;
-                        debugParticleSystem[name].g = color.g;
-                        debugParticleSystem[name].b = color.b;
-                    }
-                    else if (type == 'alpha' && name == 'colorStartAlpha')
-                    {
-                        debugParticleSystem.colorStartA.a = clamp(inputFloat);
-                        debugParticleSystem.colorStartB.a = clamp(inputFloat);
-                    }
-                    else if (type == 'alpha' && name == 'colorEndAlpha')
-                    {
-                        debugParticleSystem.colorEndA.a = clamp(inputFloat);
-                        debugParticleSystem.colorEndB.a = clamp(inputFloat);
-                    }
-                    else if (name == 'tileSizeX')
-                    {
-                        debugParticleSystem.tileSize = vec2(parseInt(input.value), debugParticleSystem.tileSize.y);
-                    }
-                    else if (name == 'tileSizeY')
-                    {
-                        debugParticleSystem.tileSize.y = vec2(debugParticleSystem.tileSize.x, parseInt(input.value));
-                    }
-                }
-                else
-                    debugParticleSystem[name] = inputFloat;
-
-                updateCode();
+                if (i && keyIsDown(i, 1))
+                    buttonsPressed += i + ' ' ;
             }
-            div.appendChild(document.createElement('br'));
-            div.appendChild(input);
-            div.appendChild(document.createTextNode(' ' + name));
+            buttonsPressed && overlayContext.fillText('Gamepad: ' + buttonsPressed, x, y += h);
         }
-
-        div.appendChild(document.createElement('br'));
-        div.appendChild(document.createElement('br'));
-        div.appendChild(particleSystemCode = document.createElement('input'));
-        particleSystemCode.disabled = true;
-        div.appendChild(document.createTextNode(' code'));
-
-        div.appendChild(document.createElement('br'));
-        const button = document.createElement('button')
-        div.appendChild(button);
-        button.innerHTML = 'Copy To Clipboard';
-        
-        button.onclick = (e)=> navigator.clipboard.writeText(particleSystemCode.value); 
-
-        const updateCode = ()=>
+        else
         {
-            let code = '';
-            let count = 0;
-            for ( const setting of debugParticleSettings)
-            {
-                const name = setting[0];
-                const type = setting[1];
-                let value;
-                if (name == 'tileSizeX' || type == 'alpha')
-                    continue;
-
-                if (count++)
-                    code += ', ';
-
-                if (name == 'tileSizeY')
-                {
-                    value = `vec2(${debugParticleSystem.tileSize.x},${debugParticleSystem.tileSize.y})`;
-                }
-                else if (type == 'color')
-                {
-                    const c = debugParticleSystem[name];
-                    value = `new Color(${c.r},${c.g},${c.b},${c.a})`;
-                }
-                else
-                    value = debugParticleSystem[name];
-                code += value;
-            }
-
-            particleSystemCode.value = '...[' + code + ']';
+            overlayContext.fillText(debugPhysics ? 'Debug Physics' : '', x, y += h);
+            overlayContext.fillText(debugParticles ? 'Debug Particles' : '', x, y += h);
+            overlayContext.fillText(godMode ? 'God Mode' : '', x, y += h);
+            overlayContext.fillText(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
         }
-        updateCode();
+    
+        overlayContext.restore();
     }
-    debugParticleSystemDiv.style.display = debugParticleEditor ? '' : 'none'
 }
-
-const debugParticleSettings = 
-[
-    ['emitSize'],
-    ['emitTime'],
-    ['emitRate'],
-    ['emitConeAngle'],
-    ['tileIndex'],
-    ['tileSizeX', 'tileSize'],
-    ['tileSizeY', 'tileSize'],
-    ['colorStartA', 'color'],
-    ['colorStartB', 'color'],
-    ['colorStartAlpha', 'alpha'],
-    ['colorEndA',   'color'],
-    ['colorEndB',   'color'],
-    ['colorEndAlpha', 'alpha'],
-    ['particleTime'],
-    ['sizeStart'],
-    ['sizeEnd'],
-    ['speed'],
-    ['angleSpeed'],
-    ['damping'],
-    ['angleDamping'],
-    ['gravityScale'],
-    ['particleConeAngle'],
-    ['fadeRate'],
-    ['randomness'],
-    ['collideTiles'],
-    ['additive'],
-    ['randomColorComponents'],
-    ['renderOrder'],
-];
 /**
  * LittleJS Utility Classes and Functions
  * <br> - General purpose math library
@@ -615,27 +449,27 @@ const mod = (a, b=1)=> ((a % b) + b) % b;
 
 /** Clamps the value beween max and min
  *  @param {Number} value
- *  @param {Number} [max=1]
  *  @param {Number} [min=0]
+ *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const clamp = (v, max=1, min=0)=> (ASSERT(max > min), v < min ? min : v > max ? max : v);
+const clamp = (v, min=0, max=1)=> v < min ? min : v > max ? max : v;
 
 /** Returns what percentage the value is between max and min
  *  @param {Number} value
- *  @param {Number} [max=1]
  *  @param {Number} [min=0]
+ *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const percent = (v, max=1, min=0)=> max-min ? clamp((v-min) / (max-min)) : 0;
+const percent = (v, min=0, max=1)=> max-min ? clamp((v-min) / (max-min)) : 0;
 
 /** Linearly interpolates the percent value between max and min
  *  @param {Number} percent
- *  @param {Number} [max=1]
  *  @param {Number} [min=0]
+ *  @param {Number} [max=1]
  *  @return {Number}
  *  @memberof Utilities */
-const lerp = (p, max=1, min=0)=> min + clamp(p) * (max-min);
+const lerp = (p, min=0, max=1)=> min + clamp(p) * (max-min);
 
 /** Applies smoothstep function to the percentage value
  *  @param {Number} value
@@ -650,11 +484,11 @@ const smoothStep = (p)=> p * p * (3 - 2 * p);
 const nearestPowerOfTwo = (v)=> 2**Math.ceil(Math.log2(v));
 
 /** Returns true if two axis aligned bounding boxes are overlapping 
- *  @param {Vector2} pointA - Center of box A
- *  @param {Vector2} sizeA  - Size of box A
- *  @param {Vector2} pointB - Center of box B
- *  @param {Vector2} sizeB  - Size of box B
- *  @return {Boolean}       - True if overlapping
+ *  @param {Vector2} pointA  - Center of box A
+ *  @param {Vector2} sizeA   - Size of box A
+ *  @param {Vector2} pointB  - Center of box B
+ *  @param {Vector2} [sizeB] - Size of box B
+ *  @return {Boolean}        - True if overlapping
  *  @memberof Utilities */
 const isOverlapping = (pA, sA, pB, sB)=> abs(pA.x - pB.x)*2 < sA.x + sB.x & abs(pA.y - pB.y)*2 < sA.y + sB.y;
 
@@ -751,10 +585,12 @@ const vec2 = (x=0, y)=> x.x == undefined ? new Vector2(x, y == undefined? x : y)
 
 /** 
  * 2D Vector object with vector math library
+ * <br> - Functions do not change this so they can be chained together
  * @example
  * let a = new Vector2(2, 3); // vector with coordinates (2, 3)
  * let b = new Vector2;       // vector with coordinates (0, 0)
  * let c = vec2(4, 2);        // use the vec2 function to make a Vector2
+ * let d = a.add(b).scale(5); // operators can be chained
  */
 class Vector2
 {
@@ -1041,7 +877,7 @@ class Timer
 
     /** Get percentage elapsed based on time it was set to, returns 0 if not set
      * @return {Number} */
-    getPercent() { return this.isSet()? percent(this.time - time, 0, this.setTime) : 0; }
+    getPercent() { return this.isSet()? percent(this.time - time, this.setTime, 0) : 0; }
 }
 /**
  * LittleJS Engine Settings
@@ -1057,7 +893,7 @@ class Timer
  *  @type {Vector2} 
  *  @default
  *  @memberof Settings */
-const canvasMaxSize = vec2(1920, 1200);
+let canvasMaxSize = vec2(1920, 1200);
 
 /** Fixed size of the canvas, if enabled cavnvas size never changes
  *  @type {Vector2} 
@@ -1082,12 +918,12 @@ let fontDefault = 'arial';
  *  @type {Vector2} 
  *  @default
  *  @memberof Settings */
-const tileSizeDefault = vec2(16);
+let tileSizeDefault = vec2(16);
 
 /** Prevent tile bleeding from neighbors in pixels
  *  @default
  *  @memberof Settings */
-const tileBleedShrinkFix = .3;
+let tileFixBleedScale = .3;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Object settings
@@ -1096,43 +932,48 @@ const tileBleedShrinkFix = .3;
  *  @type {Vector2} 
  *  @default
  *  @memberof Settings */
-const objectDefaultSize = vec2(1);
+let objectDefaultSize = vec2(1);
 
 /** Default object mass for collison calcuations (how heavy objects are)
  *  @default
  *  @memberof Settings */
-const objectDefaultMass = 1;
+let objectDefaultMass = 1;
 
 /** How much to slow velocity by each frame (0-1)
  *  @default
  *  @memberof Settings */
-const objectDefaultDamping = .99;
+let objectDefaultDamping = .99;
 
 /** How much to slow angular velocity each frame (0-1)
  *  @default
  *  @memberof Settings */
-const objectDefaultAngleDamping = .99;
+let objectDefaultAngleDamping = .99;
 
 /** How much to bounce when a collision occurs (0-1)
  *  @default
  *  @memberof Settings */
-const objectDefaultElasticity = 0;
+let objectDefaultElasticity = 0;
 
 /** How much to slow when touching (0-1)
  *  @default
  *  @memberof Settings */
-const objectDefaultFriction = .8;
+let objectDefaultFriction = .8;
 
 /** Clamp max speed to avoid fast objects missing collisions
  *  @default
  *  @memberof Settings */
-const objectMaxSpeed = 1;
+let objectMaxSpeed = 1;
 
 /** How much gravity to apply to objects along the Y axis, negative is down
  *  @default
  *  @memberof Settings */
 let gravity = 0;
 
+/** Scales emit rate of particles, useful for low graphics mode (0 disables particle emitters)
+ *  @default
+ *  @memberof Settings */
+let particleEmitRateScale = 1;
+
 ///////////////////////////////////////////////////////////////////////////////
 // Camera settings
 
@@ -1153,7 +994,7 @@ let cameraScale = max(tileSizeDefault.x, tileSizeDefault.y);
 /** Enable webgl rendering, webgl can be disabled and removed from build (with some features disabled)
  *  @default
  *  @memberof Settings */
-const glEnable = 1;
+let glEnable = 1;
 
 /** Fixes slow rendering in some browsers by not compositing the WebGL canvas
  *  @default
@@ -1166,34 +1007,39 @@ let glOverlay = 1;
 /** Should gamepads be allowed
  *  @default
  *  @memberof Settings */
-const gamepadsEnable = 1;
+let gamepadsEnable = 1;
 
 /** If true, the dpad input is also routed to the left analog stick (for better accessability)
  *  @default
  *  @memberof Settings */
-const gamepadDirectionEmulateStick = 1;
+let gamepadDirectionEmulateStick = 1;
 
 /** If true the WASD keys are also routed to the direction keys (for better accessability)
  *  @default
  *  @memberof Settings */
-const inputWASDEmulateDirection = 1;
+let inputWASDEmulateDirection = 1;
 
-/** If true touch input is routed to mouse functions
+/** True if touch gamepad should appear on mobile devices
+ *  <br> - Supports left analog stick, 4 face buttons and start button (button 9)
+ *  <br> - Must be set by end of gameInit to be activated
  *  @default
  *  @memberof Settings */
-const touchMouseEnable = 1;
+let touchGamepadEnable = 0;
 
-/** Size of virutal gamepad for touch devices in pixels, 80 recommended
- *  <br> - Supports left analog stick, 4 face buttons and start button (button 9)
- *  <br> - Must be set by end of gameInit to be activated
+/** Size of virutal gamepad for touch devices in pixels
  *  @default
  *  @memberof Settings */
-let touchGamepadSize = 0;
+let touchGamepadSize = 80;
 
 /** Transparency of touch gamepad overlay
  *  @default
  *  @memberof Settings */
-let touchGamepadAlpha = .5;
+let touchGamepadAlpha = .3;
+
+/** Allow vibration hardware if it exists
+ *  @default
+ *  @memberof Settings */
+let vibrateEnable = 1;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Audio settings
@@ -1206,17 +1052,17 @@ let soundVolume = .5;
 /** All audio code can be disabled and removed from build
  *  @default
  *  @memberof Settings */
-const soundEnable = 1;
+let soundEnable = 1;
 
 /** Default range where sound no longer plays
  *  @default
  *  @memberof Settings */
-const soundDefaultRange = 30;
+let soundDefaultRange = 30;
 
 /** Default range percent to start tapering off sound (0-1)
  *  @default
  *  @memberof Settings */
-const soundDefaultTaper = .7;
+let soundDefaultTaper = .7;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Medals settings
@@ -1224,27 +1070,27 @@ const soundDefaultTaper = .7;
 /** How long to show medals for in seconds
  *  @default
  *  @memberof Settings */
-const medalDisplayTime = 5;
+let medalDisplayTime = 5;
 
 /** How quickly to slide on/off medals in seconds
  *  @default
  *  @memberof Settings */
-const medalDisplaySlideTime = .5;
+let medalDisplaySlideTime = .5;
 
 /** Width of medal display
  *  @default
  *  @memberof Settings */
-const medalDisplayWidth = 640;
+let medalDisplayWidth = 640;
 
 /** Height of medal display
  *  @default
  *  @memberof Settings */
-const medalDisplayHeight = 99;
+let medalDisplayHeight = 80;
 
 /** Size of icon in medal display
  *  @default
  *  @memberof Settings */
-const medalDisplayIconSize = 80;
+let medalDisplayIconSize = 50;
 /*
     LittleJS Object System
 */
@@ -1279,7 +1125,7 @@ const medalDisplayIconSize = 80;
 class EngineObject
 {
     /** Create an engine object and adds it to the list of objects
-     *  @param {Vector2} [position=new Vector2(0,0)] - World space position of the object
+     *  @param {Vector2} [position=new Vector2()]    - World space position of the object
      *  @param {Vector2} [size=objectDefaultSize]    - World space size of the object
      *  @param {Number}  [tileIndex=-1]              - Tile to use to render object, untextured if -1
      *  @param {Vector2} [tileSize=tileSizeDefault]  - Size of tile in source pixels
@@ -1324,12 +1170,15 @@ class EngineObject
         this.gravityScale = 1;
         /** @property {Number} [renderOrder=0]                          - Objects are sorted by render order */
         this.renderOrder = renderOrder;
+        /** @property {Vector2} [velocity=new Vector2()]                - Velocity of the object */
+        this.velocity = new Vector2();
+        /** @property {Number} [angleVelocity=0]                        - Angular velocity of the object */
+        this.angleVelocity = 0;
 
         // init other internal object stuff
         this.spawnTime = time;
-        this.velocity = vec2(this.collideSolidObjects = this.angleVelocity = 0);
-        this.collideTiles = 1;
         this.children = [];
+        this.collideTiles = 1;
 
         // add to list of objects
         engineObjects.push(this);
@@ -1348,8 +1197,8 @@ class EngineObject
         }
 
         // limit max speed to prevent missing collisions
-        this.velocity.x = clamp(this.velocity.x, objectMaxSpeed, -objectMaxSpeed);
-        this.velocity.y = clamp(this.velocity.y, objectMaxSpeed, -objectMaxSpeed);
+        this.velocity.x = clamp(this.velocity.x, -objectMaxSpeed, objectMaxSpeed);
+        this.velocity.y = clamp(this.velocity.y, -objectMaxSpeed, objectMaxSpeed);
 
         // apply physics
         const oldPos = this.pos.copy();
@@ -1397,7 +1246,7 @@ class EngineObject
                     // if already was touching, try to push away
                     const deltaPos = oldPos.subtract(o.pos);
                     const length = deltaPos.length();
-                    const pushAwayAccel = .001; // push away if alread overlapping
+                    const pushAwayAccel = .001; // push away if already overlapping
                     const velocity = length < .01 ? randVector(pushAwayAccel) : deltaPos.scale(pushAwayAccel/length);
                     this.velocity = this.velocity.add(velocity);
                     if (o.mass) // push away if not fixed
@@ -1439,8 +1288,8 @@ class EngineObject
 
                         // lerp betwen elastic or inelastic based on elasticity
                         const elasticity = max(this.elasticity, o.elasticity);
-                        this.velocity.y = lerp(elasticity, elastic0, inelastic);
-                        o.velocity.y = lerp(elasticity, elastic1, inelastic);
+                        this.velocity.y = lerp(elasticity, inelastic, elastic0);
+                        o.velocity.y = lerp(elasticity, inelastic, elastic1);
                     }
                 }
                 if (!smallStepUp && (isBlockedX || !isBlockedY)) // resolve x collision
@@ -1460,8 +1309,8 @@ class EngineObject
 
                         // lerp betwen elastic or inelastic based on elasticity
                         const elasticity = max(this.elasticity, o.elasticity);
-                        this.velocity.x = lerp(elasticity, elastic0, inelastic);
-                        o.velocity.x = lerp(elasticity, elastic1, inelastic);
+                        this.velocity.x = lerp(elasticity, inelastic, elastic0);
+                        o.velocity.x = lerp(elasticity, inelastic, elastic1);
                     }
                     else // bounce if other object is fixed
                         this.velocity.x *= -this.elasticity;
@@ -1491,7 +1340,7 @@ class EngineObject
 
                         // adjust next velocity to settle on ground
                         const o = (oldPos.y - this.size.y/2|0) - (oldPos.y - this.size.y/2);
-                        if (o < 0 && o > -1 && o > this.damping * this.velocity.y + gravity * this.gravityScale) 
+                        if (o < 0 && o > this.damping * this.velocity.y + gravity * this.gravityScale) 
                             this.velocity.y = this.damping ? (o - gravity * this.gravityScale) / this.damping : 0;
 
                         // move to previous position
@@ -1592,18 +1441,6 @@ class EngineObject
     {
         ASSERT(collideSolidObjects || !isSolid); // solid objects must be set to collide
 
-        // track collidable objects in separate list
-        if (collideSolidObjects && !this.collideSolidObjects)
-        {
-            ASSERT(!engineObjectsCollide.includes(this));
-            engineObjectsCollide.push(this);
-        }
-        else if (!collideSolidObjects && this.collideSolidObjects)
-        {
-            ASSERT(engineObjectsCollide.includes(this))
-            engineObjectsCollide.splice(engineObjectsCollide.indexOf(this), 1);
-        }
-
         this.collideSolidObjects = collideSolidObjects;
         this.isSolid = isSolid;
         this.collideTiles = collideTiles;
@@ -1703,17 +1540,13 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
         {
             // calculate uvs and render
             const cols = tileImageSize.x / tileSize.x |0;
-            const uvSizeX = tileSize.x * tileImageSizeInverse.x;
-            const uvSizeY = tileSize.y * tileImageSizeInverse.y;
+            const uvSizeX = tileSize.x / tileImageSize.x;
+            const uvSizeY = tileSize.y / tileImageSize.y;
             const uvX = (tileIndex%cols)*uvSizeX, uvY = (tileIndex/cols|0)*uvSizeY;
-
-            // shrink uvs to prevent bleeding
-            const shrinkTilesX = tileBleedShrinkFix * tileImageSizeInverse.x;
-            const shrinkTilesY = tileBleedShrinkFix * tileImageSizeInverse.y;
             
             glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
-                uvX + shrinkTilesX, uvY + shrinkTilesY, 
-                uvX - shrinkTilesX + uvSizeX, uvY - shrinkTilesX + uvSizeY, 
+                uvX + tileImageFixBleed.x, uvY + tileImageFixBleed.y, 
+                uvX - tileImageFixBleed.x + uvSizeX, uvY - tileImageFixBleed.y + uvSizeY, 
                 color.rgbaInt(), additiveColor.rgbaInt()); 
         }
     }
@@ -1732,10 +1565,10 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
             {
                 // calculate uvs and render
                 const cols = tileImageSize.x / tileSize.x |0;
-                const sX = (tileIndex%cols)*tileSize.x   + tileBleedShrinkFix;
-                const sY = (tileIndex/cols|0)*tileSize.y + tileBleedShrinkFix;
-                const sWidth  = tileSize.x - 2*tileBleedShrinkFix;
-                const sHeight = tileSize.y - 2*tileBleedShrinkFix;
+                const sX = (tileIndex%cols)*tileSize.x   + tileFixBleedScale;
+                const sY = (tileIndex/cols|0)*tileSize.y + tileFixBleedScale;
+                const sWidth  = tileSize.x - 2*tileFixBleedScale;
+                const sHeight = tileSize.y - 2*tileFixBleedScale;
                 context.globalAlpha = color.a; // only alpha is supported
                 context.drawImage(tileImage, sX, sY, sWidth, sHeight, -.5, -.5, 1, 1);
             }
@@ -1818,6 +1651,18 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
     context.restore();
 }
 
+/** Enable normal or additive blend mode
+ *  @param {Boolean} [additive=0]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @memberof Draw */
+function setBlendMode(additive, useWebGL=glEnable)
+{
+    if (glEnable && useWebGL)
+        glSetBlendMode(additive);
+    else
+        mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+}
+
 /** Draw text on overlay canvas in world space
  *  @param {String}  text
  *  @param {Vector2} pos
@@ -1843,16 +1688,93 @@ function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new
     overlayContext.fillText(text, pos.x, pos.y);
 }
 
-/** Enable normal or additive blend mode
- *  @param {Boolean} [additive=0]
- *  @param {Boolean} [useWebGL=glEnable]
- *  @memberof Draw */
-function setBlendMode(additive, useWebGL=glEnable)
+///////////////////////////////////////////////////////////////////////////////
+
+/** 
+ * Font Image Object - Draw text on a 2D canvas by using characters in an image
+ * <br> - 96 characters (from space to tilde) are stored in an image
+ * <br> - Uses a default 8x8 font if none is supplied
+ * <br> - You can also use fonts from the main tile sheet
+ * @example
+ * // use built in font
+ * const font = new ImageFont;
+ * 
+ * // draw text
+ * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
+ */
+class FontImage
 {
-    if (glEnable && useWebGL)
-        glSetBlendMode(additive);
-    else
-        mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    /** Create an image font
+     *  @param {Image}   [image] - The image the font is stored in, if undefined the default font is used
+     *  @param {Vector2} [tileSize=vec2(8)] - The size of the font source tiles
+     *  @param {Vector2} [paddingSize=vec2(0,1)] - How much extra space to add between characters
+     *  @param {Number}  [startTileIndex=0] - Tile index in image where font starts
+     *  @param {CanvasRenderingContext2D} [context=overlayContext] - context to draw to
+     */
+    constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), startTileIndex=0, context=overlayContext)
+    {
+        if (!image)
+        {
+            // use default font image
+            image = new Image();
+            image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAYAQAAAAA9+x6JAAAAAnRSTlMAAHaTzTgAAAGiSURBVHjaZZABhxxBEIUf6MCIBdFY+Q0PMNgf0yCgsSAaZcT9sgIPtBWwIA5wgAPEoHUyJeeSlW+gjK+fegWw1hPWNRcEyWh2npdpBmSUBrRaN1WSlQAWXaWLF0kkwR7C/N7XUvIaQr4xpeqeQigjLwBRZ/6KkufAACcv5z7GYhvgWHII8xN/4C2hvLCkmZSVgIJMHNTxpYOsJOiitEjUQnIQAFFP+opoQfCbjWmfzWiNzCjEvxAPFARmw/Y5Te0sl2zEp4M+m7cToJjdJS7y1xcFlFT7EtWBZ8nl7uLSff7UgYewtlyY6yHM4RrjNrnsfn/W0DBK9xNZctZ7gsTeXTe5eqLqXFlKnAn+vkNXzH6TqPW10ksKoSlauKk1TcncZLSTxNnQ8Av/8RGPXOFIuMCZ/fpwIZx5vU4QIRQ44HwUyHx/QrZhm5VtXFex7ja2se0KBpnPT0DSwS4xd86uAy+SqnLBgkPY5JolhJ33ENyK6n0VyRzCnzebIkFdY/NUtM66lTdhix1KUss6q5snH5ftVJXG0QITb1gUDvzD3z/BbyOLMirwCtPzAAAAAElFTkSuQmCC';
+        }
+
+        this.image = image;
+        this.tileSize = tileSize;
+        this.paddingSize = paddingSize;
+        this.startTileIndex = startTileIndex;
+        this.context = context;
+    }
+
+    /** Draw text in screen space using the image font
+     *  @param {String}  text
+     *  @param {Vector2} pos
+     *  @param {Number}  [scale=4]
+     *  @param {Boolean} [center]
+     */
+    drawTextScreen(text, pos, scale=4, center)
+    {
+        const context = this.context;
+        context.save();
+        context.imageSmoothingEnabled = !cavasPixelated;
+
+        const size = this.tileSize;
+        const drawSize = size.add(this.paddingSize).scale(scale);
+        const cols = this.image.width / this.tileSize.x |0;
+        text.split('\n').forEach((line, i)=>
+        {
+            const centerOffset = center ? line.length * size.x * scale / 2 |0 : 0;
+            for(let j=line.length; j--;)
+            {
+                // draw each character
+                let charCode = line[j].charCodeAt();
+                if (charCode < 32 || charCode > 127)
+                    charCode = 127; // unknown character
+
+                // get the character source location and draw it
+                const tile = this.startTileIndex + charCode - 32;
+                const x = tile % cols;
+                const y = tile / cols |0;
+                const drawPos = pos.add(vec2(j,i).multiply(drawSize));
+                context.drawImage(this.image, x * size.x, y * size.y, size.x, size.y, 
+                    drawPos.x - centerOffset, drawPos.y, size.x * scale, size.y * scale);
+            }
+        });
+
+        context.restore();
+    }
+
+    /** Draw text in world space using the image font
+     *  @param {String}  text
+     *  @param {Vector2} pos
+     *  @param {Number}  [scale=.25]
+     *  @param {Boolean} [center]
+     */
+    drawText(text, pos, scale=1, center)
+    {
+        this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1916,7 +1838,7 @@ const keyWasReleased = (key, device=0)=> inputData[device] && inputData[device][
 
 /** Clears all input
  *  @memberof Input */
-const clearInput = ()=> inputData[0] = [];
+const clearInput = ()=> inputData = [[]];
 
 /** Returns true if mouse button is down
  *  @param {Number} button
@@ -1985,7 +1907,9 @@ const gamepadStick = (stick,  gamepad=0)=> stickData[gamepad] ? stickData[gamepa
 ///////////////////////////////////////////////////////////////////////////////
 // Input update called by engine
 
-const inputData = [[]];
+// store input as a bit field for each key: 1 = isDown, 2 = wasPressed, 4 = wasReleased
+// mouse and keyboard are stored together in device 0, gamepads are in devices > 0
+let inputData = [[]];
 
 function inputUpdate()
 {
@@ -2011,36 +1935,38 @@ function inputUpdatePost()
 ///////////////////////////////////////////////////////////////////////////////
 // Keyboard event handlers
 
-onkeydown = e=>
+onkeydown = (e)=>
 {
     if (debug && e.target != document.body) return;
     e.repeat || (inputData[isUsingGamepad = 0][remapKeyCode(e.keyCode)] = 3);
     debug || e.preventDefault();
 }
-onkeyup = e=>
+onkeyup = (e)=>
 {
     if (debug && e.target != document.body) return;
     inputData[0][remapKeyCode(e.keyCode)] = 4;
 }
-const remapKeyCode = c=> inputWASDEmulateDirection ? c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c;
+const remapKeyCode = (c)=> inputWASDEmulateDirection ? c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Mouse event handlers
 
-onmousedown = e=> {inputData[isUsingGamepad = 0][e.button] = 3; onmousemove(e); e.button && e.preventDefault();}
-onmouseup   = e=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
-onmousemove = e=>
+onmousedown = (e)=> {inputData[isUsingGamepad = 0][e.button] = 3; onmousemove(e); e.button && e.preventDefault();}
+onmouseup   = (e)=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
+onmousemove = (e)=> mousePosScreen = mouseToScreen(e);
+onwheel = (e)=> e.ctrlKey || (mouseWheel = sign(e.deltaY));
+oncontextmenu = (e)=> !1; // prevent right click menu
+
+// convert a mouse or touch event position to screen space
+const mouseToScreen = (mousePos)=>
 {
     if (!mainCanvas)
-        return; // fix bug that can occur if user clicks before page loads
+        return vec2(); // fix bug that can occur if user clicks before page loads
 
-    // convert mouse pos to canvas space
     const rect = mainCanvas.getBoundingClientRect();
-    mousePosScreen = mainCanvasSize.multiply(
-        vec2(percent(e.x, rect.right, rect.left), percent(e.y, rect.bottom, rect.top)));
+    return mainCanvasSize.multiply(
+        vec2(percent(mousePos.x, rect.left, rect.right), percent(mousePos.y, rect.top, rect.bottom)));
 }
-onwheel = e=> e.ctrlKey || (mouseWheel = sign(e.deltaY));
-oncontextmenu = e=> !1; // prevent right click menu
 
 ///////////////////////////////////////////////////////////////////////////////
 // Gamepad input
@@ -2048,6 +1974,21 @@ oncontextmenu = e=> !1; // prevent right click menu
 const stickData = [];
 function gamepadsUpdate()
 {
+    if (touchGamepadEnable && touchGamepadTimer.isSet())
+    {
+        // read virtual analog stick
+        const sticks = stickData[0] || (stickData[0] = []);
+        sticks[0] = vec2(touchGamepadStick.x, -touchGamepadStick.y); // flip vertical
+
+        // read virtual gamepad buttons
+        const data = inputData[1] || (inputData[1] = []);
+        for (let i=10; i--;)
+        {
+            const j = i == 3 ? 2 : i == 2 ? 3 : i; // fix button locations
+            data[j] = touchGamepadButtons[i] ? 1 + 2*!gamepadIsDown(j,0) : 4*gamepadIsDown(j,0);
+        }
+    }
+
     if (!gamepadsEnable || !navigator.getGamepads || !document.hasFocus() && !debug)
         return;
 
@@ -2065,8 +2006,8 @@ function gamepadsUpdate()
             // read clamp dead zone of analog sticks
             const deadZone = .3, deadZoneMax = .8;
             const applyDeadZone = (v)=> 
-                v >  deadZone ?  percent( v, deadZoneMax, deadZone) : 
-                v < -deadZone ? -percent(-v, deadZoneMax, deadZone) : 0;
+                v >  deadZone ?  percent( v, deadZone, deadZoneMax) : 
+                v < -deadZone ? -percent(-v, deadZone, deadZoneMax) : 0;
 
             // read analog sticks
             for (let j = 0; j < gamepad.axes.length-1; j+=2)
@@ -2078,6 +2019,7 @@ function gamepadsUpdate()
                 const button = gamepad.buttons[j];
                 data[j] = button.pressed ? 1 + 2*!gamepadIsDown(j,i) : 4*gamepadIsDown(j,i);
                 isUsingGamepad |= !i && button.pressed;
+                touchGamepadEnable && touchGamepadTimer.unset(); // disable touch gamepad if using real gamepad
             }
 
             if (gamepadDirectionEmulateStick)
@@ -2091,6 +2033,17 @@ function gamepadsUpdate()
     }
 }
 
+///////////////////////////////////////////////////////////////////////////////
+
+/** Pulse the vibration hardware if it exists
+ *  @param {Number} [pattern=100] - a single value in miliseconds or vibration interval array
+ *  @memberof Input */
+const vibrate = (pattern)=> vibrateEnable && Navigator.vibrate && Navigator.vibrate(pattern);
+
+/** Cancel any ongoing vibration
+ *  @memberof Input */
+const vibrateStop = ()=> vibrate(0);
+
 ///////////////////////////////////////////////////////////////////////////////
 // Touch input
 
@@ -2098,7 +2051,9 @@ function gamepadsUpdate()
  *  @const {boolean}
  *  @memberof Input */
 const isTouchDevice = window.ontouchstart !== undefined;
-if (touchMouseEnable && isTouchDevice)
+
+// try to enable touch mouse
+if (isTouchDevice)
 {
     // handle all touch events the same way
     let wasTouching, hadTouchInput;
@@ -2129,19 +2084,25 @@ if (touchMouseEnable && isTouchDevice)
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// Touch gamepad - on screen virtual gamepad
+// touch gamepad, virtual on screen gamepad emulator for touch devices
 
-// create the touch gamepad, called automatically by the engine if touchGamepadSize is set
-const touchGamepadTimer = new Timer;
+// touch input internal variables
+let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2(), touchGamepadAnalog = 1;
+
+// create the touch gamepad, called automatically by the engine
 function touchGamepadCreate()
 {
-    if (!touchGamepadSize || !isTouchDevice)
+    if (!touchGamepadEnable || !isTouchDevice)
         return;
 
     ontouchstart = ontouchmove = ontouchend = (e)=> 
     {
-        if (!touchGamepadSize)
+        if (!touchGamepadEnable)
             return;
+
+        // clear touch gamepad input
+        touchGamepadStick = vec2();
+        touchGamepadButtons = [];
             
         const touching = e.touches.length;
         if (touching)
@@ -2151,6 +2112,13 @@ function touchGamepadCreate()
             // set that gamepad is active
             isUsingGamepad = 1;
             touchGamepadTimer.set();
+
+            if (paused)
+            {
+                // touch anywhere to press start when paused
+                touchGamepadButtons[9] = 1;
+                return;
+            }
         }
 
         // get center of left and right sides
@@ -2158,68 +2126,58 @@ function touchGamepadCreate()
         const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
         const startCenter = mainCanvasSize.scale(.5);
 
-        // update virtual gamepad
-        const data = inputData[1] || (inputData[1] = []);
-        const sticks = stickData[0] || (stickData[0] = []);
-        sticks[0] = vec2();
-
         // check each touch point
-        const buttons = [];
         for (const touch of e.touches)
         {
-            const touchPos = vec2(touch.clientX, touch.clientY);
+            const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
             if (touchPos.distance(stickCenter) < touchGamepadSize)
             {
                 // virtual analog stick
-                sticks[0] = touchPos.subtract(stickCenter).clampLength();
-                sticks[0].y = -sticks[0].y; // flip vertical
+                if (touchGamepadAnalog)
+                    touchGamepadStick = touchPos.subtract(stickCenter).clampLength(touchGamepadSize/2).scale(2/touchGamepadSize);
+                else
+                {
+                    // 8 way dpad
+                    const angle = touchPos.subtract(stickCenter).angle();
+                    touchGamepadStick.setAngle((angle * 4 / PI + 8.5 | 0) * PI / 4);
+                }
             }
             else if (touchPos.distance(buttonCenter) < touchGamepadSize)
             {
                 // virtual face buttons
                 const button = touchPos.subtract(buttonCenter).direction();
-                buttons[button > 2 ? 2 : button > 1 ? 3 : button] = 1; // fix button locations
+                touchGamepadButtons[button] = 1;
             }
             else if (touchPos.distance(startCenter) < touchGamepadSize)
             {
-                // virtual start button
-                buttons[9] = 1;
+                // virtual start button in center
+                touchGamepadButtons[9] = 1;
             }
         }
-
-        // read virtual buttons
-        for (let j=10; j--;)
-            data[j] = buttons[j] ? 1 + 2*!gamepadIsDown(j,0) : 4*gamepadIsDown(j,0);
     }
 }
 
 // render the touch gamepad, called automatically by the engine
 function touchGamepadRender()
 {
-    if (!touchGamepadSize || !touchGamepadTimer.isSet())
+    if (!touchGamepadEnable || !touchGamepadTimer.isSet())
         return;
     
-    // fade off when not touching
-    const alpha = percent(touchGamepadTimer.get(), 4, 5);
-    if (!alpha)
+    // fade off when not touching or paused
+    const alpha = percent(touchGamepadTimer.get(), 4, 3);
+    if (!alpha || paused)
         return;
 
     // setup the canvas
     overlayContext.save();
     overlayContext.globalAlpha = alpha*touchGamepadAlpha;
-    overlayContext.fillStyle = '#fff6';
     overlayContext.strokeStyle = '#fff';
     overlayContext.lineWidth = 3;
 
-    // draw start button
-    //overlayContext.beginPath();
-    //overlayContext.arc(mainCanvasSize.x/2, mainCanvasSize.y/2, touchGamepadSize*.9, 0,9);
-    //overlayContext.fill();
-    //overlayContext.stroke();
-
     // draw left analog stick
+    overlayContext.fillStyle = gamepadStick(0).length() > 0 ? '#fff' : '#000';
     overlayContext.beginPath();
-    overlayContext.arc(touchGamepadSize, mainCanvasSize.y-touchGamepadSize, touchGamepadSize*.9, 0,9);
+    overlayContext.arc(touchGamepadSize, mainCanvasSize.y-touchGamepadSize, touchGamepadSize/2, 0,9);
     overlayContext.fill();
     overlayContext.stroke();
 
@@ -2227,9 +2185,10 @@ function touchGamepadRender()
     const rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     for (let i=4; i--;)
     {
-        const pos = rightCenter.add((new Vector2).setAngle(i*PI/2, touchGamepadSize*.6));
+        const pos = rightCenter.add((new Vector2).setAngle(i*PI/2, touchGamepadSize/2));
+        overlayContext.fillStyle = touchGamepadButtons[i] ? '#fff' : '#000';
         overlayContext.beginPath();
-        overlayContext.arc(pos.x, pos.y, touchGamepadSize*.3, 0,9);
+        overlayContext.arc(pos.x, pos.y, touchGamepadSize/4, 0,9);
         overlayContext.fill();
         overlayContext.stroke();
     }
@@ -2308,7 +2267,7 @@ class Sound
                     return; // out of range
 
                 // attenuate volume by distance
-                volume *= percent(lengthSquared**.5, range*this.taper, range);
+                volume *= percent(lengthSquared**.5, range, range*this.taper);
             }
 
             // get pan from screen space coords
@@ -2434,7 +2393,7 @@ function speak(text, language='', volume=1, rate=1, pitch=1)
 
 /** Stop all queued speech
  *  @memberof Audio */
-const stopSpeech = ()=> speechSynthesis && speechSynthesis.cancel();
+const speakStop = ()=> speechSynthesis && speechSynthesis.cancel();
 
 /** Get frequency of a note on a musical scale
  *  @param {Number} semitoneOffset - How many semitones away from the root note
@@ -2465,6 +2424,13 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
     if (!audioContext)
         audioContext = new (window.AudioContext||webkitAudioContext);
 
+    // fix stalled audio
+    audioContext.resume();
+
+    // prevent sounds from building up if they can't be played
+    if (audioContext.state != 'running')
+        return;
+
     // create buffer and source
     const buffer = audioContext.createBuffer(sampleChannels.length, sampleChannels[0].length, zzfxR), 
         source = audioContext.createBufferSource();
@@ -2475,11 +2441,18 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
     source.playbackRate.value = rate;
     source.loop = loop;
 
-    // create pan and gain nodes
-    source
-        .connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, 1, -1)}))
-        .connect(new GainNode(audioContext, {'gain':soundVolume*volume}))
-        .connect(audioContext.destination);
+    // create and connect gain node (createGain is more widley spported then GainNode construtor)
+    const gainNode = audioContext.createGain();
+    gainNode.gain.value = soundVolume*volume;
+    gainNode.connect(audioContext.destination);
+
+    // connect source to gain
+    (
+        window.StereoPannerNode ? // create pan node if possible
+        source.connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, -1, 1)}))
+        : source
+    )
+    .connect(gainNode);
 
     // play and return sound
     source.start();
@@ -2837,8 +2810,9 @@ class TileLayerData
 /**
  * Tile layer object - cached rendering system for tile layers
  * <br> - Each Tile layer is rendered to an off screen canvas
- * <br> - Tile layers are not rendered using WebGL to allow modifications at run time
- * <br> - Tile layers are sorted
+ * <br> - To allow dynamic modifications, layers are rendered using canvas 2d
+ * <br> - Some devices like mobile phones are limited to 4k texture resolution
+ * <br> - So with 16x16 tiles this limits layers to 256x256 on mobile devices
  * @extends EngineObject
  * @example
  * // create tile collision and visible tile layer
@@ -2848,11 +2822,11 @@ class TileLayerData
 class TileLayer extends EngineObject
 {
     /** Create a tile layer object
-     *  @param {Vector2} [position=new Vector2(0,0)] - World space position
-     *  @param {Vector2} [size=objectDefaultSize]    - World space size
-     *  @param {Vector2} [tileSize=tileSizeDefault]  - Size of tiles in source pixels
-     *  @param {Vector2} [scale=new Vector2(1,1)]    - How much to scale this layer when rendered
-     *  @param {Number}  [renderOrder=0]             - Objects sorted by renderOrder before being rendered
+     *  @param {Vector2} [position=new Vector2()]   - World space position
+     *  @param {Vector2} [size=objectDefaultSize]   - World space size
+     *  @param {Vector2} [tileSize=tileSizeDefault] - Size of tiles in source pixels
+     *  @param {Vector2} [scale=new Vector2(1,1)]   - How much to scale this layer when rendered
+     *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
      */
     constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1), renderOrder=0)
     {
@@ -2903,7 +2877,7 @@ class TileLayer extends EngineObject
         // flush and copy gl canvas because tile canvas does not use webgl
         glEnable && !glOverlay && !this.isOverlay && glCopyToContext(mainContext);
         
-        // draw the entire cached level onto the main canvas
+        // draw the entire cached level onto the canvas
         const pos = worldToScreen(this.pos.add(vec2(0,this.size.y*this.scale.y)));
         (this.isOverlay ? overlayContext : mainContext).drawImage
         (
@@ -2912,35 +2886,36 @@ class TileLayer extends EngineObject
         );
     }
 
-    /** Draw all the tile data to an offscreen canvas using webgl if possible */
+    /** Draw all the tile data to an offscreen canvas 
+     *  - This may be slow in some browsers
+    */
     redraw()
     {
-        this.redrawStart();
+        this.redrawStart(1);
         this.drawAllTileData();
         this.redrawEnd();
     }
 
     /** Call to start the redraw process
-     *  @param {Boolean} [clear=1] - Should it clear the canvas before drawing */
-    redrawStart(clear = 1)
+     *  @param {Boolean} [clear=0] - Should it clear the canvas before drawing */
+    redrawStart(clear = 0)
     {
-        // clear and set size
-        const width  = this.size.x * this.tileSize.x;
-        const height = this.size.y * this.tileSize.y;
         if (clear)
         {
-            this.canvas.width  = width;
-            this.canvas.height = height;
+            // clear and set size
+            this.canvas.width  = this.size.x * this.tileSize.x;
+            this.canvas.height = this.size.y * this.tileSize.y;
         }
 
         // save current render settings
-        this.savedRenderSettings = [mainCanvas, mainContext];
+        this.savedRenderSettings = [mainCanvas, mainContext, cameraPos, cameraScale];
 
-        // set camera transform for renering
+        // use normal rendering system to render the tiles
         mainCanvas = this.canvas;
         mainContext = this.context;
-        mainContext.imageSmoothingEnabled = !cavasPixelated; // disable smoothing for pixel art
-        glPreRender(width, height, this.size.x/2, this.size.y/2, this.tileSize.x);
+        cameraPos = this.size.scale(.5);
+        cameraScale = this.tileSize.x;
+        enginePreRender();
     }
 
     /** Call to end the redraw process */
@@ -2951,7 +2926,7 @@ class TileLayer extends EngineObject
         //debugSaveCanvas(this.canvas);
 
         // set stuff back to normal
-        [mainCanvas, mainContext] = this.savedRenderSettings;
+        [mainCanvas, mainContext, cameraPos, cameraScale] = this.savedRenderSettings;
     }
 
     /** Draw the tile at a given position
@@ -2979,7 +2954,7 @@ class TileLayer extends EngineObject
              this.drawTileData(vec2(x,y));
     }
 
-    /** Draw directly to the 2d canvas in world space (bipass webgl)
+    /** Draw directly to the 2D canvas in world space (bipass webgl)
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
      *  @param {Number}   [angle=0]
@@ -3019,7 +2994,7 @@ class TileLayer extends EngineObject
             else
             {
                 const cols = tileImage.width/tileSize.x;
-                context.globalAlpha = color.a; // full color not supported in this mode
+                context.globalAlpha = color.a; // only alpha, no color, is supported in this mode
                 context.drawImage(tileImage, 
                     (tileIndex%cols)*tileSize.x, (tileIndex/cols|0)*tileSize.x, 
                     tileSize.x, tileSize.y, -.5, -.5, 1, 1);
@@ -3087,7 +3062,7 @@ class ParticleEmitter extends EngineObject
      *  @param {Number}  [randomness=.2]        - Apply extra randomness percent
      *  @param {Boolean} [collideTiles=0]       - Do particles collide against tiles
      *  @param {Boolean} [additive=0]           - Should particles use addtive blend
-     *  @param {Boolean} [randomColorLinear=0]  - Should color be randomized linearly or across each component
+     *  @param {Boolean} [randomColorLinear=1]  - Should color be randomized linearly or across each component
      *  @param {Number}  [renderOrder=0]        - Render order for particles (additive is above other stuff by default)
      */
     constructor
@@ -3188,9 +3163,9 @@ class ParticleEmitter extends EngineObject
         if (!this.emitTime || this.getAliveTime() <= this.emitTime)
         {
             // emit particles
-            if (this.emitRate)
+            if (this.emitRate * particleEmitRateScale)
             {
-                const rate = 1/this.emitRate;
+                const rate = 1/this.emitRate/particleEmitRateScale;
                 for (this.emitTimeBuffer += timeDelta; this.emitTimeBuffer > 0; this.emitTimeBuffer -= rate)
                     this.emitParticle();
             }
@@ -3353,7 +3328,7 @@ function medalsInit(saveName)
 {
     // check if medals are unlocked
     medalsSaveName = saveName;
-    debugMedals || medals.forEach(medal=> medal.unlocked = localStorage[medal.storageKey()]);
+    debugMedals || medals.forEach(medal=> medal.unlocked = 1 || localStorage[medal.storageKey()]);
 }
 
 /** 
@@ -3386,13 +3361,9 @@ class Medal
         this.name = name;
         this.description = description;
         this.icon = icon;
-
+        this.image = new Image();
         if (src)
-        {
-            // load image
-            this.image = new Image();
             this.image.src = src;
-        }
     }
 
     /** Unlocks a medal if not already unlocked */
@@ -3422,21 +3393,23 @@ class Medal
         const y = -medalDisplayHeight*hidePercent;
 
         // draw containing rect and clip to that region
-        context.beginPath(context.save());
+        context.save();
+        context.beginPath();
         context.fillStyle = '#ddd'
         context.fill(context.rect(x, y, width, medalDisplayHeight));
-        context.strokeStyle = context.fillStyle = '#000';
-        context.lineWidth = 2; 
+        context.strokeStyle = '#000';
+        context.lineWidth = 3;
         context.stroke();
         context.clip();
 
         // draw the icon and text
         this.renderIcon(x+15+medalDisplayIconSize/2, y+medalDisplayHeight/2);
         context.textAlign = 'left';
-        context.font = '40px '+ fontDefault;
-        context.fillText(this.name, x+medalDisplayIconSize+25, y+35);
-        context.font = '25px '+ fontDefault;
-        context.restore(context.fillText(this.description, x+medalDisplayIconSize+25, y+70));
+        context.font = '38px '+ fontDefault;
+        context.fillText(this.name, x+medalDisplayIconSize+30, y+28);
+        context.font = '24px '+ fontDefault;
+        context.fillText(this.description, x+medalDisplayIconSize+30, y+60);
+        context.restore();
     }
 
     /** Render the icon for a medal
@@ -3448,11 +3421,11 @@ class Medal
     {
         // draw the image or icon
         const context = overlayContext;
+        context.fillStyle = '#000';
         context.textAlign = 'center';
         context.textBaseline = 'middle';
-        context.font = size*.6 + 'px '+ fontDefault;
-        context.fillStyle = '#000';
-        if (this.image)
+        context.font = size*.7 + 'px '+ fontDefault;
+        if (this.image.src)
             context.drawImage(this.image, x-size/2, y-size/2, size, size);
         else
             context.fillText(this.icon, x, y); // show icon if there is no image
@@ -3528,7 +3501,6 @@ class Newgrounds
             if (medal)
             {
                 // copy newgrounds medal data
-                medal.image =       new Image();
                 medal.image.src =   newgroundsMedal['icon'];
                 medal.name =        newgroundsMedal['name'];
                 medal.description = newgroundsMedal['description'];
@@ -3657,32 +3629,27 @@ function glInit()
 
     // create the canvas and tile texture
     glCanvas = document.createElement('canvas');
-    glContext = glCanvas.getContext('webgl');
-
+    glContext = glCanvas.getContext('webgl', {antialias: false});
+    glCanvas.style = styleCanvas;
     glTileTexture = glCreateTexture(tileImage);
 
-    if (glOverlay)
-    {
-        // some browsers are much faster without copying the gl buffer so we just overlay it instead
-        document.body.appendChild(glCanvas);
-        glCanvas.style = mainCanvas.style.cssText;
-    }
+    // some browsers are much faster without copying the gl buffer so we just overlay it instead
+    glOverlay && document.body.appendChild(glCanvas);
 
     // setup vertex and fragment shaders
     glShader = glCreateProgram(
         'precision highp float;'+   // use highp for better accuracy, lowp for better perf
         'uniform mat4 m;'+          // transform matrix
-        'attribute float a;'+       // angle
-        'attribute vec2 p,s,t;'+    // position, size, uv
-        'attribute vec4 c,b;'+      // color, additiveColor
+        'attribute vec2 p,t;'+      // position, uv
+        'attribute vec4 c,a;'+      // color, additiveColor
         'varying vec2 v;'+          // return uv
         'varying vec4 d,e;'+        // return color, additiveColor
         'void main(){'+             // shader entry point
-        'gl_Position=m*vec4((s*cos(a)-vec2(-s.y,s)*sin(a))*.5+p,1,1);'+// transform position
-        'v=t;d=c;e=b;'+             // pass stuff to fragment shader
+        'gl_Position=m*vec4(p,1,1);'+// transform position
+        'v=t;d=c;e=a;'+             // pass stuff to fragment shader
         '}'                         // end of shader
         ,
-        'precision lowp float;'+             // use highp for better accuracy, lowp for better perf
+        'precision highp float;'+            // use highp for better accuracy, lowp for better perf
         'varying vec2 v;'+                   // uv
         'varying vec4 d,e;'+                 // color, additiveColor
         'uniform sampler2D j;'+              // texture
@@ -3698,6 +3665,7 @@ function glInit()
     glColorData = new Uint32Array(glVertexData);
 
     // setup the vertex data array
+    let offset = glBatchCount = 0;
     const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
     {
         const location = glContext.getAttribLocation(glShader, name);
@@ -3705,13 +3673,10 @@ function glInit()
         glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
         offset += size*typeSize;
     }
-    let offset = glBatchCount = 0;
-    initVertexAttribArray('a', gl_FLOAT, 4, 1);            // angle
     initVertexAttribArray('p', gl_FLOAT, 4, 2);            // position
-    initVertexAttribArray('s', gl_FLOAT, 4, 2);            // size
     initVertexAttribArray('t', gl_FLOAT, 4, 2);            // texture coords
     initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
-    initVertexAttribArray('b', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
+    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
 }
 
 /** Set the WebGl blend mode, normally you should call setBlendMode instead
@@ -3732,7 +3697,8 @@ function glSetBlendMode(additive)
 function glSetTexture(texture=glTileTexture)
 {
     if (!glEnable) return;
-        
+    
+    // must flush cache with the old texture to set a new one
     if (texture != glActiveTexture)
         glFlush();
 
@@ -3825,6 +3791,7 @@ function glPreRender(width, height, cameraX, cameraY, cameraScale)
 
     // clear and set to same size as main canvas
     glContext.viewport(0, 0, glCanvas.width = width, glCanvas.height = height);
+    glContext.clear(gl_COLOR_BUFFER_BIT);
 
     // set up the shader
     glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = glTileTexture);
@@ -3868,15 +3835,13 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context, forceDraw)
 {
-    if (!glEnable || !glBatchCount)  return;
+    if (!glEnable || !glBatchCount) return;
     
     glFlush();
+    
+    // do not draw in overlay mode because the canvas is visible
     if (!glOverlay || forceDraw)
-    {
-        // do not draw/clear in overlay mode because the canvas is visible
         context.drawImage(glCanvas, 0, 0);
-        glContext.clear(gl_COLOR_BUFFER_BIT);
-    }
 }
 
 /** Add a sprite to the gl draw list, used by all gl draw functions
@@ -3899,51 +3864,49 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=0xffffff
     // flush if there is no room for more verts or if different blend mode
     if (glBatchCount == gl_MAX_BATCH || glBatchAdditive != glAdditive)
         glFlush();
+
+    // prepare to create the verts from size and angle
+    const c = Math.cos(angle)/2, s = Math.sin(angle)/2;
+    const cX = c*sizeX, cY = c*sizeY, sX = s*sizeX, sY = s*sizeY;
         
     // setup 2 triangles to form a quad
     let offset = glBatchCount++ * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT;
 
     // vertex 0
-    glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;      glPositionData[offset++] = y;
-    glPositionData[offset++] = -sizeX; glPositionData[offset++] = -sizeY;
-    glPositionData[offset++] = uv0X;   glPositionData[offset++] = uv1Y;
-    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
+    glPositionData[offset++] = x - cX - sY;
+    glPositionData[offset++] = y - cY + sX;
+    glPositionData[offset++] = uv0X; glPositionData[offset++] = uv1Y;
+    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
     
     // vertex 1
-    glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;      glPositionData[offset++] = y;
-    glPositionData[offset++] = sizeX;  glPositionData[offset++] = sizeY;
-    glPositionData[offset++] = uv1X;   glPositionData[offset++] = uv0Y;
-    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
+    glPositionData[offset++] = x + cX + sY;
+    glPositionData[offset++] = y + cY - sX;
+    glPositionData[offset++] = uv1X; glPositionData[offset++] = uv0Y;
+    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
     
     // vertex 2
-    glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;      glPositionData[offset++] = y;
-    glPositionData[offset++] = -sizeX; glPositionData[offset++] = sizeY;
-    glPositionData[offset++] = uv0X;   glPositionData[offset++] = uv0Y;
-    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
+    glPositionData[offset++] = x - cX + sY;
+    glPositionData[offset++] = y + cY + sX;
+    glPositionData[offset++] = uv0X; glPositionData[offset++] = uv0Y;
+    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
     
     // vertex 0
-    glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;      glPositionData[offset++] = y;
-    glPositionData[offset++] = -sizeX; glPositionData[offset++] = -sizeY;
-    glPositionData[offset++] = uv0X;   glPositionData[offset++] = uv1Y;
-    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
+    glPositionData[offset++] = x - cX - sY;      
+    glPositionData[offset++] = y - cY + sX;  
+    glPositionData[offset++] = uv0X; glPositionData[offset++] = uv1Y;
+    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
 
     // vertex 3
-    glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;      glPositionData[offset++] = y;
-    glPositionData[offset++] = sizeX;  glPositionData[offset++] = -sizeY;
-    glPositionData[offset++] = uv1X;   glPositionData[offset++] = uv1Y;
-    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
+    glPositionData[offset++] = x + cX - sY;
+    glPositionData[offset++] = y - cY - sX;
+    glPositionData[offset++] = uv1X; glPositionData[offset++] = uv1Y;
+    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
 
     // vertex 1
-    glPositionData[offset++] = angle;
-    glPositionData[offset++] = x;      glPositionData[offset++] = y;
-    glPositionData[offset++] = sizeX;  glPositionData[offset++] = sizeY;
-    glPositionData[offset++] = uv1X;   glPositionData[offset++] = uv0Y;
-    glColorData[offset++]    = rgba;   glColorData[offset++]    = rgbaAdditive;
+    glPositionData[offset++] = x + cX + sY;
+    glPositionData[offset++] = y + cY - sX;
+    glPositionData[offset++] = uv1X; glPositionData[offset++] = uv0Y;
+    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -3975,9 +3938,9 @@ gl_LINK_STATUS = 35714,
 
 // constants for batch rendering
 gl_VERTICES_PER_QUAD = 6,
-gl_INDICIES_PER_VERT = 9,
+gl_INDICIES_PER_VERT = 6,
 gl_MAX_BATCH = 1<<16,
-gl_VERTEX_BYTE_STRIDE = 4 + (4 * 2) * 3 + (4) * 2; // float + vec2 * 3 + (char * 4) * 2
+gl_VERTEX_BYTE_STRIDE = (4 * 2) * 2 + (4) * 2; // vec2 * 2 + (char * 4) * 2
 /*
     LittleJS - The Tiny JavaScript Game Engine That Can!
     MIT License - Copyright 2021 Frank Force
@@ -4002,7 +3965,7 @@ gl_VERTEX_BYTE_STRIDE = 4 + (4 * 2) * 3 + (4) * 2; // float + vec2 * 3 + (char *
 const engineName = 'LittleJS';
 
 /** Version of engine */
-const engineVersion = '1.1.17';
+const engineVersion = '1.2.0';
 
 /** Frames per second to update objects
  *  @default */
@@ -4015,7 +3978,7 @@ const timeDelta = 1/frameRate;
 /** Array containing all engine objects */
 let engineObjects = [];
 
-/** Array containing only objects that are set to collide with other objects (for optimization) */
+/** Array containing only objects that are set to collide with other objects this frame (for optimization) */
 let engineObjectsCollide = [];
 
 /** Current update frame, used to calculate time */
@@ -4031,8 +3994,15 @@ let timeReal = 0;
 let paused = 0;
 
 // Engine internal variables not exposed to documentation
-let frameTimeLastMS = 0, frameTimeBufferMS = 0, debugFPS = 0, 
-    shrinkTilesX, shrinkTilesY, drawCount, tileImageSize, tileImageSizeInverse;
+let frameTimeLastMS = 0, frameTimeBufferMS = 0, tileImageSize, tileImageFixBleed;
+
+// Engine stat tracking, if showWatermark is true
+let averageFPS, drawCount;
+
+// css text used for elements created by engine
+const styleBody = 'margin:0;overflow:hidden;background:#000' +
+    ';touch-action:none;user-select:none;-webkit-user-select:none;-moz-user-select:none';
+const styleCanvas = 'position:absolute';
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -4050,17 +4020,14 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     tileImage.onerror = tileImage.onload = ()=>
     {
         // save tile image info
-        tileImageSizeInverse = vec2(1).divide(tileImageSize = vec2(tileImage.width, tileImage.height));
+        tileImageFixBleed = vec2(tileFixBleedScale).divide(tileImageSize = vec2(tileImage.width, tileImage.height));
         debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
-        shrinkTilesX = tileBleedShrinkFix/tileImageSize.x;
-        shrinkTilesY = tileBleedShrinkFix/tileImageSize.y;
 
         // setup html
+        document.body.style = styleBody;
         document.body.appendChild(mainCanvas = document.createElement('canvas'));
-        document.body.style = 'margin:0;overflow:hidden;background:#000' +
-            (touchMouseEnable?';touch-action:none;user-select:none;-webkit-user-select:none;-moz-user-select:none':'');
-        mainCanvas.style = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
         mainContext = mainCanvas.getContext('2d');
+        mainCanvas.style = styleCanvas;
 
         // init stuff and start engine
         debugInit();
@@ -4068,8 +4035,8 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
 
         // create overlay canvas for hud to appear above gl canvas
         document.body.appendChild(overlayCanvas = document.createElement('canvas'));
-        overlayCanvas.style = mainCanvas.style.cssText;
         overlayContext = overlayCanvas.getContext('2d');
+        overlayCanvas.style = styleCanvas;
         
         gameInit();
         touchGamepadCreate();
@@ -4085,7 +4052,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
         frameTimeLastMS = frameTimeMS;
         if (debug || showWatermark)
-            debugFPS = lerp(.05, 1e3/(frameTimeDeltaMS||1), debugFPS);
+            averageFPS = lerp(.05, averageFPS || 0, 1e3/(frameTimeDeltaMS||1));
         if (debug)
             frameTimeDeltaMS *= keyIsDown(107) ? 5 : keyIsDown(109) ? .2 : 1; // +/- to speed/slow time
         timeReal += frameTimeDeltaMS / 1e3;
@@ -4136,13 +4103,24 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             
             // fit to window by adding space on top or bottom if necessary
             const aspect = innerWidth / innerHeight;
-            const fixedAspect = mainCanvas.width / mainCanvas.height;
-            mainCanvas.style.width  = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
-            mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
-            if (glCanvas)
+            const fixedAspect = canvasFixedSize.x / canvasFixedSize.y;
+
+            // clear css
+            mainCanvas.style.width  = overlayCanvas.style.width  = 
+            mainCanvas.style.height = overlayCanvas.style.height = 
+            mainCanvas.style.top    = overlayCanvas.style.top    = 
+            mainCanvas.style.left   = overlayCanvas.style.left   = '';
+
+            // letterbox center canvas
+            if (aspect < fixedAspect)
+            {
+                mainCanvas.style.width = overlayCanvas.style.width = innerWidth;
+                mainCanvas.style.top   = overlayCanvas.style.top = (innerHeight - innerWidth/fixedAspect)/2;
+            }
+            else
             {
-                glCanvas.style.width  = mainCanvas.style.width;
-                glCanvas.style.height = mainCanvas.style.height;
+                mainCanvas.style.height = overlayCanvas.style.height = innerHeight;
+                mainCanvas.style.left   = overlayCanvas.style.left = (innerWidth - innerHeight*fixedAspect)/2;
             }
         }
         else
@@ -4150,14 +4128,22 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             // clear and set size to same as window
             mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
             mainCanvas.height = min(innerHeight, canvasMaxSize.y);
+
+            // center canvas
+            overlayCanvas.style.top  = mainCanvas.style.top  = (innerHeight - mainCanvas.height)/2;
+            overlayCanvas.style.left = mainCanvas.style.left = (innerWidth  - mainCanvas.width)/2;
+        }
+    
+        if (glEnable)
+        {
+            glCanvas.style.width  = mainCanvas.style.width;
+            glCanvas.style.height = mainCanvas.style.height;
+            glCanvas.style.top    = mainCanvas.style.top;
+            glCanvas.style.left   = mainCanvas.style.left;
         }
         
-        // save canvas size and clear overlay canvas
-        mainCanvasSize = vec2(overlayCanvas.width = mainCanvas.width, overlayCanvas.height = mainCanvas.height);
-        mainContext.imageSmoothingEnabled = !cavasPixelated; // disable smoothing for pixel art
-
         // render sort then render while removing destroyed objects
-        glPreRender(mainCanvas.width, mainCanvas.height, cameraPos.x, cameraPos.y, cameraScale);
+        enginePreRender();
         gameRender();
         engineObjects.sort((a,b)=> a.renderOrder - b.renderOrder);
         for (const o of engineObjects)
@@ -4176,7 +4162,8 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             overlayContext.font = '1em monospace';
             overlayContext.fillStyle = '#000';
             const text = engineName + ' ' + 'v' + engineVersion + ' / ' 
-                + drawCount + ' / ' + engineObjects.length + ' / ' + debugFPS.toFixed(1);
+                + drawCount + ' / ' + engineObjects.length + ' / ' + averageFPS.toFixed(1)
+                + ' ' + (glEnable ? 'GL' : '2D') ;
             overlayContext.fillText(text, mainCanvas.width-3, 3);
             overlayContext.fillStyle = '#fff';
             overlayContext.fillText(text, mainCanvas.width-2, 2);
@@ -4188,12 +4175,27 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     tileImageSource ? tileImage.src = tileImageSource : tileImage.onload();
 }
 
+// called by engine to setup render system
+function enginePreRender()
+{
+    // save canvas size and clear canvases
+    mainCanvasSize = vec2(overlayCanvas.width = mainCanvas.width, overlayCanvas.height = mainCanvas.height);
+
+    // disable smoothing for pixel art
+    mainContext.imageSmoothingEnabled = !cavasPixelated;
+
+    // setup gl rendering if enabled
+    glPreRender(mainCanvas.width, mainCanvas.height, cameraPos.x, cameraPos.y, cameraScale);
+}
 
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Calls update on each engine object (recursively if child), removes destroyed objects, and updated time */
 function engineObjectsUpdate()
 {
+    // get list of solid objects for physics optimzation
+    engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
+
     // recursive object update
     const updateObject = (o)=>
     {
@@ -4209,17 +4211,16 @@ function engineObjectsUpdate()
 
     // remove destroyed objects
     engineObjects = engineObjects.filter(o=>!o.destroyed);
-    engineObjectsCollide = engineObjectsCollide.filter(o=>!o.destroyed);
 
     // increment frame and update time
     time = ++frame / frameRate;
 }
 
-/** Detroy and remove all objects that are not persistent or descendants of a persistent object */
+/** Destroy and remove all objects */
 function engineObjectsDestroy()
 {
     for (const o of engineObjects)
-        o.persistent || o.parent || o.destroy();
+        o.parent || o.destroy();
     engineObjects = engineObjects.filter(o=>!o.destroyed);
 }
 
@@ -4230,21 +4231,18 @@ function engineObjectsDestroy()
  *  @param {Array} [objects=engineObjects] - List of objects to check */
 function engineObjectsCallback(pos, size, callbackFunction, objects=engineObjects)
 {
-    if (!pos)
+    if (!pos) // all objects
     {
-        // all objects
         for (const o of objects)
             callbackFunction(o);
     }
-    else if (size.x != undefined)
+    else if (size.x != undefined)  // bounding box test
     {
-        // aabb test
         for (const o of objects)
             isOverlapping(pos, size, o.pos, o.size) && callbackFunction(o);
     }
-    else
+    else  // circle test
     {
-        // circle test
         const sizeSquared = size*size;
         for (const o of objects)
             pos.distanceSquared(o.pos) < sizeSquared && callbackFunction(o);