littlejsengine 1.8.8 → 1.9.0

package/src/engineDebug.js

@@ -14,13 +14,13 @@
  *  @type {Boolean}
  *  @default
  *  @memberof Debug */
-const debug = 1;
+const debug = true;
 
 /** True if asserts are enaled
  *  @type {Boolean}
  *  @default
  *  @memberof Debug */
-const enableAsserts = 1;
+const enableAsserts = true;
 
 /** Size to render debug points by default
  *  @type {Number}
@@ -32,82 +32,87 @@ const debugPointSize = .5;
  *  @type {Boolean}
  *  @default
  *  @memberof Debug */
-let showWatermark = 1;
+let showWatermark = true;
 
 /** Key code used to toggle debug mode, Esc by default
+ *  @type {String}
+ *  @default
+ *  @memberof Debug */
+let debugKey = 'Escape';
+
+/** True if the debug overlay is active, always false in release builds
  *  @type {Boolean}
  *  @default
  *  @memberof Debug */
-let debugKey = 27;
+let debugOverlay = false;
 
 // Engine internal variables not exposed to documentation
-let debugPrimitives = [], debugOverlay = 0, debugPhysics = 0, debugRaycast = 0,
-debugParticles = 0, debugGamepads = 0, debugMedals = 0, debugTakeScreenshot, downloadLink;
+let debugPrimitives = [], debugPhysics = false, debugRaycast = false, debugParticles = false, debugGamepads = false, debugMedals = false, debugTakeScreenshot, downloadLink;
 
 ///////////////////////////////////////////////////////////////////////////////
 // Debug helper functions
 
 /** Asserts if the experssion is false, does not do anything in release builds
- *  @param {Boolean} assertion
- *  @param {Object}  output
+ *  @param {Boolean} assert
+ *  @param {Object} output
  *  @memberof Debug */
-function ASSERT(...assert) { enableAsserts && console.assert(...assert); }
+function ASSERT(assert, output) { enableAsserts && console.assert(assert, output); }
 
 /** Draw a debug rectangle in world space
  *  @param {Vector2} pos
  *  @param {Vector2} [size=Vector2()]
- *  @param {String}  [color='#fff']
- *  @param {Number}  [time=0]
- *  @param {Number}  [angle=0]
- *  @param {Boolean} [fill=false]
+ *  @param {String}  [color]
+ *  @param {Number}  [time]
+ *  @param {Number}  [angle]
+ *  @param {Boolean} [fill]
  *  @memberof Debug */
 function debugRect(pos, size=vec2(), color='#fff', time=0, angle=0, fill=false)
 {
-    ASSERT(typeof color == 'string'); // pass in regular html strings as colors
+    ASSERT(typeof color == 'string', 'pass in css color strings'); 
     debugPrimitives.push({pos, size:vec2(size), color, time:new Timer(time), angle, fill});
 }
 
 /** Draw a debug circle in world space
  *  @param {Vector2} pos
- *  @param {Number}  [radius=0]
- *  @param {String}  [color='#fff']
- *  @param {Number}  [time=0]
- *  @param {Boolean} [fill=false]
+ *  @param {Number}  [radius]
+ *  @param {String}  [color]
+ *  @param {Number}  [time]
+ *  @param {Boolean} [fill]
  *  @memberof Debug */
 function debugCircle(pos, radius=0, color='#fff', time=0, fill=false)
 {
-    ASSERT(typeof color == 'string'); // pass in regular html strings as colors
+    ASSERT(typeof color == 'string', 'pass in css color strings');
     debugPrimitives.push({pos, size:radius, color, time:new Timer(time), angle:0, fill});
 }
 
 /** Draw a debug point in world space
  *  @param {Vector2} pos
- *  @param {String}  [color='#fff']
- *  @param {Number}  [time=0]
- *  @param {Number}  [angle=0]
+ *  @param {String}  [color]
+ *  @param {Number}  [time]
+ *  @param {Number}  [angle]
  *  @memberof Debug */
-function debugPoint(pos, color, time, angle) {debugRect(pos, 0, color, time, angle);}
+function debugPoint(pos, color, time, angle) {debugRect(pos, undefined, color, time, angle);}
 
 /** Draw a debug line in world space
  *  @param {Vector2} posA
  *  @param {Vector2} posB
- *  @param {String}  [color='#fff']
- *  @param {Number}  [thickness=.1]
- *  @param {Number}  [time=0]
+ *  @param {String}  [color]
+ *  @param {Number}  [thickness]
+ *  @param {Number}  [time]
  *  @memberof Debug */
 function debugLine(posA, posB, color, thickness=.1, time)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
