littlejsengine 1.5.2 → 1.6.4

package/examples/typescript/game.js

@@ -1,89 +1,89 @@
-/*
-    LittleJS Hello World Starter Game
-*/
-'use strict';
-// import module
-import * as LittleJS from '../../engine/engine.all.module.js';
-const { Vector2, Color, Timer, vec2 } = LittleJS;
-// sound effects
-const sound_click = new LittleJS.Sound([1, .5]);
-// medals
-const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
-LittleJS.medalsInit('Hello World');
-// game variables
-let particleEmiter;
-///////////////////////////////////////////////////////////////////////////////
-function gameInit() {
-    // create tile collision and visible tile layer
-    LittleJS.initTileCollision(vec2(32, 16));
-    const pos = vec2();
-    const tileLayer = new LittleJS.TileLayer(pos, LittleJS.tileCollisionSize);
-    // get level data from the tiles image
-    const imageLevelDataRow = 1;
-    const mainContext = LittleJS.mainContext;
-    mainContext.drawImage(LittleJS.tileImage, 0, 0);
-    for (pos.x = LittleJS.tileCollisionSize.x; pos.x--;)
-        for (pos.y = LittleJS.tileCollisionSize.y; pos.y--;) {
-            const imageData = mainContext.getImageData(pos.x, 16 * (imageLevelDataRow + 1) - pos.y - 1, 1, 1).data;
-            if (imageData[0]) {
-                const tileIndex = 1;
-                const direction = LittleJS.randInt(4);
-                const mirror = LittleJS.randInt(2) ? true : false;
-                const color = LittleJS.randColor();
-                const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
-                tileLayer.setData(pos, data);
-                LittleJS.setTileCollisionData(pos, 1);
-            }
-        }
-    tileLayer.redraw();
-    // move camera to center of collision
-    LittleJS.setCameraPos(LittleJS.tileCollisionSize.scale(.5));
-    // enable gravity
-    LittleJS.setGravity(-.01);
-    // create particle emitter
-    const center = LittleJS.tileCollisionSize.scale(.5).add(vec2(0, 9));
-    particleEmiter = new LittleJS.ParticleEmitter(center, 0, // emitPos, emitAngle
-    1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emiteCone
-    0, vec2(16), // tileIndex, tileSize
-    new Color(1, 1, 1), new Color(0, 0, 0), // colorStartA, colorStartB
-    new Color(1, 1, 1, 0), new Color(0, 0, 0, 0), // colorEndA, colorEndB
-    2, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
-    .99, 1, 1, Math.PI, // damping, angleDamping, gravityScale, cone
-    .05, .5, true, true // fadeRate, randomness, collide, additive
-    );
-    particleEmiter.elasticity = .3; // bounce when it collides
-    particleEmiter.trailScale = 2; // stretch in direction of motion
-}
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdate() {
-    if (LittleJS.mouseWasPressed(0)) {
-        // play sound when mouse is pressed
-        sound_click.play(LittleJS.mousePos);
-        // change particle color and set to fade out
-        particleEmiter.colorStartA = new Color;
-        particleEmiter.colorStartB = LittleJS.randColor();
-        particleEmiter.colorEndA = particleEmiter.colorStartA.scale(1, 0);
-        particleEmiter.colorEndB = particleEmiter.colorStartB.scale(1, 0);
-        // unlock medals
-        medal_example.unlock();
-    }
-    // move particles to mouse location if on screen
-    if (LittleJS.mousePosScreen.x)
-        particleEmiter.pos = LittleJS.mousePos;
-}
-///////////////////////////////////////////////////////////////////////////////
-function gameUpdatePost() {
-}
-///////////////////////////////////////////////////////////////////////////////
-function gameRender() {
-    // draw a grey square in the background without using webgl
-    LittleJS.drawRect(LittleJS.cameraPos, LittleJS.tileCollisionSize.add(vec2(5)), new Color(.2, .2, .2), 0, false);
-}
-///////////////////////////////////////////////////////////////////////////////
-function gameRenderPost() {
-    // draw to overlay canvas for hud rendering
-    LittleJS.drawTextScreen('LittleJS with TypeScript', vec2(LittleJS.mainCanvasSize.x / 2, 80), 80);
-}
-///////////////////////////////////////////////////////////////////////////////
-// Startup LittleJS Engine
-LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+/*
+    LittleJS Hello World Starter Game
+*/
+'use strict';
+// import module
+import * as LittleJS from '../../build/littlejs.esm.js';
+const { Color, vec2 } = LittleJS;
+// sound effects
+const sound_click = new LittleJS.Sound([1, .5]);
+// medals
+const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJS!');
+LittleJS.medalsInit('Hello World');
+// game variables
+let particleEmitter;
+///////////////////////////////////////////////////////////////////////////////
+function gameInit() {
+    // create tile collision and visible tile layer
+    LittleJS.initTileCollision(vec2(32, 16));
+    const pos = vec2();
+    const tileLayer = new LittleJS.TileLayer(pos, LittleJS.tileCollisionSize);
+    // get level data from the tiles image
+    const imageLevelDataRow = 1;
+    const mainContext = LittleJS.mainContext;
+    mainContext.drawImage(LittleJS.tileImage, 0, 0);
+    for (pos.x = LittleJS.tileCollisionSize.x; pos.x--;)
+        for (pos.y = LittleJS.tileCollisionSize.y; pos.y--;) {
+            const imageData = mainContext.getImageData(pos.x, 16 * (imageLevelDataRow + 1) - pos.y - 1, 1, 1).data;
+            if (imageData[0]) {
+                const tileIndex = 1;
+                const direction = LittleJS.randInt(4);
+                const mirror = LittleJS.randInt(2) ? true : false;
+                const color = LittleJS.randColor();
+                const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
+                tileLayer.setData(pos, data);
+                LittleJS.setTileCollisionData(pos, 1);
+            }
+        }
+    tileLayer.redraw();
+    // move camera to center of collision
+    LittleJS.setCameraPos(LittleJS.tileCollisionSize.scale(.5));
+    // enable gravity
+    LittleJS.setGravity(-.01);
+    // create particle emitter
+    const center = LittleJS.tileCollisionSize.scale(.5).add(vec2(0, 9));
+    particleEmitter = new LittleJS.ParticleEmitter(center, 0, // emitPos, emitAngle
+    1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emiteCone
+    0, vec2(16), // tileIndex, tileSize
+    new Color(1, 1, 1), new Color(0, 0, 0), // colorStartA, colorStartB
+    new Color(1, 1, 1, 0), new Color(0, 0, 0, 0), // colorEndA, colorEndB
+    2, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
+    .99, 1, 1, Math.PI, // damping, angleDamping, gravityScale, cone
+    .05, .5, true, true // fadeRate, randomness, collide, additive
+    );
+    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.trailScale = 2; // stretch in direction of motion
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdate() {
+    if (LittleJS.mouseWasPressed(0)) {
+        // play sound when mouse is pressed
+        sound_click.play(LittleJS.mousePos);
+        // change particle color and set to fade out
+        particleEmitter.colorStartA = new Color;
+        particleEmitter.colorStartB = LittleJS.randColor();
+        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1, 0);
+        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1, 0);
+        // unlock medals
+        medal_example.unlock();
+    }
+    // move particles to mouse location if on screen
+    if (LittleJS.mousePosScreen.x)
+        particleEmitter.pos = LittleJS.mousePos;
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameUpdatePost() {
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameRender() {
+    // draw a grey square in the background without using webgl
+    LittleJS.drawRect(LittleJS.cameraPos, LittleJS.tileCollisionSize.add(vec2(5)), new Color(.2, .2, .2), 0, false);
+}
+///////////////////////////////////////////////////////////////////////////////
+function gameRenderPost() {
+    // draw to overlay canvas for hud rendering
+    LittleJS.drawTextScreen('LittleJS with TypeScript', vec2(LittleJS.mainCanvasSize.x / 2, 80), 80);
+}
+///////////////////////////////////////////////////////////////////////////////
+// Startup LittleJS Engine
+LittleJS.engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');

package/examples/typescript/game.ts

@@ -5,8 +5,8 @@
 'use strict';
 
 // import module
-import * as LittleJS from '../../engine/engine.all.module.js';
-const {Vector2, Color, Timer, vec2} = LittleJS;
+import * as LittleJS from '../../build/littlejs.esm.js';
+const {Color, vec2} = LittleJS;
 
 // sound effects
 const sound_click = new LittleJS.Sound([1,.5]);
@@ -16,7 +16,7 @@ const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJ
 LittleJS.medalsInit('Hello World');
 
 // game variables
-let particleEmiter;
+let particleEmitter: LittleJS.ParticleEmitter;
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
@@ -55,7 +55,7 @@ function gameInit()
 
     // create particle emitter
     const center = LittleJS.tileCollisionSize.scale(.5).add(vec2(0,9));
-    particleEmiter = new LittleJS.ParticleEmitter(
+    particleEmitter = new LittleJS.ParticleEmitter(
         center, 0,                              // emitPos, emitAngle
         1, 0, 500, Math.PI,                     // emitSize, emitTime, emitRate, emiteCone
         0, vec2(16),                            // tileIndex, tileSize
@@ -65,8 +65,8 @@ function gameInit()
         .99, 1, 1, Math.PI,   // damping, angleDamping, gravityScale, cone
         .05, .5, true, true         // fadeRate, randomness, collide, additive
     );
-    particleEmiter.elasticity = .3; // bounce when it collides
-    particleEmiter.trailScale = 2;  // stretch in direction of motion
+    particleEmitter.elasticity = .3; // bounce when it collides
+    particleEmitter.trailScale = 2;  // stretch in direction of motion
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -78,10 +78,10 @@ function gameUpdate()
         sound_click.play(LittleJS.mousePos);
 
         // change particle color and set to fade out
-        particleEmiter.colorStartA = new Color;
-        particleEmiter.colorStartB = LittleJS.randColor();
-        particleEmiter.colorEndA = particleEmiter.colorStartA.scale(1,0);
-        particleEmiter.colorEndB = particleEmiter.colorStartB.scale(1,0);
+        particleEmitter.colorStartA = new Color;
+        particleEmitter.colorStartB = LittleJS.randColor();
+        particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
+        particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
 
         // unlock medals
         medal_example.unlock();
@@ -89,7 +89,7 @@ function gameUpdate()
 
     // move particles to mouse location if on screen
     if (LittleJS.mousePosScreen.x)
-        particleEmiter.pos = LittleJS.mousePos;
+        particleEmitter.pos = LittleJS.mousePos;
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/typescript/index.html

@@ -1,9 +1,10 @@
 <html><head>
+<title>Little TypeScript Demo</title>
 <meta name=viewport content=width=device-width,height=device-height,initial-scale=1,maximum-scale=1>
 <meta name=apple-mobile-web-app-capable content=yes>
 <meta name=mobile-web-app-capable content=yes>
-<link rel=icon type=image/png href=../../favicon.png>
+<link rel=icon type=image/png href=../favicon.png>
 </head><body>
 
 <!-- Add your game scripts here -->
-<script src=game.js?125 type=module></script>
+<script src=game.js?126 type=module></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.5.2",
+  "version": "1.6.4",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "engine/engine.all.module.js",
   "repository": {
@@ -23,13 +23,13 @@
   },
   "homepage": "https://github.com/KilledByAPixel/LittleJS",
   "scripts": {
-    "build": "build.bat"
+    "build": "cd src && engineBuild.bat"
   },
   "devDependencies": {
-    "ect-bin": "~1.4.1",
     "google-closure-compiler": "~20230502.0.0",
     "roadroller": "~2.1.0",
+    "uglify-js": "~3.17.4",
     "typescript": "~5.1.6",
-    "uglify-js": "~3.17.4"
+    "ect-bin": "~1.4.1"
   }
 }

package/{engine → src}/engine.js

@@ -34,7 +34,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.5.2';
+const engineVersion = '1.6.4';
 
 /** Frames per second to update objects
  *  @type {Number}
@@ -125,7 +125,6 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         (glCanvas||mainCanvas).style = mainCanvas.style = overlayCanvas.style = styleCanvas;
         
         gameInit();
-        touchGamepadCreate();
         engineUpdate();
     };
 

package/{engine → src}/engineAudio.js

@@ -270,7 +270,7 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=0)
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// ZzFXMicro - Zuper Zmall Zound Zynth - v1.1.8 by Frank Force
+// ZzFXMicro - Zuper Zmall Zound Zynth - v1.2.0 by Frank Force
 
 /** Generate and play a ZzFX sound
  *  <br>
@@ -296,11 +296,11 @@ function zzfxG
     bitCrush = 0, delay = 0, sustainVolume = 1, decay = 0, tremolo = 0
 )
 {
-    // init parameters
+    // locals
     let PI2 = PI*2, startSlide = slide *= 500 * PI2 / zzfxR / zzfxR, b=[],
         startFrequency = frequency *= (1 + randomness*rand(-1,1)) * PI2 / zzfxR,
-        t=0, tm=0, i=0, j=1, r=0, c=0, s=0, f, length;
-        
+        t=0, tm=0, i=0, j=1, r=0, c=0, s=0, f, length
+
     // scale by sample rate
     attack = attack * zzfxR + 9; // minimum attack to prevent pop
     decay *= zzfxR;
@@ -350,18 +350,18 @@ function zzfxG
             Math.cos(modulation*tm++);                    // modulation
         t += f - f*noise*(1 - (Math.sin(i)+1)*1e9%2);     // noise
 
-        if (j && ++j > pitchJumpTime)       // pitch jump
+        if (j && ++j > pitchJumpTime)    // pitch jump
         {
-            frequency += pitchJump;         // apply pitch jump
-            startFrequency += pitchJump;    // also apply to start
-            j = 0;                          // reset pitch jump time
+            frequency += pitchJump;      // apply pitch jump
+            startFrequency += pitchJump; // also apply to start
+            j = 0;                       // reset pitch jump time
         }
 
         if (repeatTime && !(++r % repeatTime)) // repeat
         {
-            frequency = startFrequency;     // reset frequency
-            slide = startSlide;             // reset slide
-            j = j || 1;                     // reset pitch jump time
+            frequency = startFrequency;  // reset frequency
+            slide = startSlide;          // reset slide
+            j ||= 1;                     // reset pitch jump time
         }
     }
     

package/src/engineBuild.bat

@@ -0,0 +1,132 @@
+rem Simple build script for LittleJS Engine by Frank Force
+rem Minfies and combines index.html and index.js and zips the result
+rem Run npm install first to install required dependencies
+
+rem --- BUILD ENGINE DEBUG ---
+
+set BUILD_FOLDER=build
+set ENGINE_NAME=littlejs
+
+pushd ..
+
+rem remove old files
+rmdir /s /q %BUILD_FOLDER%
+mkdir %BUILD_FOLDER%
+pushd %BUILD_FOLDER%
+
+rem --- BUILD ENGINE ALL ---
+
+set OUTPUT_FILENAME=%ENGINE_NAME%.js
+
+rem combine code
+type ..\src\engineDebug.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineUtilities.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineSettings.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineObject.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineDraw.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineInput.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineAudio.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineTileLayer.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineParticles.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineMedals.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineWebGL.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engine.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+
+rem --- BUILD ENGINE RELEASE ---
+
+set OUTPUT_FILENAME=%ENGINE_NAME%.release.js
+
+rem combine code
+type ..\src\engineRelease.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineUtilities.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineSettings.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engine.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineObject.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineDraw.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineInput.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineAudio.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineTileLayer.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineParticles.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineMedals.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineWebGL.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+
+rem --- BUILD ENGINE MINIFIED ---
+
+set OUTPUT_FILENAME=%ENGINE_NAME%.min.js
+
+rem start with release build
+copy %ENGINE_NAME%.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_2021 --warning_level=VERBOSE --jscomp_off=*
+del %OUTPUT_FILENAME%.temp
+if %ERRORLEVEL% NEQ 0 (
+    pause
+    exit /b %ERRORLEVEL%
+)
+
+rem lightly minify with uglify
+call npx uglifyjs -o %OUTPUT_FILENAME% -- %OUTPUT_FILENAME%
+if %ERRORLEVEL% NEQ 0 (
+    pause
+    exit /b %ERRORLEVEL%
+)
+
+rem --- BUILD ENGINE ESM MODULE ---
+
+set OUTPUT_FILENAME=%ENGINE_NAME%.esm.js
+type %ENGINE_NAME%.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineExport.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+
+rem --- BUILD ENGINE ESM MODULE RELEASE ---
+
+set OUTPUT_FILENAME=%ENGINE_NAME%.esm.min.js
+type %ENGINE_NAME%.min.js >> %OUTPUT_FILENAME%
+echo.>> %OUTPUT_FILENAME%
+type ..\src\engineExport.js >> %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%
+)
+
+rem --- BUILD TYPESCRIPT DEFINITIONS ---
+
+call npx tsc %ENGINE_NAME%.esm.js --declaration --allowJs --emitDeclarationOnly --outFile %ENGINE_NAME%.d.ts
+if %ERRORLEVEL% NEQ 0 (
+    pause
+    exit /b %ERRORLEVEL%
+)
+
+popd
+popd

package/{engine → src}/engineDebug.js

@@ -45,6 +45,12 @@ let showWatermark = 1;
  *  @memberof Debug */
 let godMode = 0;
 
+/** Key code used to toggle debug mode, Esc by default
+ *  @type {Boolean}
+ *  @default
+ *  @memberof Debug */
+let debugKey = 27;
+
 // Engine internal variables not exposed to documentation
 let debugPrimitives = [], debugOverlay = 0, debugPhysics = 0, debugRaycast = 0,
 debugParticles = 0, debugGamepads = 0, debugMedals = 0, debugTakeScreenshot, downloadLink;
@@ -166,7 +172,7 @@ const debugUpdate = ()=>
     if (!debug)
         return;
 
-    if (keyWasPressed(192)) // ~
+    if (keyWasPressed(debugKey)) // Esc
         debugOverlay = !debugOverlay;
     if (debugOverlay)
     {
@@ -351,7 +357,7 @@ const debugRender = ()=>
             overlayContext.fillText('Time: ' + formatTime(time), x, y += h);
             overlayContext.fillText('---------', x, y += h);
             overlayContext.fillStyle = '#f00';
-            overlayContext.fillText('~: Debug Overlay', x, y += h);
+            overlayContext.fillText('ESC: Debug Overlay', x, y += h);
             overlayContext.fillStyle = debugPhysics ? '#f00' : '#fff';
             overlayContext.fillText('1: Debug Physics', x, y += h);
             overlayContext.fillStyle = debugParticles ? '#f00' : '#fff';

package/{engine → src}/engineDraw.js

@@ -226,6 +226,23 @@ function setBlendMode(additive, useWebGL=glEnable)
         mainContext.globalCompositeOperation = additive ? 'lighter' : 'source-over';
 }
 
+/** Draw text on overlay canvas in world space
+ *  Automatically splits new lines into rows
+ *  @param {String}  text
+ *  @param {Vector2} pos
+ *  @param {Number}  [size=1]
+ *  @param {Color}   [color=Color()]
+ *  @param {Number}  [lineWidth=0]
+ *  @param {Color}   [lineColor=Color(0,0,0)]
+ *  @param {String}  [textAlign='center']
+ *  @param {String}  [font=fontDefault]
+ *  @param {CanvasRenderingContext2D} [context=overlayContext]
+ *  @memberof Draw */
+function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, context)
+{
+    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, context);
+}
+
 /** Draw text on overlay canvas in screen space
  *  Automatically splits new lines into rows
  *  @param {String}  text
@@ -235,6 +252,8 @@ function setBlendMode(additive, useWebGL=glEnable)
  *  @param {Number}  [lineWidth=0]
  *  @param {Color}   [lineColor=Color(0,0,0)]
  *  @param {String}  [textAlign='center']
+ *  @param {String}  [font=fontDefault]
+ *  @param {CanvasRenderingContext2D} [context=overlayContext]
  *  @memberof Draw */
 function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, context=overlayContext)
 {
@@ -255,21 +274,6 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     });
 }
 
