littlejsengine 1.7.13 → 1.8.1

package/build/littlejs.release.js

@@ -1,12 +1,14 @@
 // LittleJS - MIT License - Copyright 2021 Frank Force
 
+'use strict';
+
 /** 
  * LittleJS - Release Mode
  * - This file is used for release builds in place of engineDebug.js
  * - Debug functionality is disabled to reduce size and increase performance
  */
 
-'use strict';
+
 
 let showWatermark = 0;
 let debugKeyCode = 0;
@@ -41,7 +43,7 @@ function debugSaveCanvas (){}
  * @namespace Utilities
  */
 
-'use strict';
+
 
 /** A shortcut to get Math.PI
  *  @type {Number}
@@ -238,10 +240,10 @@ function randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear)
  * - Can be used to create a deterministic random number sequence
  * @example
  * let r = new RandomGenerator(123); // random number generator with seed 123
- * let a = r.rand();                 // random value between 0 and 1
- * let b = r.randInt(10);            // random integer between 0 and 9
+ * let a = r.float();                // random value between 0 and 1
+ * let b = r.int(10);                // random integer between 0 and 9
  * r.seed = 123;                     // reset the seed
- * let c = r.rand();                 // the same value as a
+ * let c = r.float();                // the same value as a
  */
 class RandomGenerator
 {
@@ -270,18 +272,18 @@ class RandomGenerator
     *  @param {Number} valueA
     *  @param {Number} [valueB=0]
     *  @return {Number} */
-    int(valueA, valueB=0) { return Math.floor(this.rand(valueA, valueB)); }
+    int(valueA, valueB=0) { return Math.floor(this.float(valueA, valueB)); }
 
     /** Randomly returns either -1 or 1 deterministically
     *  @return {Number} */
-    sign() { return this.randInt(2) * 2 - 1; }
+    sign() { return this.int(2) * 2 - 1; }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 
 /** 
  * Create a 2d vector, can take another Vector2 to copy, 2 scalars, or 1 scalar
- * @param {Number} [x=0]
+ * @param {(Number|Vector2)} [x=0]
  * @param {Number} [y=0]
  * @return {Vector2}
  * @example
@@ -696,7 +698,7 @@ class Timer
  * @namespace Settings
  */
 
-'use strict';
+
 
 ///////////////////////////////////////////////////////////////////////////////
 // Camera settings
@@ -765,7 +767,7 @@ let glOverlay = 1;
  *  @memberof Settings */
 let tileSizeDefault = vec2(16);
 
-/** Prevent tile bleeding from neighbors in pixels
+/** How many pixels smaller to draw tiles to prevent bleeding from neighbors
  *  @type {Number}
  *  @default
  *  @memberof Settings */
@@ -939,12 +941,205 @@ let medalDisplayIconSize = 50;
  *  @type {Boolean}
  *  @default 0
  *  @memberof Settings */
-let medalsPreventUnlock;
+let medalsPreventUnlock;
+
+///////////////////////////////////////////////////////////////////////////////
+// Setters for global variables
+
+/** Set position of camera in world space
+ *  @param {Vector2} pos
+ *  @memberof Settings */
+function setCameraPos(pos) { cameraPos = pos; }
+
+/** Set scale of camera in world space
+ *  @param {Number} scale
+ *  @memberof Settings */
+function setCameraScale(scale) { cameraScale = scale; }
+
+/** Set max size of the canvas
+ *  @param {Vector2} size
+ *  @memberof Settings */
+function setCanvasMaxSize(size) { canvasMaxSize = size; }
+
+/** Set fixed size of the canvas
+ *  @param {Vector2} size
+ *  @memberof Settings */
+function setCanvasFixedSize(size) { canvasFixedSize = size; }
+
+/** Disables anti aliasing for pixel art if true
+ *  @param {Boolean} pixelated
+ *  @memberof Settings */
+function setCanvasPixelated(pixelated) { canvasPixelated = pixelated; }
+
+/** Set default font used for text rendering
+ *  @param {String} font
+ *  @memberof Settings */
+function setFontDefault(font) { fontDefault = font; }
+
+/** Set if webgl rendering is enabled
+ *  @param {Boolean} enable
+ *  @memberof Settings */
+function setGlEnable(enable) { glEnable = enable; }
+
+/** Set to not composite the WebGL canvas
+ *  @param {Boolean} overlay
+ *  @memberof Settings */
+function setGlOverlay(overlay) { glOverlay = overlay; }
+
+/** Set default size of tiles in pixels
+ *  @param {Vector2} size
+ *  @memberof Settings */
+function setTileSizeDefault(size) { tileSizeDefault = size; }
+
+/** Set to prevent tile bleeding from neighbors in pixels
+ *  @param {Number} scale
+ *  @memberof Settings */
+function setTileFixBleedScale(scale) { tileFixBleedScale = scale; }
+
+/** Set if collisions between objects are enabled
+ *  @param {Boolean} enable
+ *  @memberof Settings */
+function setEnablePhysicsSolver(enable) { enablePhysicsSolver = enable; }
+
+/** Set default object mass for collison calcuations
+ *  @param {Number} mass
+ *  @memberof Settings */
+function setObjectDefaultMass(mass) { objectDefaultMass = mass; }
+
+/** Set how much to slow velocity by each frame
+ *  @param {Number} damping
+ *  @memberof Settings */
+function setObjectDefaultDamping(damp) { objectDefaultDamping = damp; }
+
+/** Set how much to slow angular velocity each frame
+ *  @param {Number} damping
+ *  @memberof Settings */
+function setObjectDefaultAngleDamping(damp) { objectDefaultAngleDamping = damp; }
+
+/** Set how much to bounce when a collision occur
+ *  @param {Number} elasticity
+ *  @memberof Settings */
+function setObjectDefaultElasticity(elasticity) { objectDefaultElasticity = elasticity; }
+
+/** Set how much to slow when touching
+ *  @param {Number} friction
+ *  @memberof Settings */
+function setObjectDefaultFriction(friction) { objectDefaultFriction = friction; }
+
+/** Set max speed to avoid fast objects missing collisions
+ *  @param {Number} speed
+ *  @memberof Settings */
+function setObjectMaxSpeed(speed) { objectMaxSpeed = speed; }
+
+/** Set how much gravity to apply to objects along the Y axis
+ *  @param {Number} gravity
+ *  @memberof Settings */
+function setGravity(g) { gravity = g; }
+
+/** Set to scales emit rate of particles
+ *  @param {Number} scale
+ *  @memberof Settings */
+function setParticleEmitRateScale(scale) { particleEmitRateScale = scale; }
+
+/** Set if gamepads are enabled
+ *  @param {Boolean} enable
+ *  @memberof Settings */
+function setGamepadsEnable(enable) { gamepadsEnable = enable; }
+
+/** Set if the dpad input is also routed to the left analog stick
+ *  @param {Boolean} enable
+ *  @memberof Settings */
+function setGamepadDirectionEmulateStick(enable) { gamepadDirectionEmulateStick = enable; }
+
+/** Set if true the WASD keys are also routed to the direction keys
+ *  @param {Boolean} enable
+ *  @memberof Settings */
+function setInputWASDEmulateDirection(enable) { inputWASDEmulateDirection = enable; }
+
+/** Set if touch gamepad should appear on mobile devices
+ *  @param {Boolean} enable
+ *  @memberof Settings */
+function setTouchGamepadEnable(enable) { touchGamepadEnable = enable; }
+
+/** Set if touch gamepad should be analog stick or 8 way dpad
+ *  @param {Boolean} analog
+ *  @memberof Settings */
+function setTouchGamepadAnalog(analog) { touchGamepadAnalog = analog; }
+
+/** Set size of virutal gamepad for touch devices in pixels
+ *  @param {Number} size
+ *  @memberof Settings */
+function setTouchGamepadSize(size) { touchGamepadSize = size; }
+
+/** Set transparency of touch gamepad overlay
+ *  @param {Number} alpha
+ *  @memberof Settings */
+function setTouchGamepadAlpha(alpha) { touchGamepadAlpha = alpha; }
+
+/** Set to allow vibration hardware if it exists
+ *  @param {Boolean} enable
+ *  @memberof Settings */
+function setVibrateEnable(enable) { vibrateEnable = enable; }
+
+/** Set to disable all audio code
+ *  @param {Boolean} enable
+ *  @memberof Settings */
+function setSoundEnable(enable) { soundEnable = enable; }
+
+/** Set volume scale to apply to all sound, music and speech
+ *  @param {Number} volume
+ *  @memberof Settings */
+function setSoundVolume(volume) { soundVolume = volume; }
+
+/** Set default range where sound no longer plays
+ *  @param {Number} range
+ *  @memberof Settings */
+function setSoundDefaultRange(range) { soundDefaultRange = range; }
+
+/** Set default range percent to start tapering off sound
+ *  @param {Number} taper
+ *  @memberof Settings */
+function setSoundDefaultTaper(taper) { soundDefaultTaper = taper; }
+
+/** Set how long to show medals for in seconds
+ *  @param {Number} time
+ *  @memberof Settings */
+function setMedalDisplayTime(time) { medalDisplayTime = time; }
+
+/** Set how quickly to slide on/off medals in seconds
+ *  @param {Number} time
+ *  @memberof Settings */
+function setMedalDisplaySlideTime(time) { medalDisplaySlideTime = time; }
+
+/** Set size of medal display
+ *  @param {Vector2} size
+ *  @memberof Settings */
+function setMedalDisplaySize(size) { medalDisplaySize = size; }
+
+/** Set size of icon in medal display
+ *  @param {Number} size
+ *  @memberof Settings */
+function setMedalDisplayIconSize(size) { medalDisplayIconSize = size; }
+
+/** Set to stop medals from being unlockable
+ *  @param {Boolean} preventUnlock
+ *  @memberof Settings */
+function setMedalsPreventUnlock(preventUnlock) { medalsPreventUnlock = preventUnlock; }
+
+/** Set if watermark with FPS should be shown
+ *  @param {Boolean} show
+ *  @memberof Debug */
+function setShowWatermark(show) { showWatermark = show; }
+
+/** Set key code used to toggle debug mode, Esc by default
+ *  @param {Number} key
+ *  @memberof Debug */
+function setDebugKey(key) { debugKey = key; }
 /** 
  * LittleJS Object System
  */
 
-'use strict';
+
 
 /** 
  * LittleJS Object Base Object Class
@@ -974,18 +1169,19 @@ let medalsPreventUnlock;
 class EngineObject
 {
     /** Create an engine object and adds it to the list of objects
-     *  @param {Vector2} [position=Vector2()]        - World space position of the object
-     *  @param {Vector2} [size=Vector2(1,1)]         - World space size of the object
-     *  @param {Number}  [tileIndex=-1]              - Tile to use to render object (-1 is untextured)
-     *  @param {Vector2} [tileSize=tileSizeDefault]  - Size of tile in source pixels
-     *  @param {Number}  [angle=0]                   - Angle the object is rotated by
-     *  @param {Color}   [color=Color()]             - Color to apply to tile when rendered
-     *  @param {Number}  [renderOrder=0]             - Objects sorted by renderOrder before being rendered
+     *  @param {Vector2} [pos=Vector2()]            - World space position of the object
+     *  @param {Vector2} [size=Vector2(1,1)]        - World space size of the object
+     *  @param {TileInfo} [tileInfo]                - Tile info to render object (undefined is untextured)
+     *  @param {Number}  [angle=0]                  - Angle the object is rotated by
+     *  @param {Color}   [color=Color()]            - Color to apply to tile when rendered
+     *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
      */
-    constructor(pos=vec2(), size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, angle=0, color, renderOrder=0)
+    constructor(pos=vec2(), size=vec2(1), tileInfo, angle=0, color, renderOrder=0)
     {
         // set passed in params
         ASSERT(isVector2(pos) && isVector2(size)); // ensure pos and size are vec2s
+        ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
+        // to fix old calls, replace with tile(tileIndex, tileSize)
 
         /** @property {Vector2} - World space position of the object */
         this.pos = pos.copy();
@@ -993,10 +1189,8 @@ class EngineObject
         this.size = size;
         /** @property {Vector2} - Size of object used for drawing, uses size if not set */
         this.drawSize;
-        /** @property {Number}  - Tile to use to render object (-1 is untextured) */
-        this.tileIndex = tileIndex;
-        /** @property {Vector2} - Size of tile in source pixels */
-        this.tileSize = tileSize;
+        /** @property {TileInfo} - Tile info to render object (undefined is untextured) */
+        this.tileInfo = tileInfo;
         /** @property {Number}  - Angle to rotate the object */
         this.angle = angle;
         /** @property {Color}   - Color to apply when rendered */
@@ -1212,7 +1406,7 @@ class EngineObject
     render()
     {
         // default object render
-        drawTile(this.pos, this.drawSize || this.size, this.tileIndex, this.tileSize, this.color, this.angle, this.mirror, this.additiveColor);
+        drawTile(this.pos, this.drawSize || this.size, this.tileInfo, this.color, this.angle, this.mirror, this.additiveColor);
     }
     
     /** Destroy this object, destroy it's children, detach it's parent, and mark it for removal */
@@ -1340,7 +1534,7 @@ class EngineObject
  * @namespace Draw
  */
 
-'use strict';
+
 
 /** The primary 2D canvas visible to the user
  *  @type {HTMLCanvasElement}
@@ -1367,13 +1561,109 @@ let overlayContext;
  *  @memberof Draw */
 let mainCanvasSize = vec2();
 
-/** Tile sheet for batch rendering system
- *  @type {CanvasImageSource}
+/** Array containing texture info for batch rendering system
+ *  @type {Array}
  *  @memberof Draw */
-const tileImage = new Image;
+let textureInfos = [];
 
 // Engine internal variables not exposed to documentation
-let tileImageSize, tileImageFixBleed, drawCount;
+let drawCount;
+
+///////////////////////////////////////////////////////////////////////////////
+
+/** 
+ * Create a tile info object
+ * - This can take vecs or floats for easier use and conversion
+ * - If an index is passed in, the tile size and index will determine the position
+ * @param {(Number|Vector2)} [pos=Vector2()]         - Top left corner of tile in pixels or index
+ * @param {(Number|Vector2)} [size=tileSizeDefault]  - Size of tile in pixels
+ * @param {Number} [textureIndex=0]                  - Texture index to use
+ * @return {TileInfo}
+ * @example
+ * tile(2)                       // a tile at index 2 using the default tile size of 16
+ * tile(5, 8)                    // a tile at index 5 using a tile size of 8
+ * tile(1, 16, 3)                // a tile at index 1 of size 16 on texture 3
+ * tile(vec2(4,8), vec2(30,10))  // a tile at pixel location (4,8) with a size of (30,10)
+ * @memberof Draw
+ */
+function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0)
+{
+    // if size is a number, make it a vector
+    if (size.x == undefined)
+    {
+        ASSERT(size > 0);
+        size = vec2(size);
+    }
+
+    // if pos is a number, use it as a tile index
+    if (pos.x == undefined)
+    {
+        const textureInfo = textureInfos[textureIndex];
+        if (textureInfo)
+        {
+            const cols = textureInfo.size.x / size.x |0;
+            pos = vec2((pos%cols)*size.x, (pos/cols|0)*size.y);
+        }
+        else
+            pos = vec2();
+    }
+
+    // return a tile info object
+    return new TileInfo(pos, size, textureIndex); 
+}
+
+/** 
+ * Tile Info - Stores info about how to draw a tile
+ */
+class TileInfo
+{
+    /** Create a tile info object
+     *  @param {Vector2} [pos=Vector2()]        - Top left corner of tile in pixels
+     *  @param {Vector2} [size=tileSizeDefault] - Size of tile in pixels
+     *  @param {Number}  [textureIndex=0]       - Texture index to use
+     */
+    constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0)
+    {
+        /** @property {Vector2} - Top left corner of tile in pixels */
+        this.pos = pos;
+        /** @property {Vector2} - Size of tile in pixels */
+        this.size = size;
+        /** @property {Number} - Texture index to use */
+        this.textureIndex = textureIndex;
+    }
+
+    /** Returns an offset copy of this tile, useful for animation
+    *  @param {Vector2} offset - Offset to apply in pixels
+    *  @return {TileInfo}
+    */
+    offset(offset)
+    { return new TileInfo(this.pos.add(offset), this.size, this.textureIndex); }
+
+    /** Returns the texture info for this tile
+    *  @return {TextureInfo}
+    */
+    getTextureInfo()
+    { return textureInfos[this.textureIndex]; }
+}
+
+/** Texture Info - Stores info about each texture */
+class TextureInfo
+{
+    // create a TextureInfo, called automatically by the engine
+    constructor(image)
+    {
+        /** @property {CanvasImageSource} - image source */
+        this.image = image;
+        /** @property {Vector2} - size of the image */
+        this.size = vec2(image.width, image.height);
+        /** @property {WebGLTexture} - webgl texture */
+        this.glTexture = glEnable && glCreateTexture(image);
+        /** @property {Vector2} - size to adjust tile to fix bleeding */
+        this.fixBleedSize = vec2(tileFixBleedScale).divide(this.size);
+    }
+}
+
+///////////////////////////////////////////////////////////////////////////////
 
 /** Convert from screen to world space coordinates
  *  @param {Vector2} screenPos
@@ -1404,7 +1694,7 @@ function 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=Vector2(1,1)]            - Size of the tile in world space
- *  @param {Number}  [tileIndex=-1]                 - Tile index to use, negative is untextured
+ *  @param {TileInfo}[tileInfo]                     - Tile info to use, untextured if undefined
  *  @param {Vector2} [tileSize=tileSizeDefault]     - Tile size in source pixels
  *  @param {Color}   [color=Color()]                - Color to modulate with
  *  @param {Number}  [angle=0]                      - Angle to rotate by
@@ -1413,11 +1703,14 @@ function worldToScreen(worldPos)
  *  @param {Boolean} [useWebGL=glEnable]            - Use accelerated WebGL rendering
  *  @param {Boolean} [screenSpace=0]                - If true the pos and size are in screen space
  *  @memberof Draw */
