littlejsengine 1.1.26 → 1.2.0

package/engine/engine.js

@@ -22,7 +22,7 @@
 const engineName = 'LittleJS';
 
 /** Version of engine */
-const engineVersion = '1.1.26';
+const engineVersion = '1.2.0';
 
 /** Frames per second to update objects
  *  @default */
@@ -59,7 +59,7 @@ let averageFPS, drawCount;
 // css text used for elements created by engine
 const styleBody = 'margin:0;overflow:hidden;background:#000' +
     ';touch-action:none;user-select:none;-webkit-user-select:none;-moz-user-select:none';
-const canvaStyle = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
+const styleCanvas = 'position:absolute';
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -84,7 +84,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         document.body.style = styleBody;
         document.body.appendChild(mainCanvas = document.createElement('canvas'));
         mainContext = mainCanvas.getContext('2d');
-        mainCanvas.style = canvaStyle;
+        mainCanvas.style = styleCanvas;
 
         // init stuff and start engine
         debugInit();
@@ -93,7 +93,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         // create overlay canvas for hud to appear above gl canvas
         document.body.appendChild(overlayCanvas = document.createElement('canvas'));
         overlayContext = overlayCanvas.getContext('2d');
-        overlayCanvas.style = canvaStyle;
+        overlayCanvas.style = styleCanvas;
         
         gameInit();
         touchGamepadCreate();
@@ -109,7 +109,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
         frameTimeLastMS = frameTimeMS;
         if (debug || showWatermark)
-            averageFPS = lerp(.05, 1e3/(frameTimeDeltaMS||1), averageFPS || 0);
+            averageFPS = lerp(.05, averageFPS || 0, 1e3/(frameTimeDeltaMS||1));
         if (debug)
             frameTimeDeltaMS *= keyIsDown(107) ? 5 : keyIsDown(109) ? .2 : 1; // +/- to speed/slow time
         timeReal += frameTimeDeltaMS / 1e3;
@@ -160,13 +160,24 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             
             // fit to window by adding space on top or bottom if necessary
             const aspect = innerWidth / innerHeight;
-            const fixedAspect = mainCanvas.width / mainCanvas.height;
-            mainCanvas.style.width  = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
-            mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
-            if (glCanvas)
+            const fixedAspect = canvasFixedSize.x / canvasFixedSize.y;
+
+            // clear css
+            mainCanvas.style.width  = overlayCanvas.style.width  = 
+            mainCanvas.style.height = overlayCanvas.style.height = 
+            mainCanvas.style.top    = overlayCanvas.style.top    = 
+            mainCanvas.style.left   = overlayCanvas.style.left   = '';
+
+            // letterbox center canvas
+            if (aspect < fixedAspect)
+            {
+                mainCanvas.style.width = overlayCanvas.style.width = innerWidth;
+                mainCanvas.style.top   = overlayCanvas.style.top = (innerHeight - innerWidth/fixedAspect)/2;
+            }
+            else
             {
-                glCanvas.style.width  = mainCanvas.style.width;
-                glCanvas.style.height = mainCanvas.style.height;
+                mainCanvas.style.height = overlayCanvas.style.height = innerHeight;
+                mainCanvas.style.left   = overlayCanvas.style.left = (innerWidth - innerHeight*fixedAspect)/2;
             }
         }
         else
@@ -174,6 +185,18 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             // clear and set size to same as window
             mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
             mainCanvas.height = min(innerHeight, canvasMaxSize.y);
+
+            // center canvas
+            overlayCanvas.style.top  = mainCanvas.style.top  = (innerHeight - mainCanvas.height)/2;
+            overlayCanvas.style.left = mainCanvas.style.left = (innerWidth  - mainCanvas.width)/2;
+        }
+    
+        if (glEnable)
+        {
+            glCanvas.style.width  = mainCanvas.style.width;
+            glCanvas.style.height = mainCanvas.style.height;
+            glCanvas.style.top    = mainCanvas.style.top;
+            glCanvas.style.left   = mainCanvas.style.left;
         }
         
         // render sort then render while removing destroyed objects

package/engine/engineAudio.js

@@ -69,7 +69,7 @@ class Sound
                     return; // out of range
 
                 // attenuate volume by distance
-                volume *= percent(lengthSquared**.5, range*this.taper, range);
+                volume *= percent(lengthSquared**.5, range, range*this.taper);
             }
 
             // get pan from screen space coords
@@ -251,7 +251,7 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
     // connect source to gain
     (
         window.StereoPannerNode ? // create pan node if possible
-        source.connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, 1, -1)}))
+        source.connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, -1, 1)}))
         : source
     )
     .connect(gainNode);

package/engine/engineBuild.bat

@@ -87,7 +87,15 @@ if %ERRORLEVEL% NEQ 0 (
 )
 
 rem lightly minify with uglify
