littlejsengine 1.4.7 → 1.4.9

package/engine/engine.all.release.js

@@ -137,7 +137,7 @@ const wave = (frequency=1, amplitude=1, t=time)=> amplitude/2 * (1 - Math.cos(t*
  *  @param {Number} t - time in seconds
  *  @return {String}
  *  @memberof Utilities */
-const formatTime = (t)=> (t/60|0)+':'+(t%60<10?'0':'')+(t%60|0);
+const formatTime = (t)=> (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0);
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -161,7 +161,7 @@ const randInt = (a=1, b=0)=> rand(a,b)|0;
 /** Randomly returns either -1 or 1
  *  @return {Number}
  *  @memberof Random */
-const randSign = ()=> (rand(2)|0) * 2 - 1;
+const randSign = ()=> randInt(2) * 2 - 1;
 
 /** Returns a random Vector2 within a circular shape
  *  @param {Number} [radius=1]
@@ -185,10 +185,15 @@ const randVector = (length=1)=> new Vector2().setAngle(rand(2*PI), length);
 const randColor = (cA = new Color, cB = new Color(0,0,0,1), linear)=>
     linear ? cA.lerp(cB, rand()) : new Color(rand(cA.r,cB.r),rand(cA.g,cB.g),rand(cA.b,cB.b),rand(cA.a,cB.a));
 
-/** The seed used by the randSeeded function, should not be 0
+/** Seed used by the randSeeded function
  *  @memberof Random */
 let randSeed = 1;
 
+/** Set seed used by the randSeeded function, should not be 0
+ *  @param {Number} seed
+ *  @memberof Random */
+const setRandSeed = (seed)=> randSeed = seed;
+
 /** Returns a seeded random value between the two values passed in using randSeed
  *  @param {Number} [valueA=1]
  *  @param {Number} [valueB=0]
@@ -216,6 +221,14 @@ const randSeeded = (a=1, b=0)=>
  */
 const vec2 = (x=0, y)=> x.x == undefined ? new Vector2(x, y == undefined? x : y) : new Vector2(x.x, x.y);
 
+/** 
+ * Check if object is a valid Vector2
+ * @param {Vector2} vector
+ * @return {Boolean}
+ * @memberof Utilities
+ */
+const isVector2 = (v)=> !isNaN(v.x) && !isNaN(v.y);
+
 /** 
  * 2D Vector object with vector math library
  * <br> - Functions do not change this so they can be chained together
@@ -245,27 +258,27 @@ class Vector2
     /** Returns a copy of this vector plus the vector passed in
      *  @param {Vector2} vector
      *  @return {Vector2} */
-    add(v) { ASSERT(v.x!=undefined); return new Vector2(this.x + v.x, this.y + v.y); }
+    add(v) { ASSERT(isVector2(v)); return new Vector2(this.x + v.x, this.y + v.y); }
 
     /** Returns a copy of this vector minus the vector passed in
      *  @param {Vector2} vector
      *  @return {Vector2} */
-    subtract(v) { ASSERT(v.x!=undefined); return new Vector2(this.x - v.x, this.y - v.y); }
+    subtract(v) { ASSERT(isVector2(v)); return new Vector2(this.x - v.x, this.y - v.y); }
 
     /** Returns a copy of this vector times the vector passed in
      *  @param {Vector2} vector
      *  @return {Vector2} */
-    multiply(v) { ASSERT(v.x!=undefined); return new Vector2(this.x * v.x, this.y * v.y); }
+    multiply(v) { ASSERT(isVector2(v)); return new Vector2(this.x * v.x, this.y * v.y); }
 
     /** Returns a copy of this vector divided by the vector passed in
      *  @param {Vector2} vector
      *  @return {Vector2} */
-    divide(v) { ASSERT(v.x!=undefined); return new Vector2(this.x / v.x, this.y / v.y); }
+    divide(v) { ASSERT(isVector2(v)); return new Vector2(this.x / v.x, this.y / v.y); }
 
     /** Returns a copy of this vector scaled by the vector passed in
      *  @param {Number} scale
      *  @return {Vector2} */
-    scale(s) { ASSERT(s.x==undefined); return new Vector2(this.x * s, this.y * s); }
+    scale(s) { ASSERT(!isVector2(s)); return new Vector2(this.x * s, this.y * s); }
 
     /** Returns the length of this vector
      * @return {Number} */
@@ -298,12 +311,12 @@ class Vector2
     /** Returns the dot product of this and the vector passed in
      * @param {Vector2} vector
      * @return {Number} */
-    dot(v) { ASSERT(v.x!=undefined); return this.x*v.x + this.y*v.y; }
+    dot(v) { ASSERT(isVector2(v)); return this.x*v.x + this.y*v.y; }
 
     /** Returns the cross product of this and the vector passed in
      * @param {Vector2} vector
      * @return {Number} */
-    cross(v) { ASSERT(v.x!=undefined); return this.x*v.y - this.y*v.x; }
+    cross(v) { ASSERT(isVector2(v)); return this.x*v.y - this.y*v.x; }
 
     /** Returns the angle of this vector, up is angle 0
      * @return {Number} */
@@ -339,7 +352,7 @@ class Vector2
      * @param {Vector2} vector
      * @param {Number}  percent
      * @return {Vector2} */
-    lerp(v, p) { ASSERT(v.x!=undefined); return this.add(v.subtract(this).scale(clamp(p))); }
+    lerp(v, p) { ASSERT(isVector2(v)); return this.add(v.subtract(this).scale(clamp(p))); }
 
     /** Returns true if this vector is within the bounds of an array size passed in
      * @param {Vector2} arraySize
@@ -350,7 +363,7 @@ class Vector2
      * @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)} )`; }
+    { if (debug) { return `(${(this.x<0?'':' ') + this.x.toFixed(digits)},${(this.y<0?'':' ') + this.y.toFixed(digits)} )`; }}
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -588,7 +601,7 @@ class Timer
     
     /** Returns this timer expressed as a string
      * @return {String} */
-    toString() { if (debug) { return this.unset() ? 'unset' : Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ); } }
+    toString() { if (debug) { return this.unset() ? 'unset' : Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ); }}
     
     /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
      * @return {Number} */
@@ -601,6 +614,20 @@ class Timer
 
 'use strict';
 
+///////////////////////////////////////////////////////////////////////////////
+// Camera settings
+
+/** Position of camera in world space
+ *  @type {Vector2}
+ *  @default
+ *  @memberof Settings */
+let cameraPos = vec2();
+
+/** Scale of camera in world space
+ *  @default
+ *  @memberof Settings */
+let cameraScale = 32;
+
 ///////////////////////////////////////////////////////////////////////////////
 // Display settings
 
@@ -627,6 +654,19 @@ let cavasPixelated = 1;
  *  @memberof Settings */
 let fontDefault = 'arial';
 
+///////////////////////////////////////////////////////////////////////////////
+// WebGL settings
+
+/** Enable webgl rendering, webgl can be disabled and removed from build (with some features disabled)
+ *  @default
+ *  @memberof Settings */
+let glEnable = 1;
+
+/** Fixes slow rendering in some browsers by not compositing the WebGL canvas
+ *  @default
+ *  @memberof Settings */
+let glOverlay = 1;
+
 ///////////////////////////////////////////////////////////////////////////////
 // Tile sheet settings
 
@@ -695,33 +735,6 @@ let gravity = 0;
  *  @memberof Settings */
 let particleEmitRateScale = 1;
 
-///////////////////////////////////////////////////////////////////////////////
-// Camera settings
-
-/** Position of camera in world space
- *  @type {Vector2}
- *  @default
- *  @memberof Settings */
-let cameraPos = vec2();
-
-/** Scale of camera in world space
- *  @default
- *  @memberof Settings */
-let cameraScale = max(tileSizeDefault.x, tileSizeDefault.y);
-
-///////////////////////////////////////////////////////////////////////////////
-// WebGL settings
-
-/** Enable webgl rendering, webgl can be disabled and removed from build (with some features disabled)
- *  @default
- *  @memberof Settings */
-let glEnable = 1;
-
-/** Fixes slow rendering in some browsers by not compositing the WebGL canvas
- *  @default
- *  @memberof Settings */
-let glOverlay = 1;
-
 ///////////////////////////////////////////////////////////////////////////////
 // Input settings
 
@@ -770,20 +783,20 @@ let vibrateEnable = 1;
 ///////////////////////////////////////////////////////////////////////////////
 // Audio settings
 
-/** Volume scale to apply to all sound, music and speech
+/** All audio code can be disabled and removed from build
  *  @default
  *  @memberof Settings */
-let soundVolume = .5;
+let soundEnable = 1;
 
-/** All audio code can be disabled and removed from build
+/** Volume scale to apply to all sound, music and speech
  *  @default
  *  @memberof Settings */
-let soundEnable = 1;
+let soundVolume = .5;
 
 /** Default range where sound no longer plays
  *  @default
  *  @memberof Settings */
