littlejsengine 1.0.14 → 1.1.8

package/engine/engineDebug.js

@@ -1,69 +1,137 @@
-/*
-    LittleJS - The Tiny JavaScript Game Engine That Can
-    MIT License - Copyright 2019 Frank Force
-*/
-/*
-    LittleJS Debug System
-    
-    Debug Features
-    - debug overlay with mouse pick
-    - debug primitive rendering
-    - save screenshots
-*/
+/** 
+ *  LittleJS Debug System
+ *  <br> - Debug overlay with mouse pick
+ *  <br> - Debug primitive rendering
+ *  <br> - Save screenshots to disk
+ *  @namespace Debug
+ */
 
 'use strict';
 
+/** True if debug is enabled
+ *  @default
+ *  @memberof Debug */
 const debug = 1;
+
+/** True if asserts are enaled
+ *  @default
+ *  @memberof Debug */
 const enableAsserts = 1;
+
+/** Size to render debug points by default
+ *  @default
+ *  @memberof Debug */
 const debugPointSize = .5;
 
+/** True if watermark with FPS should be down
+ *  @default
+ *  @memberof Debug */
 let showWatermark = 1;
+
+/** True if god mode is enabled, handle this however you want
+ *  @default
+ *  @memberof Debug */
 let godMode = 0;
-let debugPrimitives = [];
-let debugOverlay = 0;
-let debugPhysics = 0;
-let debugRaycast = 0;
-let debugParticles = 0;
-let debugGamepads = 0;
-let debugMedals = 0;
-let debugCanvas = -1;
-let debugTakeScreenshot;
-let downloadLink;
-
-// debug helper functions
+
+// Engine internal variables not exposed to documentation
+let debugPrimitives = [], debugOverlay = 0, debugPhysics = 0, debugRaycast = 0, 
+debugParticles = 0, debugGamepads = 0, debugMedals = 0, debugTakeScreenshot, downloadLink;
+
+///////////////////////////////////////////////////////////////////////////////
+// Debug helper functions
+
+/** Asserts if the experssion is false, does not do anything in release builds
+ *  @param {Boolean} assertion
+ *  @param {Object}  output
+ *  @memberof Debug */
 const ASSERT = enableAsserts ? (...assert)=> console.assert(...assert) : ()=>{};
-const debugRect = (pos, size=vec2(0), color='#fff', time=0, angle=0, fill=0)=> 
+
+/** Draw a debug rectangle in world space
+ *  @param {Vector2} pos
+ *  @param {Vector2} [size=new Vector2()]
+ *  @param {String}  [color='#fff']
+ *  @param {Number}  [time=0]
+ *  @param {Number}  [angle=0]
+ *  @param {Boolean} [fill=0]
+ *  @memberof Debug */
+const debugRect = (pos, size=vec2(), color='#fff', time=0, angle=0, fill=0)=> 
 {
     ASSERT(typeof color == 'string'); // pass in regular html strings as colors
     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=0]
+ *  @memberof Debug */
 const debugCircle = (pos, radius=0, color='#fff', time=0, fill=0)=>
 {
     ASSERT(typeof color == 'string'); // pass in regular html strings as colors
     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]
+ *  @memberof Debug */
 const debugPoint = (pos, color, time, angle)=> debugRect(pos, 0, 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]
+ *  @memberof Debug */
 const 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);
 }
-const debugAABB = (pA, pB, sA, sB, color)=>
+
+/** 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']
+ *  @memberof Debug */
+const debugAABB = (pA, sA, pB, sB, color)=>
 {
     const minPos = vec2(min(pA.x - sA.x/2, pB.x - sB.x/2), min(pA.y - sA.y/2, pB.y - sB.y/2));
     const maxPos = vec2(max(pA.x + sA.x/2, pB.x + sB.x/2), max(pA.y + sA.y/2, pB.y + sB.y/2));
     debugRect(minPos.lerp(maxPos,.5), maxPos.subtract(minPos), color);
 }