-function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color,
+function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
     angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace)
 {
+    ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
+    // to fix old calls, replace with tile(tileIndex, tileSize)
+
     showWatermark && ++drawCount;
-    
+    const textureInfo = tileInfo && tileInfo.getTextureInfo();
     if (glEnable && useWebGL)
     {
         if (screenSpace)
@@ -1426,46 +1719,48 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
             pos = screenToWorld(pos);
             size = size.scale(1/cameraScale);
         }
-        if (tileIndex < 0 || !tileImage.width)
-        {
-            // if negative tile index or image not found, force untextured
-            glDraw(pos.x, pos.y, size.x, size.y, angle, 0, 0, 0, 0, 0, color.rgbaInt()); 
-        }
-        else
+        
+        if (textureInfo)
         {
             // calculate uvs and render
-            const cols = tileImageSize.x / tileSize.x |0;
-            const uvSizeX = tileSize.x / tileImageSize.x;
-            const uvSizeY = tileSize.y / tileImageSize.y;
-            const uvX = (tileIndex%cols)*uvSizeX, uvY = (tileIndex/cols|0)*uvSizeY;
-            
+            const x = tileInfo.pos.x / textureInfo.size.x;
+            const y = tileInfo.pos.y / textureInfo.size.y;
+            const w = tileInfo.size.x / textureInfo.size.x;
+            const h = tileInfo.size.y / textureInfo.size.y;
+            const tileImageFixBleed = textureInfo.fixBleedSize;
+            glSetTexture(textureInfo.glTexture);
             glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
-                uvX + tileImageFixBleed.x, uvY + tileImageFixBleed.y, 
-                uvX - tileImageFixBleed.x + uvSizeX, uvY - tileImageFixBleed.y + uvSizeY, 
+                x + tileImageFixBleed.x,     y + tileImageFixBleed.y, 
+                x - tileImageFixBleed.x + w, y - tileImageFixBleed.y + h, 
                 color.rgbaInt(), additiveColor.rgbaInt()); 
         }
