littlejsengine 1.3.8 → 1.4.5

package/engine/engine.js

@@ -22,7 +22,7 @@
 const engineName = 'LittleJS';
 
 /** Version of engine */
-const engineVersion = '1.3.8';
+const engineVersion = '1.4.5';
 
 /** Frames per second to update objects
  *  @default */
@@ -57,8 +57,7 @@ let frameTimeLastMS = 0, frameTimeBufferMS = 0, tileImageSize, tileImageFixBleed
 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 styleBody = 'margin:0;overflow:hidden;background:#000';
 const styleCanvas = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -88,7 +87,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
 
         // init stuff and start engine
         debugInit();
-        glInit();
+        glEnable && glInit();
 
         // create overlay canvas for hud to appear above gl canvas
         document.body.appendChild(overlayCanvas = document.createElement('canvas'));
@@ -108,10 +107,14 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         frameTimeLastMS = frameTimeMS;
         if (debug || showWatermark)
             averageFPS = lerp(.05, averageFPS || 0, 1e3/(frameTimeDeltaMS||1));
+        const debugSpeedUp   = debug && keyIsDown(107); // +
+        const debugSpeedDown = debug && keyIsDown(109); // -
         if (debug)
-            frameTimeDeltaMS *= keyIsDown(107) ? 5 : keyIsDown(109) ? .2 : 1; // +/- to speed/slow time
+            frameTimeDeltaMS *= debugSpeedUp ? 5 : debugSpeedDown ? .2 : 1; // +/- to speed/slow time
         timeReal += frameTimeDeltaMS / 1e3;
-        frameTimeBufferMS = min(frameTimeBufferMS + !paused * frameTimeDeltaMS, 50); // clamp incase of slow framerate
+        frameTimeBufferMS += !paused * frameTimeDeltaMS;
+        if (!debugSpeedUp)
+            frameTimeBufferMS = min(frameTimeBufferMS, 50); // clamp incase of slow framerate
 
         if (canvasFixedSize.x)
         {
@@ -184,10 +187,11 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         for (const o of engineObjects)
             o.destroyed || o.render();
         gameRenderPost();
+        glRenderPostProcess();
         medalsRender();
         touchGamepadRender();
         debugRender();
-        glCopyToContext(mainContext);
+        glEnable && glCopyToContext(mainContext);
 
         if (showWatermark)
         {
@@ -222,7 +226,7 @@ function enginePreRender()
     mainContext.imageSmoothingEnabled = !cavasPixelated;
 
     // setup gl rendering if enabled
-    glPreRender(mainCanvas.width, mainCanvas.height, cameraPos.x, cameraPos.y, cameraScale);
+    glEnable && glPreRender(mainCanvas.width, mainCanvas.height, cameraPos.x, cameraPos.y, cameraScale);
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/engine/engineBuild.bat

@@ -79,7 +79,7 @@ copy engine.all.release.js %OUTPUT_FILENAME%
 
 rem check code with closure
 move %OUTPUT_FILENAME% %OUTPUT_FILENAME%.temp
-call npx google-closure-compiler --js=%OUTPUT_FILENAME%.temp --js_output_file=%OUTPUT_FILENAME% --language_out=ECMASCRIPT_2019 --warning_level=VERBOSE --jscomp_off=*
+call npx google-closure-compiler --js=%OUTPUT_FILENAME%.temp --js_output_file=%OUTPUT_FILENAME% --language_out=ECMASCRIPT_2021 --warning_level=VERBOSE --jscomp_off=*
 del %OUTPUT_FILENAME%.temp
 if %ERRORLEVEL% NEQ 0 (
     pause

package/engine/engineBuildModule.mjs

@@ -0,0 +1,14 @@
+import fs from 'fs'; // node
+
+const files = [
+	{ engine: './engine/engine.all.js', output: './engine/engine.all.module.js' },
+	{ engine: './engine/engine.all.release.js', output: './engine/engine.all.release.module.js' },
+];
+
+const footerFile = fs.readFileSync('./engine/engineExportModule.js');
+
+files.forEach(({ engine, output }) => {
+	const engineFile = fs.readFileSync(engine);
+	const file = [engineFile, footerFile].join('\n');
+	fs.writeFileSync(output, file);
+});

package/engine/engineDebug.js

@@ -233,55 +233,49 @@ const debugRender = ()=>
 
     if (debugOverlay)
     {
+        const saveContext = mainContext;
+        mainContext = overlayContext;
+
         // mouse pick
         let bestDistance = Infinity, bestObject;
         for (const o of engineObjects)
         {
             if (o.canvas || o.destroyed)
-                continue; // skip tile layers
-
-            const size = o.size.copy();
-            if (!size.x || !size.y)
+                continue;
+            if (!o.size.x || !o.size.y)
                 continue;
 
             const distance = mousePos.distanceSquared(o.pos);
             if (distance < bestDistance)
             {
                 bestDistance = distance;
-                bestObject = o
+                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);
-            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));
+            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 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);
         }
         
         if (bestObject)
         {
-            const saveContext = mainContext;
-            mainContext = overlayContext
             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));