-let soundDefaultRange = 30;
+let soundDefaultRange = 40;
 
 /** Default range percent to start tapering off sound (0-1)
  *  @default
@@ -803,20 +816,20 @@ let medalDisplayTime = 5;
  *  @memberof Settings */
 let medalDisplaySlideTime = .5;
 
-/** Width of medal display
+/** Size of medal display
  *  @default
  *  @memberof Settings */
-let medalDisplayWidth = 640;
+let medalDisplaySize = vec2(640, 80);
 
-/** Height of medal display
+/** Size of icon in medal display
  *  @default
  *  @memberof Settings */
-let medalDisplayHeight = 80;
+let medalDisplayIconSize = 50;
 
-/** Size of icon in medal display
+/** Set to stop medals from being unlockable (like if cheats are enabled)
  *  @default
  *  @memberof Settings */
-let medalDisplayIconSize = 50;
+let medalsPreventUnlock;
 /*
     LittleJS - The Tiny JavaScript Game Engine That Can!
     MIT License - Copyright 2021 Frank Force
@@ -832,6 +845,7 @@ let medalDisplayIconSize = 50;
     - Particle effect system
     - Medal system tracks and displays achievements
     - Debug tools and debug rendering system
+    - Post processing effects
     - Call engineInit() to start it up!
 */
 
@@ -841,7 +855,7 @@ let medalDisplayIconSize = 50;
 const engineName = 'LittleJS';
 
 /** Version of engine */
-const engineVersion = '1.4.7';
+const engineVersion = '1.4.9';
 
 /** Frames per second to update objects
  *  @default */
@@ -866,14 +880,13 @@ let time = 0;
 /** Actual clock time since start in seconds (not affected by pause or frame rate clamping) */
 let timeReal = 0;
 
-/** Is the game paused? Causes time and objects to not be updated. */
+/** Is the game paused? Causes time and objects to not be updated */
 let paused = 0;
 
-// Engine internal variables not exposed to documentation
-let tileImageSize, tileImageFixBleed;
-
-// Engine stat tracking, if showWatermark is true
-let averageFPS, drawCount;
+/** Set if game is paused
+ *  @param {Boolean} paused
+ */
+function setPaused(_paused) { paused = _paused; }
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -894,13 +907,11 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         tileImageFixBleed = vec2(tileFixBleedScale).divide(tileImageSize = vec2(tileImage.width, tileImage.height));
         debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
 
-        // setup css
+        // setup html
         const styleBody = 'margin:0;overflow:hidden;background:#000' + // fill the window
             ';touch-action:none' + // prevent mobile pinch to resize
             ';user-select:none' +  // prevent mobile hold to select
-            ';-webkit-user-select:none;-moz-user-select:none'; // compatibility for mobile
-
-        // setup html
+            ';-webkit-user-select:none'; // compatibility for ios
         document.body.style = styleBody;
         document.body.appendChild(mainCanvas = document.createElement('canvas'));
         mainContext = mainCanvas.getContext('2d');
@@ -915,7 +926,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
 
         // set canvas style to fill the window
         const styleCanvas = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
-        (glCanvas||mainCanvas).style = overlayCanvas.style = mainCanvas.style = styleCanvas;
+        (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
         
         gameInit();
         touchGamepadCreate();
@@ -923,16 +934,16 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     };
 
     // frame time tracking
-    let frameTimeLastMS = 0, frameTimeBufferMS = 0;
+    let frameTimeLastMS = 0, frameTimeBufferMS, averageFPS;
 
     // main update loop
-    const engineUpdate = (frameTimeMS=0)=>
+    function engineUpdate(frameTimeMS=0)
     {
         // update time keeping
         let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
         frameTimeLastMS = frameTimeMS;
         if (debug || showWatermark)
-            averageFPS = lerp(.05, averageFPS || 0, 1e3/(frameTimeDeltaMS||1));
+            averageFPS = lerp(.05, averageFPS, 1e3/(frameTimeDeltaMS||1));
         const debugSpeedUp   = debug && keyIsDown(107); // +
         const debugSpeedDown = debug && keyIsDown(109); // -
         if (debug)
@@ -944,24 +955,19 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
 
         if (canvasFixedSize.x)
         {
-            // clear set fixed size
+            // clear canvas and set fixed size
             overlayCanvas.width  = mainCanvas.width  = canvasFixedSize.x;
             overlayCanvas.height = mainCanvas.height = canvasFixedSize.y;
             
             // 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)
-            {
-                glCanvas.style.width  = mainCanvas.style.width;
-                glCanvas.style.height = mainCanvas.style.height;
-            }
+            (glCanvas||mainCanvas).style.width = mainCanvas.style.width = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
+            (glCanvas||mainCanvas).style.height = mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
         }
         else
         {
-            // clear and set size to same as window
+             // clear canvas and set size to same as window
              overlayCanvas.width  = mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
              overlayCanvas.height = mainCanvas.height = min(innerHeight, canvasMaxSize.y);
         }
@@ -1028,7 +1034,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             overlayContext.fillStyle = '#000';
             const text = engineName + ' ' + 'v' + engineVersion + ' / ' 
                 + drawCount + ' / ' + engineObjects.length + ' / ' + averageFPS.toFixed(1)
-                + ' ' + (glEnable ? 'GL' : '2D') ;
+                + (glEnable ? ' GL' : ' 2D') ;
             overlayContext.fillText(text, mainCanvas.width-3, 3);
             overlayContext.fillStyle = '#fff';
             overlayContext.fillText(text, mainCanvas.width-2, 2);
@@ -1042,7 +1048,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     tileImageSource ? tileImage.src = tileImageSource : tileImage.onload();
 }
 
-// called by engine to setup render system
+// Called automatically by engine to setup render system
 function enginePreRender()
 {
     // save canvas size
@@ -1052,12 +1058,10 @@ function enginePreRender()
     mainContext.imageSmoothingEnabled = !cavasPixelated;
 
     // setup gl rendering if enabled
-    glEnable && glPreRender(mainCanvas.width, mainCanvas.height, cameraPos.x, cameraPos.y, cameraScale);
+    glEnable && glPreRender();
 }
 