-call uglifyjs -o  %OUTPUT_FILENAME% -- %OUTPUT_FILENAME%
+call uglifyjs -o %OUTPUT_FILENAME% -- %OUTPUT_FILENAME%
+if %ERRORLEVEL% NEQ 0 (
+    pause
+    exit /b %ERRORLEVEL%
+)
+
+rem --- BUILD TYPESCRIPT DEFINITIONS ---
+
+call tsc engine.all.js --declaration --allowJs --emitDeclarationOnly --outFile index.d.ts
 if %ERRORLEVEL% NEQ 0 (
     pause
     exit /b %ERRORLEVEL%

package/engine/engineBuildSetup.bat

@@ -3,4 +3,5 @@ rem Install these tools to build LittleJS
 call npm install -g google-closure-compiler
 call npm install -g uglify-js
 call npm install -g roadroller
-call npm install -g ect-bin
+call npm install -g ect-bin
+call npm install -g typescript

package/engine/engineDebug.js

@@ -7,6 +7,7 @@
  * LittleJS Debug System
  * <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 a 2d canvas as an image
  * @namespace Debug
@@ -164,22 +165,22 @@ const debugUpdate = ()=>
         debugOverlay = !debugOverlay;
     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
-        //    debugToggleParticleEditor();
-        if (keyWasPressed(55)) // 7
-            debugGamepads = !debugGamepads;
+        //if (keyWasPressed(55)) // 7
         //if (keyWasPressed(56)) // 8
         //if (keyWasPressed(57)) // 9
-        if (keyWasPressed(48)) // 0
-            showWatermark = !showWatermark;
     }
 }
 
@@ -200,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');
@@ -251,16 +251,14 @@ const debugRender = ()=>
                 bestObject = o
             }
 
-            size.x = max(size.x, .2);
-            size.y = max(size.y, .2);
-
+            // 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));
@@ -293,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;
@@ -335,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';
@@ -351,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);
@@ -363,14 +363,12 @@ 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);
 
             let keysPressed = '';
             for(const i in inputData[0])
@@ -388,7 +386,6 @@ const debugRender = ()=>
                     buttonsPressed += i + ' ' ;
             }
             buttonsPressed && overlayContext.fillText('Gamepad: ' + buttonsPressed, x, y += h);
-
         }
         else
         {
@@ -398,197 +395,6 @@ const debugRender = ()=>
             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);
+        overlayContext.restore();
     }
-    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)
-            {
-                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;
-            }
-            else
-                input.value = debugParticleSystem[name] || '0';
-
-            input.oninput = (e)=>
-            {
-                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();
-            }
-            div.appendChild(document.createElement('br'));
-            div.appendChild(input);
-            div.appendChild(document.createTextNode(' ' + name));
-        }
-
-        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 = ()=>
-        {
-            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 + ']';
-        }
-        updateCode();
-    }
-    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

@@ -203,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
@@ -228,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);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/engine/engineInput.js

@@ -159,7 +159,7 @@ const mouseToScreen = (mousePos)=>
 
     const rect = mainCanvas.getBoundingClientRect();
     return mainCanvasSize.multiply(
-        vec2(percent(mousePos.x, rect.right, rect.left), percent(mousePos.y, rect.bottom, rect.top)));
+        vec2(percent(mousePos.x, rect.left, rect.right), percent(mousePos.y, rect.top, rect.bottom)));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -200,8 +200,8 @@ function gamepadsUpdate()
             // read clamp dead zone of analog sticks
             const deadZone = .3, deadZoneMax = .8;
             const applyDeadZone = (v)=> 
-                v >  deadZone ?  percent( v, deadZoneMax, deadZone) : 
-                v < -deadZone ? -percent(-v, deadZoneMax, deadZone) : 0;
+                v >  deadZone ?  percent( v, deadZone, deadZoneMax) : 
+                v < -deadZone ? -percent(-v, deadZone, deadZoneMax) : 0;
 
             // read analog sticks
             for (let j = 0; j < gamepad.axes.length-1; j+=2)
@@ -281,7 +281,7 @@ if (isTouchDevice)
 // touch gamepad, virtual on screen gamepad emulator for touch devices
 
 // touch input internal variables
-let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2();
+let touchGamepadTimer = new Timer, touchGamepadButtons = [], touchGamepadStick = vec2(), touchGamepadAnalog = 1;
 
 // create the touch gamepad, called automatically by the engine
 function touchGamepadCreate()
@@ -327,7 +327,14 @@ function touchGamepadCreate()
             if (touchPos.distance(stickCenter) < touchGamepadSize)
             {
                 // virtual analog stick
-                touchGamepadStick = touchPos.subtract(stickCenter).clampLength(touchGamepadSize/2).scale(2/touchGamepadSize);
+                if (touchGamepadAnalog)
+                    touchGamepadStick = touchPos.subtract(stickCenter).clampLength(touchGamepadSize/2).scale(2/touchGamepadSize);
+                else
+                {
+                    // 8 way dpad
+                    const angle = touchPos.subtract(stickCenter).angle();
+                    touchGamepadStick.setAngle((angle * 4 / PI + 8.5 | 0) * PI / 4);
+                }
             }
             else if (touchPos.distance(buttonCenter) < touchGamepadSize)
             {
@@ -351,7 +358,7 @@ function touchGamepadRender()
         return;
     
     // fade off when not touching or paused
-    const alpha = percent(touchGamepadTimer.get(), 3, 4);
+    const alpha = percent(touchGamepadTimer.get(), 4, 3);
     if (!alpha || paused)
         return;