littlejsengine 1.4.6 → 1.4.8

package/engine/engine.js

@@ -13,6 +13,7 @@
     - Particle effect system
     - Medal system tracks and displays achievements
     - Debug tools and debug rendering system
+    - Post processing effects
     - Call engineInit() to start it up!
 */
 
@@ -22,7 +23,7 @@
 const engineName = 'LittleJS';
 
 /** Version of engine */
-const engineVersion = '1.4.6';
+const engineVersion = '1.4.8';
 
 /** Frames per second to update objects
  *  @default */
@@ -47,18 +48,13 @@ let time = 0;
 /** Actual clock time since start in seconds (not affected by pause or frame rate clamping) */
 let timeReal = 0;
 
-/** Is the game paused? Causes time and objects to not be updated. */
+/** Is the game paused? Causes time and objects to not be updated */
 let paused = 0;
 
-// Engine internal variables not exposed to documentation
-let frameTimeLastMS = 0, frameTimeBufferMS = 0, tileImageSize, tileImageFixBleed;
-
-// Engine stat tracking, if showWatermark is true
-let averageFPS, drawCount;
-
-// css text used for elements created by engine
-const styleBody = 'margin:0;overflow:hidden;background:#000';
-const styleCanvas = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
+/** Set if game is paused
+ *  @param {Boolean} paused
+ */
+function setPaused(_paused) { paused = _paused; }
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -80,10 +76,13 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
 
         // setup html
+        const styleBody = 'margin:0;overflow:hidden;background:#000' + // fill the window
+            ';touch-action:none' + // prevent mobile pinch to resize
+            ';user-select:none' +  // prevent mobile hold to select
+            ';-webkit-user-select:none'; // compatibility for ios
         document.body.style = styleBody;
         document.body.appendChild(mainCanvas = document.createElement('canvas'));
         mainContext = mainCanvas.getContext('2d');
-        mainCanvas.style = styleCanvas;
 
         // init stuff and start engine
         debugInit();
@@ -92,21 +91,27 @@ 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 = styleCanvas;
+
+        // set canvas style to fill the window
+        const styleCanvas = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
+        (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
         
         gameInit();
         touchGamepadCreate();
         engineUpdate();
     };
 
+    // frame time tracking
+    let frameTimeLastMS = 0, frameTimeBufferMS, averageFPS;
+
     // main update loop
-    const engineUpdate = (frameTimeMS=0)=>
+    function engineUpdate(frameTimeMS=0)
     {
         // update time keeping
         let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
         frameTimeLastMS = frameTimeMS;
         if (debug || showWatermark)
-            averageFPS = lerp(.05, averageFPS || 0, 1e3/(frameTimeDeltaMS||1));
+            averageFPS = lerp(.05, averageFPS, 1e3/(frameTimeDeltaMS||1));
         const debugSpeedUp   = debug && keyIsDown(107); // +
         const debugSpeedDown = debug && keyIsDown(109); // -
         if (debug)
@@ -118,24 +123,19 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
 
         if (canvasFixedSize.x)
         {
-            // clear set fixed size
+            // clear canvas and set fixed size
             overlayCanvas.width  = mainCanvas.width  = canvasFixedSize.x;
             overlayCanvas.height = mainCanvas.height = canvasFixedSize.y;
             
             // 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)
-            {
-                glCanvas.style.width  = mainCanvas.style.width;
-                glCanvas.style.height = mainCanvas.style.height;
-            }
+            (glCanvas||mainCanvas).style.width = mainCanvas.style.width = overlayCanvas.style.width  = aspect < fixedAspect ? '100%' : '';
+            (glCanvas||mainCanvas).style.height = mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
         }
         else
         {
-            // clear and set size to same as window
+             // clear canvas and set size to same as window
              overlayCanvas.width  = mainCanvas.width  = min(innerWidth,  canvasMaxSize.x);
              overlayCanvas.height = mainCanvas.height = min(innerHeight, canvasMaxSize.y);
         }
@@ -202,7 +202,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             overlayContext.fillStyle = '#000';
             const text = engineName + ' ' + 'v' + engineVersion + ' / ' 
                 + drawCount + ' / ' + engineObjects.length + ' / ' + averageFPS.toFixed(1)
-                + ' ' + (glEnable ? 'GL' : '2D') ;
+                + (glEnable ? ' GL' : ' 2D') ;
             overlayContext.fillText(text, mainCanvas.width-3, 3);
             overlayContext.fillStyle = '#fff';
             overlayContext.fillText(text, mainCanvas.width-2, 2);
@@ -216,7 +216,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     tileImageSource ? tileImage.src = tileImageSource : tileImage.onload();
 }
 