-const debugText = (text='', pos, size=1, color='#fff', time=0, angle=0, font='monospace')=> 
+
+/** 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']
+ *  @memberof Debug */
+const debugText = (text, pos, size=1, color='#fff', time=0, angle=0, font='monospace')=> 
 {
     ASSERT(typeof color == 'string'); // pass in regular html strings as colors
     debugPrimitives.push({text, pos, size, color, time:new Timer(time), angle, font});
 }
 
+/** Clear all debug primitives in the list
+ *  @memberof Debug */
 const debugClear = ()=> debugPrimitives = [];
 
-// save a canvas to disk
+/** Save a canvas to disk 
+ *  @param {HTMLCanvasElement} canvas
+ *  @param {String}            [filename]
+ *  @memberof Debug */
 const debugSaveCanvas = (canvas, filename = engineName + '.png') =>
 {
     downloadLink.download = 'screenshot.png';
@@ -72,7 +140,7 @@ const debugSaveCanvas = (canvas, filename = engineName + '.png') =>
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// engine debug function (called automatically)
+// Engine debug function (called automatically)
 
 const debugInit = ()=>
 {
@@ -112,6 +180,11 @@ const debugRender = ()=>
 
     if (debugTakeScreenshot)
     {
+        // composite canvas
+        glCopyToContext(mainContext, 1);
+        mainContext.drawImage(overlayCanvas, 0, 0);
+        overlayCanvas.width |= 0;
+
         debugSaveCanvas(mainCanvas);
         debugTakeScreenshot = 0;
     }
@@ -189,8 +262,8 @@ const debugRender = ()=>
             const saveContext = mainContext;
             mainContext = overlayContext
             const raycastHitPos = tileCollisionRaycast(bestObject.pos, mousePos);
-            raycastHitPos && drawRect(raycastHitPos.int().add(vec2(.5)), vec2(1), new Color(0,1,1,.3));
-            drawRect(mousePos.int().add(vec2(.5)), vec2(1), new Color(0,0,1,.5));
+            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));
             drawLine(mousePos, bestObject.pos, .1, !raycastHitPos ? new Color(0,1,0,.5) : new Color(1,0,0,.5));
 
             let pos = mousePos.copy(), height = vec2(0,.5);
@@ -304,7 +377,7 @@ const debugRender = ()=>
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// particle system editor
+// particle system editor (work in progress)
 let debugParticleEditor = 0, debugParticleSystem, debugParticleSystemDiv, particleSystemCode;
 
 const debugToggleParticleEditor = ()=>

package/engine/engineDraw.js

@@ -1,28 +1,78 @@
-/*
-    LittleJS Drawing System
-
-    - Super fast tile sheet rendering
-    - Utility functions for webgl
-*/
+/** 
+ *  LittleJS Drawing System
+ *  <br> - Hybrid with both Canvas2D and WebGL available
+ *  <br> - Super fast tile sheet rendering with WebGL
+ *  <br> - Can apply rotation, mirror, color and additive color
+ *  <br> - Many useful utility functions
+ *  @namespace Draw
+ */
 
 'use strict';
 
-// convert between screen and world coordinates
+/** Tile sheet for batch rendering system
+ *  @type {Image}
+ *  @memberof Draw */
+const tileImage = new Image();
+
+/** The primary 2D canvas visible to the user
+ *  @type {HTMLCanvasElement}
+ *  @memberof Draw */
+let mainCanvas;
+
+/** 2d context for mainCanvas
+ *  @type {CanvasRenderingContext2D}
+ *  @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 size of the main canvas (and other secondary canvases) 
+ *  @type {Vector2}
+ *  @memberof Draw */
+let mainCanvasSize = vec2();
+
+/** Convert from screen to world space coordinates
+ *  @param {Vector2} screenPos
+ *  @return {Vector2}
+ *  @memberof Draw */
 const screenToWorld = (screenPos)=>
     screenPos.add(vec2(.5)).subtract(mainCanvasSize.scale(.5)).multiply(vec2(1/cameraScale,-1/cameraScale)).add(cameraPos);
