littlejsengine 1.6.6 → 1.7.1

package/src/engineBuild.js

@@ -0,0 +1,156 @@
+#!/usr/bin/env node
+
+/** 
+ * LittleJS Build System
+ * - Combine input files
+ * - Run custom build steps
+ * - Check for errors
+ * - Output to build folder
+ * @namespace Build
+ */
+
+const ENGINE_NAME = 'littlejs';
+const BUILD_FOLDER = 'build';
+const SOURCE_FOLDER = 'src';
+const engineSourceFiles =
+[
+    `${SOURCE_FOLDER}/engineUtilities.js`,
+    `${SOURCE_FOLDER}/engineSettings.js`,
+    `${SOURCE_FOLDER}/engineObject.js`,
+    `${SOURCE_FOLDER}/engineDraw.js`,
+    `${SOURCE_FOLDER}/engineInput.js`,
+    `${SOURCE_FOLDER}/engineAudio.js`,
+    `${SOURCE_FOLDER}/engineTileLayer.js`,
+    `${SOURCE_FOLDER}/engineParticles.js`,
+    `${SOURCE_FOLDER}/engineMedals.js`,
+    `${SOURCE_FOLDER}/engineWebGL.js`,
+    `${SOURCE_FOLDER}/engine.js`,
+];
+const asciiArt =`
+        ~~~~°°°°ooo°oOo°ooOooOooOo.
+ __________   ________   ____ '°OoO.
+ |LittleJS|   |Engine|   |[]|_._._Y
+.|________|_._|______|_._|__|_|_|_|}
+  OOO  OOO     OO  OO     OO=OO---oo\\
+`;
+const license = '// LittleJS - MIT License - Copyright 2021 Frank Force\n'
+
+console.log(asciiArt);
+console.log('Choo Choo... Building LittleJS Engine!\n');
+const startTime = Date.now();
+const fs = require('node:fs');
+const child_process = require('node:child_process');
+
+try
+{
+    // Setup build folder
+    fs.rmSync(BUILD_FOLDER, { recursive: true, force: true });
+    fs.mkdirSync(BUILD_FOLDER);
+}
+catch (e) { handleError(e, 'Failed to create build folder!'); }
+
+Build
+(
+    'Build Engine -- all',
+    `${BUILD_FOLDER}/${ENGINE_NAME}.js`,
+    [`${SOURCE_FOLDER}/engineDebug.js`, ...engineSourceFiles],
+    [], license
+);
+
+Build
+(
+    'Build Engine -- release',
+    `${BUILD_FOLDER}/${ENGINE_NAME}.release.js`,
+    [`${SOURCE_FOLDER}/engineRelease.js`, ...engineSourceFiles],
+    [], license
+);
+
+Build
+(
+    'Build Engine -- minified',
+    `${BUILD_FOLDER}/${ENGINE_NAME}.min.js`,
+    [`${BUILD_FOLDER}/${ENGINE_NAME}.release.js`],
+    [closureCompilerStep, uglifyBuildStep]
+);
+
+Build
+(
+    'Build Engine -- ESM',
+    `${BUILD_FOLDER}/${ENGINE_NAME}.esm.js`,
+    [`${BUILD_FOLDER}/${ENGINE_NAME}.js`, `${SOURCE_FOLDER}/engineExport.js`],
+    [typeScriptBuildStep]
+);
+
+Build
+(
+    'Build Engine -- ESM minified release',
+    `${BUILD_FOLDER}/${ENGINE_NAME}.esm.min.js`,
+    [`${BUILD_FOLDER}/${ENGINE_NAME}.min.js`, `${SOURCE_FOLDER}/engineExport.js`],
+    [uglifyBuildStep]
+);
+
+console.log(`Engine built in ${((Date.now() - startTime)/1e3).toFixed(2)} seconds!`);
+
+///////////////////////////////////////////////////////////////////////////////
+
+// A single build with its own source files, build steps, and output file
+// - each build step is a callback that accepts a single filename
+function Build(message, outputFile, files=[], buildSteps=[], topOfFileText)
+{
+    console.log(message);
+
+    // copy files into a buffer
+    let buffer = '';
+    if (topOfFileText)
+        buffer +=  topOfFileText + '\n';
+    for (const file of files)
+        buffer += fs.readFileSync(file) + '\n';
+
+    // output file
+    fs.writeFileSync(outputFile, buffer, {flag: 'w+'});
+
+    // execute build steps in order
+    for (const buildStep of buildSteps)
+        buildStep(outputFile);
+}
+
+// Process with Closure Compiler to minify and check for errors
+function closureCompilerStep(filename)
+{
+    const filenameTemp = filename + '.tmp';
+    fs.copyFileSync(filename, filenameTemp);
+    try
+    {
+        child_process.execSync(`npx google-closure-compiler --js=${filenameTemp} --js_output_file=${filename} --language_out=ECMASCRIPT_2021 --warning_level=VERBOSE --jscomp_off=*`);
+        fs.rmSync(filenameTemp);
+    }
+    catch (e) { handleError(e, 'Failed to run Closure Compiler step!'); }
+};
+
+// Process with Uglify to minify
+function uglifyBuildStep(filename)
+{
+    try
+    {
+        child_process.execSync(`npx uglifyjs ${filename} -o ${filename}`);
+    }
+    catch (e) { handleError(e,'Failed to run Uglify minification step!'); }
+};
+
+// Build TypeScript definitions
+function typeScriptBuildStep(filename)
+{
+    try
+    {
+        child_process.execSync(`npx tsc ${filename} --declaration --allowJs --emitDeclarationOnly --outFile ${BUILD_FOLDER}/${ENGINE_NAME}.d.ts`);
+    }
+    catch (e) { handleError(e, 'Failed to run TypeScript build step!'); }
+};
+
+// display the error and exit
+function handleError(e,message)
+{
+    console.error(e);
+    console.error(message);
+    process.exit(1);
+}