-// called by engine to setup render system
+// Called automatically by engine to setup render system
 function enginePreRender()
 {
     // save canvas size
@@ -226,12 +226,10 @@ function enginePreRender()
     mainContext.imageSmoothingEnabled = !cavasPixelated;
 
     // setup gl rendering if enabled
-    glEnable && glPreRender(mainCanvas.width, mainCanvas.height, cameraPos.x, cameraPos.y, cameraScale);
+    glEnable && glPreRender();
 }
 
-///////////////////////////////////////////////////////////////////////////////
-
-/** Calls update on each engine object (recursively if child), removes destroyed objects, and updated time */
+/** Update each engine object, remove destroyed objects, and update time */
 function engineObjectsUpdate()
 {
     // get list of solid objects for physics optimzation

package/engine/engineAudio.js

@@ -57,7 +57,7 @@ class Sound
     {
         if (!soundEnable) return;
 
-        let pan = 0;
+        let pan;
         if (pos)
         {
             const range = this.range;
@@ -87,7 +87,7 @@ class Sound
      *  @param {Number}  [volume=1] - How much to scale volume by (in addition to range fade)
      *  @return {AudioBufferSourceNode} - The audio, can be used to stop sound later
      */
-    playNote(semitoneOffset, pos, volume=1)
+    playNote(semitoneOffset, pos, volume)
     {
         if (!soundEnable) return;
 
@@ -142,7 +142,7 @@ class Music
      *  @param {Boolean} [loop=1] - True if the music should loop when it reaches the end
      *  @return {AudioBufferSourceNode} - The audio node, can be used to stop sound later
      */
-    play(volume = 1, loop = 1)
+    play(volume, loop = 1)
     {
         if (!soundEnable) return;
 
@@ -224,7 +224,7 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
 
     // create audio context
     if (!audioContext)
-        audioContext = new (window.AudioContext||webkitAudioContext);
+        audioContext = new AudioContext;
 
     // fix stalled audio
     audioContext.resume();
@@ -243,18 +243,13 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
     source.playbackRate.value = rate;
     source.loop = loop;
 
-    // create and connect gain node (createGain is more widley spported then GainNode construtor)
+    // create and connect gain node (createGain is more widely spported then GainNode construtor)
     const gainNode = audioContext.createGain();
     gainNode.gain.value = soundVolume*volume;
     gainNode.connect(audioContext.destination);
 
-    // connect source to gain
-    (
-        window.StereoPannerNode ? // create pan node if possible
-        source.connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, -1, 1)}))
-        : source
-    )
-    .connect(gainNode);
+    // connect source to stereo panner and gain
+    source.connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, -1, 1)})).connect(gainNode);
 
     // play and return sound
     source.start();