+        else
+        {
+            // if no tile info, force untextured
+            glDraw(pos.x, pos.y, size.x, size.y, angle, 0, 0, 0, 0, 0, color.rgbaInt()); 
+        }
     }
     else
     {
         // normal canvas 2D rendering method (slower)
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
-            if (tileIndex < 0)
+            if (textureInfo)
             {
-                // if negative tile index, force untextured
-                context.fillStyle = color;
-                context.fillRect(-.5, -.5, 1, 1);
+                // calculate uvs and render
+                const x = tileInfo.pos.x + tileFixBleedScale;
+                const y = tileInfo.pos.y + tileFixBleedScale;
+                const w = tileInfo.size.x - 2*tileFixBleedScale;
+                const h = tileInfo.size.y - 2*tileFixBleedScale;
+                context.globalAlpha = color.a; // only alpha is supported
+                context.drawImage(textureInfo.image, x, y, w, h, -.5, -.5, 1, 1);
+                context.globalAlpha = 1; // set back to full alpha
             }
             else
             {
-                // calculate uvs and render
-                const cols = tileImageSize.x / tileSize.x |0;
-                const sX = (tileIndex%cols)*tileSize.x   + tileFixBleedScale;
-                const sY = (tileIndex/cols|0)*tileSize.y + tileFixBleedScale;
-                const sWidth  = tileSize.x - 2*tileFixBleedScale;
-                const sHeight = tileSize.y - 2*tileFixBleedScale;
-                context.globalAlpha = color.a; // only alpha is supported
-                context.drawImage(tileImage, sX, sY, sWidth, sHeight, -.5, -.5, 1, 1);
+                // if no tile info, force untextured
+                context.fillStyle = color;
+                context.fillRect(-.5, -.5, 1, 1);
             }
         }, undefined, screenSpace);
     }
@@ -1480,7 +1775,7 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
  *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
 function drawRect(pos, size, color, angle, useWebGL, screenSpace)
-{ drawTile(pos, size, -1, tileSizeDefault, color, angle, 0, undefined, useWebGL, screenSpace); }
+{ drawTile(pos, size, undefined, color, angle, 0, undefined, useWebGL, screenSpace); }
 
 /** Draw colored polygon using passed in points
  *  @param {Array}   points - Array of Vector2 points
@@ -1531,12 +1826,12 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
 {
     if (!screenSpace)
     {
-        // create canvas transform from world space to screen space
+        // transform from world space to screen space
         pos = worldToScreen(pos);
         size = size.scale(cameraScale);
     }
     context.save();
-    context.translate(pos.x+.5|0, pos.y+.5|0);
+    context.translate(pos.x+.5, pos.y+.5);
     context.rotate(angle);
     context.scale(mirror ? -size.x : size.x, size.y);
     drawFunction(context);
@@ -1625,10 +1920,9 @@ class FontImage
      *  @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)
+    constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), context=overlayContext)
     {
         // load default font image
         if (!engineFontImage)
@@ -1637,7 +1931,6 @@ class FontImage
         this.image = image || engineFontImage;
         this.tileSize = tileSize;
         this.paddingSize = paddingSize;
-        this.startTileIndex = startTileIndex;
         this.context = context;
     }
 
@@ -1678,7 +1971,7 @@ class FontImage
                     charCode = 127; // unknown character
 
                 // get the character source location and draw it
-                const tile = this.startTileIndex + charCode - 32;
+                const tile = charCode - 32;
                 const x = tile % cols;
                 const y = tile / cols |0;
                 const drawPos = pos.add(vec2(j,i).multiply(drawSize));
@@ -1710,8 +2003,7 @@ function toggleFullscreen()
     }
     else if (document.body.requestFullscreen)
             document.body.requestFullscreen();
-}
-
+}
 /** 
  * LittleJS Input System
  * - Tracks keyboard down, pressed, and released
@@ -1721,7 +2013,7 @@ function toggleFullscreen()
  * @namespace Input
  */
 