+
+/** Convert from world to screen space coordinates
+ *  @param {Vector2} worldPos
+ *  @return {Vector2}
+ *  @memberof Draw */
 const worldToScreen = (worldPos)=>
     worldPos.subtract(cameraPos).multiply(vec2(cameraScale,-cameraScale)).add(mainCanvasSize.scale(.5)).subtract(vec2(.5));
 
-// draw textured tile centered on pos
-function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=defaultTileSize, color=new Color, angle=0, mirror, 
-    additiveColor=new Color(0,0,0,0))
+/** Draw textured tile centered in world space, with color applied if using WebGL
+ *  @param {Vector2} pos                                - Center of the tile in world space
+ *  @param {Vector2} [size=new Vector2(1,1)]            - Size of the tile in world space, width and height
+ *  @param {Number}  [tileIndex=-1]                     - Tile index to use, negative is untextured
+ *  @param {Vector2} [tileSize=tileSizeDefault]         - Tile size in source pixels
+ *  @param {Color}   [color=new Color(1,1,1)]           - 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 {Color}   [additiveColor=new Color(0,0,0,0)] - Additive color to be applied
+ *  @param {Boolean} [useWebGL=glEnable]                - Use accelerated WebGL rendering
+ *  @memberof Draw */
+function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, color=new Color, angle=0, mirror, 
+    additiveColor=new Color(0,0,0,0), useWebGL=glEnable)
 {
     showWatermark && ++drawCount;
-    if (glEnable)
+    if (glEnable && useWebGL)
     {
-        if (tileIndex < 0)
+        if (tileIndex < 0 || !tileImage.width)
         {
-            // if negative tile index, force untextured
+            // if negative tile index or image not found, force untextured
             glDraw(pos.x, pos.y, size.x, size.y, angle, 0, 0, 0, 0, 0, color.rgbaInt()); 
         }
         else
@@ -69,33 +119,68 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=defaultTileSize, col
     }
 }
 
-// draw a colored untextured rect centered on pos
-function drawRect(pos, size, color, angle)
+/** Draw colored rect centered on pos
+ *  @param {Vector2} pos
+ *  @param {Vector2} [size=new Vector2(1,1)]
+ *  @param {Color}   [color=new Color(1,1,1)]
+ *  @param {Number}  [angle=0]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @memberof Draw */
+function drawRect(pos, size, color, angle, useWebGL)
 {
-    drawTile(pos, size, -1, defaultTileSize, color, angle);
+    drawTile(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
 }
 
-// draw textured tile centered on pos in screen space
-function drawTileScreenSpace(pos, size=vec2(1), tileIndex, tileSize, color, angle, mirror, additiveColor)
+/** Draw textured tile centered on pos in screen space
+ *  @param {Vector2} pos                        - Center of the tile
+ *  @param {Vector2} [size=new Vector2(1,1)]    - Size of the tile
+ *  @param {Number}  [tileIndex=-1]             - Tile index to use, negative is untextured
+ *  @param {Vector2} [tileSize=tileSizeDefault] - Tile size in source pixels
+ *  @param {Color}   [color=new Color]
+ *  @param {Number}  [angle=0]
+ *  @param {Boolean} [mirror=0]
+ *  @param {Color}   [additiveColor=new Color(0,0,0,0)]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @memberof Draw */
+function drawTileScreenSpace(pos, size=vec2(1), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL)
 {
-    drawTile(screenToWorld(pos), size.scale(1/cameraScale), tileIndex, tileSize, color, angle, mirror, additiveColor);
+    drawTile(screenToWorld(pos), size.scale(1/cameraScale), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL);
 }
 
-// draw a colored untextured rect in screen space
-function drawRectScreenSpace(pos, size, color, angle)
+/** Draw colored rectangle in screen space
+ *  @param {Vector2} pos
+ *  @param {Vector2} [size=new Vector2(1,1)]
+ *  @param {Color}   [color=new Color(1,1,1)]
+ *  @param {Number}  [angle=0]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @memberof Draw */
+function drawRectScreenSpace(pos, size, color, angle, useWebGL)
 {
-    drawTileScreenSpace(pos, size, -1, defaultTileSize, color, angle);
+    drawTileSrceenSpace(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
 }
 
-// draw a colored line between two points
-function drawLine(posA, posB, thickness=.1, color)
+/** Draw colored line between two points
+ *  @param {Vector2} posA
+ *  @param {Vector2} posB
+ *  @param {Number}  [thickness=.1]
+ *  @param {Color}   [color=new Color(1,1,1)]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @memberof Draw */
+function drawLine(posA, posB, thickness=.1, color, useWebGL)
 {
     const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
     const size = vec2(thickness, halfDelta.length()*2);
-    drawRect(posA.add(halfDelta), size, color, halfDelta.angle());
+    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), 0, 0, useWebGL);
 }
 