-            drawLine(mousePos, bestObject.pos, .1, !raycastHitPos ? new Color(0,1,0,.5) : new Color(1,0,0,.5));
+            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);
 
             const debugText = 'mouse pos = ' + mousePos + 
                 '\nmouse collision = ' + getTileCollisionData(mousePos) + 
                 '\n\n--- object info ---\n' +
                 bestObject.toString();
-            drawTextScreen(debugText, mousePosScreen, 24, new Color, .05, undefined, undefined, 'monospace');
-            mainContext = saveContext;
+            drawTextScreen(debugText, mousePosScreen, 24, new Color, .05, 0, 0, 'monospace');
         }
 
-        glCopyToContext(mainContext);
+        glCopyToContext(mainContext = saveContext);
     }
 
     {
@@ -294,7 +288,6 @@ const debugRender = ()=>
 
             // create canvas transform from world space to screen space
             const pos = worldToScreen(p.pos);
-            
             overlayContext.translate(pos.x|0, pos.y|0);
             overlayContext.rotate(p.angle);
             overlayContext.fillStyle = overlayContext.strokeStyle = p.color;
@@ -332,7 +325,7 @@ const debugRender = ()=>
         });
 
         // remove expired pritives
-        debugPrimitives = debugPrimitives.filter(r=>r.time.get()<0);
+        debugPrimitives = debugPrimitives.filter(r=>r.time<0);
     }
 
     {

package/engine/engineDraw.js

@@ -187,7 +187,7 @@ 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(), 0, 0, useWebGL);
+    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL);
 }
 
 /** Draw directly to a 2d canvas context in world space
@@ -204,7 +204,7 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainCont
     pos = worldToScreen(pos);
     size = size.scale(cameraScale);
     context.save();
-    context.translate(pos.x+.5|0, pos.y-.5|0);
+    context.translate(pos.x+.5|0, pos.y+.5|0);
     context.rotate(angle);
     context.scale(mirror ? -size.x : size.x, size.y);
     drawFunction(context);
@@ -233,21 +233,21 @@ function setBlendMode(additive, useWebGL=glEnable)
  *  @param {Color}   [lineColor=new Color(0,0,0)]
  *  @param {String}  [textAlign='center']
  *  @memberof Draw */
-function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault)
+function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, context=overlayContext)
 {
-    overlayContext.fillStyle = color;
-    overlayContext.lineWidth = lineWidth;
-    overlayContext.strokeStyle = lineColor;
-    overlayContext.textAlign = textAlign;
-    overlayContext.font = size + 'px '+ font;
-    overlayContext.textBaseline = 'middle';
-    overlayContext.lineJoin = 'round';
+    context.fillStyle = color;
+    context.lineWidth = lineWidth;
+    context.strokeStyle = lineColor;
+    context.textAlign = textAlign;
+    context.font = size + 'px '+ font;
+    context.textBaseline = 'middle';
+    context.lineJoin = 'round';
 
     pos = pos.copy();
     (text+'').split('\n').forEach(line=>
     {
-        lineWidth && overlayContext.strokeText(line, pos.x, pos.y);
-        overlayContext.fillText(line, pos.x, pos.y);
+        lineWidth && context.strokeText(line, pos.x, pos.y);
+        context.fillText(line, pos.x, pos.y);
         pos.y += size;
     });
 }
