littlejsengine 1.1.26 → 1.2.9

package/engine/engine.all.js

@@ -7,6 +7,7 @@
  * LittleJS Debug System
  * <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 a 2d canvas as an image
  * @namespace Debug
@@ -159,27 +160,27 @@ const debugUpdate = ()=>
 {
     if (!debug)
         return;
-        
+
     if (keyWasPressed(192)) // ~
         debugOverlay = !debugOverlay;
     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
-        //    debugToggleParticleEditor();
-        if (keyWasPressed(55)) // 7
-            debugGamepads = !debugGamepads;
+        //if (keyWasPressed(55)) // 7
         //if (keyWasPressed(56)) // 8
         //if (keyWasPressed(57)) // 9
-        if (keyWasPressed(48)) // 0
-            showWatermark = !showWatermark;
     }
 }
 
@@ -200,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');
@@ -251,16 +251,14 @@ const debugRender = ()=>
                 bestObject = o
             }
 
-            size.x = max(size.x, .2);
-            size.y = max(size.y, .2);
-
+            // 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));
@@ -275,17 +273,11 @@ const debugRender = ()=>
             drawRect(mousePos.floor().add(vec2(.5)), vec2(1), new Color(0,0,1,.5));
             drawLine(mousePos, bestObject.pos, .1, !raycastHitPos ? new Color(0,1,0,.5) : new Color(1,0,0,.5));
 
-            let pos = mousePos.copy(), height = vec2(0,.5);
-            const printVec2 = (v)=> '(' + (v.x>0?' ':'') + (v.x).toFixed(2) + ',' + (v.y>0?' ':'')  + (v.y).toFixed(2) + ')';
-            const args = [.5, new Color, .05, undefined, undefined, 'monospace'];
-
-            drawText('pos = ' + printVec2(bestObject.pos) 
-                + (bestObject.angle>0?'  ':' ') + (bestObject.angle*180/PI).toFixed(1) + '°', 
-                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('type = ' + ( bestObject.constructor.name), pos = mousePos.subtract(height), ...args);
-            drawText('collision = ' + getTileCollisionData(mousePos), pos = mousePos.subtract(height.scale(2)), ...args);
+            const debugText = 'mouse pos = ' + mousePos + 
+                '\nmouse collision = ' + getTileCollisionData(mousePos) + 
+                '\n\n--- object info ---\n' +
+                bestObject.toString();
+            drawTextScreen(debugText, mousePosScreen, 24, new Color, .05, undefined, undefined, 'monospace');
             mainContext = saveContext;
         }
 
@@ -293,16 +285,16 @@ const debugRender = ()=>
     }
 
     {
-        // render debug rects
-        overlayContext.lineWidth = 1;
+        // draw debug primitives
+        overlayContext.lineWidth = 2;
         const pointSize = debugPointSize * cameraScale;
         debugPrimitives.forEach(p=>
         {
+            overlayContext.save();
+
             // 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;
@@ -335,15 +327,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);
     }
 
     {
-        let x = 9, y = -20, h = 30;
+        // draw debug overlay
+        overlayContext.save();
         overlayContext.fillStyle = '#fff';
         overlayContext.textAlign = 'left';
         overlayContext.textBaseline = 'top';
@@ -351,6 +345,7 @@ const debugRender = ()=>
         overlayContext.shadowColor = '#000';
         overlayContext.shadowBlur = 9;
 
+        let x = 9, y = -20, h = 30;
         if (debugOverlay)
         {
             overlayContext.fillText(engineName, x, y += h);
@@ -363,14 +358,12 @@ 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);
 
             let keysPressed = '';
             for(const i in inputData[0])
@@ -388,7 +381,6 @@ const debugRender = ()=>
                     buttonsPressed += i + ' ' ;
             }
             buttonsPressed && overlayContext.fillText('Gamepad: ' + buttonsPressed, x, y += h);
-
         }
         else
         {
@@ -398,200 +390,9 @@ const debugRender = ()=>
             overlayContext.fillText(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
         }
     
-        overlayContext.shadowBlur = 0;
+        overlayContext.restore();
     }
-
-    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)
-            {
-                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;
-            }
-            else
-                input.value = debugParticleSystem[name] || '0';
-
-            input.oninput = (e)=>
-            {
-                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();
-            }
-            div.appendChild(document.createElement('br'));
-            div.appendChild(input);
-            div.appendChild(document.createTextNode(' ' + name));
-        }
-
-        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 = ()=>
-        {
-            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 + ']';
-        }
-        updateCode();
-    }
-    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
@@ -643,27 +444,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
@@ -678,11 +479,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;
 