-/** Draw text on overlay canvas in world space
- *  Automatically splits new lines into rows
- *  @param {String}  text
- *  @param {Vector2} pos
- *  @param {Number}  [size=1]
- *  @param {Color}   [color=Color()]
- *  @param {Number}  [lineWidth=0]
- *  @param {Color}   [lineColor=Color(0,0,0)]
- *  @param {String}  [textAlign='center']
- *  @memberof Draw */
-function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font)
-{
-    drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, mainContext);
-}
-
 ///////////////////////////////////////////////////////////////////////////////
 
 let engineFontImage;

package/{engine → src}/engineExport.js

@@ -196,6 +196,11 @@ const setShowWatermark = (show)=> showWatermark = show;
  *  @memberof Debug */
 const setGodMode = (enable)=> godMode = enable;
 
+/** Set key code used to toggle debug mode, Esc by default
+ *  @param {Number} key
+ *  @memberof Debug */
+const setDebugKey = (key)=> debugKey = key;
+
 export {
 	// Setters for global variables
 	setCameraPos,
@@ -236,6 +241,7 @@ export {
 	setMedalsPreventUnlock,
 	setShowWatermark,
 	setGodMode,
+	setDebugKey,
 
 	// Settings
 	canvasMaxSize,
@@ -322,8 +328,8 @@ export {
 	Color,
 	Timer,
 	vec2,
-	colorRGBA,
-	colorHSLA,
+	rgb,
+	hsl,
 
 	// Base
 	EngineObject,