@@ -264,7 +264,7 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
  *  @memberof Draw */
 function drawText(text, pos, size=1, color, lineWidth, lineColor, textAlign, font)
 {
-    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font);
+    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, mainContext);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -287,7 +287,7 @@ let engineFontImage;
 class FontImage
 {
     /** Create an image font
-     *  @param {Image}   [image] - The image the font is stored in, if undefined the default font is used
+     *  @param {HTMLImageElement}   [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
@@ -324,7 +324,7 @@ class FontImage
         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)=>
+        (text+'').split('\n').forEach((line, i)=>
         {
             const centerOffset = center ? line.length * size.x * scale / 2 |0 : 0;
             for(let j=line.length; j--;)
@@ -385,4 +385,4 @@ function toggleFullscreen()
         else if (document.body.mozRequestFullScreen)
             document.body.mozRequestFullScreen();
     }
-}
+}

package/engine/engineExportModule.js

@@ -0,0 +1,333 @@
+// This file contains exports neessary when LittleJS is used as a module
+
+// setters for all variables that devs will need to modify
+const setCameraPos =                    (v)=> cameraPos = v;
+const setCameraScale =                  (v)=> cameraScale = v;
+const setRandSeed =                     (v)=> randSeed = v;
+const setCanvasMaxSize =                (v)=> canvasMaxSize = v;
+const setCanvasFixedSize =              (v)=> canvasFixedSize = v;
+const setCavasPixelated =               (v)=> cavasPixelated = v;
+const setFontDefault =                  (v)=> fontDefault = v;
+const setTileSizeDefault =              (v)=> tileSizeDefault = v;
+const setTileFixBleedScale =            (v)=> tileFixBleedScale = v;
+const setObjectDefaultSize =            (v)=> objectDefaultSize = v;
+const setEnablePhysicsSolver =          (v)=> enablePhysicsSolver = v;
+const setObjectDefaultMass =            (v)=> objectDefaultMass = v;
+const setObjectDefaultDamping =         (v)=> objectDefaultDamping = v;
+const setObjectDefaultAngleDamping =    (v)=> objectDefaultAngleDamping = v;
+const setObjectDefaultElasticity =      (v)=> objectDefaultElasticity = v;
+const setObjectDefaultFriction =        (v)=> objectDefaultFriction = v;
+const setObjectMaxSpeed =               (v)=> objectMaxSpeed = v;
+const setGravity =                      (v)=> gravity = v;
+const setParticleEmitRateScale =        (v)=> particleEmitRateScale = v;
+const setGlEnable =                     (v)=> glEnable = v;
+const setGlOverlay =                    (v)=> glOverlay = v;
+const setGamepadsEnable =               (v)=> gamepadsEnable = v;
+const setGamepadDirectionEmulateStick = (v)=> gamepadDirectionEmulateStick = v;
+const setInputWASDEmulateDirection =    (v)=> inputWASDEmulateDirection = v;
+const setTouchGamepadEnable =           (v)=> touchGamepadEnable = v;
+const setTouchGamepadAnalog =           (v)=> touchGamepadAnalog = v;
+const setTouchGamepadSize =             (v)=> touchGamepadSize = v;
+const setTouchGamepadAlpha =            (v)=> touchGamepadAlpha = v;
+const setVibrateEnable =                (v)=> vibrateEnable = v;
+const setSoundVolume =                  (v)=> soundVolume = v;
+const setSoundEnable =                  (v)=> soundEnable = v;
+const setSoundDefaultRange =            (v)=> soundDefaultRange = v;
+const setSoundDefaultTaper =            (v)=> soundDefaultTaper = v;
+const setMedalDisplayTime =             (v)=> medalDisplayTime = v;
+const setMedalDisplaySlideTime =        (v)=> medalDisplaySlideTime = v;
+const setMedalDisplayWidth =            (v)=> medalDisplayWidth = v;
+const setMedalDisplayHeight =           (v)=> medalDisplayHeight = v;
+const setMedalDisplayIconSize =         (v)=> medalDisplayIconSize = v;
+const setMedalsPreventUnlock =          (v)=> medalsPreventUnlock = v;
+const setDebugPointSize =               (v)=> debugPointSize = v;
+const setShowWatermark =                (v)=> showWatermark = v;
+const setGodMode =                      (v)=> godMode = v;
+
+// This is a full list of everything in engine.all
+export {
+	// Custom methods
+	setCameraPos,
+	setCameraScale,
+	setRandSeed,
+	setCanvasMaxSize,
+	setCanvasFixedSize,
+	setCavasPixelated,
+	setFontDefault,
+	setTileSizeDefault,
+	setTileFixBleedScale,
+	setObjectDefaultSize,
+	setEnablePhysicsSolver,
+	setObjectDefaultMass,
+	setObjectDefaultDamping,
+	setObjectDefaultAngleDamping,
+	setObjectDefaultElasticity,
+	setObjectDefaultFriction,
+	setObjectMaxSpeed,
+	setGravity,
+	setParticleEmitRateScale,
+	setGlEnable,
+	setGlOverlay,
+	setGamepadsEnable,
+	setGamepadDirectionEmulateStick,
+	setInputWASDEmulateDirection,
+	setTouchGamepadEnable,
+	setTouchGamepadAnalog,
+	setTouchGamepadSize,
+	setTouchGamepadAlpha,
+	setVibrateEnable,
+	setSoundVolume,
+	setSoundEnable,
+	setSoundDefaultRange,
+	setSoundDefaultTaper,
+	setMedalDisplayTime,
+	setMedalDisplaySlideTime,
+	setMedalDisplayWidth,
+	setMedalDisplayHeight,
+	setMedalDisplayIconSize,
+	setMedalsPreventUnlock,
+	setDebugPointSize,
+	setShowWatermark,
+	setGodMode,
+
+	// Settings
+	canvasMaxSize,
+	canvasFixedSize,
+	cavasPixelated,
+	fontDefault,
+	tileSizeDefault,
+	tileFixBleedScale,
+	objectDefaultSize,
+	enablePhysicsSolver,
+	objectDefaultMass,
+	objectDefaultDamping,
+	objectDefaultAngleDamping,
+	objectDefaultElasticity,
+	objectDefaultFriction,
+	objectMaxSpeed,
+	gravity,
+	particleEmitRateScale,
+	cameraPos,
+	cameraScale,
+	glEnable,
+	glOverlay,
+	gamepadsEnable,
+	gamepadDirectionEmulateStick,
+	inputWASDEmulateDirection,
+	touchGamepadEnable,
+	touchGamepadAnalog,
+	touchGamepadSize,
+	touchGamepadAlpha,
+	vibrateEnable,
+	soundVolume,
+	soundEnable,
+	soundDefaultRange,
+	soundDefaultTaper,
+	medalDisplayTime,
+	medalDisplaySlideTime,
+	medalDisplayWidth,
+	medalDisplayHeight,
+	medalDisplayIconSize,
+	
+	// Globals
+	debug,
+	debugPointSize,
+	showWatermark,
+	godMode,
+	// Debug
+	//debugPrimitives,
+	//debugOverlay,
+	//debugPhysics,
+	//debugRaycast,
+	//debugParticles,
+	//debugGamepads,
+	//debugMedals,
+	//debugTakeScreenshot,
+	//downloadLink,
+	//ASSERT,
+	debugRect,
+	debugCircle,
+	debugPoint,
+	debugLine,
+	debugAABB,
+	debugText,
+	debugClear,
+	debugSaveCanvas,
+	//debugInit,
+	//debugUpdate,
+	//debugRender,
+
+	// Utilities
+	PI,
+	abs,
+	min,
+	max,
+	sign,
+	mod,
+	clamp,
+	percent,
+	lerp,
+	smoothStep,
+	nearestPowerOfTwo,
+	isOverlapping,
+	wave,
+	formatTime,
+	// Random
+	rand,
+	randInt,
+	randSign,
+	randInCircle,
+	randVector,
+	randColor,
+	randSeed,
+	randSeeded,
+
+	// More utilities
+	vec2,
+	Vector2,
+	colorRGBA,
+	colorHSLA,
+	Color,
+	Timer,
+
+	// Base
+	EngineObject,
+
+	// Draw
+	tileImage,
+	mainCanvas,
+	mainContext,
+	overlayCanvas,
+	overlayContext,
+	mainCanvasSize,
+	screenToWorld,
+	worldToScreen,
+	drawTile,
+	drawRect,
+	drawTileScreenSpace,
+	drawRectScreenSpace,
+	drawLine,
+	drawCanvas2D,
+	setBlendMode,
+	drawTextScreen,
+	drawText,
+	engineFontImage,
+	FontImage,
+	isFullscreen,
+	toggleFullscreen,
+
+	// Input
+	keyIsDown,
+	keyWasPressed,
+	keyWasReleased,
+	clearInput,
+	mouseIsDown,
+	mouseWasPressed,
+	mouseWasReleased,
+	mousePos,
+	mousePosScreen,
+	mouseWheel,
+	isUsingGamepad,
+	preventDefaultInput,
+	gamepadIsDown,
+	gamepadWasPressed,
+	gamepadWasReleased,
+	gamepadStick,
+	//inputData,
+	//inputUpdate,
+	//inputUpdatePost,
+	// onkeydown,
+	// onkeyup,
+	//remapKeyCode,
+	// onmousedown,
+	// onmouseup,
+	// onmousemove,
+	// onwheel,
+	// oncontextmenu,
+	mouseToScreen,
+	//stickData,
+	gamepadsUpdate,
+	vibrate,
+	vibrateStop,
+	isTouchDevice,
+	//touchGamepadTimer,
+	touchGamepadCreate,
+	touchGamepadRender,
+
+	// Audio
+	Sound,
+	Music,
+	playAudioFile,
+	speak,
+	speakStop,
+	getNoteFrequency,
+	audioContext,
+	playSamples,
+	zzfx,
+	//zzfxR,
+	//zzfxG,
+	//zzfxM,
+
+	// Tiles
+	tileCollision,
+	tileCollisionSize,
+	initTileCollision,
+	setTileCollisionData,
+	getTileCollisionData,
+	tileCollisionTest,
+	tileCollisionRaycast,
+	TileLayerData,
+	TileLayer,
+
+	// Particles
+	ParticleEmitter,
+	Particle,
+
+	// Medals
+	medals,
+	medalsPreventUnlock,
+	medalsInit,
+	newgroundsInit,
+	Medal,
+	//medalsRender,
+	Newgrounds,
+	//CryptoJS,
+
+	// WebGL
+	glCanvas,
+	glContext,
+	//glInit,
+	glSetBlendMode,
+	glSetTexture,
+	glCompileShader,
+	glCreateProgram,
+	glCreateTexture,
+	//glPreRender,
+	//glFlush,
+	//glCopyToContext,
+	//glDraw,
+	glInitPostProcess,
+	//glRenderPostProcess,
+
+	// Engine
+	engineName,
+	engineVersion,
+	frameRate,
+	timeDelta,
+	engineObjects,
+	//engineObjectsCollide,
+	frame,
+	time,
+	timeReal,
+	paused,
+	//frameTimeLastMS,
+	//averageFPS,
+	//drawCount,
+	//styleBody,
+	//styleCanvas,
+	engineInit,
+	//enginePreRender,
+	//engineObjectsUpdate,
+	engineObjectsDestroy,
+	engineObjectsCallback,
+};

package/engine/engineInput.js

@@ -112,7 +112,7 @@ let inputData = [[]];
 function inputUpdate()
 {
     // clear input when lost focus (prevent stuck keys)
-    document.hasFocus() || clearInput();
+    isTouchDevice || document.hasFocus() || clearInput();
 
     // update mouse world space position
     mousePos = screenToWorld(mousePosScreen);
@@ -187,7 +187,7 @@ function gamepadsUpdate()
         }
     }
 
-    if (!gamepadsEnable || !navigator.getGamepads || !document.hasFocus() && !debug)
+    if (!gamepadsEnable || !navigator || !navigator.getGamepads || !document.hasFocus() && !debug)
         return;
 
     // poll gamepads
@@ -236,7 +236,7 @@ function gamepadsUpdate()
 /** Pulse the vibration hardware if it exists
  *  @param {Number} [pattern=100] - a single value in miliseconds or vibration interval array
  *  @memberof Input */
-const vibrate = (pattern)=> vibrateEnable && Navigator.vibrate && Navigator.vibrate(pattern);
+const vibrate = (pattern)=> vibrateEnable && navigator && navigator.vibrate && navigator.vibrate(pattern);
 
 /** Cancel any ongoing vibration
  *  @memberof Input */
@@ -254,7 +254,7 @@ const isTouchDevice = window.ontouchstart !== undefined;
 if (isTouchDevice)
 {
     // handle all touch events the same way
-    let wasTouching, hadTouchInput;
+    let wasTouching, hadTouch;
     ontouchstart = ontouchmove = ontouchend = (e)=>
     {
         e.button = 0; // all touches are left click
@@ -263,7 +263,8 @@ if (isTouchDevice)
         const touching = e.touches.length;
         if (touching)
         {
-            hadTouchInput || zzfx(0, hadTouchInput=1) ; // fix mobile audio, force it to play a sound the first time
+            // fix mobile audio, force it to play a sound on first touch
+            hadTouch || zzfx(0, hadTouch=1);
 
             // set event pos and pass it along
             e.x = e.touches[0].clientX;
@@ -276,8 +277,8 @@ if (isTouchDevice)
         // set was touching
         wasTouching = touching;
 
-        // prevent normal mouse events from being called
-        return !e.cancelable;
+        // must return true so the document will get focus
+        return true;
     }
 }
 
@@ -362,7 +363,7 @@ function touchGamepadRender()
         return;
     
     // fade off when not touching or paused
-    const alpha = percent(touchGamepadTimer.get(), 4, 3);
+    const alpha = percent(touchGamepadTimer, 4, 3);
     if (!alpha || paused)
         return;