@@ -372,10 +367,8 @@ function zzfxG
  *  @memberof Audio */
 function zzfxM(instruments, patterns, sequence, BPM = 125) 
 {
+  let i, j, k;
   let instrumentParameters;
-  let i;
-  let j;
-  let k;
   let note;
   let sample;
   let patternChannel;

package/engine/engineBuild.bat

@@ -112,9 +112,16 @@ echo.>> %OUTPUT_FILENAME%
 
 rem --- BUILD ENGINE MODULE RELEASE ---
 
-set OUTPUT_FILENAME=engine.all.release.module.js
+set OUTPUT_FILENAME=engine.all.module.min.js
 del %OUTPUT_FILENAME%
-type engine.all.release.js >> %OUTPUT_FILENAME%
+type engine.all.min.js >> %OUTPUT_FILENAME%
 echo.>> %OUTPUT_FILENAME%
 type engineExport.js >> %OUTPUT_FILENAME%
-echo.>> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+
+rem lightly minify with uglify
+call npx uglifyjs -o %OUTPUT_FILENAME% -- %OUTPUT_FILENAME%
+if %ERRORLEVEL% NEQ 0 (
+    pause
+    exit /b %ERRORLEVEL%
+)

package/engine/engineDraw.js

@@ -22,11 +22,6 @@
 
 'use strict';
 
-/** 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 */
@@ -52,6 +47,14 @@ let overlayContext;
  *  @memberof Draw */
 let mainCanvasSize = vec2();
 
+/** Tile sheet for batch rendering system
+ *  @type {Image}
+ *  @memberof Draw */
+const tileImage = new Image;
+
+// Engine internal variables not exposed to documentation
+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
@@ -76,7 +79,7 @@ const worldToScreen = (worldPos)=>
 
 /** 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 {Vector2} [size=new Vector2(1,1)]            - Size of the tile in world space
  *  @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
@@ -295,10 +298,10 @@ class FontImage
      */
     constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), startTileIndex=0, context=overlayContext)
     {
-        if (!image && !engineFontImage)
+        if (!engineFontImage)
         {
             // load default font image
-            engineFontImage = new Image();
+            engineFontImage = new Image;
             engineFontImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAYAQAAAAA9+x6JAAAAAnRSTlMAAHaTzTgAAAGiSURBVHjaZZABhxxBEIUf6ECLBdFY+Q0PMNgf0yCgsSAGZcT9sgIPtBWwIA5wgAPEoHUyJeeSlW+gjK+fegWwtROWpVQEyWh2npdpBmTUFVhb29RINgLIukoXr5LIAvYQ5ve+1FqWEMqNKTX3FAJHyQDRZvmKWubAACcv5z5Gtg2oyCWE+Yk/8JZQX1jTTCpKAFGIgza+dJCNBF2UskRlsgwitHbSV0QLgt9sTPtsRlvJjEr8C/FARWA2bJ/TtJ7lko34dNDn6usJUMzuErP89UUBJbWeozrwLLncXczd508deAjLWipLO4Q5XGPcJvPu92cNDaN0P5G1FL0nSOzddZOrJ6rNhbXGmeDvO3TF7DeJWl4bvaYQTNHCTeuqKZmbjHaSOFes+IX/+IhHrnAkXOAsfn24EM68XieIECoccD4KZLk/odiwzeo2rovYdhvb2HYFgyznJyDpYJdYOmfXgVdJTaUi4xA2uWYNYec9BLeqdl9EsoTw582mSFDX2DxVLbNt9U3YYoeatBad1c2Tj8t2akrjaIGJNywKB/7h75/gN3vCMSaadIUTAAAAAElFTkSuQmCC';
         }
 
@@ -365,7 +368,7 @@ class FontImage
 /** Returns true if fullscreen mode is active
  *  @return {Boolean}
  *  @memberof Draw */
-const isFullscreen =()=> document.fullscreenElement;
+const isFullscreen = ()=> document.fullscreenElement;
 
 /** Toggle fullsceen mode
  *  @memberof Draw */
@@ -375,14 +378,7 @@ function toggleFullscreen()
     {
         if (document.exitFullscreen)
             document.exitFullscreen();
-        else if (document.mozCancelFullScreen)
-            document.mozCancelFullScreen();
-    }
-    else
-    {
-        if (document.body.webkitRequestFullScreen)
-            document.body.webkitRequestFullScreen();
-        else if (document.body.mozRequestFullScreen)
-            document.body.mozRequestFullScreen();
     }
+    else if (document.body.requestFullscreen)
+            document.body.requestFullscreen();
 }

package/engine/engineExport.js

@@ -3,14 +3,15 @@
  * <br> - Export engine as a module with extra functions where necessary
  */
 
-// setters for all variables that devs will need to modify
+// 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 setGlEnable =                     (v)=> glEnable = v;
+const setGlOverlay =                    (v)=> glOverlay = v;
 const setTileSizeDefault =              (v)=> tileSizeDefault = v;
 const setTileFixBleedScale =            (v)=> tileFixBleedScale = v;
 const setObjectDefaultSize =            (v)=> objectDefaultSize = v;