@@ -905,7 +706,13 @@ class Vector2
     /** Returns true if this vector is within the bounds of an array size passed in
      * @param {Vector2} arraySize
      * @return {Boolean} */
-    arrayCheck(arraySize) { return this.x >= 0 && this.y >= 0 && this.x < arraySize.x && this.y < arraySize.y; } 
+    arrayCheck(arraySize) { return this.x >= 0 && this.y >= 0 && this.x < arraySize.x && this.y < arraySize.y; }
+
+    /** Returns this vector expressed as a string
+     * @param {float} digits - precision to display
+     * @return {String} */
+    toString(digits=3) 
+    { return `(${(this.x<0?'':' ') + this.x.toFixed(digits)},${(this.y<0?'':' ') + this.y.toFixed(digits)} )`; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -976,7 +783,7 @@ class Color
      * @return {Color} */
     lerp(c, p) { return this.add(c.subtract(this).scale(clamp(p))); }
 
-    /** Sets this color given a hue, saturation, lightness , and alpha
+    /** Sets this color given a hue, saturation, lightness, and alpha
      * @param {Number} [hue=0]
      * @param {Number} [saturation=0]
      * @param {Number} [lightness=1]
@@ -1012,21 +819,43 @@ class Color
         ).clamp();
     }
 
-    /** Returns this color expressed as an rgba string
+    /** Returns this color expressed as an CSS color value
      * @return {String} */
-    rgba()      
+    toString()      
     { 
         ASSERT(this.r>=0 && this.r<=1 && this.g>=0 && this.g<=1 && this.b>=0 && this.b<=1 && this.a>=0 && this.a<=1);
         return `rgb(${this.r*255|0},${this.g*255|0},${this.b*255|0},${this.a})`; 
     }
     
-    /** Returns this color expressed as 32 bit integer value
+    /** Returns this color expressed as 32 bit integer RGBA value
      * @return {Number} */
     rgbaInt()  
     {
         ASSERT(this.r>=0 && this.r<=1 && this.g>=0 && this.g<=1 && this.b>=0 && this.b<=1 && this.a>=0 && this.a<=1);
         return (this.r*255|0) + (this.g*255<<8) + (this.b*255<<16) + (this.a*255<<24); 
     }
+
+    /** Returns this color expressed as a hex code
+     * @return {String} */
+    hex()
+    {
+        const toHex = (c)=> ((c=c*255|0)<16 ? '0' : '') + c.toString(16);
+        return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b);
+    }
+
+    /** Set this color from a hex code
+     * @param {String} hex - html hex code
+     * @return {Color} */
+    setHex(hex)
+    {
+        const fromHex = (a)=> parseInt(hex.slice(a,a+2), 16)/255;
+        this.r = fromHex(1);
+        this.g = fromHex(3),
+        this.b = fromHex(5);
+        this.a = 1;
+        ASSERT(this.r>=0 && this.r<=1 && this.g>=0 && this.g<=1 && this.b>=0 && this.b<=1);
+        return this;
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1063,7 +892,7 @@ class Timer
 
     /** Returns true if set and elapsed
      * @return {Boolean} */
-    elapsed() { return time >  this.time; }
+    elapsed() { return time > this.time; }
 
     /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
      * @return {Number} */
@@ -1071,7 +900,11 @@ 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; }
+    
+    /** Returns this timer expressed as a string
+     * @return {String} */
+    toString() { return this.unset() ? 'unset' : Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ); }
 }
 /**
  * LittleJS Engine Settings
@@ -1220,6 +1053,11 @@ let inputWASDEmulateDirection = 1;
  *  @memberof Settings */
 let touchGamepadEnable = 0;
 
+/** True if touch gamepad should be analog stick or false to use if 8 way dpad
+ *  @default
+ *  @memberof Settings */
+let touchGamepadAnalog = 1;
+
 /** Size of virutal gamepad for touch devices in pixels
  *  @default
  *  @memberof Settings */
@@ -1319,11 +1157,11 @@ let medalDisplayIconSize = 50;
 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
