littlejsengine 1.1.17 → 1.2.0

package/engine/engineDebug.js

@@ -1,8 +1,15 @@
+/*
+    LittleJS - Debug Build
+    MIT License - Copyright 2021 Frank Force
+*/
+
 /** 
  * LittleJS Debug System
- * <br> - Debug overlay with mouse pick
+ * <br> - Press ~ to show debug overlay with mouse pick
+ * <br> - Number keys toggle debug functions
+ * <br> - +/- apply time scale
  * <br> - Debug primitive rendering
- * <br> - Save screenshots to disk
+ * <br> - Save a 2d canvas as an image
  * @namespace Debug
  */
 
@@ -34,7 +41,7 @@ let showWatermark = 1;
 let godMode = 0;
 
 // Engine internal variables not exposed to documentation
-let debugPrimitives = [], debugOverlay = 0, debugPhysics = 0, debugRaycast = 0, 
+let debugPrimitives = [], debugOverlay = 0, debugPhysics = 0, debugRaycast = 0,
 debugParticles = 0, debugGamepads = 0, debugMedals = 0, debugTakeScreenshot, downloadLink;
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -156,22 +163,25 @@ const debugUpdate = ()=>
         
     if (keyWasPressed(192)) // ~
         debugOverlay = !debugOverlay;
-    if (keyWasPressed(49)) // 1
-        debugPhysics = !debugPhysics, debugParticles = 0;
-    if (keyWasPressed(50)) // 2
-        debugParticles = !debugParticles, debugPhysics = 0;
-    if (keyWasPressed(51)) // 3
-        godMode = !godMode;
-    if (keyWasPressed(53)) // 5
-        debugTakeScreenshot = 1;
-    //if (keyWasPressed(54)) // 6
-    //    debugToggleParticleEditor();
-    if (keyWasPressed(55)) // 7
-        debugGamepads = !debugGamepads;
-    //if (keyWasPressed(56)) // 8
-    //if (keyWasPressed(57)) // 9
-    if (keyWasPressed(48)) // 0
-        showWatermark = !showWatermark;
+    if (debugOverlay)
+    {
+        if (keyWasPressed(48)) // 0
+            showWatermark = !showWatermark;
+        if (keyWasPressed(49)) // 1
+            debugPhysics = !debugPhysics, debugParticles = 0;
+        if (keyWasPressed(50)) // 2
+            debugParticles = !debugParticles, debugPhysics = 0;
+        if (keyWasPressed(51)) // 3
+            debugGamepads = !debugGamepads;
+        if (keyWasPressed(52)) // 4
+            godMode = !godMode;
+        if (keyWasPressed(53)) // 5
+            debugTakeScreenshot = 1;
+        //if (keyWasPressed(54)) // 6
+        //if (keyWasPressed(55)) // 7
+        //if (keyWasPressed(56)) // 8
+        //if (keyWasPressed(57)) // 9
+    }
 }
 
 const debugRender = ()=>