-///////////////////////////////////////////////////////////////////////////////
-
-/** Calls update on each engine object (recursively if child), removes destroyed objects, and updated time */
+/** Update each engine object, remove destroyed objects, and update time */
 function engineObjectsUpdate()
 {
     // get list of solid objects for physics optimzation
@@ -1160,7 +1164,7 @@ class EngineObject
     constructor(pos=vec2(), size=objectDefaultSize, tileIndex=-1, tileSize=tileSizeDefault, angle=0, color, renderOrder=0)
     {
         // set passed in params
-        ASSERT(pos && pos.x != undefined && size.x != undefined); // ensure pos and size are vec2s
+        ASSERT(isVector2(pos) && isVector2(size)); // ensure pos and size are vec2s
 
         /** @property {Vector2} - World space position of the object */
         this.pos = pos.copy();
@@ -1226,9 +1230,9 @@ class EngineObject
 
         // apply physics
         const oldPos = this.pos.copy();
-        this.pos.x += this.velocity.x = this.damping * this.velocity.x;
-        this.pos.y += this.velocity.y = this.damping * this.velocity.y + gravity * this.gravityScale;
-        this.angle += this.angleVelocity *= this.angleDamping;
+        this.velocity.y += gravity * this.gravityScale;
+        this.pos.x += this.velocity.x *= this.damping;
+        this.pos.y += this.velocity.y *= this.damping;
 
         // physics sanity checks
         ASSERT(this.angleDamping >= 0 && this.angleDamping <= 1);
@@ -1250,7 +1254,7 @@ class EngineObject
         if (this.collideSolidObjects)
         {
             // check collisions against solid objects
-            const epsilon = 1e-3; // necessary to push slightly outside of the collision
+            const epsilon = .001; // necessary to push slightly outside of the collision
             for (const o of engineObjectsCollide)
             {
                 // non solid objects don't collide with eachother
@@ -1286,7 +1290,7 @@ class EngineObject
                 const isBlockedX = abs(oldPos.y - o.pos.y)*2 < sizeBoth.y;
                 const isBlockedY = abs(oldPos.x - o.pos.x)*2 < sizeBoth.x;
                 
-                if (smallStepUp || isBlockedY || !isBlockedX) // resolve y collision
+                if (smallStepUp | isBlockedY | !isBlockedX) // resolve y collision
                 {
                     // push outside object collision
                     this.pos.y = o.pos.y + (sizeBoth.y/2 + epsilon) * sign(oldPos.y - o.pos.y);
@@ -1316,7 +1320,7 @@ class EngineObject
                         o.velocity.y = lerp(elasticity, inelastic, elastic1);
                     }
                 }
-                if (!smallStepUp && (isBlockedX || !isBlockedY)) // resolve x collision
+                if (!smallStepUp & isBlockedX) // resolve x collision
                 {
                     // push outside collision
                     this.pos.x = o.pos.x + (sizeBoth.x/2 + epsilon) * sign(oldPos.x - o.pos.x);
@@ -1354,7 +1358,7 @@ class EngineObject
                     // test which side we bounced off (or both if a corner)
                     const isBlockedY = tileCollisionTest(new Vector2(oldPos.x, this.pos.y), this.size, this);
                     const isBlockedX = tileCollisionTest(new Vector2(this.pos.x, oldPos.y), this.size, this);
-                    if (isBlockedY || !isBlockedX)
+                    if (isBlockedY | !isBlockedX)
                     {
                         // set if landed on ground
                         this.groundObject = wasMovingDown;
@@ -1513,11 +1517,6 @@ class EngineObject
 
 'use strict';
 
-/** Tile sheet for batch rendering system
- *  @type {Image}
- *  @memberof Draw */
-const tileImage = new Image();
-
 /** The primary 2D canvas visible to the user
  *  @type {HTMLCanvasElement}
  *  @memberof Draw */
@@ -1543,6 +1542,14 @@ let overlayContext;
  *  @memberof Draw */
 let mainCanvasSize = vec2();
 
+/** Tile sheet for batch rendering system
+ *  @type {Image}
+ *  @memberof Draw */
+const tileImage = new Image;
+
+// Engine internal variables not exposed to documentation
+let tileImageSize, tileImageFixBleed, drawCount;
+
 /** Convert from screen to world space coordinates
  *  - if calling outside of render, you may need to manually set mainCanvasSize
  *  @param {Vector2} screenPos
@@ -1567,7 +1574,7 @@ const worldToScreen = (worldPos)=>
 
 /** Draw textured tile centered in world space, with color applied if using WebGL
  *  @param {Vector2} pos                                - Center of the tile in world space
- *  @param {Vector2} [size=new Vector2(1,1)]            - Size of the tile in world space, width and height
+ *  @param {Vector2} [size=new Vector2(1,1)]            - Size of the tile in world space
  *  @param {Number}  [tileIndex=-1]                     - Tile index to use, negative is untextured
  *  @param {Vector2} [tileSize=tileSizeDefault]         - Tile size in source pixels
  *  @param {Color}   [color=new Color(1,1,1)]           - Color to modulate with
@@ -1773,25 +1780,23 @@ function drawText(text, pos, size=1, color, lineWidth, lineColor, textAlign, fon
  * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
  */
 
+// default font image created by engine
 let engineFontImage;
 
 class FontImage
 {
     /** Create an image font
-     *  @param {HTMLImageElement}   [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 {HTMLImageElement} [image] - Image for the font, if undefined default font is used
+     *  @param {Vector2} [tileSize=vec2(8)] - 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';
-        }
+        // load default font image
+        if (!engineFontImage)
+            (engineFontImage = new Image).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;
@@ -1856,7 +1861,7 @@ class FontImage
 /** Returns true if fullscreen mode is active
  *  @return {Boolean}
  *  @memberof Draw */
-const isFullscreen =()=> document.fullscreenElement;
+const isFullscreen = ()=> document.fullscreenElement;
 
 /** Toggle fullsceen mode
  *  @memberof Draw */
@@ -1866,16 +1871,9 @@ function toggleFullscreen()
     {
         if (document.exitFullscreen)
             document.exitFullscreen();
-        else if (document.mozCancelFullScreen)
-            document.mozCancelFullScreen();
-    }
-    else
-    {
-        if (document.body.webkitRequestFullScreen)
-            document.body.webkitRequestFullScreen();
-        else if (document.body.mozRequestFullScreen)
-            document.body.mozRequestFullScreen();
     }
+    else if (document.body.requestFullscreen)
+            document.body.requestFullscreen();
 }
 
 /** 
@@ -1894,7 +1892,7 @@ function toggleFullscreen()
  *  @param {Number} [device=0]
  *  @return {Boolean}
  *  @memberof Input */
-const keyIsDown = (key, device=0)=> inputData[device] && inputData[device][key] & 1 ? 1 : 0;
+const keyIsDown = (key, device=0)=> inputData[device] && inputData[device][key] & 1;
 
 /** Returns true if device key was pressed this frame
  *  @param {Number} key
@@ -2134,35 +2132,40 @@ const isTouchDevice = window.ontouchstart !== undefined;
 if (isTouchDevice)
 {
     // override mouse events
-    const mouseDown = onmousedown, mouseUp = onmouseup, mouseMove = onmousemove;
-    onmousedown = onmouseup = onmousemove = (e)=> 0;
+    let wasTouching, mouseDown = onmousedown, mouseUp = onmouseup;
+    onmousedown = onmouseup = ()=> 0;
 
-    // handle all touch events the same way
-    let wasTouching, hadTouch;
-    ontouchstart = ontouchmove = ontouchend = (e)=>
+    // setup touch input
+    ontouchstart = (e)=>
     {
-        e.button = 0; // all touches are left click
+        // fix mobile audio, force it to play a sound on first touch
+        zzfx(0);
 
-        // check if touching and pass to mouse events
-        const touching = e.touches.length;
-        if (touching)
+        // handle all touch events the same way
+        ontouchstart = ontouchmove = ontouchend = (e)=>
         {
-            // fix mobile audio, force it to play a sound on first touch
-            hadTouch || zzfx(0, hadTouch=1);
+            e.button = 0; // all touches are left click
 
-            // set event pos and pass it along
-            e.x = e.touches[0].clientX;
-            e.y = e.touches[0].clientY;
-            wasTouching ? mouseMove(e) : mouseDown(e);
-        }
-        else if (wasTouching)
-            mouseUp(e);
+            // check if touching and pass to mouse events
+            const touching = e.touches.length;
+            if (touching)
+            {
+                // set event pos and pass it along
+                e.x = e.touches[0].clientX;
+                e.y = e.touches[0].clientY;
+                wasTouching ? onmousemove(e) : mouseDown(e);
+            }
+            else if (wasTouching)
+                mouseUp(e);
+
+            // set was touching
+            wasTouching = touching;
 
-        // set was touching
-        wasTouching = touching;
+            // must return true so the document will get focus
+            return true;
+        }
 
-        // must return true so the document will get focus
-        return true;
+        return ontouchstart(e);
     }
 }
 
@@ -2170,7 +2173,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;
 
 // create the touch gamepad, called automatically by the engine
 function touchGamepadCreate()
@@ -2178,65 +2181,73 @@ function touchGamepadCreate()
     if (!touchGamepadEnable || !isTouchDevice)
         return;
 
-    ontouchstart = ontouchmove = ontouchend = (e)=> 
+    // touch input internal variables
+    touchGamepadButtons = [];
+    touchGamepadStick = vec2();
+
+    // setup touch input
+    ontouchstart = (e)=>
     {
-        if (!touchGamepadEnable)
-            return;
+        // fix mobile audio, force it to play a sound on first touch
+        zzfx(0);
 
-        // clear touch gamepad input
-        touchGamepadStick = vec2();
-        touchGamepadButtons = [];
-            
-        const touching = e.touches.length;
-        if (touching)
+        ontouchstart = ontouchmove = ontouchend = (e)=> 
         {
-            touchGamepadTimer.isSet() || zzfx(0) ; // fix mobile audio, force it to play a sound the first time
-
-            // set that gamepad is active
-            isUsingGamepad = 1;
-            touchGamepadTimer.set();
-
-            if (paused)
+            // clear touch gamepad input
+            touchGamepadStick = vec2();
+            touchGamepadButtons = [];
+                
+            const touching = e.touches.length;
+            if (touching)
             {
-                // touch anywhere to press start when paused
-                touchGamepadButtons[9] = 1;
-                return;
+                // 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
-        const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-        const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
-        const startCenter = mainCanvasSize.scale(.5);
+            // get center of left and right sides
+            const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+            const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
+            const startCenter = mainCanvasSize.scale(.5);
 
-        // check each touch point
-        for (const touch of e.touches)
-        {
-            const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
-            if (touchPos.distance(stickCenter) < touchGamepadSize)
+            // check each touch point
+            for (const touch of e.touches)
             {
-                // virtual analog stick
-                if (touchGamepadAnalog)
-                    touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
-                else
+                const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
+                if (touchPos.distance(stickCenter) < touchGamepadSize)
                 {
-                    // 8 way dpad
-                    const angle = touchPos.subtract(stickCenter).angle();
-                    touchGamepadStick.setAngle((angle * 4 / PI + 8.5 | 0) * PI / 4);
+                    // virtual analog stick
+                    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)
+                {
+                    // virtual face buttons
+                    const button = touchPos.subtract(buttonCenter).direction();
+                    touchGamepadButtons[button] = 1;
+                }
+                else if (touchPos.distance(startCenter) < touchGamepadSize)
+                {
+                    // virtual start button in center
+                    touchGamepadButtons[9] = 1;
                 }
-            }
-            else if (touchPos.distance(buttonCenter) < touchGamepadSize)
-            {
-                // virtual face buttons
-                const button = touchPos.subtract(buttonCenter).direction();
-                touchGamepadButtons[button] = 1;
-            }
-            else if (touchPos.distance(startCenter) < touchGamepadSize)
-            {
-                // virtual start button in center
-                touchGamepadButtons[9] = 1;
             }
         }
+
+        return ontouchstart(e);
     }
 }
 
@@ -2354,7 +2365,7 @@ class Sound
     {
         if (!soundEnable) return;
 
-        let pan = 0;
+        let pan;
         if (pos)
         {
             const range = this.range;
@@ -2384,7 +2395,7 @@ class Sound
      *  @param {Number}  [volume=1] - How much to scale volume by (in addition to range fade)
      *  @return {AudioBufferSourceNode} - The audio, can be used to stop sound later
      */
-    playNote(semitoneOffset, pos, volume=1)
+    playNote(semitoneOffset, pos, volume)
     {
         if (!soundEnable) return;
 
@@ -2439,7 +2450,7 @@ class Music
      *  @param {Boolean} [loop=1] - True if the music should loop when it reaches the end
      *  @return {AudioBufferSourceNode} - The audio node, can be used to stop sound later
      */
-    play(volume = 1, loop = 1)
+    play(volume, loop = 1)
     {
         if (!soundEnable) return;
 
@@ -2521,7 +2532,7 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
 
     // create audio context
     if (!audioContext)
-        audioContext = new (window.AudioContext||webkitAudioContext);
+        audioContext = new AudioContext;
 
     // fix stalled audio
     audioContext.resume();
@@ -2540,18 +2551,13 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
     source.playbackRate.value = rate;
     source.loop = loop;
 
-    // create and connect gain node (createGain is more widley spported then GainNode construtor)
+    // create and connect gain node (createGain is more widely 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);
+    // connect source to stereo panner and gain
+    source.connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, -1, 1)})).connect(gainNode);
 
     // play and return sound
     source.start();
@@ -2669,10 +2675,8 @@ function zzfxG
  *  @memberof Audio */
 function zzfxM(instruments, patterns, sequence, BPM = 125) 
 {
+  let i, j, k;
   let instrumentParameters;
-  let i;
-  let j;
-  let k;
   let note;
   let sample;
   let patternChannel;
@@ -2842,14 +2846,11 @@ function tileCollisionRaycast(posStart, posEnd, object)
 {
     // test if a ray collides with tiles from start to end
     // todo: a way to get the exact hit point, it must still register as inside the hit tile
-    posStart = posStart.floor();
-    posEnd = posEnd.floor();
-    const posDelta = posEnd.subtract(posStart);
+    const posDelta = (posEnd = posEnd.floor()).subtract(posStart = posStart.floor());
     const dx = abs(posDelta.x),  dy = -abs(posDelta.y);
     const sx = sign(posDelta.x), sy = sign(posDelta.y);
-    let e = dx + dy;
 
-    for (let x = posStart.x, y = posStart.y;;)
+    for (let x = posStart.x, y = posStart.y, e = dx + dy;;)
     {
         const tileData = getTileCollisionData(vec2(x,y));
         if (tileData && (object ? object.collideWithTileRaycast(tileData, new Vector2(x, y)) : tileData > 0))
@@ -2941,7 +2942,7 @@ constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1)
         // init tile data
         this.data = [];
         for (let j = this.size.area(); j--;)
-            this.data.push(new TileLayerData());
+            this.data.push(new TileLayerData);
     }
     
     /** Set data at a given position in the array 
@@ -2997,21 +2998,23 @@ constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1)
      *  @param {Boolean} [clear=0] - Should it clear the canvas before drawing */
     redrawStart(clear = 0)
     {
-        if (clear)
-        {
-            // 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, cameraPos, cameraScale];
+        this.savedRenderSettings = [mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale];
 
-        // use normal rendering system to render the tiles
+        // hack: use normal rendering system to render the tiles
         mainCanvas = this.canvas;
         mainContext = this.context;
         cameraPos = this.size.scale(.5);
         cameraScale = this.tileSize.x;
+
+        if (clear)
+        {
+            // clear and set size
+            mainCanvas.width  = this.size.x * this.tileSize.x;
+            mainCanvas.height = this.size.y * this.tileSize.y;
+        }
+
+        // begin a new render for the tile canvas
         enginePreRender();
     }
 
@@ -3023,7 +3026,7 @@ constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1)
         //debugSaveCanvas(this.canvas);
 
         // set stuff back to normal
-        [mainCanvas, mainContext, cameraPos, cameraScale] = this.savedRenderSettings;
+        [mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale] = this.savedRenderSettings;
     }
 
     /** Draw the tile at a given position
@@ -3264,7 +3267,7 @@ class ParticleEmitter extends EngineObject
         this.parent && super.update();
 
         // update emitter
-        if (!this.emitTime || this.getAliveTime() <= this.emitTime)
+        if (!this.emitTime | this.getAliveTime() <= this.emitTime)
         {
             // emit particles
             if (this.emitRate * particleEmitRateScale)
@@ -3288,7 +3291,7 @@ class ParticleEmitter extends EngineObject
         let pos = this.emitSize.x != undefined ? // check if vec2 was used for size
             (new Vector2(rand(-.5,.5), rand(-.5,.5)))
                 .multiply(this.emitSize).rotate(this.angle) // box emitter
-            : randInCircle(this.emitSize * .5);             // circle emitter
+            : randInCircle(this.emitSize/2);                // circle emitter
         let angle = rand(this.particleConeAngle, -this.particleConeAngle);
         if (!this.localSpace)
         {
@@ -3331,7 +3334,7 @@ class ParticleEmitter extends EngineObject
         particle.additive      = this.additive;
         particle.renderOrder   = this.renderOrder;
         particle.trailScale    = this.trailScale;
-        particle.mirror        = rand()<.5;
+        particle.mirror        = randInt(2);
         particle.localSpaceEmitter = this.localSpace && this;
 
         // setup callbacks for particles
@@ -3360,7 +3363,8 @@ class Particle extends EngineObject
      * @param {Vector2} [tileSize=tileSizeDefault] - Size of tile in source pixels
      * @param {Number}  [angle=0]                  - Angle to rotate the particle
      */
-    constructor(pos, tileIndex, tileSize, angle) { super(pos, new Vector2, tileIndex, tileSize, angle); }
+    constructor(pos, tileIndex, tileSize, angle)
+    { super(pos, new Vector2, tileIndex, tileSize, angle); }
 
     /** Render the particle, automatically called each frame, sorted by renderOrder */
     render()
@@ -3429,10 +3433,6 @@ class Particle extends EngineObject
  *  @memberof Medals */
 const medals = [];
 
-/** Set to stop medals from being unlockable (like if cheats are enabled)
- *  @memberof Medals */
-let medalsPreventUnlock;
-
 // Engine internal variables not exposed to documentation
 let medalsDisplayQueue = [], medalsSaveName, medalsDisplayTimeLast;
 
@@ -3480,9 +3480,8 @@ class Medal
         this.name = name;
         this.description = description;
         this.icon = icon;
-        this.image = new Image();
         if (src)
-            this.image.src = src;
+            (this.image = new Image).src = src;
     }
 
     /** Unlocks a medal if not already unlocked */
@@ -3495,10 +3494,7 @@ class Medal
         ASSERT(medalsSaveName); // save name must be set
         localStorage[this.storageKey()] = this.unlocked = 1;
         medalsDisplayQueue.push(this);
-
-        // save for newgrounds and OS13K
         newgrounds && newgrounds.unlockMedal(this.id);
-        localStorage['OS13kTrophy,' + this.icon + ',' + medalsSaveName + ',' + this.name] = this.description;
     }
 
     /** Render a medal
@@ -3507,27 +3503,26 @@ class Medal
     render(hidePercent=0)
     {
         const context = overlayContext;
-        const width = min(medalDisplayWidth, mainCanvas.width);
+        const width = min(medalDisplaySize.x, mainCanvas.width);
         const x = overlayCanvas.width - width;
-        const y = -medalDisplayHeight*hidePercent;
+        const y = -medalDisplaySize.y*hidePercent;
 
         // draw containing rect and clip to that region
         context.save();
         context.beginPath();
-        context.fillStyle = '#ddd'
-        context.fill(context.rect(x, y, width, medalDisplayHeight));
-        context.strokeStyle = '#000';
+        context.fillStyle = new Color(.9,.9,.9);
+        context.strokeStyle = new Color(0,0,0);
         context.lineWidth = 3;
+        context.fill(context.rect(x, y, width, medalDisplaySize.y));
         context.stroke();
         context.clip();
 
         // draw the icon and text
-        this.renderIcon(x+15+medalDisplayIconSize/2, y+medalDisplayHeight/2);
-        context.textAlign = 'left';
-        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);
+        this.renderIcon(vec2(x+15+medalDisplayIconSize/2, y+medalDisplaySize.y/2));
+        const pos = vec2(x+medalDisplayIconSize+30, y+28);
+        drawTextScreen(this.name, pos, 38, new Color(0,0,0), 0, 0, 'left');
+        pos.y += 32;
+        drawTextScreen(this.description, pos, 24, new Color(0,0,0), 0, 0, 'left');
         context.restore();
     }
 
@@ -3536,18 +3531,13 @@ class Medal
      *  @param {Number} y - Screen space Y position
      *  @param {Number} [size=medalDisplayIconSize] - Screen space size
      */
-    renderIcon(x, y, size=medalDisplayIconSize)
+    renderIcon(pos, size=medalDisplayIconSize)
     {
         // draw the image or icon
-        const context = overlayContext;
-        context.fillStyle = '#000';
-        context.textAlign = 'center';
-        context.textBaseline = 'middle';
-        context.font = size*.7 + 'px '+ fontDefault;
-        if (this.image.src)
-            context.drawImage(this.image, x-size/2, y-size/2, size, size);
+        if (this.image)
+            overlayContext.drawImage(this.image, pos.x-size/2, pos.y-size/2, size, size);
         else
-            context.fillText(this.icon, x, y); // show icon if there is no image
+            drawTextScreen(this.icon, pos, size*.7, new Color(0,0,0));
     }
  
     // Get local storage key used by the medal
@@ -3605,18 +3595,20 @@ class Newgrounds
     constructor(app_id, cipher)
     {
         ASSERT(!newgrounds && app_id);
+
         this.app_id = app_id;
         this.cipher = cipher;
         this.host = location ? location.hostname : '';
-
+        
         // create an instance of CryptoJS for encrypted calls
-        cipher && (this.cryptoJS = CryptoJS());
+        if (cipher)
+            this.cryptoJS = this.CryptoJS();
 
         // get session id from url search params
         const url = new URL(location.href);
-        this.session_id = url.searchParams.get('ngio_session_id') || 0;
+        this.session_id = url.searchParams.get('ngio_session_id');
 
-        if (this.session_id == 0)
+        if (!this.session_id)
             return; // only use newgrounds when logged in
 
         // get medals
@@ -3629,6 +3621,7 @@ 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'];
@@ -3713,13 +3706,16 @@ class Newgrounds
         debugMedals && console.log(xmlHttp.responseText);
         return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
     }
-}
 