-     *  @param {Number}  [angle=0]                   - Angle to rotate the object
+     *  @param {Number}  [angle=0]                   - Angle the object is rotated by
      *  @param {Color}   [color]                     - Color to apply to tile when rendered
      *  @param {Number}  [renderOrder=0]             - Objects sorted by renderOrder before being rendered
      */
@@ -1364,12 +1202,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);
@@ -1388,8 +1229,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();
@@ -1479,8 +1320,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
@@ -1500,8 +1341,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;
@@ -1531,7 +1372,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
@@ -1636,6 +1477,22 @@ class EngineObject
         this.isSolid = isSolid;
         this.collideTiles = collideTiles;
     }
+
+    toString()
+    {
+        let text = 'type = ' + this.constructor.name;
+        if (this.pos.x || this.pos.y)
+            text += '\npos = ' + this.pos;
+        if (this.velocity.x || this.velocity.y)
+            text += '\nvelocity = ' + this.velocity;
+        if (this.size.x || this.size.y)
+            text += '\nsize = ' + this.size;
+        if (this.angle)
+            text += '\nangle = ' + this.angle.toFixed(3);
+        if (this.color)
+            text += '\ncolor = ' + this.color;
+        return text;
+    }
 }
 /** 
  * LittleJS Drawing System
@@ -1749,7 +1606,7 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
             if (tileIndex < 0)
             {
                 // if negative tile index, force untextured
-                context.fillStyle = color.rgba();
+                context.fillStyle = color;
                 context.fillRect(-.5, -.5, 1, 1);
             }
             else
@@ -1842,7 +1699,20 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
     context.restore();
 }
 
-/** Draw text on overlay canvas in world space
+/** 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 screen space
+ *  Automatically splits new lines into rows
  *  @param {String}  text
  *  @param {Vector2} pos
  *  @param {Number}  [size=1]
@@ -1851,32 +1721,129 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
  *  @param {Color}   [lineColor=new Color(0,0,0)]
  *  @param {String}  [textAlign='center']
  *  @memberof Draw */
-function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault)
+function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault)
 {
-    pos = worldToScreen(pos);
-    overlayContext.font = size*cameraScale + 'px '+ font;
+    overlayContext.fillStyle = color;
+    overlayContext.lineWidth = lineWidth *= cameraScale;
+    overlayContext.strokeStyle = lineColor;
     overlayContext.textAlign = textAlign;
+    overlayContext.font = size + 'px '+ font;
     overlayContext.textBaseline = 'middle';
-    if (lineWidth)
+
+    pos = pos.copy();
+    text.split('\n').forEach(line=>
     {
-        overlayContext.lineWidth = lineWidth*cameraScale;
-        overlayContext.strokeStyle = lineColor.rgba();
-        overlayContext.strokeText(text, pos.x, pos.y);
-    }
-    overlayContext.fillStyle = color.rgba();
-    overlayContext.fillText(text, pos.x, pos.y);
+        lineWidth && overlayContext.strokeText(line, pos.x, pos.y);
+        overlayContext.fillText(line, pos.x, pos.y);
+        pos.y += size;
+    });
 }
 
-/** Enable normal or additive blend mode
- *  @param {Boolean} [additive=0]
- *  @param {Boolean} [useWebGL=glEnable]
+/** Draw text on overlay canvas in world space
+ *  Automatically splits new lines into rows
+ *  @param {String}  text
+ *  @param {Vector2} pos
+ *  @param {Number}  [size=1]
+ *  @param {Color}   [color=new Color(1,1,1)]
+ *  @param {Number}  [lineWidth=0]
+ *  @param {Color}   [lineColor=new Color(0,0,0)]
+ *  @param {String}  [textAlign='center']
  *  @memberof Draw */