-'use strict';
+
 
 /** Returns true if device key is down
  *  @param {Number} key
@@ -1905,18 +2197,26 @@ function mouseToScreen(mousePos)
 const stickData = [];
 function gamepadsUpdate()
 {
-    if (touchGamepadEnable && touchGamepadTimer.isSet())
+    // update touch gamepad if enabled
+    if (touchGamepadEnable && isTouchDevice)
     {
-        // read virtual analog stick
-        const sticks = stickData[0] || (stickData[0] = []);
-        sticks[0] = vec2(touchGamepadStick.x, -touchGamepadStick.y); // flip vertical
+        // create the touch gamepad if it doesn't exist
+        if (!touchGamepadButtons)
+            createTouchGamepad();
 
-        // read virtual gamepad buttons
-        const data = inputData[1] || (inputData[1] = []);
-        for (let i=10; i--;)
+        if (touchGamepadTimer.isSet())
         {
-            const j = i == 3 ? 2 : i == 2 ? 3 : i; // fix button locations
-            data[j] = touchGamepadButtons[i] ? 1 + 2*!gamepadIsDown(j,0) : 4*gamepadIsDown(j,0);
+            // read virtual analog stick
+            const sticks = stickData[0] || (stickData[0] = []);
+            sticks[0] = vec2(touchGamepadStick.x, -touchGamepadStick.y); // flip vertical
+
+            // read virtual gamepad buttons
+            const data = inputData[1] || (inputData[1] = []);
+            for (let i=10; i--;)
+            {
+                const j = i == 3 ? 2 : i == 2 ? 3 : i; // fix button locations
+                data[j] = touchGamepadButtons[i] ? 1 + 2*!gamepadIsDown(j,0) : 4*gamepadIsDown(j,0);
+            }
         }
     }
 
@@ -2013,6 +2313,10 @@ if (isTouchDevice)
         // set was touching
         wasTouching = touching;
 
+        // prevent default handling like copy and magnifier lens
+        if (document.hasFocus()) // allow document to get focus
+            e.preventDefault();
+        
         // must return true so the document will get focus
         return true;
     }
@@ -2025,7 +2329,7 @@ if (isTouchDevice)
 let touchGamepadTimer = new Timer, touchGamepadButtons, touchGamepadStick;
 
 // create the touch gamepad, called automatically by the engine
-if (touchGamepadEnable)
+function createTouchGamepad()
 {
     // touch input internal variables
     touchGamepadButtons = [];
@@ -2159,7 +2463,7 @@ function touchGamepadRender()
  * @namespace Audio
  */
 
-'use strict';
+
 
 /** 
  * Sound Object - Stores a zzfx sound for later use and can be played positionally
@@ -2195,8 +2499,9 @@ class Sound
         if (zzfxSound)
         {
             // generate zzfx sound now for fast playback
-            this.randomness = zzfxSound[1] || (zzfxSound[1] = 0); 
-            this.cachedSamples = zzfxSound && zzfxG(...zzfxSound);
+            this.randomness = zzfxSound[1] || (zzfxSound[1] = 0);
+            this.sampleChannels = [zzfxG(...zzfxSound)];
+            this.sampleRate = zzfxR;
         }
     }
 
@@ -2205,11 +2510,12 @@ class Sound
      *  @param {Number}  [volume=1] - How much to scale volume by (in addition to range fade)
      *  @param {Number}  [pitch=1] - How much to scale pitch by (also adjusted by this.randomness)
      *  @param {Number}  [randomnessScale=1] - How much to scale randomness
-     *  @return {AudioBufferSourceNode} - The audio, can be used to stop sound later
+     *  @param {Boolean} [loop=0] - Should the sound loop
+     *  @return {AudioBufferSourceNode} - The audio source node
      */
-    play(pos, volume=1, pitch=1, randomnessScale=1)
+    play(pos, volume=1, pitch=1, randomnessScale=1, loop=0)
     {
-        if (!soundEnable || !this.cachedSamples) return;
+        if (!soundEnable || !this.sampleChannels) return;
 
         let pan;
         if (pos)
@@ -2232,43 +2538,80 @@ class Sound
 
         // play the sound
         const playbackRate = pitch + pitch * this.randomness*randomnessScale*rand(-1,1);
-        return playSamples([this.cachedSamples], volume, playbackRate, pan);
+        return this.source = playSamples(this.sampleChannels, volume, playbackRate, pan, loop, this.sampleRate);
+    }
+
+    /** Stop the last instance of this sound that was played */
+    stop()
+    {
+        if (this.source)
+            this.source.stop();
+        this.source = 0;
     }
 
     /** Play the sound as a note with a semitone offset
      *  @param {Number}  semitoneOffset - How many semitones to offset pitch
      *  @param {Vector2} [pos] - World space position to play the sound, sound is not attenuated if null
      *  @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
+     *  @return {AudioBufferSourceNode} - The audio source node
      */
     playNote(semitoneOffset, pos, volume)
     { return this.play(pos, volume, 2**(semitoneOffset/12), 0); }
+
+    /** Get how long this sound is in seconds
+     *  @return {Number} - How long the sound is in seconds (undefined if loading)
+     */
+    getDuration() 
+    { return this.sampleChannels && this.sampleChannels[0].length / this.sampleRate; }
+
+    /** Check if the last instance of this sound is playing
+     *  @return {Boolean} - True if the sound is playing
+     */
+    isPlaying() { return this.source && !this.source.ended; }
+
+    /** Check if sound is loading, for sounds fetched from a url
+     *  @return {Boolean} - True if sound is loading and not ready to play
+     */
+    isLoading() { return !this.sampleChannels; }
 }
 
 /** 
  * Sound Wave Object - Stores a wave sound for later use and can be played positionally
+ * - this can be used to play wave, mp3, and ogg files
+ * @example
+ * // create a sound
+ * const sound_example = new SoundWave('sound.mp3');
+ * 
+ * // play the sound
+ * sound_example.play();
  */
 class SoundWave extends Sound
 {
     /** Create a sound object and cache the wave file for later use
-     *  @param {String} waveFilename - Filename of wave file to load
-     *  @param {Number} [randomness=.05] - How much to randomize frequency each time sound plays
+     *  @param {String} filename - Filename of audio file to load
+     *  @param {Number} [randomness=0] - How much to randomize frequency each time sound plays
      *  @param {Number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
      *  @param {Number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering off
      */
-    constructor(waveFilename, randomness=.05, range, taper)
+    constructor(filename, randomness=0, range, taper)
     {
         super(0, range, taper);
         this.randomness = randomness;
 
         if (!soundEnable) return;
-        if (!soundWaveDecoderContext)
+        if (!soundDecoderContext)
             soundDecoderContext = new AudioContext;
 
-        fetch(waveFilename)
+        fetch(filename)
         .then(response => response.arrayBuffer())
-        .then(arrayBuffer => soundWaveDecoderContext.decodeAudioData(arrayBuffer))
-        .then(audioBuffer => this.cachedSamples = audioBuffer.getChannelData(0));
+        .then(arrayBuffer => soundDecoderContext.decodeAudioData(arrayBuffer))
+        .then(audioBuffer => 
+        {
+            this.sampleChannels = [];
+            for (let i = audioBuffer.numberOfChannels; i--;)
+                this.sampleChannels[i] = audioBuffer.getChannelData(i);
+            this.sampleRate = audioBuffer.sampleRate;
+        });
     }
 }
 let soundDecoderContext; // audio context used only to decode audio files
