littlejsengine 1.15.9 → 1.16.1

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,16 +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 */
@@ -62,6 +51,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 +83,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 +93,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 +132,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 +151,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 +159,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 +182,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 +248,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 +263,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 +297,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
             {
@@ -663,26 +662,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 +675,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=mainContext]
  *  @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=mainContext)
 {
     ASSERT(isString(text), 'text must be a string');
     ASSERT(isVector2(pos), 'pos must be a vec2');
@@ -741,16 +721,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 +741,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 +765,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 +785,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 +807,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),
@@ -842,6 +826,10 @@ function screenToWorldTransform(screenPos, screenSize, screenAngle=0)
  *  @memberof Draw */
 function worldToScreenTransform(worldPos, worldSize, worldAngle=0)
 {
+    ASSERT(isVector2(worldPos), 'worldPos must be a vec2');
+    ASSERT(isVector2(worldSize), 'worldSize must be a vec2');
+    ASSERT(isNumber(worldAngle), 'worldAngle must be a number');
+
     return [
         worldToScreen(worldPos),
         worldSize.scale(cameraScale),
@@ -854,8 +842,8 @@ function worldToScreenTransform(worldPos, worldSize, worldAngle=0)
  *  @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 +851,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 +888,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 +917,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 +939,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 +953,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 +965,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 +1029,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 +1052,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=mainContext)
     {
         context.save();
         const size = this.tileSize;

package/src/engineExport.js

@@ -27,7 +27,7 @@ export
 	// Globals
 	debug,
 	debugOverlay,
-	showWatermark,
+	debugWatermark,
 
 	// Debug
 	ASSERT,
@@ -60,13 +60,13 @@ export
 	canvasMaxAspect,
 	canvasFixedSize,
 	canvasPixelated,
-	overlayCanvasPixelated,
 	tilesPixelated,
 	fontDefault,
 	showSplashScreen,
 	headlessMode,
-	tileSizeDefault,
-	tileFixBleedScale,
+	tileDefaultSize,
+	tileDefaultPadding,
+	tileDefaultBleed,
 	enablePhysicsSolver,
 	objectDefaultMass,
 	objectDefaultDamping,
@@ -105,14 +105,14 @@ export
 	setCanvasMaxAspect,
 	setCanvasFixedSize,
 	setCanvasPixelated,
-	setOverlayCanvasPixelated,
 	setTilesPixelated,
 	setFontDefault,
 	setShowSplashScreen,
 	setHeadlessMode,
 	setGLEnable,
-	setTileSizeDefault,
-	setTileFixBleedScale,
+	setTileDefaultSize,
+	setTileDefaultPadding,
+	setTileDefaultBleed,
 	setEnablePhysicsSolver,
 	setObjectDefaultMass,
 	setObjectDefaultDamping,
@@ -141,7 +141,7 @@ export
 	setMedalDisplaySlideTime,
 	setMedalDisplaySize,
 	setMedalsPreventUnlock,
-	setShowWatermark,
+	setDebugWatermark,
 	setDebugKey,
 
 	// Utilities
@@ -221,8 +221,10 @@ export
 	mainContext,
 	drawCanvas,
 	drawContext,
-	overlayCanvas,
-	overlayContext,
+	workCanvas,
+	workContext,
+	workReadCanvas,
+	workReadContext,
 	mainCanvasSize,
 	textureInfos,
 	drawCount,
@@ -240,7 +242,6 @@ export
 	drawCircle,
 	drawCanvas2D,
 	drawText,
-	drawTextOverlay,
 	drawTextScreen,
 	setBlendMode,
 	combineCanvases,

package/src/engineInput.js

@@ -722,7 +722,7 @@ function inputRender()
             return;
 
         // setup the canvas
-        const context = overlayContext;
+        const context = mainContext;
         context.save();
         context.globalAlpha = alpha*touchGamepadAlpha;
         context.strokeStyle = '#fff';

package/src/engineMedals.js

@@ -139,10 +139,10 @@ class Medal
      */
     render(hidePercent=0)
     {
-        const context = overlayContext;
+        const context = mainContext;
         const width = min(medalDisplaySize.x, mainCanvas.width);
         const height = medalDisplaySize.y;
-        const x = overlayCanvas.width - width;
+        const x = mainCanvas.width - width;
         const y = -height*hidePercent;
         const backgroundColor = hsl(0,0,.9);
 
@@ -183,7 +183,7 @@ class Medal
     {
         // draw the image or icon
         if (this.image)
-            overlayContext.drawImage(this.image, pos.x-size/2, pos.y-size/2, size, size);
+            mainContext.drawImage(this.image, pos.x-size/2, pos.y-size/2, size, size);
         else
             drawTextScreen(this.icon, pos, size*.7, BLACK);
     }

package/src/engineObject.js

@@ -430,10 +430,11 @@ class EngineObject
      *  @return {number} -1 if this.mirror is true, or 1 if not mirrored */
     getMirrorSign() { return this.mirror ? -1 : 1; }
 
-    /** Attaches a child to this with a given local transform
+    /** Attaches a child to this with a local transform, returns child for chaining   
      *  @param {EngineObject} child
      *  @param {Vector2}      [localPos=(0,0)]
-     *  @param {number}       [localAngle] */
+     *  @param {number}       [localAngle]
+     *  @return {EngineObject} The child object added */
     addChild(child, localPos=vec2(), localAngle=0)
     {
         ASSERT(!child.parent && !this.children.includes(child));
@@ -443,6 +444,7 @@ class EngineObject
         child.parent = this;
         child.localPos = localPos.copy();
         child.localAngle = localAngle;
+        return child;
     }
 
     /** Removes a child from this one

package/src/engineRelease.js

@@ -6,7 +6,7 @@
 
 'use strict';
 
-let showWatermark = 0;
+let debugWatermark = 0;
 let debugKey = '';
 const debug = 0;
 const debugOverlay = 0;