-    debugRect(posA.add(halfDelta), size, color, time, halfDelta.angle(), 1);
+    debugRect(posA.add(halfDelta), size, color, time, halfDelta.angle(), true);
 }
 
 /** Draw a debug axis aligned bounding box in world space
- *  @param {Vector2} posA
- *  @param {Vector2} sizeA
- *  @param {Vector2} posB
- *  @param {Vector2} sizeB
- *  @param {String}  [color='#fff']
+ *  @param {Vector2} pA - position A
+ *  @param {Vector2} sA - size A
+ *  @param {Vector2} pB - position B
+ *  @param {Vector2} sB - size B
+ *  @param {String}  [color]
  *  @memberof Debug */
 function debugAABB(pA, sA, pB, sB, color)
 {
@@ -119,15 +124,15 @@ function debugAABB(pA, sA, pB, sB, color)
 /** Draw a debug axis aligned bounding box in world space
  *  @param {String}  text
  *  @param {Vector2} pos
- *  @param {Number}  [size=1]
- *  @param {String}  [color='#fff']
- *  @param {Number}  [time=0]
- *  @param {Number}  [angle=0]
- *  @param {String}  [font='monospace']
+ *  @param {Number}  [size]
+ *  @param {String}  [color]
+ *  @param {Number}  [time]
+ *  @param {Number}  [angle]
+ *  @param {String}  [font]
  *  @memberof Debug */
 function debugText(text, pos, size=1, color='#fff', time=0, angle=0, font='monospace')
 {
-    ASSERT(typeof color == 'string'); // pass in regular html strings as colors
+    ASSERT(typeof color == 'string', 'pass in css color strings');
     debugPrimitives.push({text, pos, size, color, time:new Timer(time), angle, font});
 }
 
@@ -138,7 +143,7 @@ function debugClear() { debugPrimitives = []; }
 /** Save a canvas to disk 
  *  @param {HTMLCanvasElement} canvas
  *  @param {String}            [filename]
- *  @param {String}            [type='image/png']
+ *  @param {String}            [type]
  *  @memberof Debug */
 function debugSaveCanvas(canvas, filename=engineName, type='image/png')
 { debugSaveDataURL(canvas.toDataURL(type), filename); }
@@ -146,7 +151,7 @@ function debugSaveCanvas(canvas, filename=engineName, type='image/png')
 /** Save a text file to disk 
  *  @param {String}     text
  *  @param {String}     [filename]
- *  @param {String}     [type='text/plain']
+ *  @param {String}     [type]
  *  @memberof Debug */
 function debugSaveText(text, filename=engineName, type='text/plain')
 { debugSaveDataURL(URL.createObjectURL(new Blob([text], {'type':type})), filename); }
@@ -181,22 +186,18 @@ function debugUpdate()
         debugOverlay = !debugOverlay;
     if (debugOverlay)
     {
-        if (keyWasPressed(48)) // 0
+        if (keyWasPressed('Digit0'))
             showWatermark = !showWatermark;
-        if (keyWasPressed(49)) // 1
-            debugPhysics = !debugPhysics, debugParticles = 0;
-        if (keyWasPressed(50)) // 2
-            debugParticles = !debugParticles, debugPhysics = 0;
-        if (keyWasPressed(51)) // 3
+        if (keyWasPressed('Digit1'))
+            debugPhysics = !debugPhysics, debugParticles = false;
+        if (keyWasPressed('Digit2'))
+            debugParticles = !debugParticles, debugPhysics = false;
+        if (keyWasPressed('Digit3'))
             debugGamepads = !debugGamepads;
-        if (keyWasPressed(52)) // 4
+        if (keyWasPressed('Digit4'))
             debugRaycast = !debugRaycast;
-        if (keyWasPressed(53)) // 5
+        if (keyWasPressed('Digit5'))
             debugTakeScreenshot = 1;
-        //if (keyWasPressed(54)) // 6
-        //if (keyWasPressed(55)) // 7
-        //if (keyWasPressed(56)) // 8
-        //if (keyWasPressed(57)) // 9
     }
 }
 