@@ -2303,48 +2646,34 @@ let soundDecoderContext; // audio context used only to decode audio files
  * // play the music
  * music_example.play();
  */
-class Music
+class Music extends Sound
 {
     /** Create a music object and cache the zzfx music samples for later use
      *  @param {Array} zzfxMusic - Array of zzfx music parameters
      */
     constructor(zzfxMusic)
     {
-        if (!soundEnable) return;
+        super();
 
-        this.cachedSamples = zzfxM(...zzfxMusic);
+        if (!soundEnable) return;
+        this.randomness = 0;
+        this.sampleChannels = zzfxM(...zzfxMusic);
+        this.sampleRate = zzfxR;
     }
 
     /** Play the music
      *  @param {Number}  [volume=1] - How much to scale volume by
-     *  @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
+     *  @param {Boolean} [loop=1] - True if the music should loop
+     *  @return {AudioBufferSourceNode} - The audio source node
      */
     play(volume, loop = 1)
-    {
-        if (!soundEnable) return;
-
-        return this.source = playSamples(this.cachedSamples, volume, 1, 0, loop);
-    }
-
-    /** Stop the music */
-    stop()
-    {
-        if (this.source)
-            this.source.stop();
-        this.source = 0;
-    }
-
-    /** Check if music is playing
-     *  @return {Boolean}
-     */
-    isPlaying() { return this.source; }
+    { return super.play(0, volume, 1, 1, loop); }
 }
 
-/** Play an mp3 or wav audio from a local file or url
+/** Play an mp3, ogg, or wav audio from a local file or url
  *  @param {String}  url - Location of sound file to play
  *  @param {Number}  [volume=1] - How much to scale volume by
- *  @param {Boolean} [loop=1] - True if the music should loop when it reaches the end
+ *  @param {Boolean} [loop=1] - True if the music should loop
  *  @return {HTMLAudioElement} - The audio element for this sound
  *  @memberof Audio */
 function playAudioFile(url, volume=1, loop=1)
@@ -2408,9 +2737,10 @@ let audioContext;
  *  @param {Number}  [rate=1] - The playback rate to use
  *  @param {Number}  [pan=0] - How much to apply stereo panning
  *  @param {Boolean} [loop=0] - True if the sound should loop when it reaches the end
+ *  @param {Number}  [sampleRate=44100] - Sample rate for the sound
  *  @return {AudioBufferSourceNode} - The audio node of the sound played
  *  @memberof Audio */
-function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0) 
+function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0, sampleRate=zzfxR) 
 {
     if (!soundEnable) return;
 
@@ -2427,7 +2757,7 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
     }
 
     // create buffer and source
-    const buffer = audioContext.createBuffer(sampleChannels.length, sampleChannels[0].length, zzfxR), 
+    const buffer = audioContext.createBuffer(sampleChannels.length, sampleChannels[0].length, sampleRate), 
         source = audioContext.createBufferSource();
 
     // copy samples to buffer and setup source
@@ -2686,7 +3016,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
  * @namespace TileCollision
  */
 
-'use strict';
+
 
 /** The tile collision layer array, use setTileCollisionData and getTileCollisionData to access
  *  @type {Array} 
@@ -2831,7 +3161,7 @@ class TileLayerData
 }
 
 /**
- * Tile layer object - cached rendering system for tile layers
+ * Tile Layer - cached rendering system for tile layers
  * - Each Tile layer is rendered to an off screen canvas
  * - To allow dynamic modifications, layers are rendered using canvas 2d
  * - Some devices like mobile phones are limited to 4k texture resolution
@@ -2847,13 +3177,13 @@ class TileLayer extends EngineObject
 /** Create a tile layer object
     *  @param {Vector2} [position=Vector2()]       - World space position
     *  @param {Vector2} [size=tileCollisionSize]   - World space size
-    *  @param {Vector2} [tileSize=tileSizeDefault] - Size of tiles in source pixels
+    *  @param {TileInfo} [tileInfo]                - Tile info for layer
     *  @param {Vector2} [scale=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)
+constructor(pos, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderOrder=0)
     {
-        super(pos, size, -1, tileSize, 0, undefined, renderOrder);
+        super(pos, size, tileInfo, 0, undefined, renderOrder);
 
         /** @property {HTMLCanvasElement}        - The canvas used by this tile layer */
         this.canvas = document.createElement('canvas');
@@ -2930,13 +3260,13 @@ constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1)
         mainCanvas = this.canvas;
         mainContext = this.context;
         cameraPos = this.size.scale(.5);
-        cameraScale = this.tileSize.x;
+        cameraScale = this.tileInfo.size.x;
 
         if (clear)
         {
             // clear and set size
-            mainCanvas.width  = this.size.x * this.tileSize.x;
-            mainCanvas.height = this.size.y * this.tileSize.y;
+            mainCanvas.width  = this.size.x * this.tileInfo.size.x;
+            mainCanvas.height = this.size.y * this.tileInfo.size.y;
         }
 
         // begin a new render for the tile canvas
@@ -2967,7 +3297,8 @@ constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1)
         if (d.tile != undefined)
         {
             ASSERT(mainContext == this.context); // must call redrawStart() before drawing tiles
-            drawTile(pos, vec2(1), d.tile, this.tileSize, d.color, d.direction*PI/2, d.mirror);
+            const tileInfo = tile(d.tile, this.tileInfo.size, this.tileInfo.textureIndex);
+            drawTile(pos, vec2(1), tileInfo, d.color, d.direction*PI/2, d.mirror);
         }
     }
 
@@ -2989,8 +3320,8 @@ constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1)
     {
         const context = this.context;
         context.save();
-        pos = pos.subtract(this.pos).multiply(this.tileSize);
-        size = size.multiply(this.tileSize);
+        pos = pos.subtract(this.pos).multiply(this.tileInfo.size);
+        size = size.multiply(this.tileInfo.size);
         context.translate(pos.x, this.canvas.height - pos.y);
         context.rotate(angle);
         context.scale(mirror ? -size.x : size.x, size.y);
@@ -3001,28 +3332,28 @@ constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1)
     /** Draw a tile directly onto the layer canvas
      *  @param {Vector2} pos
      *  @param {Vector2} [size=Vector2(1,1)]
-     *  @param {Number}  [tileIndex=-1]
-     *  @param {Vector2} [tileSize=tileSizeDefault]
+     *  @param {TileInfo} [tileInfo]
      *  @param {Color}   [color=Color()]
      *  @param {Number}  [angle=0]
      *  @param {Boolean} [mirror=0] */
-    drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color, angle, mirror)
+    drawTile(pos, size=vec2(1), tileInfo, color=new Color, angle, mirror)
     {
         this.drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
-            if (tileIndex < 0)
+            const textureInfo = tileInfo && tileInfo.getTextureInfo();
+            if (textureInfo)
             {
-                // untextured
-                context.fillStyle = color;
-                context.fillRect(-.5, -.5, 1, 1);
+                context.globalAlpha = color.a; // only alpha is supported
+                context.drawImage(textureInfo.image, 
+                    tileInfo.pos.x,  tileInfo.pos.y, 
+                    tileInfo.size.x, tileInfo.size.y, -.5, -.5, 1, 1);
+                context.globalAlpha = 1;
             }
             else
             {
-                const cols = tileImage.width/tileSize.x;
-                context.globalAlpha = color.a; // only alpha, no color, is supported in this mode
-                context.drawImage(tileImage, 
-                    (tileIndex%cols)*tileSize.x, (tileIndex/cols|0)*tileSize.y, 
-                    tileSize.x, tileSize.y, -.5, -.5, 1, 1);
+                // untextured
+                context.fillStyle = color;
+                context.fillRect(-.5, -.5, 1, 1);
             }
         });
     }
@@ -3039,7 +3370,7 @@ constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1)
  * LittleJS Particle System
  */
 
