littlejsengine 1.1.18 → 1.2.3

package/engine/engine.js

@@ -22,7 +22,7 @@
 const engineName = 'LittleJS';
 
 /** Version of engine */
-const engineVersion = '1.1.18';
+const engineVersion = '1.2.3';
 
 /** Frames per second to update objects
  *  @default */
@@ -35,7 +35,7 @@ const timeDelta = 1/frameRate;
 /** Array containing all engine objects */
 let engineObjects = [];
 
-/** Array containing only objects that are set to collide with other objects (for optimization) */
+/** Array containing only objects that are set to collide with other objects this frame (for optimization) */
 let engineObjectsCollide = [];
 
 /** Current update frame, used to calculate time */
@@ -51,8 +51,15 @@ let timeReal = 0;
 let paused = 0;
 
 // Engine internal variables not exposed to documentation
-let frameTimeLastMS = 0, frameTimeBufferMS = 0, debugFPS = 0, 
-    shrinkTilesX, shrinkTilesY, drawCount, tileImageSize, tileImageSizeInverse;
+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' +
+    ';touch-action:none;user-select:none;-webkit-user-select:none;-moz-user-select:none';
+const styleCanvas = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -70,17 +77,14 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
     tileImage.onerror = tileImage.onload = ()=>
     {
         // save tile image info
-        tileImageSizeInverse = vec2(1).divide(tileImageSize = vec2(tileImage.width, tileImage.height));
+        tileImageFixBleed = vec2(tileFixBleedScale).divide(tileImageSize = vec2(tileImage.width, tileImage.height));
         debug && (tileImage.onload=()=>ASSERT(1)); // tile sheet can not reloaded
-        shrinkTilesX = tileBleedShrinkFix/tileImageSize.x;
-        shrinkTilesY = tileBleedShrinkFix/tileImageSize.y;
 
         // setup html
+        document.body.style = styleBody;
         document.body.appendChild(mainCanvas = document.createElement('canvas'));
-        document.body.style = 'margin:0;overflow:hidden;background:#000' +
-            (touchMouseEnable?';touch-action:none;user-select:none;-webkit-user-select:none;-moz-user-select:none':'');
-        mainCanvas.style = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)';
         mainContext = mainCanvas.getContext('2d');
+        mainCanvas.style = styleCanvas;
 
         // init stuff and start engine
         debugInit();
@@ -88,8 +92,8 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
 
         // create overlay canvas for hud to appear above gl canvas
         document.body.appendChild(overlayCanvas = document.createElement('canvas'));
-        overlayCanvas.style = mainCanvas.style.cssText;
         overlayContext = overlayCanvas.getContext('2d');
+        overlayCanvas.style = styleCanvas;
         
         gameInit();
         touchGamepadCreate();
@@ -105,7 +109,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
         frameTimeLastMS = frameTimeMS;
         if (debug || showWatermark)
-            debugFPS = lerp(.05, 1e3/(frameTimeDeltaMS||1), debugFPS);
+            averageFPS = lerp(.05, averageFPS || 0, 1e3/(frameTimeDeltaMS||1));
         if (debug)
             frameTimeDeltaMS *= keyIsDown(107) ? 5 : keyIsDown(109) ? .2 : 1; // +/- to speed/slow time
         timeReal += frameTimeDeltaMS / 1e3;
@@ -192,7 +196,8 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
             overlayContext.font = '1em monospace';
             overlayContext.fillStyle = '#000';
             const text = engineName + ' ' + 'v' + engineVersion + ' / ' 
-                + drawCount + ' / ' + engineObjects.length + ' / ' + debugFPS.toFixed(1);
+                + drawCount + ' / ' + engineObjects.length + ' / ' + averageFPS.toFixed(1)
+                + ' ' + (glEnable ? 'GL' : '2D') ;
             overlayContext.fillText(text, mainCanvas.width-3, 3);
             overlayContext.fillStyle = '#fff';
             overlayContext.fillText(text, mainCanvas.width-2, 2);