@@ -207,7 +208,7 @@ function debugRender()
     if (debugTakeScreenshot)
     {
         // composite canvas
-        glCopyToContext(mainContext, 1);
+        glCopyToContext(mainContext, true);
         mainContext.drawImage(overlayCanvas, 0, 0);
         overlayCanvas.width |= 0;
 
@@ -236,7 +237,7 @@ function debugRender()
                 {
                     const drawPos = centerPos.add(vec2(j*stickScale*2, i*stickScale*3));
                     const stickPos = drawPos.add(sticks[j].scale(stickScale));
-                    debugCircle(drawPos, stickScale, '#fff7',0,1);
+                    debugCircle(drawPos, stickScale, '#fff7',0,true);
                     debugLine(drawPos, stickPos, '#f00');
                     debugPoint(stickPos, '#f00');
                 }
@@ -244,8 +245,8 @@ function debugRender()
                 {
                     const drawPos = centerPos.add(vec2(j*buttonScale*2, i*stickScale*3-stickScale-buttonScale));
                     const pressed = gamepad.buttons[j].pressed;
-                    debugCircle(drawPos, buttonScale, pressed ? '#f00' : '#fff7', 0, 1);
-                    debugText(j, drawPos, .2);
+                    debugCircle(drawPos, buttonScale, pressed ? '#f00' : '#fff7', 0, true);
+                    debugText(''+j, drawPos, .2);
                 }
             }
         }
@@ -274,25 +275,25 @@ function debugRender()
 
             // show object info
             const size = vec2(max(o.size.x, .2), max(o.size.y, .2));
-            const color1 = new Color(!!o.collideTiles, !!o.collideSolidObjects, !!o.isSolid, o.parent?.2:.5);
+            const color1 = new Color(o.collideTiles?1:0, o.collideSolidObjects?1:0, o.isSolid?1:0, o.parent?.2:.5);
             const color2 = o.parent ? new Color(1,1,1,.5) : new Color(0,0,0,.8);
-            drawRect(o.pos, size, color1, o.angle, 0);
-            drawRect(o.pos, size.scale(.8), color2, o.angle, 0);
-            o.parent && drawLine(o.pos, o.parent.pos, .1, new Color(0,0,1,.5), 0);
+            drawRect(o.pos, size, color1, o.angle, false);
+            drawRect(o.pos, size.scale(.8), color2, o.angle, false);
+            o.parent && drawLine(o.pos, o.parent.pos, .1, new Color(0,0,1,.5), false);
         }
         
         if (bestObject)
         {
             const raycastHitPos = tileCollisionRaycast(bestObject.pos, mousePos);
             raycastHitPos && drawRect(raycastHitPos.floor().add(vec2(.5)), vec2(1), new Color(0,1,1,.3));
-            drawRect(mousePos.floor().add(vec2(.5)), vec2(1), new Color(0,0,1,.5), 0, 0);
-            drawLine(mousePos, bestObject.pos, .1, raycastHitPos ? new Color(1,0,0,.5) : new Color(0,1,0,.5), 0);
+            drawRect(mousePos.floor().add(vec2(.5)), vec2(1), new Color(0,0,1,.5), 0, false);
+            drawLine(mousePos, bestObject.pos, .1, raycastHitPos ? new Color(1,0,0,.5) : new Color(0,1,0,.5), false);
 
             const debugText = 'mouse pos = ' + mousePos + 
                 '\nmouse collision = ' + getTileCollisionData(mousePos) + 
                 '\n\n--- object info ---\n' +
                 bestObject.toString();
-            drawTextScreen(debugText, mousePosScreen, 24, new Color, .05, 0, 0, 'monospace');
+            drawTextScreen(debugText, mousePosScreen, 24, new Color, .05, undefined, 'center', 'monospace');
         }
 
         glCopyToContext(mainContext = saveContext);
@@ -381,7 +382,7 @@ function debugRender()
             let keysPressed = '';
             for(const i in inputData[0])
             {
-                if (i && keyIsDown(i, 0))
+                if (keyIsDown(i, 0))
                     keysPressed += i + ' ' ;
             }
             keysPressed && overlayContext.fillText('Keys Down: ' + keysPressed, x, y += h);
@@ -390,7 +391,7 @@ function debugRender()
             if (inputData[1])
             for(const i in inputData[1])
             {
-                if (i && keyIsDown(i, 1))
+                if (keyIsDown(i, 1))
                     buttonsPressed += i + ' ' ;
             }
             buttonsPressed && overlayContext.fillText('Gamepad: ' + buttonsPressed, x, y += h);

package/src/engineDraw.js

@@ -61,9 +61,9 @@ 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
+ * @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]                   - Texture index to use
  * @return {TileInfo}
  * @example
  * tile(2)                       // a tile at index 2 using the default tile size of 16