-'use strict';
+
 
 /**
  * Particle Emitter - Spawns particles with the given settings
@@ -3050,7 +3381,7 @@ constructor(pos, size=tileCollisionSize, tileSize=tileSizeDefault, scale=vec2(1)
  * let particleEmiter = new ParticleEmitter
  * (
  *     pos, 0, 1, 0, 500, PI,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
- *     0, vec2(16),                            // tileIndex, tileSize
+ *     tile(0, 16),            // tileInfo
  *     new Color(1,1,1),   new Color(0,0,0),   // colorStartA, colorStartB
  *     new Color(1,1,1,0), new Color(0,0,0,0), // colorEndA, colorEndB
  *     2, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
@@ -3067,8 +3398,7 @@ class ParticleEmitter extends EngineObject
      *  @param {Number}  [emitTime=0]       - How long to stay alive (0 is forever)
      *  @param {Number}  [emitRate=100]     - How many particles per second to spawn, does not emit if 0
      *  @param {Number}  [emitConeAngle=PI] - Local angle to apply velocity to particles from emitter
-     *  @param {Number}  [tileIndex=-1]     - Index into tile sheet, if <0 no texture is applied
-     *  @param {Vector2} [tileSize=tileSizeDefault] - Tile size for particles
+     *  @param {TileInfo} [tileInfo]         - Tile info to render particles (undefined is untextured)
      *  @param {Color}   [colorStartA=Color()] - Color at start of life 1, randomized between start colors
      *  @param {Color}   [colorStartB=Color()] - Color at start of life 2, randomized between start colors
      *  @param {Color}   [colorEndA=Color(1,1,1,0)] - Color at end of life 1, randomized between end colors
@@ -3098,8 +3428,7 @@ class ParticleEmitter extends EngineObject
         emitTime = 0,
         emitRate = 100,
         emitConeAngle = PI,
-        tileIndex = -1,
-        tileSize = tileSizeDefault,
+        tileInfo,
         colorStartA = new Color,
         colorStartB = new Color,
         colorEndA = new Color(1,1,1,0),
@@ -3122,7 +3451,7 @@ class ParticleEmitter extends EngineObject
         localSpace
     )
     {
-        super(pos, vec2(), tileIndex, tileSize, angle, undefined, renderOrder);
+        super(pos, vec2(), tileInfo, angle, undefined, renderOrder);
 
         // emitter settings
         /** @property {Number} - World space size of the emitter (float for circle diameter, vec2 for rect) */
@@ -3221,7 +3550,7 @@ class ParticleEmitter extends EngineObject
             angle += this.angle;
         }
             
-        const particle = new Particle(pos, this.tileIndex, this.tileSize, angle);
+        const particle = new Particle(pos, this.tileInfo, this.tileSize, angle);
 
         // randomness scales each paremeter by a percentage
         const randomness = this.randomness;
@@ -3281,12 +3610,11 @@ class Particle extends EngineObject
     /**
      * Create a particle with the given settings
      * @param {Vector2} position                   - World space position of the particle
-     * @param {Number}  [tileIndex=-1]             - Tile to use to render, untextured if -1
-     * @param {Vector2} [tileSize=tileSizeDefault] - Size of tile in source pixels
+     * @param {TileInfo} [tileInfo]                - Tile info to render particles (undefined is untextured)
      * @param {Number}  [angle=0]                  - Angle to rotate the particle
      */
-    constructor(pos, tileIndex, tileSize, angle)
-    { super(pos, vec2(), tileIndex, tileSize, angle); }
+    constructor(pos, tileInfo, angle)
+    { super(pos, vec2(), tileInfo, angle); }
 
     /** Render the particle, automatically called each frame, sorted by renderOrder */
     render()
@@ -3320,14 +3648,17 @@ class Particle extends EngineObject
             if (this.localSpaceEmitter)
                 velocity = velocity.rotate(-this.localSpaceEmitter.angle);
             const speed = velocity.length();
-            const direction = velocity.scale(1/speed);
-            const trailLength = speed * this.trailScale;
-            size.y = max(size.x, trailLength);
-            angle = direction.angle();
-            drawTile(pos.add(direction.multiply(vec2(0,-trailLength/2))), size, this.tileIndex, this.tileSize, color, angle, this.mirror);
+            if (speed)
+            {
+                const direction = velocity.scale(1/speed);
+                const trailLength = speed * this.trailScale;
+                size.y = max(size.x, trailLength);
+                angle = direction.angle();
+                drawTile(pos.add(direction.multiply(vec2(0,-trailLength/2))), size, this.tileInfo, color, angle, this.mirror);
+            }
         }
         else
-            drawTile(pos, size, this.tileIndex, this.tileSize, color, angle, this.mirror);
+            drawTile(pos, size, this.tileInfo, color, angle, this.mirror);
         this.additive && setBlendMode();
         debugParticles && debugRect(pos, size, '#f005', 0, angle);
 
@@ -3349,7 +3680,7 @@ class Particle extends EngineObject
  * @namespace Medals
  */
 
-'use strict';
+
 
 /** List of all medals
  *  @type {Array}
@@ -3374,7 +3705,7 @@ function medalsInit(saveName)
 }
 
 /** 
- * Medal Object - Tracks an unlockable medal 
+ * Medal - Tracks an unlockable medal 
  * @example
  * // create a medal
  * const medal_example = new Medal(0, 'Example Medal', 'More info about the medal goes here.', '🎖️');
@@ -3387,7 +3718,7 @@ function medalsInit(saveName)
  */
 class Medal
 {
-    /** Create an medal object and adds it to the list of medals
+    /** Create a medal object and adds it to the list of medals
      *  @param {Number} id            - The unique identifier of the medal
      *  @param {String} name          - Name of the medal
      *  @param {String} [description] - Description of the medal
@@ -3499,33 +3830,33 @@ let newgrounds;
 /** This can used to enable Newgrounds functionality
  *  @param {Number} app_id   - The newgrounds App ID
  *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
+ *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher
  *  @memberof Medals */
-function newgroundsInit(app_id, cipher) { newgrounds = new Newgrounds(app_id, cipher); }
+function newgroundsInit(app_id, cipher, cryptoJS)
+{ newgrounds = new Newgrounds(app_id, cipher, cryptoJS); }
 
 /** 
  * Newgrounds API wrapper object
  * @example
- * // create a newgrounds object, replace the app id and cipher with your own
+ * // create a newgrounds object, replace the app id with your own
  * const app_id = '53123:1ZuSTQ9l';
- * const cipher = 'enF0vGH@Mj/FRASKL23Q==';
- * newgrounds = new Newgrounds(app_id, cipher);
+ * newgrounds = new Newgrounds(app_id);
  */
 class Newgrounds
 {
     /** Create a newgrounds object
      *  @param {Number} app_id   - The newgrounds App ID
-     *  @param {String} [cipher] - The encryption Key (AES-128/Base64) */
-    constructor(app_id, cipher)
+     *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
+     *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher */
+    constructor(app_id, cipher, cryptoJS)
     {
-        ASSERT(!newgrounds && app_id);
+        ASSERT(!newgrounds && app_id); // can only be one newgrounds object
+        ASSERT(!cipher || cryptoJS);   // must provide cryptojs if there is a cipher
 
         this.app_id = app_id;
         this.cipher = cipher;
+        this.cryptoJS = cryptoJS;
         this.host = location ? location.hostname : '';
-        
-        // create an instance of CryptoJS for encrypted calls
-        if (cipher)
-            this.cryptoJS = this.CryptoJS();
 
         // get session id from url search params
         const url = new URL(location.href);
@@ -3629,38 +3960,6 @@ class Newgrounds
         debugMedals && console.log(xmlHttp.responseText);
         return xmlHttp.responseText && JSON.parse(xmlHttp.responseText);
     }
-
-    CryptoJS()
-    {
-        ///////////////////////////////////////////////////////////////////////////////
-        // Crypto-JS - https://github.com/brix/crypto-js - MIT License
-        //
-        // [The MIT License (MIT)](http://opensource.org/licenses/MIT)
-        // 
-        // Copyright (c) 2009-2013 Jeff Mott  
-        // Copyright (c) 2013-2016 Evan Vosberg
-        // 
-        // Permission is hereby granted, free of charge, to any person obtaining a copy
-        // of this software and associated documentation files (the "Software"), to deal
-        // in the Software without restriction, including without limitation the rights
-        // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-        // copies of the Software, and to permit persons to whom the Software is
-        // furnished to do so, subject to the following conditions:
-        // 
-        // The above copyright notice and this permission notice shall be included in
-        // all copies or substantial portions of the Software.
-        // 
-        // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-        // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-        // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-        // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-        // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-        // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-        // THE SOFTWARE.
-        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));
-        // end of Crypto-JS
-        ///////////////////////////////////////////////////////////////////////////////
-    }
 }
 /** 
  * LittleJS WebGL Interface
@@ -3670,10 +3969,11 @@ class Newgrounds
  * - Can be disabled with glEnable to revert to 2D canvas rendering
  * - Batches sprite rendering on GPU for incredibly fast performance
  * - Sprite transform math is done in the shader where possible
+ * - Supports shadertoy style post processing shaders
  * @namespace WebGL
  */
 