-function setBlendMode(additive, useWebGL=glEnable)
+function drawText(text, pos, size=1, color, lineWidth, lineColor, textAlign, font)
 {
-    if (glEnable && useWebGL)
-        glSetBlendMode(additive);
-    else
-        mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth, lineColor, textAlign, font);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** 
+ * 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));
+ */
+
+let engineFontImage;
+
+class FontImage
+{
+    /** 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 && !engineFontImage)
+        {
+            // load default font image
+            engineFontImage = new Image();
+            engineFontImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAYAQAAAAA9+x6JAAAAAnRSTlMAAHaTzTgAAAGiSURBVHjaZZABhxxBEIUf6ECLBdFY+Q0PMNgf0yCgsSAGZcT9sgIPtBWwIA5wgAPEoHUyJeeSlW+gjK+fegWwtROWpVQEyWh2npdpBmTUFVhb29RINgLIukoXr5LIAvYQ5ve+1FqWEMqNKTX3FAJHyQDRZvmKWubAACcv5z5Gtg2oyCWE+Yk/8JZQX1jTTCpKAFGIgza+dJCNBF2UskRlsgwitHbSV0QLgt9sTPtsRlvJjEr8C/FARWA2bJ/TtJ7lko34dNDn6usJUMzuErP89UUBJbWeozrwLLncXczd508deAjLWipLO4Q5XGPcJvPu92cNDaN0P5G1FL0nSOzddZOrJ6rNhbXGmeDvO3TF7DeJWl4bvaYQTNHCTeuqKZmbjHaSOFes+IX/+IhHrnAkXOAsfn24EM68XieIECoccD4KZLk/odiwzeo2rovYdhvb2HYFgyznJyDpYJdYOmfXgVdJTaUi4xA2uWYNYec9BLeqdl9EsoTw582mSFDX2DxVLbNt9U3YYoeatBad1c2Tj8t2akrjaIGJNywKB/7h75/gN3vCMSaadIUTAAAAAElFTkSuQmCC';
+        }
+
+        this.image = image || engineFontImage;
+        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);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -2067,7 +2034,7 @@ const mouseToScreen = (mousePos)=>
 
     const rect = mainCanvas.getBoundingClientRect();
     return mainCanvasSize.multiply(
-        vec2(percent(mousePos.x, rect.right, rect.left), percent(mousePos.y, rect.bottom, rect.top)));
+        vec2(percent(mousePos.x, rect.left, rect.right), percent(mousePos.y, rect.top, rect.bottom)));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -2108,8 +2075,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)
@@ -2235,7 +2202,14 @@ function touchGamepadCreate()
             if (touchPos.distance(stickCenter) < touchGamepadSize)
             {
                 // virtual analog stick
-                touchGamepadStick = touchPos.subtract(stickCenter).clampLength(touchGamepadSize/2).scale(2/touchGamepadSize);
+                if (touchGamepadAnalog)
+                    touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
+                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)
             {
@@ -2259,7 +2233,7 @@ function touchGamepadRender()
         return;
     
     // fade off when not touching or paused
-    const alpha = percent(touchGamepadTimer.get(), 3, 4);
+    const alpha = percent(touchGamepadTimer.get(), 4, 3);
     if (!alpha || paused)
         return;
 
@@ -2270,12 +2244,28 @@ function touchGamepadRender()
     overlayContext.lineWidth = 3;
 
     // draw left analog stick
-    overlayContext.fillStyle = gamepadStick(0).length() > 0 ? '#fff' : '#000';
+    overlayContext.fillStyle = touchGamepadStick.lengthSquared() > 0 ? '#fff' : '#000';
     overlayContext.beginPath();
-    overlayContext.arc(touchGamepadSize, mainCanvasSize.y-touchGamepadSize, touchGamepadSize/2, 0,9);
-    overlayContext.fill();
-    overlayContext.stroke();
 
+    const leftCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+    if (touchGamepadAnalog)
+    {
+        overlayContext.arc(leftCenter.x, leftCenter.y, touchGamepadSize/2, 0, 9);
+        overlayContext.fill();
+        overlayContext.stroke();
+    }
+    else // draw cross shaped gamepad
+    {
+        for(let i=10; i--;)
+        {
+            const angle = i*PI/4;
+            overlayContext.arc(leftCenter.x, leftCenter.y,touchGamepadSize*.6, angle + PI/8, angle + PI/8);
+            i%2 && overlayContext.arc(leftCenter.x, leftCenter.y, touchGamepadSize*.33, angle, angle);
+            i==1 && overlayContext.fill();
+        }
+        overlayContext.stroke();
+    }
+    
     // draw right face buttons
     const rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     for (let i=4; i--;)
@@ -2362,7 +2352,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
@@ -2544,7 +2534,7 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
     // connect source to gain
     (
         window.StereoPannerNode ? // create pan node if possible
-        source.connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, 1, -1)}))
+        source.connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, -1, 1)}))
         : source
     )
     .connect(gainNode);
@@ -2916,14 +2906,14 @@ 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
-     */
-    constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1), renderOrder=0)
+/** Create a tile layer object
+    *  @param {Vector2} [position=new Vector2()]   - World space position
+    *  @param {Vector2} [size=tileCollisionSize]   - 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)
     {
         super(pos, size, -1, tileSize, 0, undefined, renderOrder);
 
@@ -2981,17 +2971,19 @@ class TileLayer extends EngineObject
         );
     }
 
-    /** Draw all the tile data to an offscreen canvas */
+    /** 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)
     {
         if (clear)
         {
@@ -3081,7 +3073,7 @@ class TileLayer extends EngineObject
             if (tileIndex < 0)
             {
                 // untextured
-                context.fillStyle = color.rgba();
+                context.fillStyle = color;
                 context.fillRect(-.5, -.5, 1, 1);
             }
             else
@@ -3100,7 +3092,8 @@ class TileLayer extends EngineObject
      *  @param {Vector2} [size=new Vector2(1,1)]
      *  @param {Color}   [color=new Color(1,1,1)]
      *  @param {Number}  [angle=0] */