@@ -23,8 +24,6 @@ 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;
@@ -43,18 +42,17 @@ const setMedalDisplayWidth =            (v)=> medalDisplayWidth = v;
 const setMedalDisplayHeight =           (v)=> medalDisplayHeight = v;
 const setMedalDisplayIconSize =         (v)=> medalDisplayIconSize = v;
 const setMedalsPreventUnlock =          (v)=> medalsPreventUnlock = v;
-const setShowWatermark =                (v)=> showWatermark = v;
-const setGodMode =                      (v)=> godMode = v;
 
 export {
-	// Custom methods
+	// Setters for global variables
 	setCameraPos,
 	setCameraScale,
-	setRandSeed,
 	setCanvasMaxSize,
 	setCanvasFixedSize,
 	setCavasPixelated,
 	setFontDefault,
+	setGlEnable,
+	setGlOverlay,
 	setTileSizeDefault,
 	setTileFixBleedScale,
 	setObjectDefaultSize,
@@ -67,8 +65,6 @@ export {
 	setObjectMaxSpeed,
 	setGravity,
 	setParticleEmitRateScale,
-	setGlEnable,
-	setGlOverlay,
 	setGamepadsEnable,
 	setGamepadDirectionEmulateStick,
 	setInputWASDEmulateDirection,
@@ -87,8 +83,6 @@ export {
 	setMedalDisplayHeight,
 	setMedalDisplayIconSize,
 	setMedalsPreventUnlock,
-	setShowWatermark,
-	setGodMode,
 
 	// Settings
 	canvasMaxSize,
@@ -180,6 +174,7 @@ export {
 	randVector,
 	randColor,
 	randSeed,
+	setRandSeed,
 	randSeeded,
 
 	// Utility Classes
@@ -244,15 +239,12 @@ export {
 	// onmousemove,
 	// onwheel,
 	// oncontextmenu,
-	mouseToScreen,
 	//stickData,
+	mouseToScreen,
 	gamepadsUpdate,
 	vibrate,
 	vibrateStop,
 	isTouchDevice,
-	//touchGamepadTimer,
-	touchGamepadCreate,
-	touchGamepadRender,
 
 	// Audio
 	Sound,
@@ -320,14 +312,9 @@ export {
 	time,
 	timeReal,
 	paused,
-	//frameTimeLastMS,
-	//averageFPS,
-	//drawCount,
-	//styleBody,
-	//styleCanvas,
+	setPaused,
 	engineInit,
-	//enginePreRender,
-	//engineObjectsUpdate,
+	engineObjectsUpdate,
 	engineObjectsDestroy,
 	engineObjectsCallback,
 };

package/engine/engineInput.js

@@ -14,7 +14,7 @@
  *  @param {Number} [device=0]
  *  @return {Boolean}
  *  @memberof Input */
-const keyIsDown = (key, device=0)=> inputData[device] && inputData[device][key] & 1 ? 1 : 0;
+const keyIsDown = (key, device=0)=> inputData[device] && inputData[device][key] & 1;
 
 /** Returns true if device key was pressed this frame
  *  @param {Number} key
@@ -253,32 +253,41 @@ const isTouchDevice = window.ontouchstart !== undefined;
 // try to enable touch mouse
 if (isTouchDevice)
 {
-    // handle all touch events the same way
-    let wasTouching, hadTouch;
-    ontouchstart = ontouchmove = ontouchend = (e)=>
+    // override mouse events
+    let wasTouching, mouseDown = onmousedown, mouseUp = onmouseup;
+    onmousedown = onmouseup = ()=> 0;
+
+    // setup touch input
+    ontouchstart = (e)=>
     {
-        e.button = 0; // all touches are left click
+        // fix mobile audio, force it to play a sound on first touch
+        zzfx(0);
 
-        // check if touching and pass to mouse events
-        const touching = e.touches.length;
-        if (touching)
+        // handle all touch events the same way
+        ontouchstart = ontouchmove = ontouchend = (e)=>
         {
-            // fix mobile audio, force it to play a sound on first touch
-            hadTouch || zzfx(0, hadTouch=1);
+            e.button = 0; // all touches are left click
 
-            // set event pos and pass it along
-            e.x = e.touches[0].clientX;
-            e.y = e.touches[0].clientY;
-            wasTouching ? onmousemove(e) : onmousedown(e);
-        }
-        else if (wasTouching)
-            onmouseup(e);
+            // 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;
 
-        // set was touching
-        wasTouching = touching;
+            // must return true so the document will get focus
+            return true;
+        }
 
-        // must return true so the document will get focus
-        return true;
+        return ontouchstart(e);
     }
 }
 
@@ -286,7 +295,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;
 
 // create the touch gamepad, called automatically by the engine
 function touchGamepadCreate()
@@ -294,65 +303,73 @@ function touchGamepadCreate()
     if (!touchGamepadEnable || !isTouchDevice)
         return;
 
-    ontouchstart = ontouchmove = ontouchend = (e)=> 
+    // touch input internal variables
+    touchGamepadButtons = [];
+    touchGamepadStick = vec2();
+
+    // setup touch input
+    ontouchstart = (e)=>
     {
-        if (!touchGamepadEnable)
-            return;
+        // fix mobile audio, force it to play a sound on first touch
+        zzfx(0);
 
-        // clear touch gamepad input
-        touchGamepadStick = vec2();
-        touchGamepadButtons = [];
-            
-        const touching = e.touches.length;
-        if (touching)
+        ontouchstart = ontouchmove = ontouchend = (e)=> 
         {
-            touchGamepadTimer.isSet() || zzfx(0) ; // fix mobile audio, force it to play a sound the first time
-
-            // set that gamepad is active
-            isUsingGamepad = 1;
-            touchGamepadTimer.set();
-
-            if (paused)
+            // clear touch gamepad input
+            touchGamepadStick = vec2();
+            touchGamepadButtons = [];
+                
+            const touching = e.touches.length;
+            if (touching)
             {
-                // touch anywhere to press start when paused
-                touchGamepadButtons[9] = 1;
-                return;
+                // set that gamepad is active
+                isUsingGamepad = 1;
+                touchGamepadTimer.set();
+
+                if (paused)
+                {
+                    // touch anywhere to press start when paused
+                    touchGamepadButtons[9] = 1;
+                    return;
+                }
             }
-        }
 
-        // get center of left and right sides
-        const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
-        const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
-        const startCenter = mainCanvasSize.scale(.5);
+            // get center of left and right sides
+            const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
+            const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
+            const startCenter = mainCanvasSize.scale(.5);
 
-        // check each touch point
-        for (const touch of e.touches)
-        {
-            const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
-            if (touchPos.distance(stickCenter) < touchGamepadSize)
+            // check each touch point
+            for (const touch of e.touches)
             {
-                // virtual analog stick
-                if (touchGamepadAnalog)
-                    touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
-                else
+                const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
+                if (touchPos.distance(stickCenter) < touchGamepadSize)
                 {
-                    // 8 way dpad
-                    const angle = touchPos.subtract(stickCenter).angle();
-                    touchGamepadStick.setAngle((angle * 4 / PI + 8.5 | 0) * PI / 4);
+                    // virtual analog stick
+                    if (touchGamepadAnalog)
+                        touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
+                    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)
+                {
+                    // virtual face buttons
+                    const button = touchPos.subtract(buttonCenter).direction();
+                    touchGamepadButtons[button] = 1;
+                }
+                else if (touchPos.distance(startCenter) < touchGamepadSize)
+                {
+                    // virtual start button in center
+                    touchGamepadButtons[9] = 1;
                 }
-            }
-            else if (touchPos.distance(buttonCenter) < touchGamepadSize)
-            {
-                // virtual face buttons
-                const button = touchPos.subtract(buttonCenter).direction();
-                touchGamepadButtons[button] = 1;
-            }
-            else if (touchPos.distance(startCenter) < touchGamepadSize)
-            {
-                // virtual start button in center
-                touchGamepadButtons[9] = 1;
             }
         }
+
+        return ontouchstart(e);
     }
 }