package/src/engineDebug.js

@@ -1,10 +1,10 @@
 /** 
  * LittleJS Debug System
- * - Press ~ to show debug overlay with mouse pick
+ * - Press Esc to show debug overlay with mouse pick
  * - Number keys toggle debug functions
  * - +/- apply time scale
  * - Debug primitive rendering
- * - Save a 2d canvas as an image
+ * - Save a 2d canvas as a png image
  * @namespace Debug
  */
 
@@ -34,12 +34,6 @@ const debugPointSize = .5;
  *  @memberof Debug */
 let showWatermark = 1;
 
-/** True if god mode is enabled, handle this however you want
- *  @type {Boolean}
- *  @default
- *  @memberof Debug */
-let godMode = 0;
-
 /** Key code used to toggle debug mode, Esc by default
  *  @type {Boolean}
  *  @default
@@ -144,11 +138,27 @@ function debugClear() { debugPrimitives = []; }
 /** Save a canvas to disk 
  *  @param {HTMLCanvasElement} canvas
  *  @param {String}            [filename]
+ *  @param {String}            [type='image/png']
+ *  @memberof Debug */
+function debugSaveCanvas(canvas, filename=engineName, type='image/png')
+{ debugSaveDataURL(canvas.toDataURL(type), filename); }
+
+/** Save a text file to disk 
+ *  @param {String}     text
+ *  @param {String}     [filename]
+ *  @param {String}     [type='text/plain']
+ *  @memberof Debug */
+function debugSaveText(text, filename=engineName, type='text/plain')
+{ debugSaveDataURL(URL.createObjectURL(new Blob([text], {'type':type})), filename); }
+
+/** Save a data url to disk 
+ *  @param {String}     dataURL
+ *  @param {String}     filename
  *  @memberof Debug */
-function debugSaveCanvas(canvas, filename = engineName + '.png')
+function debugSaveDataURL(dataURL, filename)
 {
-    downloadLink.download = 'screenshot.png';
-    downloadLink.href = canvas.toDataURL('image/png').replace('image/png','image/octet-stream');
+    downloadLink.download = filename;
+    downloadLink.href = dataURL;
     downloadLink.click();
 }
 
@@ -180,7 +190,7 @@ function debugUpdate()
         if (keyWasPressed(51)) // 3
             debugGamepads = !debugGamepads;
         if (keyWasPressed(52)) // 4
-            godMode = !godMode;
+            debugRaycast = !debugRaycast;
         if (keyWasPressed(53)) // 5
             debugTakeScreenshot = 1;
         //if (keyWasPressed(54)) // 6
@@ -359,8 +369,8 @@ function debugRender()
             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('4: God Mode', x, y += h);
+            overlayContext.fillStyle = debugRaycast ? '#f00' : '#fff';
+            overlayContext.fillText('4: Debug Raycasts', x, y += h);
             overlayContext.fillStyle = '#fff';
             overlayContext.fillText('5: Save Screenshot', x, y += h);
 
