littlejsengine 1.15.9 → 1.16.2

package/src/engineDraw.js

@@ -10,7 +10,6 @@
  * There are 3 canvas/contexts available to draw to...
  * mainCanvas - 2D background canvas, non WebGL stuff like tile layers are drawn here.
  * glCanvas - Used by the accelerated WebGL batch rendering system.
- * overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
  *
  * The WebGL rendering system is very fast with some caveats...
  * - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
@@ -32,21 +31,6 @@ let mainCanvas;
  *  @memberof Draw */
 let mainContext;
 
-/** A canvas that appears on top of everything the same size as mainCanvas
- *  @type {HTMLCanvasElement}
- *  @memberof Draw */
-let overlayCanvas;
-
-/** 2d context for overlayCanvas
- *  @type {CanvasRenderingContext2D}
- *  @memberof Draw */
-let overlayContext;
-
-/** The default canvas to use for drawing, usually mainCanvas
- *  @type {HTMLCanvasElement|OffscreenCanvas}
- *  @memberof Draw */
-let drawCanvas;
-
 /** The default 2d context to use for drawing, usually mainContext
  *  @type {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}
  *  @memberof Draw */
@@ -62,6 +46,16 @@ let workCanvas;
  *  @memberof Draw */
 let workContext;
 
+/** Offscreen canvas with willReadFrequently that can be used for image processing
+ *  @type {OffscreenCanvas}
+ *  @memberof Draw */
+let workReadCanvas;
+
+/** Offscreen canvas with willReadFrequently that can be used for image processing
+ *  @type {OffscreenCanvasRenderingContext2D}
+ *  @memberof Draw */
+let workReadContext;
+
 /** The size of the main canvas (and other secondary canvases)
  *  @type {Vector2}
  *  @memberof Draw */
@@ -84,7 +78,7 @@ let drawCount;
  * - 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 {Vector2|number} [pos=0] - Position of the tile in pixels, or tile index
- * @param {Vector2|number} [size=tileSizeDefault] - Size of tile in pixels
+ * @param {Vector2|number} [size] - Size of tile in pixels
  * @param {number} [textureIndex] - Texture index to use
  * @param {number} [padding] - How many pixels padding around tiles
  * @return {TileInfo}
@@ -94,7 +88,7 @@ let drawCount;
  * 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 index (4,8) with a size of (30,10)
  * @memberof Draw */