@@ -75,14 +75,14 @@ let drawCount;
 function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0)
 {
     // if size is a number, make it a vector
-    if (size.x == undefined)
+    if (typeof size === 'number')
     {
         ASSERT(size > 0);
         size = vec2(size);
     }
 
     // if pos is a number, use it as a tile index
-    if (pos.x == undefined)
+    if (typeof pos === 'number')
     {
         const textureInfo = textureInfos[textureIndex];
         if (textureInfo)
@@ -106,7 +106,7 @@ 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
+     *  @param {Number}  [textureIndex]         - Texture index to use
      */
     constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0)
     {
@@ -135,10 +135,13 @@ class TileInfo
 /** Texture Info - Stores info about each texture */
 class TextureInfo
 {
-    // create a TextureInfo, called automatically by the engine
+    /**
+     * Create a TextureInfo, called automatically by the engine
+     * @param {HTMLImageElement} image
+     */
     constructor(image)
     {
-        /** @property {CanvasImageSource} - image source */
+        /** @property {HTMLImageElement} - image source */
         this.image = image;
         /** @property {Vector2} - size of the image */
         this.size = vec2(image.width, image.height);
@@ -181,23 +184,21 @@ function worldToScreen(worldPos)
  *  @param {Vector2} pos                            - Center of the tile in world space
  *  @param {Vector2} [size=Vector2(1,1)]            - Size of the tile in world space
  *  @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
- *  @param {Boolean} [mirror=0]                     - If true image is flipped along the Y axis
+ *  @param {Number}  [angle]                        - Angle to rotate by
+ *  @param {Boolean} [mirror]                       - If true image is flipped along the Y axis
  *  @param {Color}   [additiveColor=Color(0,0,0,0)] - Additive color to be applied
  *  @param {Boolean} [useWebGL=glEnable]            - Use accelerated WebGL rendering
- *  @param {Boolean} [screenSpace=0]                - If true the pos and size are in screen space
+ *  @param {Boolean} [screenSpace]                  - If true the pos and size are in screen space
  *  @param {CanvasRenderingContext2D} [context]     - Canvas 2D context to draw to
  *  @memberof Draw */
 function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
     angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace, context)
 {
-    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
-    ASSERT(typeof tileInfo !== 'number' || !tileInfo); // prevent old style calls
-    // to fix old calls, replace with tile(tileIndex, tileSize)
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode'); 
+    ASSERT(typeof tileInfo !== 'number' || !tileInfo, 
+        'this is an old style calls, to fix replace it with tile(tileIndex, tileSize)');
 
-    showWatermark && ++drawCount;
     const textureInfo = tileInfo && tileInfo.getTextureInfo();
     if (useWebGL)
     {
@@ -231,6 +232,7 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
     else
     {
         // normal canvas 2D rendering method (slower)
+        showWatermark && ++drawCount;
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
             if (textureInfo)
@@ -258,49 +260,38 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
  *  @param {Vector2} pos
  *  @param {Vector2} [size=Vector2(1,1)]
  *  @param {Color}   [color=Color()]
- *  @param {Number}  [angle=0]
+ *  @param {Number}  [angle]
  *  @param {Boolean} [useWebGL=glEnable]
- *  @param {Boolean} [screenSpace=0]
+ *  @param {Boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
 function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
 { 
-    drawTile(pos, size, undefined, color, angle, 0, undefined, useWebGL, screenSpace, context); 
+    drawTile(pos, size, undefined, color, angle, false, undefined, useWebGL, screenSpace, context); 
 }
 
 /** Draw colored polygon using passed in points
  *  @param {Array}   points - Array of Vector2 points
  *  @param {Color}   [color=Color()]
- *  @param {Boolean} [useWebGL=glEnable]
- *  @param {Boolean} [screenSpace=0]
- *  @param {CanvasRenderingContext2D} [context]
+ *  @param {Boolean} [screenSpace]
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
-function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace, context)
+function drawPoly(points, color=new Color, screenSpace, context=mainContext)
 {
-    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
-
-    if (useWebGL)
-        glDrawPoints(screenSpace ? points.map(screenToWorld) : points, color.rgbaInt());
-    else
-    {
-        // draw using canvas
-        if (!context)
-            context = mainContext;
-        context.fillStyle = color;
-        context.beginPath();
-        for (const point of screenSpace ? points : points.map(worldToScreen))
-            context.lineTo(point.x, point.y);
-        context.fill();
-    }
+    context.fillStyle = color.toString();
+    context.beginPath();
+    for (const point of screenSpace ? points : points.map(worldToScreen))
+        context.lineTo(point.x, point.y);
+    context.fill();
 }
 
 /** Draw colored line between two points
  *  @param {Vector2} posA
  *  @param {Vector2} posB
- *  @param {Number}  [thickness=.1]
+ *  @param {Number}  [thickness]
  *  @param {Color}   [color=Color()]
  *  @param {Boolean} [useWebGL=glEnable]
- *  @param {Boolean} [screenSpace=0]
+ *  @param {Boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
 function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, context)
@@ -316,7 +307,7 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, contex
  *  @param {Number}   angle
  *  @param {Boolean}  mirror
  *  @param {Function} drawFunction
- *  @param {Boolean} [screenSpace=0]
+ *  @param {Boolean} [screenSpace]
  *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
 function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, context=mainContext)
@@ -336,13 +327,13 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, conte
 }
 
 /** Enable normal or additive blend mode
- *  @param {Boolean} [additive=0]
+ *  @param {Boolean} [additive]
  *  @param {Boolean} [useWebGL=glEnable]
  *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
 function setBlendMode(additive, useWebGL=glEnable, context)
 {
-    ASSERT(!context || !useWebGL); // context only supported in canvas 2D mode
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
     if (useWebGL)
         glAdditive = additive;
     else
@@ -357,11 +348,11 @@ function setBlendMode(additive, useWebGL=glEnable, context)
  *  Automatically splits new lines into rows
  *  @param {String}  text
  *  @param {Vector2} pos
- *  @param {Number}  [size=1]
+ *  @param {Number}  [size]
  *  @param {Color}   [color=Color()]
- *  @param {Number}  [lineWidth=0]
+ *  @param {Number}  [lineWidth]
  *  @param {Color}   [lineColor=Color(0,0,0)]
- *  @param {String}  [textAlign='center']
+ *  @param {CanvasTextAlign}  [textAlign='center']
  *  @param {String}  [font=fontDefault]
  *  @param {CanvasRenderingContext2D} [context=overlayContext]
  *  @memberof Draw */
@@ -374,19 +365,19 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
  *  Automatically splits new lines into rows
  *  @param {String}  text
  *  @param {Vector2} pos
- *  @param {Number}  [size=1]
+ *  @param {Number}  [size]
  *  @param {Color}   [color=Color()]
- *  @param {Number}  [lineWidth=0]
+ *  @param {Number}  [lineWidth]
  *  @param {Color}   [lineColor=Color(0,0,0)]
- *  @param {String}  [textAlign='center']
+ *  @param {CanvasTextAlign}  [textAlign]
  *  @param {String}  [font=fontDefault]
  *  @param {CanvasRenderingContext2D} [context=overlayContext]
  *  @memberof Draw */
 function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, context=overlayContext)
 {
-    context.fillStyle = color;
+    context.fillStyle = color.toString();
     context.lineWidth = lineWidth;
-    context.strokeStyle = lineColor;
+    context.strokeStyle = lineColor.toString();
     context.textAlign = textAlign;
     context.font = size + 'px '+ font;
     context.textBaseline = 'middle';
@@ -421,8 +412,8 @@ class FontImage
 {
     /** Create an image font
      *  @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 {Vector2} [tileSize=Vector2(8)] - Size of the font source tiles
+     *  @param {Vector2} [paddingSize=Vector2(0,1)] - How much extra space to add between characters
      *  @param {CanvasRenderingContext2D} [context=overlayContext] - context to draw to
      */
     constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), context=overlayContext)
@@ -451,7 +442,7 @@ class FontImage
     /** Draw text in screen space using the image font
      *  @param {String}  text
      *  @param {Vector2} pos
-     *  @param {Number}  [scale=4]
+     *  @param {Number}  [scale]
      *  @param {Boolean} [center]
      */
     drawTextScreen(text, pos, scale=4, center)
@@ -469,7 +460,7 @@ class FontImage
             for(let j=line.length; j--;)
             {
                 // draw each character
-                let charCode = line[j].charCodeAt();
+                let charCode = line[j].charCodeAt(0);
                 if (charCode < 32 || charCode > 127)
                     charCode = 127; // unknown character
 
@@ -493,7 +484,7 @@ class FontImage
 /** Returns true if fullscreen mode is active
  *  @return {Boolean}
  *  @memberof Draw */
-function isFullscreen() { return document.fullscreenElement; }
+function isFullscreen() { return !!document.fullscreenElement; }
 
 /** Toggle fullsceen mode
  *  @memberof Draw */

package/src/engineExport.js

@@ -23,6 +23,7 @@ export {
 	
 	// Globals
 	debug,
+	debugOverlay,
 	showWatermark,
 
 	// Debug