-    drawRect(pos, size, color, angle) { this.drawTile(pos, size, -1, 0, color, angle); }
+    drawRect(pos, size, color, angle) 
+    { this.drawTile(pos, size, -1, 0, color, angle); }
 }
 /*
     LittleJS Particle System
@@ -3119,9 +3112,9 @@ class TileLayer extends EngineObject
  * let pos = vec2(2,3);
  * let particleEmiter = new ParticleEmitter
  * (
- *     pos, 1, 0, 500, PI,  // pos, emitSize, emitTime, emitRate, emiteCone
+ *     pos, 0, 1, 0, 500, PI,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
  *     0, vec2(16),                            // tileIndex, tileSize
- *     new Color, new Color(0,0,0),            // colorStartA, colorStartB
+ *     new Color(1,1,1),   new Color(0,0,0),   // colorStartA, colorStartB
  *     new Color(1,1,1,0), new Color(0,0,0,0), // colorEndA, colorEndB
  *     2, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
  *     .99, 1, 1, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate, 
@@ -3132,6 +3125,7 @@ class ParticleEmitter extends EngineObject
 {
     /** Create a particle system with the given settings
      *  @param {Vector2} position           - World space position of the emitter
+     *  @param {Number}  [angle=0]          - Angle to emit the particles
      *  @param {Number}  [emitSize=0]       - World space size of the emitter (float for circle diameter, vec2 for rect)
      *  @param {Number}  [emitTime=0]       - How long to stay alive (0 is forever)
      *  @param {Number}  [emitRate=100]     - How many particles per second to spawn, does not emit if 0
@@ -3161,6 +3155,7 @@ class ParticleEmitter extends EngineObject
     constructor
     ( 
         pos,
+        angle,
         emitSize = 0,
         emitTime = 0,
         emitRate = 100,
@@ -3188,7 +3183,7 @@ class ParticleEmitter extends EngineObject
         renderOrder = additive ? 1e9 : 0
     )
     {
-        super(pos, new Vector2, tileIndex, tileSize, 0, undefined, renderOrder);
+        super(pos, new Vector2, tileIndex, tileSize, angle, undefined, renderOrder);
 
         // emitter settings
         /** @property {Number} - World space size of the emitter (float for circle diameter, vec2 for rect) */
@@ -3421,7 +3416,7 @@ function medalsInit(saveName)
 {
     // check if medals are unlocked
     medalsSaveName = saveName;
-    debugMedals || medals.forEach(medal=> medal.unlocked = 1 || localStorage[medal.storageKey()]);
+    debugMedals || medals.forEach(medal=> localStorage[medal.storageKey()]);
 }
 
 /** 
@@ -3610,6 +3605,9 @@ class Newgrounds
         const scoreboardResult = this.call('ScoreBoard.getBoards');
         this.scoreboards = scoreboardResult ? scoreboardResult.result.data.scoreboards : [];
         debugMedals && console.log(this.scoreboards);
+
+        const keepAliveMS = 5 * 60 * 1e3;
+        setInterval(()=>this.call('Gateway.ping', 0, 1), keepAliveMS);
     }
 
     /** Send message to unlock a medal by id
@@ -3621,9 +3619,6 @@ class Newgrounds
      * @param {Number} value - The score value */
     postScore(id, value) { return this.call('ScoreBoard.postScore', {'id':id, 'value':value}, 1); }
 