-///////////////////////////////////////////////////////////////////////////////
-// Crypto-JS - https://github.com/brix/crypto-js [The MIT License (MIT)]
-// Copyright (c) 2009-2013 Jeff Mott  Copyright (c) 2013-2016 Evan Vosberg
+    CryptoJS()
+    {
+        ///////////////////////////////////////////////////////////////////////////////
+        // Crypto-JS - https://github.com/brix/crypto-js [The MIT License (MIT)]
+        // Copyright (c) 2009-2013 Jeff Mott  Copyright (c) 2013-2016 Evan Vosberg
 
-const CryptoJS=()=>eval(Function("[M='GBMGXz^oVYPPKKbB`agTXU|LxPc_ZBcMrZvCr~wyGfWrwk@ATqlqeTp^N?p{we}jIpEnB_sEr`l?YDkDhWhprc|Er|XETG?pTl`e}dIc[_N~}fzRycIfpW{HTolvoPB_FMe_eH~BTMx]yyOhv?biWPCGc]kABencBhgERHGf{OL`Dj`c^sh@canhy[secghiyotcdOWgO{tJIE^JtdGQRNSCrwKYciZOa]Y@tcRATYKzv|sXpboHcbCBf`}SKeXPFM|RiJsSNaIb]QPc[D]Jy_O^XkOVTZep`ONmntLL`Qz~UupHBX_Ia~WX]yTRJIxG`ioZ{fefLJFhdyYoyLPvqgH?b`[TMnTwwfzDXhfM?rKs^aFr|nyBdPmVHTtAjXoYUloEziWDCw_suyYT~lSMksI~ZNCS[Bex~j]Vz?kx`gdYSEMCsHpjbyxQvw|XxX_^nQYue{sBzVWQKYndtYQMWRef{bOHSfQhiNdtR{o?cUAHQAABThwHPT}F{VvFmgN`E@FiFYS`UJmpQNM`X|tPKHlccT}z}k{sACHL?Rt@MkWplxO`ASgh?hBsuuP|xD~LSH~KBlRs]t|l|_tQAroDRqWS^SEr[sYdPB}TAROtW{mIkE|dWOuLgLmJrucGLpebrAFKWjikTUzS|j}M}szasKOmrjy[?hpwnEfX[jGpLt@^v_eNwSQHNwtOtDgWD{rk|UgASs@mziIXrsHN_|hZuxXlPJOsA^^?QY^yGoCBx{ekLuZzRqQZdsNSx@ezDAn{XNj@fRXIwrDX?{ZQHwTEfu@GhxDOykqts|n{jOeZ@c`dvTY?e^]ATvWpb?SVyg]GC?SlzteilZJAL]mlhLjYZazY__qcVFYvt@|bIQnSno@OXyt]OulzkWqH`rYFWrwGs`v|~XeTsIssLrbmHZCYHiJrX}eEzSssH}]l]IhPQhPoQ}rCXLyhFIT[clhzYOvyHqigxmjz`phKUU^TPf[GRAIhNqSOdayFP@FmKmuIzMOeoqdpxyCOwCthcLq?n`L`tLIBboNn~uXeFcPE{C~mC`h]jUUUQe^`UqvzCutYCgct|SBrAeiYQW?X~KzCz}guXbsUw?pLsg@hDArw?KeJD[BN?GD@wgFWCiHq@Ypp_QKFixEKWqRp]oJFuVIEvjDcTFu~Zz]a{IcXhWuIdMQjJ]lwmGQ|]g~c]Hl]pl`Pd^?loIcsoNir_kikBYyg?NarXZEGYspt_vLBIoj}LI[uBFvm}tbqvC|xyR~a{kob|HlctZslTGtPDhBKsNsoZPuH`U`Fqg{gKnGSHVLJ^O`zmNgMn~{rsQuoymw^JY?iUBvw_~mMr|GrPHTERS[MiNpY[Mm{ggHpzRaJaoFomtdaQ_?xuTRm}@KjU~RtPsAdxa|uHmy}n^i||FVL[eQAPrWfLm^ndczgF~Nk~aplQvTUpHvnTya]kOenZlLAQIm{lPl@CCTchvCF[fI{^zPkeYZTiamoEcKmBMfZhk_j_~Fjp|wPVZlkh_nHu]@tP|hS@^G^PdsQ~f[RqgTDqezxNFcaO}HZhb|MMiNSYSAnQWCDJukT~e|OTgc}sf[cnr?fyzTa|EwEtRG|I~|IO}O]S|rp]CQ}}DWhSjC_|z|oY|FYl@WkCOoPuWuqr{fJu?Brs^_EBI[@_OCKs}?]O`jnDiXBvaIWhhMAQDNb{U`bqVR}oqVAvR@AZHEBY@depD]OLh`kf^UsHhzKT}CS}HQKy}Q~AeMydXPQztWSSzDnghULQgMAmbWIZ|lWWeEXrE^EeNoZApooEmrXe{NAnoDf`m}UNlRdqQ@jOc~HLOMWs]IDqJHYoMziEedGBPOxOb?[X`KxkFRg@`mgFYnP{hSaxwZfBQqTm}_?RSEaQga]w[vxc]hMne}VfSlqUeMo_iqmd`ilnJXnhdj^EEFifvZyxYFRf^VaqBhLyrGlk~qowqzHOBlOwtx?i{m~`n^G?Yxzxux}b{LSlx]dS~thO^lYE}bzKmUEzwW^{rPGhbEov[Plv??xtyKJshbG`KuO?hjBdS@Ru}iGpvFXJRrvOlrKN?`I_n_tplk}kgwSXuKylXbRQ]]?a|{xiT[li?k]CJpwy^o@ebyGQrPfF`aszGKp]baIx~H?ElETtFh]dz[OjGl@C?]VDhr}OE@V]wLTc[WErXacM{We`F|utKKjgllAxvsVYBZ@HcuMgLboFHVZmi}eIXAIFhS@A@FGRbjeoJWZ_NKd^oEH`qgy`q[Tq{x?LRP|GfBFFJV|fgZs`MLbpPYUdIV^]mD@FG]pYAT^A^RNCcXVrPsgk{jTrAIQPs_`mD}rOqAZA[}RETFz]WkXFTz_m{N@{W@_fPKZLT`@aIqf|L^Mb|crNqZ{BVsijzpGPEKQQZGlApDn`ruH}cvF|iXcNqK}cxe_U~HRnKV}sCYb`D~oGvwG[Ca|UaybXea~DdD~LiIbGRxJ_VGheI{ika}KC[OZJLn^IBkPrQj_EuoFwZ}DpoBRcK]Q}?EmTv~i_Tul{bky?Iit~tgS|o}JL_VYcCQdjeJ_MfaA`FgCgc[Ii|CBHwq~nbJeYTK{e`CNstKfTKPzw{jdhp|qsZyP_FcugxCFNpKitlR~vUrx^NrSVsSTaEgnxZTmKc`R|lGJeX}ccKLsQZQhsFkeFd|ckHIVTlGMg`~uPwuHRJS_CPuN_ogXe{Ba}dO_UBhuNXby|h?JlgBIqMKx^_u{molgL[W_iavNQuOq?ap]PGB`clAicnl@k~pA?MWHEZ{HuTLsCpOxxrKlBh]FyMjLdFl|nMIvTHyGAlPogqfZ?PlvlFJvYnDQd}R@uAhtJmDfe|iJqdkYr}r@mEjjIetDl_I`TELfoR|qTBu@Tic[BaXjP?dCS~MUK[HPRI}OUOwAaf|_}HZzrwXvbnNgltjTwkBE~MztTQhtRSWoQHajMoVyBBA`kdgK~h`o[J`dm~pm]tk@i`[F~F]DBlJKklrkR]SNw@{aG~Vhl`KINsQkOy?WhcqUMTGDOM_]bUjVd|Yh_KUCCgIJ|LDIGZCPls{RzbVWVLEhHvWBzKq|^N?DyJB|__aCUjoEgsARki}j@DQXS`RNU|DJ^a~d{sh_Iu{ONcUtSrGWW@cvUjefHHi}eSSGrNtO?cTPBShLqzwMVjWQQCCFB^culBjZHEK_{dO~Q`YhJYFn]jq~XSnG@[lQr]eKrjXpG~L^h~tDgEma^AUFThlaR{xyuP@[^VFwXSeUbVetufa@dX]CLyAnDV@Bs[DnpeghJw^?UIana}r_CKGDySoRudklbgio}kIDpA@McDoPK?iYcG?_zOmnWfJp}a[JLR[stXMo?_^Ng[whQlrDbrawZeSZ~SJstIObdDSfAA{MV}?gNunLOnbMv_~KFQUAjIMj^GkoGxuYtYbGDImEYiwEMyTpMxN_LSnSMdl{bg@dtAnAMvhDTBR_FxoQgANniRqxd`pWv@rFJ|mWNWmh[GMJz_Nq`BIN@KsjMPASXORcdHjf~rJfgZYe_uulzqM_KdPlMsuvU^YJuLtofPhGonVOQxCMuXliNvJIaoC?hSxcxKVVxWlNs^ENDvCtSmO~WxI[itnjs^RDvI@KqG}YekaSbTaB]ki]XM@[ZnDAP~@|BzLRgOzmjmPkRE@_sobkT|SszXK[rZN?F]Z_u}Yue^[BZgLtR}FHzWyxWEX^wXC]MJmiVbQuBzkgRcKGUhOvUc_bga|Tx`KEM`JWEgTpFYVeXLCm|mctZR@uKTDeUONPozBeIkrY`cz]]~WPGMUf`MNUGHDbxZuO{gmsKYkAGRPqjc|_FtblEOwy}dnwCHo]PJhN~JoteaJ?dmYZeB^Xd?X^pOKDbOMF@Ugg^hETLdhwlA}PL@_ur|o{VZosP?ntJ_kG][g{Zq`Tu]dzQlSWiKfnxDnk}KOzp~tdFstMobmy[oPYjyOtUzMWdjcNSUAjRuqhLS@AwB^{BFnqjCmmlk?jpn}TksS{KcKkDboXiwK]qMVjm~V`LgWhjS^nLGwfhAYrjDSBL_{cRus~{?xar_xqPlArrYFd?pHKdMEZzzjJpfC?Hv}mAuIDkyBxFpxhstTx`IO{rp}XGuQ]VtbHerlRc_LFGWK[XluFcNGUtDYMZny[M^nVKVeMllQI[xtvwQnXFlWYqxZZFp_|]^oWX[{pOMpxXxvkbyJA[DrPzwD|LW|QcV{Nw~U^dgguSpG]ClmO@j_TENIGjPWwgdVbHganhM?ema|dBaqla|WBd`poj~klxaasKxGG^xbWquAl~_lKWxUkDFagMnE{zHug{b`A~IYcQYBF_E}wiA}K@yxWHrZ{[d~|ARsYsjeNWzkMs~IOqqp[yzDE|WFrivsidTcnbHFRoW@XpAV`lv_zj?B~tPCppRjgbbDTALeFaOf?VcjnKTQMLyp{NwdylHCqmo?oelhjWuXj~}{fpuX`fra?GNkDiChYgVSh{R[BgF~eQa^WVz}ATI_CpY?g_diae]|ijH`TyNIF}|D_xpmBq_JpKih{Ba|sWzhnAoyraiDvk`h{qbBfsylBGmRH}DRPdryEsSaKS~tIaeF[s]I~xxHVrcNe@Jjxa@jlhZueLQqHh_]twVMqG_EGuwyab{nxOF?`HCle}nBZzlTQjkLmoXbXhOtBglFoMz?eqre`HiE@vNwBulglmQjj]DB@pPkPUgA^sjOAUNdSu_`oAzar?n?eMnw{{hYmslYi[TnlJD'",...']charCodeAtUinyxpf',"for(;e<10359;c[e++]=p-=128,A=A?p-A&&A:p==34&&p)for(p=1;p<128;y=f.map((n,x)=>(U=r[n]*2+1,U=Math.log(U/(h-U)),t-=a[x]*U,U/500)),t=~-h/(1+Math.exp(t))|1,i=o%h<t,o=o%h+(i?t:h-t)*(o>>17)-!i*t,f.map((n,x)=>(U=r[n]+=(i*h/2-r[n]<<13)/((C[n]+=C[n]<5)+1/20)>>13,a[x]+=y[x]*(i-t/h))),p=p*2+i)for(f='010202103203210431053105410642065206541'.split(t=0).map((n,x)=>(U=0,[...n].map((n,x)=>(U=U*997+(c[e-n]|0)|0)),h*32-1&U*997+p+!!A*129)*12+x);o<h*32;o=o*64|M.charCodeAt(d++)&63);for(C=String.fromCharCode(...c);r=/[\0-#?@\\\\~]/.exec(C);)with(C.split(r))C=join(shift());return C")([],[],1<<17,[0,0,0,0,0,0,0,0,0,0,0,0],new Uint16Array(51e6).fill(1<<15),new Uint8Array(51e6),0,0,0,0));
+        return eval(Function("[M='GBMGXz^oVYPPKKbB`agTXU|LxPc_ZBcMrZvCr~wyGfWrwk@ATqlqeTp^N?p{we}jIpEnB_sEr`l?YDkDhWhprc|Er|XETG?pTl`e}dIc[_N~}fzRycIfpW{HTolvoPB_FMe_eH~BTMx]yyOhv?biWPCGc]kABencBhgERHGf{OL`Dj`c^sh@canhy[secghiyotcdOWgO{tJIE^JtdGQRNSCrwKYciZOa]Y@tcRATYKzv|sXpboHcbCBf`}SKeXPFM|RiJsSNaIb]QPc[D]Jy_O^XkOVTZep`ONmntLL`Qz~UupHBX_Ia~WX]yTRJIxG`ioZ{fefLJFhdyYoyLPvqgH?b`[TMnTwwfzDXhfM?rKs^aFr|nyBdPmVHTtAjXoYUloEziWDCw_suyYT~lSMksI~ZNCS[Bex~j]Vz?kx`gdYSEMCsHpjbyxQvw|XxX_^nQYue{sBzVWQKYndtYQMWRef{bOHSfQhiNdtR{o?cUAHQAABThwHPT}F{VvFmgN`E@FiFYS`UJmpQNM`X|tPKHlccT}z}k{sACHL?Rt@MkWplxO`ASgh?hBsuuP|xD~LSH~KBlRs]t|l|_tQAroDRqWS^SEr[sYdPB}TAROtW{mIkE|dWOuLgLmJrucGLpebrAFKWjikTUzS|j}M}szasKOmrjy[?hpwnEfX[jGpLt@^v_eNwSQHNwtOtDgWD{rk|UgASs@mziIXrsHN_|hZuxXlPJOsA^^?QY^yGoCBx{ekLuZzRqQZdsNSx@ezDAn{XNj@fRXIwrDX?{ZQHwTEfu@GhxDOykqts|n{jOeZ@c`dvTY?e^]ATvWpb?SVyg]GC?SlzteilZJAL]mlhLjYZazY__qcVFYvt@|bIQnSno@OXyt]OulzkWqH`rYFWrwGs`v|~XeTsIssLrbmHZCYHiJrX}eEzSssH}]l]IhPQhPoQ}rCXLyhFIT[clhzYOvyHqigxmjz`phKUU^TPf[GRAIhNqSOdayFP@FmKmuIzMOeoqdpxyCOwCthcLq?n`L`tLIBboNn~uXeFcPE{C~mC`h]jUUUQe^`UqvzCutYCgct|SBrAeiYQW?X~KzCz}guXbsUw?pLsg@hDArw?KeJD[BN?GD@wgFWCiHq@Ypp_QKFixEKWqRp]oJFuVIEvjDcTFu~Zz]a{IcXhWuIdMQjJ]lwmGQ|]g~c]Hl]pl`Pd^?loIcsoNir_kikBYyg?NarXZEGYspt_vLBIoj}LI[uBFvm}tbqvC|xyR~a{kob|HlctZslTGtPDhBKsNsoZPuH`U`Fqg{gKnGSHVLJ^O`zmNgMn~{rsQuoymw^JY?iUBvw_~mMr|GrPHTERS[MiNpY[Mm{ggHpzRaJaoFomtdaQ_?xuTRm}@KjU~RtPsAdxa|uHmy}n^i||FVL[eQAPrWfLm^ndczgF~Nk~aplQvTUpHvnTya]kOenZlLAQIm{lPl@CCTchvCF[fI{^zPkeYZTiamoEcKmBMfZhk_j_~Fjp|wPVZlkh_nHu]@tP|hS@^G^PdsQ~f[RqgTDqezxNFcaO}HZhb|MMiNSYSAnQWCDJukT~e|OTgc}sf[cnr?fyzTa|EwEtRG|I~|IO}O]S|rp]CQ}}DWhSjC_|z|oY|FYl@WkCOoPuWuqr{fJu?Brs^_EBI[@_OCKs}?]O`jnDiXBvaIWhhMAQDNb{U`bqVR}oqVAvR@AZHEBY@depD]OLh`kf^UsHhzKT}CS}HQKy}Q~AeMydXPQztWSSzDnghULQgMAmbWIZ|lWWeEXrE^EeNoZApooEmrXe{NAnoDf`m}UNlRdqQ@jOc~HLOMWs]IDqJHYoMziEedGBPOxOb?[X`KxkFRg@`mgFYnP{hSaxwZfBQqTm}_?RSEaQga]w[vxc]hMne}VfSlqUeMo_iqmd`ilnJXnhdj^EEFifvZyxYFRf^VaqBhLyrGlk~qowqzHOBlOwtx?i{m~`n^G?Yxzxux}b{LSlx]dS~thO^lYE}bzKmUEzwW^{rPGhbEov[Plv??xtyKJshbG`KuO?hjBdS@Ru}iGpvFXJRrvOlrKN?`I_n_tplk}kgwSXuKylXbRQ]]?a|{xiT[li?k]CJpwy^o@ebyGQrPfF`aszGKp]baIx~H?ElETtFh]dz[OjGl@C?]VDhr}OE@V]wLTc[WErXacM{We`F|utKKjgllAxvsVYBZ@HcuMgLboFHVZmi}eIXAIFhS@A@FGRbjeoJWZ_NKd^oEH`qgy`q[Tq{x?LRP|GfBFFJV|fgZs`MLbpPYUdIV^]mD@FG]pYAT^A^RNCcXVrPsgk{jTrAIQPs_`mD}rOqAZA[}RETFz]WkXFTz_m{N@{W@_fPKZLT`@aIqf|L^Mb|crNqZ{BVsijzpGPEKQQZGlApDn`ruH}cvF|iXcNqK}cxe_U~HRnKV}sCYb`D~oGvwG[Ca|UaybXea~DdD~LiIbGRxJ_VGheI{ika}KC[OZJLn^IBkPrQj_EuoFwZ}DpoBRcK]Q}?EmTv~i_Tul{bky?Iit~tgS|o}JL_VYcCQdjeJ_MfaA`FgCgc[Ii|CBHwq~nbJeYTK{e`CNstKfTKPzw{jdhp|qsZyP_FcugxCFNpKitlR~vUrx^NrSVsSTaEgnxZTmKc`R|lGJeX}ccKLsQZQhsFkeFd|ckHIVTlGMg`~uPwuHRJS_CPuN_ogXe{Ba}dO_UBhuNXby|h?JlgBIqMKx^_u{molgL[W_iavNQuOq?ap]PGB`clAicnl@k~pA?MWHEZ{HuTLsCpOxxrKlBh]FyMjLdFl|nMIvTHyGAlPogqfZ?PlvlFJvYnDQd}R@uAhtJmDfe|iJqdkYr}r@mEjjIetDl_I`TELfoR|qTBu@Tic[BaXjP?dCS~MUK[HPRI}OUOwAaf|_}HZzrwXvbnNgltjTwkBE~MztTQhtRSWoQHajMoVyBBA`kdgK~h`o[J`dm~pm]tk@i`[F~F]DBlJKklrkR]SNw@{aG~Vhl`KINsQkOy?WhcqUMTGDOM_]bUjVd|Yh_KUCCgIJ|LDIGZCPls{RzbVWVLEhHvWBzKq|^N?DyJB|__aCUjoEgsARki}j@DQXS`RNU|DJ^a~d{sh_Iu{ONcUtSrGWW@cvUjefHHi}eSSGrNtO?cTPBShLqzwMVjWQQCCFB^culBjZHEK_{dO~Q`YhJYFn]jq~XSnG@[lQr]eKrjXpG~L^h~tDgEma^AUFThlaR{xyuP@[^VFwXSeUbVetufa@dX]CLyAnDV@Bs[DnpeghJw^?UIana}r_CKGDySoRudklbgio}kIDpA@McDoPK?iYcG?_zOmnWfJp}a[JLR[stXMo?_^Ng[whQlrDbrawZeSZ~SJstIObdDSfAA{MV}?gNunLOnbMv_~KFQUAjIMj^GkoGxuYtYbGDImEYiwEMyTpMxN_LSnSMdl{bg@dtAnAMvhDTBR_FxoQgANniRqxd`pWv@rFJ|mWNWmh[GMJz_Nq`BIN@KsjMPASXORcdHjf~rJfgZYe_uulzqM_KdPlMsuvU^YJuLtofPhGonVOQxCMuXliNvJIaoC?hSxcxKVVxWlNs^ENDvCtSmO~WxI[itnjs^RDvI@KqG}YekaSbTaB]ki]XM@[ZnDAP~@|BzLRgOzmjmPkRE@_sobkT|SszXK[rZN?F]Z_u}Yue^[BZgLtR}FHzWyxWEX^wXC]MJmiVbQuBzkgRcKGUhOvUc_bga|Tx`KEM`JWEgTpFYVeXLCm|mctZR@uKTDeUONPozBeIkrY`cz]]~WPGMUf`MNUGHDbxZuO{gmsKYkAGRPqjc|_FtblEOwy}dnwCHo]PJhN~JoteaJ?dmYZeB^Xd?X^pOKDbOMF@Ugg^hETLdhwlA}PL@_ur|o{VZosP?ntJ_kG][g{Zq`Tu]dzQlSWiKfnxDnk}KOzp~tdFstMobmy[oPYjyOtUzMWdjcNSUAjRuqhLS@AwB^{BFnqjCmmlk?jpn}TksS{KcKkDboXiwK]qMVjm~V`LgWhjS^nLGwfhAYrjDSBL_{cRus~{?xar_xqPlArrYFd?pHKdMEZzzjJpfC?Hv}mAuIDkyBxFpxhstTx`IO{rp}XGuQ]VtbHerlRc_LFGWK[XluFcNGUtDYMZny[M^nVKVeMllQI[xtvwQnXFlWYqxZZFp_|]^oWX[{pOMpxXxvkbyJA[DrPzwD|LW|QcV{Nw~U^dgguSpG]ClmO@j_TENIGjPWwgdVbHganhM?ema|dBaqla|WBd`poj~klxaasKxGG^xbWquAl~_lKWxUkDFagMnE{zHug{b`A~IYcQYBF_E}wiA}K@yxWHrZ{[d~|ARsYsjeNWzkMs~IOqqp[yzDE|WFrivsidTcnbHFRoW@XpAV`lv_zj?B~tPCppRjgbbDTALeFaOf?VcjnKTQMLyp{NwdylHCqmo?oelhjWuXj~}{fpuX`fra?GNkDiChYgVSh{R[BgF~eQa^WVz}ATI_CpY?g_diae]|ijH`TyNIF}|D_xpmBq_JpKih{Ba|sWzhnAoyraiDvk`h{qbBfsylBGmRH}DRPdryEsSaKS~tIaeF[s]I~xxHVrcNe@Jjxa@jlhZueLQqHh_]twVMqG_EGuwyab{nxOF?`HCle}nBZzlTQjkLmoXbXhOtBglFoMz?eqre`HiE@vNwBulglmQjj]DB@pPkPUgA^sjOAUNdSu_`oAzar?n?eMnw{{hYmslYi[TnlJD'",...']charCodeAtUinyxpf',"for(;e<10359;c[e++]=p-=128,A=A?p-A&&A:p==34&&p)for(p=1;p<128;y=f.map((n,x)=>(U=r[n]*2+1,U=Math.log(U/(h-U)),t-=a[x]*U,U/500)),t=~-h/(1+Math.exp(t))|1,i=o%h<t,o=o%h+(i?t:h-t)*(o>>17)-!i*t,f.map((n,x)=>(U=r[n]+=(i*h/2-r[n]<<13)/((C[n]+=C[n]<5)+1/20)>>13,a[x]+=y[x]*(i-t/h))),p=p*2+i)for(f='010202103203210431053105410642065206541'.split(t=0).map((n,x)=>(U=0,[...n].map((n,x)=>(U=U*997+(c[e-n]|0)|0)),h*32-1&U*997+p+!!A*129)*12+x);o<h*32;o=o*64|M.charCodeAt(d++)&63);for(C=String.fromCharCode(...c);r=/[\0-#?@\\\\~]/.exec(C);)with(C.split(r))C=join(shift());return C")([],[],1<<17,[0,0,0,0,0,0,0,0,0,0,0,0],new Uint16Array(51e6).fill(1<<15),new Uint8Array(51e6),0,0,0,0));
+    }
+}
 /** 
  * LittleJS WebGL Interface
  * <br> - All webgl used by the engine is wrapped up here
@@ -3749,7 +3745,7 @@ let glContext;
 let glTileTexture;
 
 // WebGL internal variables not exposed to documentation
-let glActiveTexture, glShader, glArrayBuffer, glVertexData, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
+let glActiveTexture, glShader, glArrayBuffer, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -3770,27 +3766,25 @@ function glInit()
         '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
+        'varying vec4 v,d,e;'+        // return uv, 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
+        'v=vec4(t,p);d=c;e=a;'+       // pass stuff to fragment shader
         '}'                           // 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
+        'precision highp float;'+              // use highp for better accuracy
+        'varying vec4 v,d,e;'+                 // uv, color, additiveColor
+        'uniform sampler2D s;'+                // texture
+        'void main(){'+                        // shader entry point
+        'gl_FragColor=texture2D(s,v.xy)*d+e;'+ // modulate texture by color plus additive
+        '}'                                    // end of shader
     );
 
     // init buffers
-    glVertexData = new ArrayBuffer(gl_MAX_BATCH * gl_VERTICES_PER_QUAD * gl_VERTEX_BYTE_STRIDE);
+    const vertexData = new ArrayBuffer(gl_VERTEX_BUFFER_SIZE);
     glArrayBuffer = glContext.createBuffer();
-    glPositionData = new Float32Array(glVertexData);
-    glColorData = new Uint32Array(glVertexData);
+    glPositionData = new Float32Array(vertexData);
+    glColorData = new Uint32Array(vertexData);
     glBatchCount = 0;
 }
 
@@ -3865,18 +3859,19 @@ function glCreateTexture(image)
     image && image.width && glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
         
     // use point filtering for pixelated rendering
-    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, cavasPixelated ? gl_NEAREST : gl_LINEAR);
-    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, cavasPixelated ? gl_NEAREST : gl_LINEAR);
+    const filter = cavasPixelated ? gl_NEAREST : gl_LINEAR;
+    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, filter);
+    glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MAG_FILTER, filter);
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_S, gl_CLAMP_TO_EDGE);
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_WRAP_T, gl_CLAMP_TO_EDGE);
     return texture;
 }
 
 // called automatically by engine before render
-function glPreRender(width, height, cameraX, cameraY, cameraScale)
+function glPreRender()
 {
     // clear and set to same size as main canvas
-    glContext.viewport(0, 0, glCanvas.width = width, glCanvas.height = height);
+    glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
     glContext.clear(gl_COLOR_BUFFER_BIT);
 
     // set up the shader
@@ -3884,7 +3879,7 @@ function glPreRender(width, height, cameraX, cameraY, cameraScale)
     glContext.activeTexture(gl_TEXTURE0);
     glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = glTileTexture);
     glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
-    glContext.bufferData(gl_ARRAY_BUFFER, glVertexData.byteLength, gl_DYNAMIC_DRAW);
+    glContext.bufferData(gl_ARRAY_BUFFER, gl_VERTEX_BUFFER_SIZE, gl_DYNAMIC_DRAW);
     glSetBlendMode();
     
     // set vertex attributes
@@ -3902,14 +3897,14 @@ function glPreRender(width, height, cameraX, cameraY, cameraScale)
     initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
 
     // build the transform matrix
-    const sx = 2 * cameraScale / width;
-    const sy = 2 * cameraScale / height;
+    const sx = 2 * cameraScale / mainCanvas.width;
+    const sy = 2 * cameraScale / mainCanvas.height;
     glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), 0,
         new Float32Array([
             sx, 0, 0, 0,
             0, sy, 0, 0,
             1, 1, -1, 1,
-            -1-sx*cameraX, -1-sy*cameraY, 0, 0
+            -1-sx*cameraPos.x, -1-sy*cameraPos.y, 0, 0
         ])
     );
 }
@@ -3957,10 +3952,10 @@ function glCopyToContext(context, forceDraw)
  *  @param uv0Y
  *  @param uv1X
  *  @param uv1Y
- *  @param [rgba=0xffffffff]
+ *  @param rgba
  *  @param [rgbaAdditive=0]
  *  @memberof WebGL */