@@ -385,7 +395,7 @@ function debugRender()
         {
             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(debugRaycast ? 'Debug Raycasts' : '', x, y += h);
             overlayContext.fillText(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
         }
     

package/src/engineDraw.js

@@ -1,8 +1,9 @@
 /** 
  * LittleJS Drawing System
- * - Hybrid with both Canvas2D and WebGL available
+ * - Hybrid system with both Canvas2D and WebGL available
  * - Super fast tile sheet rendering with WebGL
  * - Can apply rotation, mirror, color and additive color
+ * - Font rendering system with built in engine font
  * - Many useful utility functions
  * 
  * LittleJS uses a hybrid rendering solution with the best of both Canvas2D and WebGL.
@@ -12,7 +13,6 @@
  * overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
  * 
  * The WebGL rendering system is very fast with some caveats...
- * - The default setup supports only 1 tile sheet, to support more call glCreateTexture and glSetTexture
  * - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
  * - Group additive rendering together using renderOrder to mitigate this issue
  * 
@@ -56,25 +56,29 @@ const tileImage = new Image;
 let tileImageSize, tileImageFixBleed, drawCount;
 
 /** Convert from screen to world space coordinates
- *  - if calling outside of render, you may need to manually set mainCanvasSize
  *  @param {Vector2} screenPos
  *  @return {Vector2}
  *  @memberof Draw */
 function screenToWorld(screenPos)
 {
-    ASSERT(mainCanvasSize.x && mainCanvasSize.y, 'mainCanvasSize is invalid');
-    return screenPos.add(vec2(.5)).subtract(mainCanvasSize.scale(.5)).multiply(vec2(1/cameraScale,-1/cameraScale)).add(cameraPos);
+    return new Vector2
+    (
+        (screenPos.x - mainCanvasSize.x/2 + .5) /  cameraScale + cameraPos.x,
+        (screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale + cameraPos.y
+    );
 }
 
 /** Convert from world to screen space coordinates
- *  - if calling outside of render, you may need to manually set mainCanvasSize
  *  @param {Vector2} worldPos
  *  @return {Vector2}
  *  @memberof Draw */
 function worldToScreen(worldPos)
 {
-    ASSERT(mainCanvasSize.x && mainCanvasSize.y, 'mainCanvasSize is invalid');
-    return worldPos.subtract(cameraPos).multiply(vec2(cameraScale,-cameraScale)).add(mainCanvasSize.scale(.5)).subtract(vec2(.5));
+    return new Vector2
+    (
+        (worldPos.x - cameraPos.x) *  cameraScale + mainCanvasSize.x/2 - .5,
+        (worldPos.y - cameraPos.y) * -cameraScale + mainCanvasSize.y/2 - .5
+    );
 }
 
 /** Draw textured tile centered in world space, with color applied if using WebGL
@@ -87,13 +91,21 @@ function worldToScreen(worldPos)
  *  @param {Boolean} [mirror=0]                     - If true image is flipped along the Y axis
  *  @param {Color}   [additiveColor=Color(0,0,0,0)] - Additive color to be applied
  *  @param {Boolean} [useWebGL=glEnable]            - Use accelerated WebGL rendering
+ *  @param {Boolean} [screenSpace=0]                - If true the pos and size are in screen space
  *  @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)
+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, screenSpace)
 {
     showWatermark && ++drawCount;
+    
     if (glEnable && useWebGL)
     {
+        if (screenSpace)
+        {
+            // convert to world space
+            pos = screenToWorld(pos);
+            size = size.scale(1/cameraScale);
+        }
         if (tileIndex < 0 || !tileImage.width)
         {
             // if negative tile index or image not found, force untextured
@@ -135,7 +147,7 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
                 context.globalAlpha = color.a; // only alpha is supported
                 context.drawImage(tileImage, sX, sY, sWidth, sHeight, -.5, -.5, 1, 1);
             }
-        });
+        }, undefined, screenSpace);
     }
 }
 
@@ -145,38 +157,30 @@ function drawTile(pos, size=vec2(1), tileIndex=-1, tileSize=tileSizeDefault, col
  *  @param {Color}   [color=Color()]
  *  @param {Number}  [angle=0]
  *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
-function drawRect(pos, size, color, angle, useWebGL)
-{
-    drawTile(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
-}
+function drawRect(pos, size, color, angle, useWebGL, screenSpace)
+{ drawTile(pos, size, -1, tileSizeDefault, color, angle, 0, undefined, useWebGL, screenSpace); }
 
-/** Draw textured tile centered on pos in screen space
- *  @param {Vector2} pos                        - Center of the tile
- *  @param {Vector2} [size=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
+/** Draw colored polygon using passed in points
+ *  @param {Array}   points - Array of Vector2 points
  *  @param {Color}   [color=Color()]
- *  @param {Number}  [angle=0]
- *  @param {Boolean} [mirror=0]
- *  @param {Color}   [additiveColor=Color(0,0,0,0)]
  *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
-function drawTileScreenSpace(pos, size=vec2(1), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL)
+function drawPoly(points, color=new Color, useWebGL=glEnable, screenSpace)
 {
-    drawTile(screenToWorld(pos), size.scale(1/cameraScale), tileIndex, tileSize, color, angle, mirror, additiveColor, useWebGL);
-}
-
-/** Draw colored rectangle in screen space
- *  @param {Vector2} pos
- *  @param {Vector2} [size=Vector2(1,1)]
- *  @param {Color}   [color=Color()]
- *  @param {Number}  [angle=0]
- *  @param {Boolean} [useWebGL=glEnable]
- *  @memberof Draw */
-function drawRectScreenSpace(pos, size, color, angle, useWebGL)
-{
-    drawTileScreenSpace(pos, size, -1, tileSizeDefault, color, angle, 0, 0, useWebGL);
+    if (useWebGL)
+        glDrawPoints(screenSpace ? points.map(screenToWorld) : points, color.rgbaInt());
+    else
+    {
+        // draw using canvas
+        mainContext.fillStyle = color;
+        mainContext.beginPath();
+        for (const point of screenSpace ? points : points.map(worldToScreen))
+            mainContext.lineTo(point.x, point.y);
+        mainContext.fill();
+    }
 }
 
 /** Draw colored line between two points
@@ -185,12 +189,13 @@ function drawRectScreenSpace(pos, size, color, angle, useWebGL)
  *  @param {Number}  [thickness=.1]
  *  @param {Color}   [color=Color()]
  *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {Boolean} [screenSpace=0]
  *  @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(), useWebGL);
+    drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace);
 }
 
 /** Draw directly to a 2d canvas context in world space
@@ -200,12 +205,16 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL)
  *  @param {Boolean}  mirror
  *  @param {Function} drawFunction
  *  @param {CanvasRenderingContext2D} [context=mainContext]
+ *  @param {Boolean} [screenSpace=0]
  *  @memberof Draw */
-function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainContext)
+function drawCanvas2D(pos, size, angle, mirror, drawFunction, context = mainContext, screenSpace)
 {
-    // create canvas transform from world space to screen space
-    pos = worldToScreen(pos);
-    size = size.scale(cameraScale);
+    if (!screenSpace)
+    {
+        // create canvas transform from world space to screen space
+        pos = worldToScreen(pos);
+        size = size.scale(cameraScale);
+    }
     context.save();
     context.translate(pos.x+.5|0, pos.y+.5|0);
     context.rotate(angle);
@@ -312,6 +321,17 @@ class FontImage
         this.context = context;
     }
 
+    /** 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);
+    }
+
     /** Draw text in screen space using the image font
      *  @param {String}  text
      *  @param {Vector2} pos
@@ -349,17 +369,6 @@ class FontImage
 
         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/src/engineExport.js

@@ -1,6 +1,6 @@
 /** 
  * LittleJS Module Export
- * - Export engine as a module with extra functions where necessary
+ * - Export engine as a module with functions where necessary
  */
 
 /** Set position of camera in world space
@@ -181,18 +181,13 @@ function setMedalDisplayIconSize(size) { medalDisplayIconSize = size; }
 /** Set to stop medals from being unlockable
  *  @param {Boolean} preventUnlock
  *  @memberof Settings */
-function setMedalsPreventUnlock(prevent) { medalsPreventUnlock = prevent; }
+function setMedalsPreventUnlock(preventUnlock) { medalsPreventUnlock = preventUnlock; }
 
 /** Set if watermark with FPS should be shown
  *  @param {Boolean} show
  *  @memberof Debug */
 function setShowWatermark(show) { showWatermark = show; }
 
-/** Set if god mode is enabled
- *  @param {Boolean} enable
- *  @memberof Debug */
-function setGodMode(enable) { godMode = enable; }
-
 /** Set key code used to toggle debug mode, Esc by default
  *  @param {Number} key
  *  @memberof Debug */
@@ -237,7 +232,6 @@ export {
 	setMedalDisplayIconSize,
 	setMedalsPreventUnlock,
 	setShowWatermark,
-	setGodMode,
 	setDebugKey,
 
 	// Settings
@@ -280,7 +274,6 @@ export {
 	// Globals
 	debug,
 	showWatermark,
-	godMode,
 
 	// Debug
 	ASSERT,
@@ -302,6 +295,10 @@ export {
 	mod,
 	clamp,
 	percent,
+	distanceWrap,
+	lerpWrap,
+	distanceAngle,
+	lerpAngle,
 	lerp,
 	smoothStep,
 	nearestPowerOfTwo,
@@ -316,11 +313,9 @@ export {
 	randInCircle,
 	randVector,
 	randColor,
-	randSeed,
-	setRandSeed,
-	randSeeded,
 
 	// Utility Classes
+	RandomGenerator,
 	Vector2,
 	Color,
 	Timer,

package/src/engineInput.js

@@ -1,9 +1,9 @@
 /** 
  * LittleJS Input System
- * - Tracks key down, pressed, and released
- * - Also tracks mouse buttons, position, and wheel
- * - Supports multiple gamepads
- * - Virtual gamepad for touch devices with touchGamepadSize
+ * - Tracks keyboard down, pressed, and released
+ * - Tracks mouse buttons, position, and wheel
+ * - Tracks multiple analog gamepads
+ * - Virtual gamepad for touch devices
  * @namespace Input
  */
 
@@ -275,40 +275,32 @@ if (isTouchDevice)
     let wasTouching, mouseDown = onmousedown, mouseUp = onmouseup;
     onmousedown = onmouseup = ()=> 0;
 
-    // setup touch input
-    ontouchstart = (e)=>
+    // handle all touch events the same way
+    ontouchstart = ontouchmove = ontouchend = (e)=>
     {
-        // fix mobile audio, force it to play a sound on first touch
-        zzfx(0);
+        e.button = 0; // all touches are left click
 
-        // handle all touch events the same way
-        ontouchstart = ontouchmove = ontouchend = (e)=>
-        {
-            e.button = 0; // all touches are left click
-
-            // check if touching and pass to mouse events
-            const touching = e.touches.length;
-            if (touching)
-            {
-                // set event pos and pass it along
-                e.x = e.touches[0].clientX;
-                e.y = e.touches[0].clientY;
-                wasTouching ? onmousemove(e) : mouseDown(e);
-            }
-            else if (wasTouching)
-                mouseUp(e);
-
-            // set was touching
-            wasTouching = touching;
+        // fix stalled audio on mobile
+        if (soundEnable)
+            audioContext ? audioContext.resume() : zzfx(0);
 
-            // must return true so the document will get focus
-            return true;
+        // check if touching and pass to mouse events
+        const touching = e.touches.length;
+        if (touching)
+        {
+            // set event pos and pass it along
+            e.x = e.touches[0].clientX;
+            e.y = e.touches[0].clientY;
+            wasTouching ? onmousemove(e) : mouseDown(e);
         }
+        else if (wasTouching)
+            mouseUp(e);
 
-        // try to create touch game pad
-        touchGamepadEnable && touchGamepadCreate();
+        // set was touching
+        wasTouching = touching;
 
-        return ontouchstart(e);
+        // must return true so the document will get focus
+        return true;
     }
 }
 
@@ -319,13 +311,13 @@ if (isTouchDevice)
 let touchGamepadTimer = new Timer, touchGamepadButtons, touchGamepadStick;
 
 // create the touch gamepad, called automatically by the engine
-function touchGamepadCreate()
+if (touchGamepadEnable)
 {
     // touch input internal variables
     touchGamepadButtons = [];
     touchGamepadStick = vec2();
 
-    let touchHandler = ontouchstart;
+    const touchHandler = ontouchstart;
     ontouchstart = ontouchmove = ontouchend = (e)=> 
     {
         // clear touch gamepad input
@@ -431,7 +423,7 @@ function touchGamepadRender()
     const rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     for (let i=4; i--;)
     {
-        const pos = rightCenter.add((new Vector2).setAngle(i*PI/2, touchGamepadSize/2));
+        const pos = rightCenter.add(vec2().setAngle(i*PI/2, touchGamepadSize/2));
         overlayContext.fillStyle = touchGamepadButtons[i] ? '#fff' : '#000';
         overlayContext.beginPath();
         overlayContext.arc(pos.x, pos.y, touchGamepadSize/4, 0,9);