littlejsengine 1.1.26 → 1.2.0

package/engine/engine.all.release.js

@@ -82,27 +82,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
@@ -117,11 +117,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;
 
@@ -510,7 +510,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
@@ -748,7 +748,7 @@ let medalDisplayIconSize = 50;
 const engineName = 'LittleJS';
 
 /** Version of engine */
-const engineVersion = '1.1.26';
+const engineVersion = '1.2.0';
 
 /** Frames per second to update objects
  *  @default */
@@ -785,7 +785,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';
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -810,7 +810,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();
@@ -819,7 +819,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();
@@ -835,7 +835,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         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;
@@ -886,13 +886,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
@@ -900,6 +911,18 @@ 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;
         }
         
         // render sort then render while removing destroyed objects
@@ -1042,7 +1065,7 @@ function engineObjectsCallback(pos, size, callbackFunction, objects=engineObject
 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
@@ -1087,12 +1110,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);
@@ -1111,8 +1137,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();
@@ -1202,8 +1228,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
@@ -1223,8 +1249,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;
@@ -1254,7 +1280,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
@@ -1565,6 +1591,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
@@ -1590,16 +1628,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);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1790,7 +1905,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)));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -1831,8 +1946,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)
@@ -1912,7 +2027,7 @@ if (isTouchDevice)
 // touch gamepad, virtual on screen gamepad emulator for touch devices
 
 // touch input internal variables
-let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2();
+let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2(), touchGamepadAnalog = 1;
 
 // create the touch gamepad, called automatically by the engine
 function touchGamepadCreate()
@@ -1958,7 +2073,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).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)
             {
@@ -1982,7 +2104,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;
 
@@ -2085,7 +2207,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
@@ -2267,7 +2389,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);
@@ -2640,11 +2762,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)
     {
@@ -2704,17 +2826,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)
         {
@@ -3445,8 +3569,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
@@ -3456,14 +3580,13 @@ function glInit()
     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 highp float;'+            // use highp for better accuracy, lowp for better perf
@@ -3490,12 +3613,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
@@ -3610,6 +3731,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);
@@ -3656,12 +3778,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
@@ -3684,51 +3804,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;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -3760,6 +3878,6 @@ 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