@@ -209,7 +214,11 @@ function enginePreRender()
 {
     // save canvas size and clear canvases
     mainCanvasSize = vec2(overlayCanvas.width = mainCanvas.width, overlayCanvas.height = mainCanvas.height);
-    mainContext.imageSmoothingEnabled = !cavasPixelated; // disable smoothing for pixel art
+
+    // disable smoothing for pixel art
+    mainContext.imageSmoothingEnabled = !cavasPixelated;
+
+    // setup gl rendering if enabled
     glPreRender(mainCanvas.width, mainCanvas.height, cameraPos.x, cameraPos.y, cameraScale);
 }
 
@@ -218,6 +227,9 @@ function enginePreRender()
 /** Calls update on each engine object (recursively if child), removes destroyed objects, and updated time */
 function engineObjectsUpdate()
 {
+    // get list of solid objects for physics optimzation
+    engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
+
     // recursive object update
     const updateObject = (o)=>
     {
@@ -233,17 +245,16 @@ function engineObjectsUpdate()
 
     // remove destroyed objects
     engineObjects = engineObjects.filter(o=>!o.destroyed);
-    engineObjectsCollide = engineObjectsCollide.filter(o=>!o.destroyed);
 
     // increment frame and update time
     time = ++frame / frameRate;
 }
 
-/** Detroy and remove all objects that are not persistent or descendants of a persistent object */
+/** Destroy and remove all objects */
 function engineObjectsDestroy()
 {
     for (const o of engineObjects)
-        o.persistent || o.parent || o.destroy();
+        o.parent || o.destroy();
     engineObjects = engineObjects.filter(o=>!o.destroyed);
 }
 
@@ -254,21 +265,18 @@ function engineObjectsDestroy()
  *  @param {Array} [objects=engineObjects] - List of objects to check */
 function engineObjectsCallback(pos, size, callbackFunction, objects=engineObjects)
 {
-    if (!pos)
+    if (!pos) // all objects
     {
-        // all objects
         for (const o of objects)
             callbackFunction(o);
     }
-    else if (size.x != undefined)
+    else if (size.x != undefined)  // bounding box test
     {
-        // aabb test
         for (const o of objects)
             isOverlapping(pos, size, o.pos, o.size) && callbackFunction(o);
     }
-    else
+    else  // circle test
     {
-        // circle test
         const sizeSquared = size*size;
         for (const o of objects)
             pos.distanceSquared(o.pos) < sizeSquared && callbackFunction(o);

package/engine/engineAudio.js

@@ -69,7 +69,7 @@ class Sound
                     return; // out of range
 
                 // attenuate volume by distance
-                volume *= percent(lengthSquared**.5, range*this.taper, range);
+                volume *= percent(lengthSquared**.5, range, range*this.taper);
             }
 
             // get pan from screen space coords
@@ -195,7 +195,7 @@ function speak(text, language='', volume=1, rate=1, pitch=1)
 
 /** Stop all queued speech
  *  @memberof Audio */
-const stopSpeech = ()=> speechSynthesis && speechSynthesis.cancel();
+const speakStop = ()=> speechSynthesis && speechSynthesis.cancel();
 
 /** Get frequency of a note on a musical scale
  *  @param {Number} semitoneOffset - How many semitones away from the root note
@@ -226,6 +226,13 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
     if (!audioContext)
         audioContext = new (window.AudioContext||webkitAudioContext);
 
+    // fix stalled audio
+    audioContext.resume();
+
+    // prevent sounds from building up if they can't be played
+    if (audioContext.state != 'running')
+        return;
+
     // create buffer and source
     const buffer = audioContext.createBuffer(sampleChannels.length, sampleChannels[0].length, zzfxR), 
         source = audioContext.createBufferSource();
@@ -236,11 +243,18 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
     source.playbackRate.value = rate;
     source.loop = loop;
 
-    // create pan and gain nodes
-    source
-        .connect(new StereoPannerNode(audioContext, {'pan':clamp(pan, 1, -1)}))
-        .connect(new GainNode(audioContext, {'gain':soundVolume*volume}))
-        .connect(audioContext.destination);
+    // create and connect gain node (createGain is more widley 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);
 
     // play and return sound
     source.start();

package/engine/engineBuild.bat

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

package/engine/engineBuildSetup.bat

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

package/engine/engineDebug.js

@@ -1,8 +1,15 @@
+/*
+    LittleJS - Debug Build
+    MIT License - Copyright 2021 Frank Force
+*/
+
 /** 
  * LittleJS Debug System
- * <br> - Debug overlay with mouse pick
+ * <br> - Press ~ to show debug overlay with mouse pick
+ * <br> - Number keys toggle debug functions
+ * <br> - +/- apply time scale
  * <br> - Debug primitive rendering
- * <br> - Save screenshots to disk
+ * <br> - Save a 2d canvas as an image
  * @namespace Debug
  */
 
@@ -34,7 +41,7 @@ let showWatermark = 1;
 let godMode = 0;
 
 // Engine internal variables not exposed to documentation
-let debugPrimitives = [], debugOverlay = 0, debugPhysics = 0, debugRaycast = 0, 
+let debugPrimitives = [], debugOverlay = 0, debugPhysics = 0, debugRaycast = 0,
 debugParticles = 0, debugGamepads = 0, debugMedals = 0, debugTakeScreenshot, downloadLink;
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -153,25 +160,28 @@ const debugUpdate = ()=>
 {
     if (!debug)
         return;
-        
+
     if (keyWasPressed(192)) // ~
         debugOverlay = !debugOverlay;
-    if (keyWasPressed(49)) // 1
-        debugPhysics = !debugPhysics, debugParticles = 0;
-    if (keyWasPressed(50)) // 2
-        debugParticles = !debugParticles, debugPhysics = 0;
-    if (keyWasPressed(51)) // 3
-        godMode = !godMode;
-    if (keyWasPressed(53)) // 5
-        debugTakeScreenshot = 1;
-    //if (keyWasPressed(54)) // 6
-    //    debugToggleParticleEditor();
-    if (keyWasPressed(55)) // 7
-        debugGamepads = !debugGamepads;
-    //if (keyWasPressed(56)) // 8
-    //if (keyWasPressed(57)) // 9
-    if (keyWasPressed(48)) // 0
-        showWatermark = !showWatermark;
+    if (debugOverlay)
+    {
+        if (keyWasPressed(48)) // 0
+            showWatermark = !showWatermark;
+        if (keyWasPressed(49)) // 1
+            debugPhysics = !debugPhysics, debugParticles = 0;
+        if (keyWasPressed(50)) // 2
+            debugParticles = !debugParticles, debugPhysics = 0;
+        if (keyWasPressed(51)) // 3
+            debugGamepads = !debugGamepads;
+        if (keyWasPressed(52)) // 4
+            godMode = !godMode;
+        if (keyWasPressed(53)) // 5
+            debugTakeScreenshot = 1;
+        //if (keyWasPressed(54)) // 6
+        //if (keyWasPressed(55)) // 7
+        //if (keyWasPressed(56)) // 8
+        //if (keyWasPressed(57)) // 9
+    }
 }
 
 const debugRender = ()=>
@@ -191,21 +201,20 @@ const debugRender = ()=>
 
     if (debugGamepads && gamepadsEnable && navigator.getGamepads)
     {
-        // poll gamepads
+        // gamepad debug display
         const gamepads = navigator.getGamepads();
         for (let i = gamepads.length; i--;)
         {
             const gamepad = gamepads[i];
             if (gamepad)
             {
-                // gamepad debug display
                 const stickScale = 1;
                 const buttonScale = .2;
                 const centerPos = cameraPos;
                 const sticks = stickData[i];
                 for (let j = sticks.length; j--;)
                 {
-                    const drawPos = centerPos.add(vec2(j*stickScale*2,i*stickScale*3));
+                    const drawPos = centerPos.add(vec2(j*stickScale*2, i*stickScale*3));
                     const stickPos = drawPos.add(sticks[j].scale(stickScale));
                     debugCircle(drawPos, stickScale, '#fff7',0,1);
                     debugLine(drawPos, stickPos, '#f00');
@@ -224,38 +233,36 @@ const debugRender = ()=>
 
     if (debugOverlay)
     {
+        // mouse pick
+        let bestDistance = Infinity, bestObject;
         for (const o of engineObjects)
         {
-            if (o.canvas)
+            if (o.canvas || o.destroyed)
                 continue; // skip tile layers
 
             const size = o.size.copy();
-            size.x = max(size.x, .2);
-            size.y = max(size.y, .2);
+            if (!size.x || !size.y)
+                continue;
 
+            const distance = mousePos.distanceSquared(o.pos);
+            if (distance < bestDistance)
+            {
+                bestDistance = distance;
+                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);
-
-            // show object info
+            size.x = max(size.x, .2);
+            size.y = max(size.y, .2);
             drawRect(o.pos, size, color);
             drawRect(o.pos, size.scale(.8), o.parent ? new Color(1,1,1,.5) : new Color(0,0,0,.8));
             o.parent && drawLine(o.pos, o.parent.pos, .1, new Color(0,0,1,.5));
         }
-
-        // mouse pick
-        let bestDistance = Infinity, bestObject;
-        for (const o of engineObjects)
-        {
-            const distance = mousePos.distanceSquared(o.pos);
-            if (distance < bestDistance)
-            {
-                bestDistance = distance;
-                bestObject = o
-            }
-        }
         
         if (bestObject)
         {
@@ -275,7 +282,8 @@ const debugRender = ()=>
                 pos = pos.add(height), ...args);
             drawText('vel = ' + printVec2(bestObject.velocity), pos = pos.add(height), ...args);
             drawText('size = ' + printVec2(bestObject.size), pos = pos.add(height), ...args);
-            drawText('collision = ' + getTileCollisionData(mousePos), pos = mousePos.subtract(height), ...args);
+            drawText('type = ' + ( bestObject.constructor.name), pos = mousePos.subtract(height), ...args);
+            drawText('collision = ' + getTileCollisionData(mousePos), pos = mousePos.subtract(height.scale(2)), ...args);
             mainContext = saveContext;
         }
 
@@ -283,16 +291,15 @@ const debugRender = ()=>
     }
 
     {
-        // render debug rects
-        overlayContext.lineWidth = 1;
+        // draw debug primitives
+        overlayContext.save();
+        overlayContext.lineWidth = 2;
         const pointSize = debugPointSize * cameraScale;
         debugPrimitives.forEach(p=>
         {
             // create canvas transform from world space to screen space
             const pos = worldToScreen(p.pos);
             
-            overlayContext.save();
-            overlayContext.lineWidth = 2;
             overlayContext.translate(pos.x|0, pos.y|0);
             overlayContext.rotate(p.angle);
             overlayContext.fillStyle = overlayContext.strokeStyle = p.color;
@@ -325,15 +332,17 @@ const debugRender = ()=>
                 p.fill && overlayContext.fill();
                 overlayContext.stroke();
             }
-
-            overlayContext.restore();
         });
 
-        overlayContext.fillStyle = overlayContext.strokeStyle = '#fff';
+        // remove expired pritives
+        debugPrimitives = debugPrimitives.filter(r=>r.time.get()<0);
+
+        overlayContext.restore();
     }
 
     {
-        let x = 9, y = -20, h = 30;
+        // draw debug overlay
+        overlayContext.save();
         overlayContext.fillStyle = '#fff';
         overlayContext.textAlign = 'left';
         overlayContext.textBaseline = 'top';
@@ -341,6 +350,7 @@ const debugRender = ()=>
         overlayContext.shadowColor = '#000';
         overlayContext.shadowBlur = 9;
 
+        let x = 9, y = -20, h = 30;
         if (debugOverlay)
         {
             overlayContext.fillText(engineName, x, y += h);
@@ -353,214 +363,38 @@ const debugRender = ()=>
             overlayContext.fillText('1: Debug Physics', x, y += h);
             overlayContext.fillStyle = debugParticles ? '#f00' : '#fff';
             overlayContext.fillText('2: Debug Particles', x, y += h);
+            overlayContext.fillStyle = debugGamepads ? '#f00' : '#fff';
+            overlayContext.fillText('3: Debug Gamepads', x, y += h);
             overlayContext.fillStyle = godMode ? '#f00' : '#fff';
-            overlayContext.fillText('3: God Mode', x, y += h);
+            overlayContext.fillText('4: God Mode', x, y += h);
             overlayContext.fillStyle = '#fff';
             overlayContext.fillText('5: Save Screenshot', x, y += h);
-            //overlayContext.fillStyle = debugParticleEditor ? '#f00' : '#fff';
-            //overlayContext.fillText('6: Particle Editor', x, y += h);
-            overlayContext.fillStyle = debugGamepads ? '#f00' : '#fff';
-            overlayContext.fillText('7: Debug Gamepads', x, y += h);
-        }
-        else
-        {
-            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(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
-        }
-    
-        overlayContext.shadowBlur = 0;
-    }
-
-    debugPrimitives = debugPrimitives.filter(r=>r.time.get()<0);
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// particle system editor (work in progress)
-let debugParticleEditor = 0, debugParticleSystem, debugParticleSystemDiv, particleSystemCode;
-
-const debugToggleParticleEditor = ()=>
-{
-    debugParticleEditor = !debugParticleEditor;
 
-    if (debugParticleEditor)
-    {
-        if (!debugParticleSystem || debugParticleSystem.destroyed)
-            debugParticleSystem = new ParticleEmitter(cameraPos);
-    }
-    else if (debugParticleSystem && !debugParticleSystem.destroyed)
-        debugParticleSystem.destroy();
-
-
-    const colorToHex = (color)=>
-    {
-        const componentToHex = (c)=>
-        {
-            const hex = (c*255|0).toString(16);
-            return hex.length == 1 ? '0' + hex : hex;
-        }
-
-        return '#' + componentToHex(color.r) + componentToHex(color.g) + componentToHex(color.b);
-    }
-    const hexToColor = (hex)=>
-    {
-        return new Color(
-            parseInt(hex.substr(1,2), 16)/255,
-            parseInt(hex.substr(3,2), 16)/255,
-            parseInt(hex.substr(5,2), 16)/255)
-    }
-
-    if (!debugParticleSystemDiv)
-    {
-        const div = debugParticleSystemDiv = document.createElement('div');
-        div.innerHTML = '<big><b>Particle Editor';
-        div.style = 'position:absolute;top:10;left:10;color:#fff';
-        document.body.appendChild(div);
-
-        for ( const setting of debugParticleSettings)
-        {
-            const input = setting[2] = document.createElement('input');
-            const name = setting[0];
-            const type = setting[1];
-            if (type)
+            let keysPressed = '';
+            for(const i in inputData[0])
             {
-                if (type == 'color')
-                {
-                    input.type = type;
-                    const color = debugParticleSystem[name];
-                    input.value = colorToHex(color);
-                }
-                else if (type == 'alpha' && name == 'colorStartAlpha')
-                    input.value = debugParticleSystem.colorStartA.a;
-                else if (type == 'alpha' && name == 'colorEndAlpha')
-                    input.value = debugParticleSystem.colorEndA.a;
-                else if (name == 'tileSizeX')
-                    input.value = debugParticleSystem.tileSize.x;
-                else if (name == 'tileSizeY')
-                    input.value = debugParticleSystem.tileSize.y;
+                if (i && keyIsDown(i, 0))
+                    keysPressed += i + ' ' ;
             }
-            else
-                input.value = debugParticleSystem[name] || '0';
+            keysPressed && overlayContext.fillText('Keys Down: ' + keysPressed, x, y += h);
 
-            input.oninput = (e)=>
+            let buttonsPressed = '';
+            if (inputData[1])
+            for(const i in inputData[1])
             {
-                const inputFloat = parseFloat(input.value) || 0;
-                if (type)
-                {
-                    if (type == 'color')
-                    {
-                        const color = hexToColor(input.value);
-                        debugParticleSystem[name].r = color.r;
-                        debugParticleSystem[name].g = color.g;
-                        debugParticleSystem[name].b = color.b;
-                    }
-                    else if (type == 'alpha' && name == 'colorStartAlpha')
-                    {
-                        debugParticleSystem.colorStartA.a = clamp(inputFloat);
-                        debugParticleSystem.colorStartB.a = clamp(inputFloat);
-                    }
-                    else if (type == 'alpha' && name == 'colorEndAlpha')
-                    {
-                        debugParticleSystem.colorEndA.a = clamp(inputFloat);
-                        debugParticleSystem.colorEndB.a = clamp(inputFloat);
-                    }
-                    else if (name == 'tileSizeX')
-                    {
-                        debugParticleSystem.tileSize = vec2(parseInt(input.value), debugParticleSystem.tileSize.y);
-                    }
-                    else if (name == 'tileSizeY')
-                    {
-                        debugParticleSystem.tileSize.y = vec2(debugParticleSystem.tileSize.x, parseInt(input.value));
-                    }
-                }
-                else
-                    debugParticleSystem[name] = inputFloat;
-
-                updateCode();
+                if (i && keyIsDown(i, 1))
+                    buttonsPressed += i + ' ' ;
             }
-            div.appendChild(document.createElement('br'));
-            div.appendChild(input);
-            div.appendChild(document.createTextNode(' ' + name));
+            buttonsPressed && overlayContext.fillText('Gamepad: ' + buttonsPressed, x, y += h);
         }
-
-        div.appendChild(document.createElement('br'));
-        div.appendChild(document.createElement('br'));
-        div.appendChild(particleSystemCode = document.createElement('input'));
-        particleSystemCode.disabled = true;
-        div.appendChild(document.createTextNode(' code'));
-
-        div.appendChild(document.createElement('br'));
-        const button = document.createElement('button')
-        div.appendChild(button);
-        button.innerHTML = 'Copy To Clipboard';
-        
-        button.onclick = (e)=> navigator.clipboard.writeText(particleSystemCode.value); 
-
-        const updateCode = ()=>
+        else
         {
-            let code = '';
-            let count = 0;
-            for ( const setting of debugParticleSettings)
-            {
-                const name = setting[0];
-                const type = setting[1];
-                let value;
-                if (name == 'tileSizeX' || type == 'alpha')
-                    continue;
-
-                if (count++)
-                    code += ', ';
-
-                if (name == 'tileSizeY')
-                {
-                    value = `vec2(${debugParticleSystem.tileSize.x},${debugParticleSystem.tileSize.y})`;
-                }
-                else if (type == 'color')
-                {
-                    const c = debugParticleSystem[name];
-                    value = `new Color(${c.r},${c.g},${c.b},${c.a})`;
-                }
-                else
-                    value = debugParticleSystem[name];
-                code += value;
-            }
-
-            particleSystemCode.value = '...[' + code + ']';
+            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(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
         }
-        updateCode();
+    
+        overlayContext.restore();
     }
-    debugParticleSystemDiv.style.display = debugParticleEditor ? '' : 'none'
-}
-
-const debugParticleSettings = 
-[
-    ['emitSize'],
-    ['emitTime'],
-    ['emitRate'],
-    ['emitConeAngle'],
-    ['tileIndex'],
-    ['tileSizeX', 'tileSize'],
-    ['tileSizeY', 'tileSize'],
-    ['colorStartA', 'color'],
-    ['colorStartB', 'color'],
-    ['colorStartAlpha', 'alpha'],
-    ['colorEndA',   'color'],
-    ['colorEndB',   'color'],
-    ['colorEndAlpha', 'alpha'],
-    ['particleTime'],
-    ['sizeStart'],
-    ['sizeEnd'],
-    ['speed'],
-    ['angleSpeed'],
-    ['damping'],
-    ['angleDamping'],
-    ['gravityScale'],
-    ['particleConeAngle'],
-    ['fadeRate'],
-    ['randomness'],
-    ['collideTiles'],
-    ['additive'],
-    ['randomColorComponents'],
-    ['renderOrder'],
-];
+}