-function tile(pos=new Vector2, size=tileSizeDefault, textureIndex=0, padding=0)
+function tile(pos=new Vector2, size=tileDefaultSize, textureIndex=0, padding=tileDefaultPadding)
 {
     if (headlessMode)
         return new TileInfo;
@@ -133,13 +127,13 @@ function tile(pos=new Vector2, size=tileSizeDefault, textureIndex=0, padding=0)
 class TileInfo
 {
     /** Create a tile info object
-     *  @param {Vector2} [pos=(0,0)]            - Top left corner of tile in pixels
-     *  @param {Vector2} [size=tileSizeDefault] - Size of tile in pixels
-     *  @param {number}  [textureIndex]         - Texture index to use
-     *  @param {number}  [padding]              - How many pixels padding around tiles
-     *  @param {number}  [bleedScale]           - How many pixels smaller to draw tiles
+     *  @param {Vector2} [pos=(0,0)] - Top left corner of tile in pixels
+     *  @param {Vector2} [size] - Size of tile in pixels
+     *  @param {number}  [textureIndex] - Texture index to use
+     *  @param {number}  [padding] - How many pixels padding around tiles
+     *  @param {number}  [bleed] - How many pixels smaller to draw tiles
      */
-    constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0, bleedScale=tileFixBleedScale)
+    constructor(pos=vec2(), size=tileDefaultSize, textureIndex=0, padding=tileDefaultPadding, bleed=tileDefaultBleed)
     {
         /** @property {Vector2} - Top left corner of tile in pixels */
         this.pos = pos.copy();
@@ -152,7 +146,7 @@ class TileInfo
         /** @property {TextureInfo} - The texture info for this tile */
         this.textureInfo = textureInfos[this.textureIndex];
         /** @property {number} - Shrinks tile by this many pixels to prevent neighbors bleeding */
-        this.bleedScale = bleedScale;
+        this.bleed = bleed;
     }
 
     /** Returns a copy of this tile offset by a vector
@@ -160,7 +154,7 @@ class TileInfo
     *  @return {TileInfo}
     */
     offset(offset)
-    { return new TileInfo(this.pos.add(offset), this.size, this.textureIndex, this.padding, this.bleedScale); }
+    { return new TileInfo(this.pos.add(offset), this.size, this.textureIndex, this.padding, this.bleed); }
 
     /** Returns a copy of this tile offset by a number of animation frames
     *  @param {number} frame - Offset to apply in animation frames
@@ -183,7 +177,7 @@ class TileInfo
         this.size = textureInfo.size.copy();
         this.textureInfo = textureInfo;
         // do not use padding or bleed
-        this.bleedScale = this.padding = 0;
+        this.bleed = this.padding = 0;
         return this;
     }
 }
@@ -249,7 +243,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
 
     const textureInfo = tileInfo && tileInfo.textureInfo;
-    const bleedScale = tileInfo ? tileInfo.bleedScale : 0;
+    const bleed = tileInfo?.bleed ?? 0;
     if (useWebGL && glEnable)
     {
         ASSERT(!!glContext, 'WebGL is not enabled!');
@@ -264,13 +258,13 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
             const w = tileInfo.size.x * sizeInverse.x;
             const h = tileInfo.size.y * sizeInverse.y;
             glSetTexture(textureInfo.glTexture);
-            if (bleedScale)
+            if (bleed)
             {
-                const tileImageFixBleedX = sizeInverse.x*bleedScale;
-                const tileImageFixBleedY = sizeInverse.y*bleedScale;
+                const bleedX = sizeInverse.x*bleed;
+                const bleedY = sizeInverse.y*bleed;
                 glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle,
-                    x + tileImageFixBleedX,     y + tileImageFixBleedY,
-                    x - tileImageFixBleedX + w, y - tileImageFixBleedY + h,
+                    x + bleedX,     y + bleedY,
+                    x - bleedX + w, y - bleedY + h,
                     color.rgbaInt(), additiveColor && additiveColor.rgbaInt());
             }
             else
@@ -298,7 +292,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
                 // calculate uvs and render
                 const x = tileInfo.pos.x,  y = tileInfo.pos.y;
                 const w = tileInfo.size.x, h = tileInfo.size.y;
-                drawImageColor(context, textureInfo.image, x, y, w, h, -.5, -.5, 1, 1, color, additiveColor, bleedScale);
+                drawImageColor(context, textureInfo.image, x, y, w, h, -.5, -.5, 1, 1, color, additiveColor, bleed);
             }
             else
             {
@@ -624,7 +618,11 @@ function drawCanvas2D(pos, size, angle=0, mirror=false, drawFunction, screenSpac
     ASSERT(typeof drawFunction === 'function', 'drawFunction must be a function');
 
     if (!screenSpace)
-        [pos, size, angle] = worldToScreenTransform(pos, size, angle);
+    {
+        pos = worldToScreen(pos);
+        size = size.scale(cameraScale);
+        angle -= cameraAngle;
+    }
     context.save();
     context.translate(pos.x+.5, pos.y+.5);
     context.rotate(angle);
@@ -663,26 +661,7 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
     drawTextScreen(text, pos, size, color, lineWidth, lineColor, textAlign, font, fontStyle, maxWidth, angle, context);
 }
 
-/** Draw text on overlay canvas in world space
- *  Automatically splits new lines into rows
- *  @param {string|number}  text
- *  @param {Vector2} pos
- *  @param {number}  [size]
- *  @param {Color}   [color=(1,1,1,1)]
- *  @param {number}  [lineWidth]
- *  @param {Color}   [lineColor=(0,0,0,1)]
- *  @param {CanvasTextAlign}  [textAlign='center']
- *  @param {string}  [font=fontDefault]
- *  @param {string}  [fontStyle]
- *  @param {number}  [maxWidth]
- *  @param {number}  [angle]
- *  @memberof Draw */
-function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, fontStyle, maxWidth, angle=0)
-{
-    drawText(text, pos, size, color, lineWidth, lineColor, textAlign, font, fontStyle, maxWidth, angle, overlayContext);
-}
-
-/** Draw text on overlay canvas in screen space
+/** Draw text in screen space
  *  Automatically splits new lines into rows
  *  @param {string|number}  text
  *  @param {Vector2} pos
@@ -695,9 +674,9 @@ function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textA
  *  @param {string}  [fontStyle]
  *  @param {number}  [maxWidth]
  *  @param {number}  [angle]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
  *  @memberof Draw */