@@ -191,21 +201,20 @@ const debugRender = ()=>
 
     if (debugGamepads && gamepadsEnable && navigator.getGamepads)
     {
-        // poll gamepads
+        // gamepad debug display
         const gamepads = navigator.getGamepads();
         for (let i = gamepads.length; i--;)
         {
             const gamepad = gamepads[i];
             if (gamepad)
             {
-                // gamepad debug display
                 const stickScale = 1;
                 const buttonScale = .2;
                 const centerPos = cameraPos;
                 const sticks = stickData[i];
                 for (let j = sticks.length; j--;)
                 {
-                    const drawPos = centerPos.add(vec2(j*stickScale*2,i*stickScale*3));
+                    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);
                     debugLine(drawPos, stickPos, '#f00');
@@ -224,38 +233,36 @@ const debugRender = ()=>
 
     if (debugOverlay)
     {
+        // mouse pick
+        let bestDistance = Infinity, bestObject;
         for (const o of engineObjects)
         {
-            if (o.canvas)
+            if (o.canvas || o.destroyed)
                 continue; // skip tile layers
 
             const size = o.size.copy();
-            size.x = max(size.x, .2);
-            size.y = max(size.y, .2);
+            if (!size.x || !size.y)
+                continue;
+
+            const distance = mousePos.distanceSquared(o.pos);
+            if (distance < bestDistance)
+            {
+                bestDistance = distance;
+                bestObject = o
+            }
 
+            // show object info
             const color = new Color(
                 o.collideTiles?1:0, 
                 o.collideSolidObjects?1:0,
                 o.isSolid?1:0, 
                 o.parent ? .2 : .5);
-
-            // show object info
+            size.x = max(size.x, .2);
+            size.y = max(size.y, .2);
             drawRect(o.pos, size, color);
             drawRect(o.pos, size.scale(.8), o.parent ? new Color(1,1,1,.5) : new Color(0,0,0,.8));
             o.parent && drawLine(o.pos, o.parent.pos, .1, new Color(0,0,1,.5));
         }
-
-        // mouse pick
-        let bestDistance = Infinity, bestObject;
-        for (const o of engineObjects)
-        {
-            const distance = mousePos.distanceSquared(o.pos);
-            if (distance < bestDistance)
-            {
-                bestDistance = distance;
-                bestObject = o
-            }
-        }
         
         if (bestObject)
         {
@@ -275,7 +282,8 @@ const debugRender = ()=>
                 pos = pos.add(height), ...args);
             drawText('vel = ' + printVec2(bestObject.velocity), pos = pos.add(height), ...args);
             drawText('size = ' + printVec2(bestObject.size), pos = pos.add(height), ...args);
-            drawText('collision = ' + getTileCollisionData(mousePos), pos = mousePos.subtract(height), ...args);
+            drawText('type = ' + ( bestObject.constructor.name), pos = mousePos.subtract(height), ...args);
+            drawText('collision = ' + getTileCollisionData(mousePos), pos = mousePos.subtract(height.scale(2)), ...args);
             mainContext = saveContext;
         }
 
@@ -283,16 +291,15 @@ const debugRender = ()=>
     }
 
     {
-        // render debug rects
-        overlayContext.lineWidth = 1;
+        // draw debug primitives
+        overlayContext.save();
+        overlayContext.lineWidth = 2;
         const pointSize = debugPointSize * cameraScale;
         debugPrimitives.forEach(p=>
         {
             // create canvas transform from world space to screen space
             const pos = worldToScreen(p.pos);
             
-            overlayContext.save();
-            overlayContext.lineWidth = 2;
             overlayContext.translate(pos.x|0, pos.y|0);
             overlayContext.rotate(p.angle);
             overlayContext.fillStyle = overlayContext.strokeStyle = p.color;
@@ -325,15 +332,17 @@ const debugRender = ()=>
                 p.fill && overlayContext.fill();
                 overlayContext.stroke();
             }
-
-            overlayContext.restore();
         });
 
-        overlayContext.fillStyle = overlayContext.strokeStyle = '#fff';
+        // remove expired pritives
+        debugPrimitives = debugPrimitives.filter(r=>r.time.get()<0);
+
+        overlayContext.restore();
     }
 
     {
-        let x = 9, y = -20, h = 30;
+        // draw debug overlay
+        overlayContext.save();
         overlayContext.fillStyle = '#fff';
         overlayContext.textAlign = 'left';
         overlayContext.textBaseline = 'top';
@@ -341,6 +350,7 @@ const debugRender = ()=>
         overlayContext.shadowColor = '#000';
         overlayContext.shadowBlur = 9;
 
+        let x = 9, y = -20, h = 30;
         if (debugOverlay)
         {
             overlayContext.fillText(engineName, x, y += h);
@@ -353,214 +363,38 @@ const debugRender = ()=>
             overlayContext.fillText('1: Debug Physics', x, y += h);
             overlayContext.fillStyle = debugParticles ? '#f00' : '#fff';
             overlayContext.fillText('2: Debug Particles', x, y += h);
+            overlayContext.fillStyle = debugGamepads ? '#f00' : '#fff';
+            overlayContext.fillText('3: Debug Gamepads', x, y += h);
             overlayContext.fillStyle = godMode ? '#f00' : '#fff';
-            overlayContext.fillText('3: God Mode', x, y += h);
+            overlayContext.fillText('4: God Mode', x, y += h);
             overlayContext.fillStyle = '#fff';
             overlayContext.fillText('5: Save Screenshot', x, y += h);
-            //overlayContext.fillStyle = debugParticleEditor ? '#f00' : '#fff';
-            //overlayContext.fillText('6: Particle Editor', x, y += h);
-            overlayContext.fillStyle = debugGamepads ? '#f00' : '#fff';
-            overlayContext.fillText('7: Debug Gamepads', x, y += h);
-        }
-        else
-        {
-            overlayContext.fillText(debugPhysics ? 'Debug Physics' : '', x, y += h);
-            overlayContext.fillText(debugParticles ? 'Debug Particles' : '', x, y += h);
-            overlayContext.fillText(godMode ? 'God Mode' : '', x, y += h);
-            overlayContext.fillText(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
-        }
-    
-        overlayContext.shadowBlur = 0;
-    }
 
-    debugPrimitives = debugPrimitives.filter(r=>r.time.get()<0);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// particle system editor (work in progress)
-let debugParticleEditor = 0, debugParticleSystem, debugParticleSystemDiv, particleSystemCode;
-
-const debugToggleParticleEditor = ()=>
-{
-    debugParticleEditor = !debugParticleEditor;
-
-    if (debugParticleEditor)
-    {
-        if (!debugParticleSystem || debugParticleSystem.destroyed)
-            debugParticleSystem = new ParticleEmitter(cameraPos);
-    }
-    else if (debugParticleSystem && !debugParticleSystem.destroyed)
-        debugParticleSystem.destroy();
-
-
-    const colorToHex = (color)=>
-    {
-        const componentToHex = (c)=>
-        {
-            const hex = (c*255|0).toString(16);
-            return hex.length == 1 ? '0' + hex : hex;
-        }
-
-        return '#' + componentToHex(color.r) + componentToHex(color.g) + componentToHex(color.b);
-    }
-    const hexToColor = (hex)=>
-    {
-        return new Color(
-            parseInt(hex.substr(1,2), 16)/255,
-            parseInt(hex.substr(3,2), 16)/255,
-            parseInt(hex.substr(5,2), 16)/255)
-    }
-
-    if (!debugParticleSystemDiv)
-    {
-        const div = debugParticleSystemDiv = document.createElement('div');
-        div.innerHTML = '<big><b>Particle Editor';
-        div.style = 'position:absolute;top:10;left:10;color:#fff';
-        document.body.appendChild(div);
-
-        for ( const setting of debugParticleSettings)
-        {
-            const input = setting[2] = document.createElement('input');
-            const name = setting[0];
-            const type = setting[1];
-            if (type)
+            let keysPressed = '';
+            for(const i in inputData[0])
             {
-                if (type == 'color')
-                {
-                    input.type = type;
-                    const color = debugParticleSystem[name];
-                    input.value = colorToHex(color);
-                }
-                else if (type == 'alpha' && name == 'colorStartAlpha')
-                    input.value = debugParticleSystem.colorStartA.a;
-                else if (type == 'alpha' && name == 'colorEndAlpha')
-                    input.value = debugParticleSystem.colorEndA.a;
-                else if (name == 'tileSizeX')
-                    input.value = debugParticleSystem.tileSize.x;
-                else if (name == 'tileSizeY')
-                    input.value = debugParticleSystem.tileSize.y;
+                if (i && keyIsDown(i, 0))
+                    keysPressed += i + ' ' ;
             }
-            else
-                input.value = debugParticleSystem[name] || '0';
+            keysPressed && overlayContext.fillText('Keys Down: ' + keysPressed, x, y += h);
 
-            input.oninput = (e)=>
+            let buttonsPressed = '';
+            if (inputData[1])
+            for(const i in inputData[1])
             {
-                const inputFloat = parseFloat(input.value) || 0;
-                if (type)
-                {
-                    if (type == 'color')
-                    {
-                        const color = hexToColor(input.value);
-                        debugParticleSystem[name].r = color.r;
-                        debugParticleSystem[name].g = color.g;
-                        debugParticleSystem[name].b = color.b;
-                    }
-                    else if (type == 'alpha' && name == 'colorStartAlpha')
-                    {
-                        debugParticleSystem.colorStartA.a = clamp(inputFloat);
-                        debugParticleSystem.colorStartB.a = clamp(inputFloat);
-                    }
-                    else if (type == 'alpha' && name == 'colorEndAlpha')
-                    {
-                        debugParticleSystem.colorEndA.a = clamp(inputFloat);
-                        debugParticleSystem.colorEndB.a = clamp(inputFloat);
-                    }
-                    else if (name == 'tileSizeX')
-                    {
-                        debugParticleSystem.tileSize = vec2(parseInt(input.value), debugParticleSystem.tileSize.y);
-                    }
-                    else if (name == 'tileSizeY')
-                    {
-                        debugParticleSystem.tileSize.y = vec2(debugParticleSystem.tileSize.x, parseInt(input.value));
-                    }
-                }
-                else
-                    debugParticleSystem[name] = inputFloat;
-
-                updateCode();
+                if (i && keyIsDown(i, 1))
+                    buttonsPressed += i + ' ' ;
             }
-            div.appendChild(document.createElement('br'));
-            div.appendChild(input);
-            div.appendChild(document.createTextNode(' ' + name));
+            buttonsPressed && overlayContext.fillText('Gamepad: ' + buttonsPressed, x, y += h);
         }
-
-        div.appendChild(document.createElement('br'));
-        div.appendChild(document.createElement('br'));
-        div.appendChild(particleSystemCode = document.createElement('input'));
-        particleSystemCode.disabled = true;
-        div.appendChild(document.createTextNode(' code'));
-
-        div.appendChild(document.createElement('br'));
-        const button = document.createElement('button')
-        div.appendChild(button);
-        button.innerHTML = 'Copy To Clipboard';
-        
-        button.onclick = (e)=> navigator.clipboard.writeText(particleSystemCode.value); 
-
-        const updateCode = ()=>
+        else
         {
-            let code = '';
-            let count = 0;
-            for ( const setting of debugParticleSettings)
-            {
-                const name = setting[0];
-                const type = setting[1];
-                let value;
-                if (name == 'tileSizeX' || type == 'alpha')
-                    continue;
-
-                if (count++)
-                    code += ', ';
-
-                if (name == 'tileSizeY')
-                {
-                    value = `vec2(${debugParticleSystem.tileSize.x},${debugParticleSystem.tileSize.y})`;
-                }
-                else if (type == 'color')
-                {
-                    const c = debugParticleSystem[name];
-                    value = `new Color(${c.r},${c.g},${c.b},${c.a})`;
-                }
-                else
-                    value = debugParticleSystem[name];
-                code += value;
-            }
-
-            particleSystemCode.value = '...[' + code + ']';
+            overlayContext.fillText(debugPhysics ? 'Debug Physics' : '', x, y += h);
+            overlayContext.fillText(debugParticles ? 'Debug Particles' : '', x, y += h);
+            overlayContext.fillText(godMode ? 'God Mode' : '', x, y += h);
+            overlayContext.fillText(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
         }
-        updateCode();
+    
+        overlayContext.restore();
     }
-    debugParticleSystemDiv.style.display = debugParticleEditor ? '' : 'none'
-}
-
-const debugParticleSettings = 
-[
-    ['emitSize'],
-    ['emitTime'],
-    ['emitRate'],
-    ['emitConeAngle'],
-    ['tileIndex'],
-    ['tileSizeX', 'tileSize'],
-    ['tileSizeY', 'tileSize'],
-    ['colorStartA', 'color'],
-    ['colorStartB', 'color'],
-    ['colorStartAlpha', 'alpha'],
-    ['colorEndA',   'color'],
-    ['colorEndB',   'color'],
-    ['colorEndAlpha', 'alpha'],
-    ['particleTime'],
-    ['sizeStart'],
-    ['sizeEnd'],
-    ['speed'],
-    ['angleSpeed'],
-    ['damping'],
-    ['angleDamping'],
-    ['gravityScale'],
-    ['particleConeAngle'],
-    ['fadeRate'],
-    ['randomness'],
-    ['collideTiles'],
-    ['additive'],
-    ['randomColorComponents'],
-    ['renderOrder'],
-];
+}

package/engine/engineDraw.js

@@ -92,17 +92,13 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
         {
             // calculate uvs and render
             const cols = tileImageSize.x / tileSize.x |0;
-            const uvSizeX = tileSize.x * tileImageSizeInverse.x;
-            const uvSizeY = tileSize.y * tileImageSizeInverse.y;
+            const uvSizeX = tileSize.x / tileImageSize.x;
+            const uvSizeY = tileSize.y / tileImageSize.y;
             const uvX = (tileIndex%cols)*uvSizeX, uvY = (tileIndex/cols|0)*uvSizeY;
-
-            // shrink uvs to prevent bleeding
-            const shrinkTilesX = tileBleedShrinkFix * tileImageSizeInverse.x;
-            const shrinkTilesY = tileBleedShrinkFix * tileImageSizeInverse.y;
             
             glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle, 
-                uvX + shrinkTilesX, uvY + shrinkTilesY, 
-                uvX - shrinkTilesX + uvSizeX, uvY - shrinkTilesX + uvSizeY, 
+                uvX + tileImageFixBleed.x, uvY + tileImageFixBleed.y, 
+                uvX - tileImageFixBleed.x + uvSizeX, uvY - tileImageFixBleed.y + uvSizeY, 
                 color.rgbaInt(), additiveColor.rgbaInt()); 
         }
     }