-'use strict';
+
 
 /** The WebGL canvas which appears above the main canvas and below the overlay canvas
  *  @type {HTMLCanvasElement}
@@ -3685,45 +3985,42 @@ let glCanvas;
  *  @memberof WebGL */
 let glContext;
 
-/** Main tile sheet texture automatically loaded by engine
- *  @type {WebGLTexture}
- *  @memberof WebGL */
-let glTileTexture;
-
 // WebGL internal variables not exposed to documentation
 let glActiveTexture, glShader, glArrayBuffer, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
 
 ///////////////////////////////////////////////////////////////////////////////
 
-// Init WebGL, called automatically by the engine
+// Initalize WebGL, called automatically by the engine
 function glInit()
 {
-    // create the canvas and tile texture
+    // create the canvas and textures
     glCanvas = document.createElement('canvas');
-    glContext = glCanvas.getContext('webgl', {antialias: false});
-    glTileTexture = glCreateTexture(tileImage);
+    glContext = glCanvas.getContext('webgl2');
 
     // some browsers are much faster without copying the gl buffer so we just overlay it instead
     glOverlay && document.body.appendChild(glCanvas);
 
     // setup vertex and fragment shaders
     glShader = glCreateProgram(
+        '#version 300 es\n' +         // specify GLSL ES version
         'precision highp float;'+     // use highp for better accuracy
         'uniform mat4 m;'+            // transform matrix
-        'attribute vec2 p,t;'+        // position, uv
-        'attribute vec4 c,a;'+        // color, additiveColor
-        'varying vec4 v,d,e;'+        // return uv, color, additiveColor
+        'in vec2 p,t;'+               // position, uv
+        'in vec4 c,a;'+               // color, additiveColor
+        'out vec4 v,d,e;'+            // return uv, color, additiveColor
         'void main(){'+               // shader entry point
         'gl_Position=m*vec4(p,1,1);'+ // transform position
         '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 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
+        '#version 300 es\n' +         // specify GLSL ES version
+        'precision highp float;'+     // use highp for better accuracy
+        'in vec4 v,d,e;'+             // uv, color, additiveColor
+        'uniform sampler2D s;'+       // texture
+        'out vec4 c;'+                // out color
+        'void main(){'+               // shader entry point
+        'c=texture(s,v.xy)*d+e;'+     // modulate texture by color plus additive
+        '}'                           // end of shader
     );
 
     // init buffers
@@ -3734,25 +4031,68 @@ function glInit()
     glBatchCount = 0;
 }
 
+// Setup render each frame, called automatically by engine
+function glPreRender()
+{
+    // clear and set to same size as main canvas
+    glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
+    glContext.clear(gl_COLOR_BUFFER_BIT);
+
+    // set up the shader
+    glContext.useProgram(glShader);
+    glContext.activeTexture(gl_TEXTURE0);
+    glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = textureInfos[0].glTexture);
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
+    glContext.bufferData(gl_ARRAY_BUFFER, gl_VERTEX_BUFFER_SIZE, gl_DYNAMIC_DRAW);
+    glSetBlendMode();
+    
+    // set vertex attributes
+    let offset = 0;
+    const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
+    {
+        const location = glContext.getAttribLocation(glShader, name);
+        glContext.enableVertexAttribArray(location);
+        glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
+        offset += size*typeSize;
+    }
+    initVertexAttribArray('p', gl_FLOAT, 4, 2);            // position
+    initVertexAttribArray('t', gl_FLOAT, 4, 2);            // texture coords
+    initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
+    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
+
+    // build the transform matrix
+    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*cameraPos.x, -1-sy*cameraPos.y, 0, 0
+        ])
+    );
+}
+
 /** Set the WebGl blend mode, normally you should call setBlendMode instead
  *  @param {Boolean} [additive=0]
  *  @memberof WebGL */
-function glSetBlendMode(additive)
+function glSetBlendMode(additive=0)
 {
     // setup blending
     glAdditive = additive;
 }
 
-/** Set the WebGl texture, not normally necessary unless multiple tile sheets are used
+/** Set the WebGl texture, called automatically if using multiple textures
  *  - This may also flush the gl buffer resulting in more draw calls and worse performance
- *  @param {WebGLTexture} [texture=glTileTexture]
+ *  @param {WebGLTexture} texture
  *  @memberof WebGL */
-function glSetTexture(texture=glTileTexture)
+function glSetTexture(texture)
 {
     // must flush cache with the old texture to set a new one
-    if (texture != glActiveTexture)
-        glFlush();
+    if (texture == glActiveTexture)
+        return;
 
+    glFlush();
     glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = texture);
 }
 
@@ -3813,48 +4153,6 @@ function glCreateTexture(image)
     return texture;
 }
 
-// called automatically by engine before render
-function glPreRender()
-{
-    // clear and set to same size as main canvas
-    glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
-    glContext.clear(gl_COLOR_BUFFER_BIT);
-
-    // set up the shader
-    glContext.useProgram(glShader);
-    glContext.activeTexture(gl_TEXTURE0);
-    glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = glTileTexture);
-    glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
-    glContext.bufferData(gl_ARRAY_BUFFER, gl_VERTEX_BUFFER_SIZE, gl_DYNAMIC_DRAW);
-    glSetBlendMode();
-    
-    // set vertex attributes
-    let offset = 0;
-    const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
-    {
-        const location = glContext.getAttribLocation(glShader, name);
-        glContext.enableVertexAttribArray(location);
-        glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
-        offset += size*typeSize;
-    }
-    initVertexAttribArray('p', gl_FLOAT, 4, 2);            // position
-    initVertexAttribArray('t', gl_FLOAT, 4, 2);            // texture coords
-    initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
-    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
-
-    // build the transform matrix
-    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*cameraPos.x, -1-sy*cameraPos.y, 0, 0
-        ])
-    );
-}
-
 /** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
  *  @memberof WebGL */
 function glFlush()