-    /** Send message to log a view */
-    logView() { return this.call('App.logView', {'host':this.host}, 1); }
-
     /** Get scores from a scoreboard
      * @param {Number} id         - The scoreboard id
      * @param {String} [user=0]   - A user's id or name
@@ -3635,6 +3630,9 @@ class Newgrounds
     getScores(id, user=0, social=0, skip=0, limit=10)
     { return this.call('ScoreBoard.getScores', {'id':id, 'user':user, 'social':social, 'skip':skip, 'limit':limit}); }
 
+    /** Send message to log a view */
+    logView() { return this.call('App.logView', {'host':this.host}, 1); }
+
     /** Send a message to call a component of the Newgrounds API
      * @param {String}  component      - Name of the component
      * @param {Object}  [parameters=0] - Parameters to use for call
@@ -3722,8 +3720,8 @@ function glInit()
 
     // create the canvas and tile texture
     glCanvas = document.createElement('canvas');
-    glContext = glCanvas.getContext('webgl');
-    glCanvas.style = canvaStyle;
+    glContext = glCanvas.getContext('webgl', {antialias: false});
+    glCanvas.style = styleCanvas;
     glTileTexture = glCreateTexture(tileImage);
 
     // some browsers are much faster without copying the gl buffer so we just overlay it instead
@@ -3731,25 +3729,24 @@ function glInit()
 
     // 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
-        '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
-        '}'                         // end of shader
+        'precision highp float;'+     // use highp for better accuracy
+        'uniform mat4 m;'+            // transform matrix
+        '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(p,1,1);'+ // transform position
+        'v=t;d=c;e=a;'+               // pass stuff to fragment shader
+        '}'                           // end of shader
         ,
-        '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
-        'void main(){'+                      // shader entry point
-        'gl_FragColor=texture2D(j,v)*d+e;'+  // modulate texture by color plus additive
-        '}'                                  // end of shader
+        'precision highp float;'+           // use highp for better accuracy
+        'varying vec2 v;'+                  // uv
+        'varying vec4 d,e;'+                // color, additiveColor
+        'uniform sampler2D s;'+             // texture
+        'void main(){'+                     // shader entry point
+        'gl_FragColor=texture2D(s,v)*d+e;'+ // modulate texture by color plus additive
+        '}'                                 // end of shader
     );
 
     // init buffers
@@ -3767,12 +3764,10 @@ function glInit()
         glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
         offset += size*typeSize;
     }
-    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
@@ -3887,6 +3882,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);
@@ -3933,12 +3929,10 @@ function glCopyToContext(context, forceDraw)
     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
@@ -3961,51 +3955,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;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -4037,9 +4029,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
@@ -4064,7 +4056,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.26';
+const engineVersion = '1.2.8';
 
 /** Frames per second to update objects
  *  @default */
@@ -4101,7 +4093,7 @@ 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 canvaStyle = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
+const styleCanvas = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -4126,7 +4118,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         document.body.style = styleBody;
         document.body.appendChild(mainCanvas = document.createElement('canvas'));
         mainContext = mainCanvas.getContext('2d');
-        mainCanvas.style = canvaStyle;
+        mainCanvas.style = styleCanvas;
 
         // init stuff and start engine
         debugInit();
@@ -4135,7 +4127,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         // create overlay canvas for hud to appear above gl canvas
         document.body.appendChild(overlayCanvas = document.createElement('canvas'));
         overlayContext = overlayCanvas.getContext('2d');
-        overlayCanvas.style = canvaStyle;
+        overlayCanvas.style = styleCanvas;
         
         gameInit();
         touchGamepadCreate();
@@ -4145,13 +4137,11 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     // main update loop
     const engineUpdate = (frameTimeMS=0)=>
     {
-        requestAnimationFrame(engineUpdate);
-
         // update time keeping
         let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
         frameTimeLastMS = frameTimeMS;
         if (debug || showWatermark)
-            averageFPS = lerp(.05, 1e3/(frameTimeDeltaMS||1), averageFPS || 0);
+            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;
@@ -4245,6 +4235,8 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             overlayContext.fillText(text, mainCanvas.width-2, 2);
             drawCount = 0;
         }
+
+        requestAnimationFrame(engineUpdate);
     }
 
     // set tile image source to load the image and start the engine