-function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, fontStyle='', maxWidth, angle=0, context=overlayContext)
+function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=BLACK, textAlign='center', font=fontDefault, fontStyle='', maxWidth, angle=0, context=drawContext)
 {
     ASSERT(isString(text), 'text must be a string');
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -741,16 +720,16 @@ function drawTextScreen(text, pos, size=1, color=WHITE, lineWidth=0, lineColor=B
  *  @memberof Draw */
 function screenToWorld(screenPos)
 {
+    ASSERT(isVector2(screenPos), 'screenPos must be a vec2');
+
     let x = (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale;
     let y = (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale;
     if (cameraAngle)
     {
         // apply camera rotation
         const c = cos(-cameraAngle), s = sin(-cameraAngle);
-        const rotatedX = x * c - y * s;
-        const rotatedY = x * s + y * c;
-        x = rotatedX;
-        y = rotatedY;
+        const xr = x * c - y * s, yr = x * s + y * c;
+        x = xr; y = yr;
     }
     return new Vector2(x + cameraPos.x, y + cameraPos.y);
 }
@@ -761,16 +740,16 @@ function screenToWorld(screenPos)
  *  @memberof Draw */
 function worldToScreen(worldPos)
 {
+    ASSERT(isVector2(worldPos), 'worldPos must be a vec2');
+
     let x = worldPos.x - cameraPos.x;
     let y = worldPos.y - cameraPos.y;
     if (cameraAngle)
     {
         // apply inverse camera rotation
         const c = cos(cameraAngle), s = sin(cameraAngle);
-        const rotatedX = x * c - y * s;
-        const rotatedY = x * s + y * c;
-        x = rotatedX;
-        y = rotatedY;
+        const xr = x * c - y * s, yr = x * s + y * c;
+        x = xr; y = yr;
     }
     return new Vector2
     (
@@ -785,16 +764,16 @@ function worldToScreen(worldPos)
  *  @memberof Draw */
 function screenToWorldDelta(screenDelta)
 {
+    ASSERT(isVector2(screenDelta), 'screenDelta must be a vec2');
+
     let x = screenDelta.x /  cameraScale;
     let y = screenDelta.y / -cameraScale;
     if (cameraAngle)
     {
         // apply camera rotation
         const c = cos(-cameraAngle), s = sin(-cameraAngle);
-        const rotatedX = x * c - y * s;
-        const rotatedY = x * s + y * c;
-        x = rotatedX;
-        y = rotatedY;
+        const xr = x * c - y * s, yr = x * s + y * c;
+        x = xr; y = yr;
     }
     return new Vector2(x, y);
 }
@@ -805,16 +784,16 @@ function screenToWorldDelta(screenDelta)
  *  @memberof Draw */
 function worldToScreenDelta(worldDelta)
 {
+    ASSERT(isVector2(worldDelta), 'worldDelta must be a vec2');
+
     let x = worldDelta.x;
     let y = worldDelta.y;
     if (cameraAngle)
     {
         // apply inverse camera rotation
         const c = cos(cameraAngle), s = sin(cameraAngle);
-        const rotatedX = x * c - y * s;
-        const rotatedY = x * s + y * c;
-        x = rotatedX;
-        y = rotatedY;
+        const xr = x * c - y * s, yr = x * s + y * c;
+        x = xr; y = yr;
     }
     return new Vector2(x *  cameraScale, y * -cameraScale);
 }
@@ -827,6 +806,10 @@ function worldToScreenDelta(worldDelta)
  *  @memberof Draw */
 function screenToWorldTransform(screenPos, screenSize, screenAngle=0)
 {
+    ASSERT(isVector2(screenPos), 'screenPos must be a vec2');
+    ASSERT(isVector2(screenSize), 'screenSize must be a vec2');
+    ASSERT(isNumber(screenAngle), 'screenAngle must be a number');
+
     return [
         screenToWorld(screenPos),
         screenSize.scale(1/cameraScale),
@@ -834,28 +817,13 @@ function screenToWorldTransform(screenPos, screenSize, screenAngle=0)
     ];
 }
 
-/** Convert world space transform to screen space
- *  @param {Vector2} worldPos
- *  @param {Vector2} worldSize  
- *  @param {number} [worldAngle]
- *  @return {[Vector2, Vector2, number]} - [pos, size, angle]
- *  @memberof Draw */
-function worldToScreenTransform(worldPos, worldSize, worldAngle=0)
-{
-    return [
-        worldToScreen(worldPos),
-        worldSize.scale(cameraScale),
-        worldAngle - cameraAngle
-    ];
-}
-
 /** Get the size of the camera window in world space
  *  @return {Vector2}
  *  @memberof Draw */
 function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
 
-/** Check if a point or circle is on screen
- *  If size is a Vector2, uses the largest dimension as diameter
+/** Check if a box, point, or circle is on screen with a circle test
+ *  If size is a Vector2, uses the length as diameter
  *  This can be used to cull offscreen objects from render or update
  *  @param {Vector2} pos - world space position
  *  @param {Vector2|number} size - world space size or diameter
@@ -863,12 +831,30 @@ function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
  *  @memberof Draw */
 function isOnScreen(pos, size=0)
 {
-    pos = worldToScreen(pos);
+    ASSERT(isVector2(pos), 'pos must be a vec2');
+    ASSERT(isVector2(size) || isNumber(size), 'size must be a vec2 or number');
+
+    // optimized circle on screen test
+    // pos = worldToScreen(pos);
+    let x = pos.x - cameraPos.x;
+    let y = pos.y - cameraPos.y;
+    if (cameraAngle)
+    {
+        // apply inverse camera rotation
+        const c = cos(cameraAngle), s = sin(cameraAngle);
+        const xr = x * c - y * s, yr = x * s + y * c;
+        x = xr; y = yr;
+    }
+    x *= cameraScale*2; y *= -cameraScale*2;
+
     if (size instanceof Vector2)
-        size = max(size.x, size.y); // use largest dimension
-    size *= cameraScale/2;
-    return pos.x + size > 0 && pos.x - size < mainCanvasSize.x &&
-           pos.y + size > 0 && pos.y - size < mainCanvasSize.y;
+        size = size.length(); // use length of vector as diameter
+    size *= cameraScale;
+
+    // check against screen bounds
+    const w = mainCanvasSize.x, h = mainCanvasSize.y;
+    return x + size > -w && x - size < w &&
+           y + size > -h && y - size < h;
 }
 
 /** Enable normal or additive blend mode
@@ -882,18 +868,19 @@ function setBlendMode(additive=false, context)
     context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
-/** Combines all LittleJS canvases onto the main canvas and clears them
- *  This is necessary for things like saving a screenshot
+/** Combines LittleJS canvases onto the main canvas
+ *  This is necessary for things like screenshots and video
  *  @memberof Draw */
 function combineCanvases()
 {
-    // combine canvases
-    glCopyToContext(mainContext);
-    mainContext.drawImage(overlayCanvas, 0, 0);
-
-    // clear canvases
-    glClearCanvas();
-    overlayCanvas.width |= 0;
+    const w = mainCanvasSize.x, h = mainCanvasSize.y;
+    workCanvas.width = w;
+    workCanvas.height = h;
+    workContext.fillRect(0,0,w,h); // remove background alpha
+    glCopyToContext(workContext);
+    workContext.drawImage(mainCanvas, 0, 0);
+    mainCanvas.width |= 0;
+    mainContext.drawImage(workCanvas, 0, 0);
 }
 
 /** Helper function to draw an image with color and additive color applied
@@ -910,18 +897,18 @@ function combineCanvases()
     *  @param {number} dHeight
     *  @param {Color} color
     *  @param {Color} [additiveColor]
-    *  @param {number} [bleedScale] - How much to shrink the source, used to fix bleeding
+    *  @param {number} [bleed] - How many pixels to shrink the source, used to fix bleeding
  *  @memberof Draw */
-function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, color, additiveColor, bleedScale=0)
+function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, color, additiveColor, bleed=0)
 {
     function isWhite(c) { return c.r >= 1 && c.g >= 1 && c.b >= 1; }
     function isBlack(c) { return c.r <= 0 && c.g <= 0 && c.b <= 0 && c.a <= 0; }
-    const sx2 = bleedScale;
-    const sy2 = bleedScale;
+    const sx2 = bleed;
+    const sy2 = bleed;
     sWidth  = max(1,sWidth|0);
     sHeight = max(1,sHeight|0);
-    const sWidth2  = sWidth  - 2*bleedScale;
-    const sHeight2 = sHeight - 2*bleedScale;
+    const sWidth2  = sWidth  - 2*bleed;
+    const sHeight2 = sHeight - 2*bleed;
     if (!canvasColorTiles || (additiveColor ? isWhite(color.add(additiveColor)) && additiveColor.a <= 0 : isWhite(color)))
     {
         // white texture with no additive alpha, no need to tint
@@ -932,12 +919,12 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
     else
     {
         // copy to offscreen canvas
-        workCanvas.width = sWidth;
-        workCanvas.height = sHeight;
-        workContext.drawImage(image, sx|0, sy|0, sWidth, sHeight, 0, 0, sWidth, sHeight);
+        workReadCanvas.width = sWidth;
+        workReadCanvas.height = sHeight;
+        workReadContext.drawImage(image, sx|0, sy|0, sWidth, sHeight, 0, 0, sWidth, sHeight);
 
         // tint image using offscreen work context
-        const imageData = workContext.getImageData(0, 0, sWidth, sHeight);
+        const imageData = workReadContext.getImageData(0, 0, sWidth, sHeight);
         const data = imageData.data;
         if (additiveColor && !isBlack(additiveColor))
         {
@@ -946,8 +933,8 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
             const colorAdd = [additiveColor.r * 255, additiveColor.g * 255, additiveColor.b * 255, additiveColor.a * 255];
             for (let i = 0; i < data.length; ++i)
                 data[i] = data[i] * colorMultiply[i&3] + colorAdd[i&3] |0;
-            workContext.putImageData(imageData, 0, 0);
-            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
+            workReadContext.putImageData(imageData, 0, 0);
+            context.drawImage(workReadCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
         }
         else
         {
@@ -958,9 +945,9 @@ function drawImageColor(context, image, sx, sy, sWidth, sHeight, dx, dy, dWidth,
                 data[i+1] *= color.g;
                 data[i+2] *= color.b;
             }
-            workContext.putImageData(imageData, 0, 0);
+            workReadContext.putImageData(imageData, 0, 0);
             context.globalAlpha = color.a;
-            context.drawImage(workCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
+            context.drawImage(workReadCanvas, sx2, sy2, sWidth2, sHeight2, dx, dy, dWidth, dHeight);
             context.globalAlpha = 1;
         }
     }
@@ -1022,7 +1009,7 @@ class FontImage
     constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1))
     {
         // load default font image
-        if (!engineFontImage)
+        if (!image && !engineFontImage)
         {
             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';
@@ -1045,23 +1032,14 @@ class FontImage
         this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center, context);
     }
 
-    /** Draw text on overlay canvas in world space using the image font
-     *  @param {string|number}  text
-     *  @param {Vector2} pos
-     *  @param {number}  [scale]
-     *  @param {boolean} [center]
-     */
-    drawTextOverlay(text, pos, scale=4, center)
-    { this.drawText(text, pos, scale, center, overlayContext); }
-
-    /** Draw text on overlay canvas in screen space using the image font
+    /** Draw text in screen space using the image font
      *  @param {string|number}  text
      *  @param {Vector2} pos
      *  @param {number}  [scale]
      *  @param {boolean} [center]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      */
-    drawTextScreen(text, pos, scale=4, center=true, context=overlayContext)
+    drawTextScreen(text, pos, scale=4, center=true, context=drawContext)
     {
         context.save();
         const size = this.tileSize;

package/src/engineExport.js

@@ -27,7 +27,7 @@ export
 	// Globals
 	debug,
 	debugOverlay,
-	showWatermark,
+	debugWatermark,
 
 	// Debug
 	ASSERT,
@@ -41,13 +41,10 @@ export
 	debugText,
 	debugClear,
 	debugScreenshot,
-	debugSaveCanvas,
-	debugSaveText,
-	debugSaveDataURL,
 	debugShowErrors,
-	debugVideoCaptureIsActive,
 	debugVideoCaptureStart,
 	debugVideoCaptureStop,
+	debugVideoCaptureIsActive,
 
 	// Settings
 	cameraPos,
@@ -60,13 +57,13 @@ export
 	canvasMaxAspect,
 	canvasFixedSize,
 	canvasPixelated,
-	overlayCanvasPixelated,
 	tilesPixelated,
 	fontDefault,
 	showSplashScreen,
 	headlessMode,
-	tileSizeDefault,
-	tileFixBleedScale,
+	tileDefaultSize,
+	tileDefaultPadding,
+	tileDefaultBleed,
 	enablePhysicsSolver,
 	objectDefaultMass,
 	objectDefaultDamping,
@@ -105,14 +102,14 @@ export
 	setCanvasMaxAspect,
 	setCanvasFixedSize,
 	setCanvasPixelated,
-	setOverlayCanvasPixelated,
 	setTilesPixelated,
 	setFontDefault,
 	setShowSplashScreen,
 	setHeadlessMode,
 	setGLEnable,
-	setTileSizeDefault,
-	setTileFixBleedScale,
+	setTileDefaultSize,
+	setTileDefaultPadding,
+	setTileDefaultBleed,
 	setEnablePhysicsSolver,
 	setObjectDefaultMass,
 	setObjectDefaultDamping,
@@ -141,10 +138,10 @@ export
 	setMedalDisplaySlideTime,
 	setMedalDisplaySize,
 	setMedalsPreventUnlock,
-	setShowWatermark,
+	setDebugWatermark,
 	setDebugKey,
 
-	// Utilities
+	// Math
 	PI,
 	abs,
 	floor,
@@ -172,8 +169,13 @@ export
 	isOverlapping,
 	isIntersecting,
 	wave,
+
+	// Utilities
 	formatTime,
 	fetchJSON,
+	saveText,
+	saveCanvas,
+	saveDataURL,
 
 	// Random
 	rand,
@@ -219,10 +221,11 @@ export
 	TextureInfo,
 	mainCanvas,
 	mainContext,
-	drawCanvas,
 	drawContext,
-	overlayCanvas,
-	overlayContext,
+	workCanvas,
+	workContext,
+	workReadCanvas,
+	workReadContext,
 	mainCanvasSize,
 	textureInfos,
 	drawCount,
@@ -230,6 +233,7 @@ export
 	worldToScreen,
 	screenToWorldDelta,
 	worldToScreenDelta,
+	screenToWorldTransform,
 	drawTile,
 	drawRect,
 	drawRectGradient,
@@ -240,7 +244,6 @@ export
 	drawCircle,
 	drawCanvas2D,
 	drawText,
-	drawTextOverlay,
 	drawTextScreen,
 	setBlendMode,
 	combineCanvases,

package/src/engineInput.js

@@ -365,8 +365,7 @@ function inputInit()
     }
     function onMouseDown(e)
     {
-        if (isTouchDevice && touchInputEnable)
-            return;
+        if (isTouchDevice && touchInputEnable) return;
 
         // fix stalled audio requiring user interaction
         if (soundEnable && !headlessMode && audioContext && !audioIsRunning())
@@ -417,8 +416,7 @@ function inputInit()
         let wasTouching;
         function handleTouch(e)
         {
-            if (!touchInputEnable)
-                return;
+            if (!touchInputEnable) return;
 
             // route touch to gamepad
             if (touchGamepadEnable)
@@ -482,8 +480,7 @@ function inputInit()
             }
 
             // don't process touch gamepad if paused
-            if (paused)
-                return;
+            if (paused) return;
 
             // get center of left and right sides
             const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
@@ -722,7 +719,7 @@ function inputRender()
             return;
 
         // setup the canvas
-        const context = overlayContext;
+        const context = mainContext;
         context.save();
         context.globalAlpha = alpha*touchGamepadAlpha;
         context.strokeStyle = '#fff';