@@ -3973,25 +4271,28 @@ function glInitPostProcess(shaderCode, includeOverlay)
 {
     ASSERT(!glPostShader); // can only have 1 post effects shader
 
-    if (!shaderCode) // default shader
-        shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture2D(iChannel0,p/iResolution.xy);}';
+    if (!shaderCode) // default shader pass through
+        shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture(iChannel0,p/iResolution.xy);}';
 
     // create the shader
     glPostShader = glCreateProgram(
+        '#version 300 es\n' +            // specify GLSL ES version
         'precision highp float;'+        // use highp for better accuracy
-        'attribute vec2 p;'+             // position
+        'in vec2 p;'+                    // position
         'void main(){'+                  // shader entry point
         'gl_Position=vec4(p,1,1);'+      // set position
         '}'                              // end of shader
         ,
+        '#version 300 es\n' +            // specify GLSL ES version
         'precision highp float;'+        // use highp for better accuracy
         'uniform sampler2D iChannel0;'+  // input texture
         'uniform vec3 iResolution;'+     // size of output texture
         'uniform float iTime;'+          // time passed
+        'out vec4 c;'+                   // out color
         '\n' + shaderCode + '\n'+        // insert custom shader code
         'void main(){'+                  // shader entry point
-        'mainImage(gl_FragColor,gl_FragCoord.xy);'+ // call post process function
-        'gl_FragColor.a=1.;'+            // always use full alpha
+        'mainImage(c,gl_FragCoord.xy);'+ // call post process function
+        'c.a=1.;'+                       // always use full alpha
         '}'                              // end of shader
     );
 
@@ -4064,7 +4365,6 @@ gl_ONE_MINUS_SRC_ALPHA = 771,
 gl_BLEND = 3042,
 gl_TEXTURE_2D = 3553,
 gl_UNSIGNED_BYTE = 5121,
-gl_BYTE = 5120,
 gl_FLOAT = 5126,
 gl_RGBA = 6408,
 gl_NEAREST = 9728,
@@ -4076,7 +4376,6 @@ gl_TEXTURE_WRAP_T = 10243,
 gl_COLOR_BUFFER_BIT = 16384,
 gl_CLAMP_TO_EDGE = 33071,
 gl_TEXTURE0 = 33984,
-gl_TEXTURE1 = 33985,
 gl_ARRAY_BUFFER = 34962,
 gl_STATIC_DRAW = 35044,
 gl_DYNAMIC_DRAW = 35048,
@@ -4087,7 +4386,6 @@ gl_LINK_STATUS = 35714,
 gl_UNPACK_FLIP_Y_WEBGL = 37440,
 
 // constants for batch rendering
-gl_VERTICES_PER_QUAD = 6,
 gl_INDICIES_PER_VERT = 6,
 gl_MAX_BATCH = 1e5,
 gl_VERTEX_BYTE_STRIDE = (4 * 2) * 2 + (4) * 2, // vec2 * 2 + (char * 4) * 2
@@ -4112,7 +4410,7 @@ gl_VERTEX_BUFFER_SIZE = gl_MAX_BATCH * gl_VERTEX_BYTE_STRIDE;
  * @namespace Engine
  */
 
-'use strict';
+
 
 /** Name of engine
  *  @type {String}
@@ -4124,7 +4422,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.7.13';
+const engineVersion = '1.8.1';
 
 /** Frames per second to update objects
  *  @type {Number}
@@ -4174,6 +4472,9 @@ let paused = 0;
  *  @memberof Engine */
 function setPaused(_paused) { paused = _paused; }
 
+// Frame time tracking
+let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
+
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Start up LittleJS engine with your callback functions
@@ -4182,49 +4483,13 @@ function setPaused(_paused) { paused = _paused; }
  *  @param {Function} gameUpdatePost  - Called after physics and objects are updated, setup camera and prepare for render
  *  @param {Function} gameRender      - Called before objects are rendered, draw any background effects that appear behind objects
  *  @param {Function} gameRenderPost  - Called after objects are rendered, draw effects or hud that appear above all objects
- *  @param {String} [tileImageSource] - Tile image to use, everything starts when the image is finished loading
+ *  @param {String} [imageSources='tiles.png'] - Image to load
  *  @memberof Engine */
-function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, tileImageSource)
+function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=['tiles.png'])
 {
-    // init engine when tiles load or fail to load
-    tileImage.onerror = tileImage.onload = ()=>
-    {
-        // save tile image info
-        tileImageFixBleed = vec2(tileFixBleedScale).divide(tileImageSize = vec2(tileImage.width, tileImage.height));
-        debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
-
-        // setup html
-        const styleBody = 'margin:0;overflow:hidden;' + // fill the window
-            'background:#000;' +        // set background color
-            'touch-action:none;' +      // prevent mobile pinch to resize
-            'user-select:none;' +       // prevent mobile hold to select
-            '-webkit-user-select:none'; // compatibility for ios
-        document.body.style = styleBody;
-        document.body.appendChild(mainCanvas = document.createElement('canvas'));
-        mainContext = mainCanvas.getContext('2d');
-
-        // init stuff and start engine
-        debugInit();
-        glEnable && glInit();
-
-        // create overlay canvas for hud to appear above gl canvas
-        document.body.appendChild(overlayCanvas = document.createElement('canvas'));
-        overlayContext = overlayCanvas.getContext('2d');
-
-        // set canvas style
-        const styleCanvas = 'position:absolute;' +
-            'top:50%;left:50%;transform:translate(-50%,-50%);' + // center the canvas
-            (canvasPixelated?'image-rendering:pixelated':'');    // set pixelated rendering
-        (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
-        
-        gameInit();
-        engineUpdate();
-    };
+    ASSERT(Array.isArray(imageSources)); // pass in images as array
 
-    // frame time tracking
-    let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
-
-    // main update loop
+    // internal update loop for engine
     function engineUpdate(frameTimeMS=0)
     {
         // update time keeping
@@ -4255,9 +4520,9 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         }
         else
         {
-             // clear canvas and set size to same as window
-             mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
-             mainCanvas.height = min(innerHeight, canvasMaxSize.y);
+            // clear canvas and set size to same as window
+            mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
+            mainCanvas.height = min(innerHeight, canvasMaxSize.y);
         }
         
         // clear overlay canvas and set size
@@ -4289,6 +4554,9 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             // update multiple frames if necessary in case of slow framerate
             for (;frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / frameRate)
             {
+                // increment frame and update time
+                time = frame++ / frameRate;
+
                 // update game and objects
                 inputUpdate();
                 gameUpdate();
@@ -4336,8 +4604,51 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         requestAnimationFrame(engineUpdate);
     }
 
-    // set tile image source to load the image and start the engine
-    tileImageSource ? tileImage.src = tileImageSource : tileImage.onload();
+    // setup html
+    const styleBody = 
+        'margin:0;overflow:hidden;' + // fill the window
+        'background:#000;' +          // set background color
+        'touch-action:none;' +        // prevent mobile pinch to resize
+        'user-select:none;' +         // prevent mobile hold to select
+        '-webkit-user-select:none;' + // compatibility for ios
+        '-webkit-touch-callout:none'; // compatibility for ios
+    document.body.style = styleBody;
+    document.body.appendChild(mainCanvas = document.createElement('canvas'));
+    mainContext = mainCanvas.getContext('2d');
+
+    // init stuff and start engine
+    debugInit();
+    glEnable && glInit();
+
+    // create overlay canvas for hud to appear above gl canvas
+    document.body.appendChild(overlayCanvas = document.createElement('canvas'));
+    overlayContext = overlayCanvas.getContext('2d');
+
+    // set canvas style
+    const styleCanvas = 
+        'position:absolute;' +                               // position
+        'top:50%;left:50%;transform:translate(-50%,-50%);' + // center
+        (canvasPixelated?'image-rendering:pixelated':'');    // pixelated rendering
+    (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
+    
+    // load all of the images
+    Promise.all(imageSources.map((src, textureIndex)=>
+        new Promise((resolve, reject)=> 
+        {
+            const image = new Image;
+            image.onerror = image.onload = ()=> 
+            {
+                textureInfos[textureIndex] = new TextureInfo(image);
+                resolve();
+            }
+            image.src = src;
+        })
+    )).then(()=> 
+    {
+        // start the engine
+        gameInit();
+        engineUpdate();
+    });
 }
 
 // Called automatically by engine to setup render system
@@ -4375,9 +4686,6 @@ function engineObjectsUpdate()
 
     // remove destroyed objects
     engineObjects = engineObjects.filter(o=>!o.destroyed);
-
-    // increment frame and update time
-    time = ++frame / frameRate;
 }
 
 /** Destroy and remove all objects