@@ -121,10 +117,10 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
             {
                 // calculate uvs and render
                 const cols = tileImageSize.x / tileSize.x |0;
-                const sX = (tileIndex%cols)*tileSize.x   + tileBleedShrinkFix;
-                const sY = (tileIndex/cols|0)*tileSize.y + tileBleedShrinkFix;
-                const sWidth  = tileSize.x - 2*tileBleedShrinkFix;
-                const sHeight = tileSize.y - 2*tileBleedShrinkFix;
+                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);
             }
@@ -207,6 +203,18 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
     context.restore();
 }
 
+/** Enable normal or additive blend mode
+ *  @param {Boolean} [additive=0]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @memberof Draw */
+function setBlendMode(additive, useWebGL=glEnable)
+{
+    if (glEnable && useWebGL)
+        glSetBlendMode(additive);
+    else
+        mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+}
+
 /** Draw text on overlay canvas in world space
  *  @param {String}  text
  *  @param {Vector2} pos
@@ -232,16 +240,93 @@ function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new
     overlayContext.fillText(text, pos.x, pos.y);
 }
 
-/** Enable normal or additive blend mode
- *  @param {Boolean} [additive=0]
- *  @param {Boolean} [useWebGL=glEnable]
- *  @memberof Draw */
-function setBlendMode(additive, useWebGL=glEnable)
+///////////////////////////////////////////////////////////////////////////////
+
+/** 
+ * Font Image Object - Draw text on a 2D canvas by using characters in an image
+ * <br> - 96 characters (from space to tilde) are stored in an image
+ * <br> - Uses a default 8x8 font if none is supplied
+ * <br> - You can also use fonts from the main tile sheet
+ * @example
+ * // use built in font
+ * const font = new ImageFont;
+ * 
+ * // draw text
+ * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
+ */
+class FontImage
 {
-    if (glEnable && useWebGL)
-        glSetBlendMode(additive);
-    else
-        mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    /** Create an image font
+     *  @param {Image}   [image] - The image the font is stored in, if undefined the default font is used
+     *  @param {Vector2} [tileSize=vec2(8)] - The size of the font source tiles
+     *  @param {Vector2} [paddingSize=vec2(0,1)] - How much extra space to add between characters
+     *  @param {Number}  [startTileIndex=0] - Tile index in image where font starts
+     *  @param {CanvasRenderingContext2D} [context=overlayContext] - context to draw to
+     */
+    constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), startTileIndex=0, context=overlayContext)
+    {
+        if (!image)
+        {
+            // use default font image
+            image = new Image();
+            image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAYAQAAAAA9+x6JAAAAAnRSTlMAAHaTzTgAAAGiSURBVHjaZZABhxxBEIUf6MCIBdFY+Q0PMNgf0yCgsSAaZcT9sgIPtBWwIA5wgAPEoHUyJeeSlW+gjK+fegWw1hPWNRcEyWh2npdpBmSUBrRaN1WSlQAWXaWLF0kkwR7C/N7XUvIaQr4xpeqeQigjLwBRZ/6KkufAACcv5z7GYhvgWHII8xN/4C2hvLCkmZSVgIJMHNTxpYOsJOiitEjUQnIQAFFP+opoQfCbjWmfzWiNzCjEvxAPFARmw/Y5Te0sl2zEp4M+m7cToJjdJS7y1xcFlFT7EtWBZ8nl7uLSff7UgYewtlyY6yHM4RrjNrnsfn/W0DBK9xNZctZ7gsTeXTe5eqLqXFlKnAn+vkNXzH6TqPW10ksKoSlauKk1TcncZLSTxNnQ8Av/8RGPXOFIuMCZ/fpwIZx5vU4QIRQ44HwUyHx/QrZhm5VtXFex7ja2se0KBpnPT0DSwS4xd86uAy+SqnLBgkPY5JolhJ33ENyK6n0VyRzCnzebIkFdY/NUtM66lTdhix1KUss6q5snH5ftVJXG0QITb1gUDvzD3z/BbyOLMirwCtPzAAAAAElFTkSuQmCC';
+        }
+
+        this.image = image;
+        this.tileSize = tileSize;
+        this.paddingSize = paddingSize;
+        this.startTileIndex = startTileIndex;
+        this.context = context;
+    }
+
+    /** Draw text in screen space using the image font
+     *  @param {String}  text
+     *  @param {Vector2} pos
+     *  @param {Number}  [scale=4]
+     *  @param {Boolean} [center]
+     */
+    drawTextScreen(text, pos, scale=4, center)
+    {
+        const context = this.context;
+        context.save();
+        context.imageSmoothingEnabled = !cavasPixelated;
+
+        const size = this.tileSize;
+        const drawSize = size.add(this.paddingSize).scale(scale);
+        const cols = this.image.width / this.tileSize.x |0;
+        text.split('\n').forEach((line, i)=>
+        {
+            const centerOffset = center ? line.length * size.x * scale / 2 |0 : 0;
+            for(let j=line.length; j--;)
+            {
+                // draw each character
+                let charCode = line[j].charCodeAt();
+                if (charCode < 32 || charCode > 127)
+                    charCode = 127; // unknown character
+
+                // get the character source location and draw it
+                const tile = this.startTileIndex + charCode - 32;
+                const x = tile % cols;
+                const y = tile / cols |0;
+                const drawPos = pos.add(vec2(j,i).multiply(drawSize));
+                context.drawImage(this.image, x * size.x, y * size.y, size.x, size.y, 
+                    drawPos.x - centerOffset, drawPos.y, size.x * scale, size.y * scale);
+            }
+        });
+
+        context.restore();
+    }
+
+    /** Draw text in world space using the image font
+     *  @param {String}  text
+     *  @param {Vector2} pos
+     *  @param {Number}  [scale=.25]
+     *  @param {Boolean} [center]
+     */
+    drawText(text, pos, scale=1, center)
+    {
+        this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////