-// draw directly to the 2d canvas in world space (bipass webgl)
+/** Draw directly to a 2d canvas context in world space
+ *  @param {Vector2}  pos
+ *  @param {Vector2}  size
+ *  @param {Number}   angle
+ *  @param {Boolean}  mirror
+ *  @param {Function} drawFunction
+ *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @memberof Draw */
 function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainContext)
 {
     // create canvas transform from world space to screen space
@@ -109,8 +194,16 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
     context.restore();
 }
 
-// draw text on overlay canvas in world space
-function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=defaultFont)
+/** Draw text on overlay canvas in world space
+ *  @param {String}  text
+ *  @param {Vector2} pos
+ *  @param {Number}  [size=1]
+ *  @param {Color}   [color=new Color(1,1,1)]
+ *  @param {Number}  [lineWidth=0]
+ *  @param {Color}   [lineColor=new Color(0,0,0)]
+ *  @param {String}  [textAlign='center']
+ *  @memberof Draw */
+function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault)
 {
     pos = worldToScreen(pos);
     overlayContext.font = size*cameraScale + 'px '+ font;
@@ -126,16 +219,28 @@ function drawText(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new
     overlayContext.fillText(text, pos.x, pos.y);
 }
 
-// enable additive or regular blend mode
-function setBlendMode(additive)
+/** Enable normal or additive blend mode
+ *  @param {Boolean} [additive=0]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @memberof Draw */
+function setBlendMode(additive, useWebGL=glEnable)
 {
-    glEnable ? glSetBlendMode(additive) : mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    if (glEnable && useWebGL)
+        glSetBlendMode(additive);
+    else
+        mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// fullscreen mode
+// Fullscreen mode
 
+/** Returns true if fullscreen mode is active
+ *  @return {Boolean}
+ *  @memberof Draw */
 const isFullscreen =()=> document.fullscreenElement;
+
+/** Toggle fullsceen mode
+ *  @memberof Draw */
 function toggleFullscreen()
 {
     if (isFullscreen())

package/engine/engineInput.js

@@ -1,36 +1,104 @@
-/*
-    LittleJS Input System
-    - Tracks key down, pressed, and released
-    - Also tracks mouse buttons, position, and wheel
-    - Supports multiple gamepads
-*/
+/** 
+ *  LittleJS Input System
+ *  <br> - Tracks key down, pressed, and released
+ *  <br> - Also tracks mouse buttons, position, and wheel
+ *  <br> - Supports multiple gamepads
+ *  @namespace Input
+ */
 
 'use strict';
 
-// input for all devices including keyboard, mouse, and gamepad
-let hadInput         = 0;
-const keyIsDown      = (key, device=0)=> inputData[device] && inputData[device][key] & 1 ? 1 : 0;
-const keyWasPressed  = (key, device=0)=> inputData[device] && inputData[device][key] & 2 ? 1 : 0;
+/** Returns true if device key is down
+ *  @param {Number} key
+ *  @param {Number} [device=0]
+ *  @return {Boolean}
+ *  @memberof Input */
+const keyIsDown = (key, device=0)=> inputData[device] && inputData[device][key] & 1 ? 1 : 0;
+
+/** Returns true if device key was pressed this frame
+ *  @param {Number} key
+ *  @param {Number} [device=0]
+ *  @return {Boolean}
+ *  @memberof Input */
+const keyWasPressed = (key, device=0)=> inputData[device] && inputData[device][key] & 2 ? 1 : 0;
+
+/** Returns true if device key was released this frame
+ *  @param {Number} key
+ *  @param {Number} [device=0]
+ *  @return {Boolean}
+ *  @memberof Input */
 const keyWasReleased = (key, device=0)=> inputData[device] && inputData[device][key] & 4 ? 1 : 0;
-const clearInput     = ()=> inputData[0] = [];
 
-// mouse input
-const mouseIsDown      = keyIsDown;
-const mouseWasPressed  = keyWasPressed;
+/** Clears all input
+ *  @memberof Input */
+const clearInput = ()=> inputData[0] = [];
+
+/** Returns true if mouse button is down
+ *  @param {Number} button
+ *  @return {Boolean}
+ *  @memberof Input */
+const mouseIsDown = keyIsDown;
+
+/** Returns true if mouse button was pressed
+ *  @param {Number} button
+ *  @return {Boolean}
+ *  @memberof Input */
+const mouseWasPressed = keyWasPressed;
+
+/** Returns true if mouse button was released
+ *  @param {Number} button
+ *  @return {Boolean}
+ *  @memberof Input */
 const mouseWasReleased = keyWasReleased;
-let mousePos           = vec2();
-let mousePosScreen     = vec2();
-let mouseWheel         = 0;
-
-// gamepad input
-let usingGamepad = 0;
-const gamepadIsDown      = (button, gamepad=0)=> keyIsDown     (button, gamepad+1);
-const gamepadWasPressed  = (button, gamepad=0)=> keyWasPressed (button, gamepad+1);
+
+/** Mouse pos in world space
+ *  @type {Vector2}
+ *  @memberof Input */
+let mousePos = vec2();
+
+/** Mouse pos in screen space
+ *  @type {Vector2}
+ *  @memberof Input */
+let mousePosScreen = vec2();
+
+/** Mouse wheel delta this frame
+ *  @memberof Input */
+let mouseWheel = 0;
+
+/** Returns true if user is using gamepad (has more recently pressed a gamepad button)
+ *  @memberof Input */
+let isUsingGamepad = 0;
+
+/** Returns true if gamepad button is down
+ *  @param {Number} button
+ *  @param {Number} [gamepad=0]
+ *  @return {Boolean}
+ *  @memberof Input */
+const gamepadIsDown = (button, gamepad=0)=> keyIsDown(button, gamepad+1);
+
+/** Returns true if gamepad button was pressed
+ *  @param {Number} button
+ *  @param {Number} [gamepad=0]
+ *  @return {Boolean}
+ *  @memberof Input */
+const gamepadWasPressed = (button, gamepad=0)=> keyWasPressed(button, gamepad+1);
+
+/** Returns true if gamepad button was released
+ *  @param {Number} button
+ *  @param {Number} [gamepad=0]
+ *  @return {Boolean}
+ *  @memberof Input */
 const gamepadWasReleased = (button, gamepad=0)=> keyWasReleased(button, gamepad+1);
-const gamepadStick       = (stick,  gamepad=0)=> stickData[gamepad] ? stickData[gamepad][stick] || vec2() : vec2();
+
+/** Returns gamepad stick value
+ *  @param {Number} stick
+ *  @param {Number} [gamepad=0]
+ *  @return {Vector2}
+ *  @memberof Input */
+const gamepadStick = (stick,  gamepad=0)=> stickData[gamepad] ? stickData[gamepad][stick] || vec2() : vec2();
 
 ///////////////////////////////////////////////////////////////////////////////
-// input update called by engine
+// Input update called by engine
 
 const inputData = [[]];
 
@@ -56,23 +124,25 @@ function inputUpdatePost()
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// keyboard event handlers
+// Keyboard event handlers
+
 onkeydown = e=>
 {
     if (debug && e.target != document.body) return;
-    e.repeat || (inputData[usingGamepad = 0][remapKeyCode(e.keyCode)] = 3);
-    hadInput = 1;
+    e.repeat || (inputData[isUsingGamepad = 0][remapKeyCode(e.keyCode)] = 3);
+    debug || e.preventDefault();
 }
 onkeyup = e=>
 {
     if (debug && e.target != document.body) return;
     inputData[0][remapKeyCode(e.keyCode)] = 4;
 }
-const remapKeyCode = c=> copyWASDToDpad ? c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c;
+const remapKeyCode = c=> inputWASDEmulateDirection ? c==87?38 : c==83?40 : c==65?37 : c==68?39 : c : c;
 
 ///////////////////////////////////////////////////////////////////////////////
-// mouse event handlers
-onmousedown = e=> (inputData[usingGamepad = 0][e.button] = 3, hadInput = 1, onmousemove(e));
+// Mouse event handlers
+
+onmousedown = e=> {inputData[isUsingGamepad = 0][e.button] = 3; onmousemove(e); e.button && e.preventDefault();}
 onmouseup   = e=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
 onmousemove = e=>
 {
@@ -86,7 +156,7 @@ onwheel = e=> e.ctrlKey || (mouseWheel = sign(e.deltaY));
 oncontextmenu = e=> !1; // prevent right click menu
 
 ///////////////////////////////////////////////////////////////////////////////
-// gamepad input
+// Gamepad input
 
 const stickData = [];
 function gamepadsUpdate()
@@ -120,10 +190,10 @@ function gamepadsUpdate()
             {
                 const button = gamepad.buttons[j];
                 data[j] = button.pressed ? 1 + 2*!gamepadIsDown(j,i) : 4*gamepadIsDown(j,i);
-                usingGamepad |= !i && button.pressed;
+                isUsingGamepad |= !i && button.pressed;
             }
             
-            if (copyGamepadDirectionToStick)
+            if (gamepadDirectionEmulateStick)
             {
                 // copy dpad to left analog stick when pressed
                 const dpad = vec2(gamepadIsDown(15,i) - gamepadIsDown(14,i), gamepadIsDown(12,i) - gamepadIsDown(13,i));
@@ -135,12 +205,16 @@ function gamepadsUpdate()
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// touch input
-const isTouchDevice = touchInputEnable && window.ontouchstart !== undefined;
+// Touch input
+
+/** True if a touch device has been detected
+ *  @const {boolean}
+ *  @memberof Input */
+const isTouchDevice = inputTouchEnable && window.ontouchstart !== undefined;
 if (isTouchDevice)
 {
     // handle all touch events the same way
-    let wasTouching;
+    let wasTouching, hadTouchInput;
     ontouchstart = ontouchmove = ontouchend = e=>
     {
         e.button = 0; // all touches are left click
@@ -149,7 +223,7 @@ if (isTouchDevice)
         const touching = e.touches.length;
         if (touching)
         {
-            hadInput || zzfx(0) ; // fix mobile audio, force it to play a sound the first time
+            hadTouchInput || zzfx(0, hadTouchInput=1) ; // fix mobile audio, force it to play a sound the first time
 
             // set event pos and pass it along
             e.x = e.touches[0].clientX;