-function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=0xffffffff, rgbaAdditive=0)
+function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdditive=0)
 {
     // flush if there is no room for more verts or if different blend mode
     if (glBatchCount == gl_MAX_BATCH || glBatchAdditive != glAdditive)
@@ -3971,43 +3966,16 @@ function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=0xffffff
     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++] = x - cx - sy;
-    glPositionData[offset++] = y - cy + sx;
-    glPositionData[offset++] = uv0X; glPositionData[offset++] = uv1Y;
-    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
-    
-    // vertex 1
-    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++] = x - cx + sy;
-    glPositionData[offset++] = y + cy + sx;
-    glPositionData[offset++] = uv0X; glPositionData[offset++] = uv0Y;
-    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
-    
-    // vertex 0
-    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++] = x + cx - sy;
-    glPositionData[offset++] = y - cy - sx;
-    glPositionData[offset++] = uv1X; glPositionData[offset++] = uv1Y;
-    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
-
-    // vertex 1
-    glPositionData[offset++] = x + cx + sy;
-    glPositionData[offset++] = y + cy - sx;
-    glPositionData[offset++] = uv1X; glPositionData[offset++] = uv0Y;
-    glColorData[offset++]    = rgba; glColorData[offset++]    = rgbaAdditive;
+    for(let i=6, offset = glBatchCount++ * gl_VERTICES_PER_QUAD * gl_INDICIES_PER_VERT; i--;)
+    {
+        const a = i-4&&i>1, b = i-5&&i-2&&i-1;
+        glPositionData[offset++] = x + (a?-cx:cx) + (b?sy:-sy);
+        glPositionData[offset++] = y + (b?cy:-cy) + (a?sx:-sx);
+        glPositionData[offset++] = a ? uv0X : uv1X; 
+        glPositionData[offset++] = b ? uv0Y : uv1Y;
+        glColorData[offset++] = rgba; 
+        glColorData[offset++] = rgbaAdditive;
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -4059,14 +4027,13 @@ function glRenderPostProcess()
         return;
     
     // prepare to render post process shader
-    const width = mainCanvas.width, height = mainCanvas.height;
     if (glEnable)
     {
         glFlush(); // clear out the buffer
         mainContext.drawImage(glCanvas, 0, 0); // copy to the main canvas
     }
-    else
-        glContext.viewport(0, 0, glCanvas.width = width, glCanvas.height = height); // set viewport
+    else // set viewport
+        glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
 
     // setup shader program to draw one triangle
     glContext.useProgram(glPostShader);
@@ -4090,7 +4057,7 @@ function glRenderPostProcess()
     const uniformLocation = (name)=>glContext.getUniformLocation(glPostShader, name);
     glContext.uniform1i(uniformLocation('iChannel0'), 0);
     glContext.uniform1f(uniformLocation('iTime'), time);
-    glContext.uniform3f(uniformLocation('iResolution'), width, height, 1);
+    glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
     glContext.drawArrays(gl_TRIANGLES, 0, 3);
 }
 
@@ -4130,4 +4097,5 @@ gl_UNPACK_FLIP_Y_WEBGL = 37440,
 gl_VERTICES_PER_QUAD = 6,
 gl_INDICIES_PER_VERT = 6,
 gl_MAX_BATCH = 1<<16,
-gl_VERTEX_BYTE_STRIDE = (4 * 2) * 2 + (4) * 2; // vec2 * 2 + (char * 4) * 2
+gl_VERTEX_BYTE_STRIDE = (4 * 2) * 2 + (4) * 2, // vec2 * 2 + (char * 4) * 2
+gl_VERTEX_BUFFER_SIZE = gl_MAX_BATCH * gl_VERTICES_PER_QUAD * gl_VERTEX_BYTE_STRIDE;