littlejsengine 1.11.2 → 1.11.4

package/examples/box2d/gameObjects.js

@@ -13,7 +13,7 @@ function spawnBox(pos, size=1, color=WHITE, type=box2dBodyTypeDynamic, applyText
 {
     size = typeof size == 'number' ? vec2(size) : size; // square
     const o = new Box2dObject(pos, size, applyTexture && spriteAtlas.squareOutline, angle, color, type);
-    o.drawSize = size.scale(1.02); // slightly enarge to cover gaps
+    o.drawSize = size.scale(1.02); // slightly enlarge to cover gaps
     o.addBox(size);
     return o;
 }
@@ -405,7 +405,7 @@ class ClothObject extends Box2dObject
                 const stress = vec2(j.GetReactionForce(1)).length();
                 if (stress > this.maxJointStress || d2 > maxLength2*4)
                 {
-                    // remove stessed joint
+                    // remove stressed joint
                     box2dDestroyJoint(j);
                     joints[i] = 0;
                 }
@@ -463,7 +463,7 @@ function explosion(pos, radius=3, strength=300)
     // smoke
     new ParticleEmitter(
         pos, 0,                     // pos, angle
-        radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emiteCone
+        radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emitCone
         spriteAtlas.dot,            // tileInfo
         hsl(0,0,0),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
@@ -475,7 +475,7 @@ function explosion(pos, radius=3, strength=300)
     // fire
     new ParticleEmitter(
         pos, 0,                         // pos, angle
-        radius, .1, 100*radius, PI,     // emitSize, emitTime, emitRate, emiteCone
+        radius, .1, 100*radius, PI,     // emitSize, emitTime, emitRate, emitCone
         spriteAtlas.dot,                // tileInfo
         hsl(0,1,.5),   hsl(.15,1,.5),   // colorStartA, colorStartB
         hsl(0,1,.5,0), hsl(.1, 1,.5,0), // colorEndA, colorEndB

package/examples/box2d/scenes.js

@@ -1,5 +1,5 @@
 /*
-    LittleJS Box2D Example - Secenes
+    LittleJS Box2D Example - Scenes
     - Each scene demonstrates a feature of Box2D
     - Feel free to use tis code in your own projects
     - 0  = Shapes: box, circle, poly, and edge
@@ -122,7 +122,7 @@ function loadScene(_scene)
             const oaB = oB.localToWorld(vec2(0,oB.size.y/2));
             box2dCreatePulleyJoint(oA, oB, aA.pos, aB.pos, oaA, oaB);
 
-            // a line to make it look like conneting rope
+            // a line to make it look like connecting rope
             const line = new EngineObject(vec2(20,15), vec2(10,.2), 0, 0, BLACK);
             line.gravityScale = 0;
             line.renderOrder = -1;

package/examples/breakout/gameObjects.js

@@ -63,7 +63,7 @@ class Brick extends EngineObject
         const color2 = color1.lerp(hsl(), .5);
         new ParticleEmitter(
             this.pos, 0,                          // pos, angle
-            this.size, .1, 200, PI,               // emitSize, emitTime, emitRate, emiteCone
+            this.size, .1, 200, PI,               // emitSize, emitTime, emitRate, emitCone
             tile(0, 16),                          // tileIndex, tileSize
             color1, color2,                       // colorStartA, colorStartB
             color1.scale(1,0), color2.scale(1,0), // colorEndA, colorEndB
@@ -99,7 +99,7 @@ class Ball extends EngineObject
         const color = hsl(0,0,.2);
         this.trailEffect = new ParticleEmitter(
             this.pos, 0,                          // pos, angle
-            this.size, 0, 80, PI,                 // emitSize, emitTime, emitRate, emiteCone
+            this.size, 0, 80, PI,                 // emitSize, emitTime, emitRate, emitCone
             tile(0, 16),                          // tileIndex, tileSize
             color, color,                         // colorStartA, colorStartB
             color.scale(0), color.scale(0),       // colorEndA, colorEndB

package/examples/breakoutTutorial/game.js

@@ -113,7 +113,7 @@ class Brick extends EngineObject
         const color = this.color;
         new ParticleEmitter(
             this.pos, 0,            // pos, angle
-            this.size, .1, 200, PI, // emitSize, emitTime, emitRate, emiteCone
+            this.size, .1, 200, PI, // emitSize, emitTime, emitRate, emitCone
             undefined,              // tileInfo
             color, color,                       // colorStartA, colorStartB
             color.scale(1,0), color.scale(1,0), // colorEndA, colorEndB

package/examples/index.html

@@ -16,8 +16,8 @@ iframe {width:480px; height:270px;}
 <a href="breakoutTutorial">Breakout Tutorial</a> - Tutorial Breakout example<br>
 <a href="puzzle">Puzzle</a> - Match 3 puzzle game with HD rendering and high score tracking<br>
 <a href="particles">Particle Designer</a> - Particle system editor and visualizer<br>
-<a href="js13k">JS13K Starter</a> - Special small size demo for JS13K Games<br>
 <a href="empty">Empty</a> - A blank hello world project for LittleJS<br>
+<a href="module">LittleJS with Modules</a> - Loads LittleJS as a module<br>
 </p>
 <h2>Plugin Demos</h2>
 <p>
@@ -25,12 +25,6 @@ iframe {width:480px; height:270px;}
 <a href="uiSystem">UI System</a> - A simple hierarchical UI system using LittleJS rendering<br>
 <a href="htmlMenu">HTML UI Menu</a> - Example using html to create an overlay menu<br>
 </p>
-<h2>Environment Demos</h2>
-<p>
-<a href="module">LittleJS using modules</a> - Loads LittleJS as a module<br>
-<a href="typescript">LittleJS using TypeScript</a> - Uses LittleJS type definitions<br>
-<a href="electron">LittleJS building with Electron</a> - Builds to an executable<br>
-</p>
 <h2>Live Demos</h2>
 <p>
 <iframe id=iframe src="breakout"></iframe>

package/examples/module/game.js

@@ -71,7 +71,7 @@ function gameInit()
     // create particle emitter
     particleEmitter = new LittleJS.ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        1, 0, 500, Math.PI,         // emitSize, emitTime, emitRate, emiteCone
+        1, 0, 500, Math.PI,         // emitSize, emitTime, emitRate, emitCone
         tile(0, 16),                // tileIndex, tileSize
         hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB

package/examples/platformer/game.js

@@ -1,8 +1,8 @@
 /*
     Little JS Platforming Game
     - A basic platforming starter project
-    - Platforming phyics and controls
-    - Includes destructibe terrain
+    - Platforming physics and controls
+    - Includes destructible terrain
     - Control with keyboard, mouse, touch, or gamepad
 */
 

package/examples/platformer/gameCharacter.js

@@ -25,7 +25,7 @@ class Character extends GameObject
         this.dodgeTimer         = new Timer;
         this.dodgeRechargeTimer = new Timer;
         this.deadTimer          = new Timer;
-        this.grendeThrowTimer   = new Timer;
+        this.grenadeThrowTimer   = new Timer;
         this.drawSize = vec2(1);
         this.color = hsl(rand(),1,.7);
         this.renderOrder = 10;
@@ -82,14 +82,14 @@ class Character extends GameObject
                 if (!this.groundObject && this.getAliveTime() > .2)
                     this.velocity.y += .2;
             }
-            if (this.pressingThrow && !this.wasPressingThrow && !this.grendeThrowTimer.active())
+            if (this.pressingThrow && !this.wasPressingThrow && !this.grenadeThrowTimer.active())
             {
-                // throw greande
+                // throw grenade
                 const grenade = new Grenade(this.pos);
                 grenade.velocity = this.velocity.add(vec2(this.getMirrorSign(),rand(.8,.7)).normalize(.2+rand(.02)));
                 grenade.angleVelocity = this.getMirrorSign() * rand(.8,.5);
                 sound_jump.play(this.pos);
-                this.grendeThrowTimer.set(1);
+                this.grenadeThrowTimer.set(1);
             }
             this.wasPressingThrow = this.pressingThrow;
         }
@@ -276,7 +276,7 @@ class Character extends GameObject
             if (getTileCollisionData(pos.add(vec2(0,1)))      // above
                 && !getTileCollisionData(pos.add(vec2(1,0)))  // left
                 && !getTileCollisionData(pos.add(vec2(1,0)))) // right
-                return false; // dont collide if something above it and nothing to left or right
+                return false; // don't collide if something above it and nothing to left or right
 
             // allow standing on top of ladders
             return !this.climbingLadder;

package/examples/platformer/gameEffects.js

@@ -1,6 +1,6 @@
 /*
     LittleJS Platformer Example - Effects
-    - Plays different particle effects which can be persistant
+    - Plays different particle effects which can be persistent
     - Destroys terrain and makes explosions
     - Outlines tiles based on neighbor types
     - Generates parallax background layers
@@ -39,7 +39,7 @@ function makeDebris(pos, color = hsl(), amount = 50, size=.2, elasticity = .3)
 {
     const color2 = color.lerp(hsl(), .5);
     const emitter = new ParticleEmitter(
-        pos, 0, 1, .1, amount/.1, PI, // pos, angle, emitSize, emitTime, emitRate, emiteCone
+        pos, 0, 1, .1, amount/.1, PI, // pos, angle, emitSize, emitTime, emitRate, emitCone
         0,                      // tileInfo
         color, color2,          // colorStartA, colorStartB
         color, color2,          // colorEndA, colorEndB
@@ -97,7 +97,7 @@ function explosion(pos, radius=3)
     // smoke
     new ParticleEmitter(
         pos, 0,                     // pos, angle
-        radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emiteCone
+        radius/2, .2, 50*radius, PI,// emitSize, emitTime, emitRate, emitCone
         0,                          // tileInfo
         hsl(0,0,0), hsl(0,0,0),     // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
@@ -109,7 +109,7 @@ function explosion(pos, radius=3)
     // fire
     new ParticleEmitter(
         pos, 0,                         // pos, angle
-        radius/2, .1, 100*radius, PI,   // emitSize, emitTime, emitRate, emiteCone
+        radius/2, .1, 100*radius, PI,   // emitSize, emitTime, emitRate, emitCone
         0,                              // tileInfo
         rgb(1,.5,.1), rgb(1,.1,.1),     // colorStartA, colorStartB
         rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB

package/examples/platformer/gameObjects.js

@@ -239,7 +239,7 @@ class Weapon extends EngineObject
 
         // shell effect
         this.addChild(this.shellEmitter = new ParticleEmitter(
-            vec2(), 0, 0, 0, 0, .1,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
+            vec2(), 0, 0, 0, 0, .1,  // pos, angle, emitSize, emitTime, emitRate, emitCone
             0,                       // tileInfo
             rgb(1,.8,.5), rgb(.9,.7,.5), // colorStartA, colorStartB
             rgb(1,.8,.5), rgb(.9,.7,.5), // colorEndA, colorEndB
@@ -360,7 +360,7 @@ class Bullet extends EngineObject
 
         // spark effects
         const emitter = new ParticleEmitter(
-            this.pos, 0, 0, .1, 100, .5, // pos, angle, emitSize, emitTime, emitRate, emiteCone
+            this.pos, 0, 0, .1, 100, .5, // pos, angle, emitSize, emitTime, emitRate, emitCone
             0,                      // tileInfo
             rgb(1,1,0), rgb(1,0,0), // colorStartA, colorStartB
             rgb(1,1,0), rgb(1,0,0), // colorEndA, colorEndB

package/examples/puzzle/game.js

@@ -216,7 +216,7 @@ function gameRender()
         drawTile(drawPos, vec2(.5), tile(data, 64), color2);
     }
 
-    // draw a grey square at top to cover up incomming tiles
+    // draw a grey square at top to cover up incoming tiles
     drawRect(cameraPos.subtract(cameraOffset).add(vec2(0,levelSize.y)), levelSize, backgroundColor);
 }
 
@@ -294,7 +294,7 @@ function clearMatches()
             const color2 = color1.lerp(hsl(), .5);
             new ParticleEmitter(
                 pos.add(vec2(.5)), 0,  // pos, angle
-                .5, .1, 200, PI,       // emitSize, emitTime, emitRate, emiteCone
+                .5, .1, 200, PI,       // emitSize, emitTime, emitRate, emitCone
                 0,                     // tileInfo
                 color1, color2,                      // colorStartA, colorStartB
                 color1.scale(1,0), color2.scale(1,0),// colorEndA, colorEndB

package/examples/starter/game.js

@@ -7,6 +7,8 @@
 
 'use strict';
 
+// show the LittleJS splash screen
+setShowSplashScreen(true);
 
 // fix texture bleeding by shrinking tile slightly
 tileFixBleedScale = .5;
@@ -64,7 +66,7 @@ function gameInit()
     // create particle emitter
     particleEmitter = new ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        0, 0, 0, PI,              // emitSize, emitTime, emitRate, emiteCone
+        0, 0, 500, PI,              // emitSize, emitTime, emitRate, emitCone
         tile(0, 16),                // tileIndex, tileSize
         hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
@@ -109,55 +111,19 @@ function gameUpdatePost()
 function gameRender()
 {
     // draw a grey square in the background without using webgl
-    drawRect(vec2(16,8), vec2(202,214), hsl(0,0,.6), 0, false);
+    drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
     
+    // draw the logo as a tile
+    drawTile(vec2(21,5), vec2(4.5), tile(3,128));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost()
 {
-    drawNineSlice(vec2(10,10), vec2(4,4), tile(1))
-}
-
-function drawNineSlice(pos, size, tileInfo, context=overlayContext)
-{
-  // calculate the size of a slice
-  const s = tileInfo.size.x / 3;
-
-  // define the 9 parts as [x, y, width, height]
-  const part1 = [0, 0, s, s];
-  const part2 = [s, 0, s, s];
-  const part3 = [s * 2, 0, s, s];
-  const part4 = [0, s, s, s];
-  const part5 = [s, s, s, s];
-  const part6 = [s * 2, s, s, s];
-  const part7 = [0, s * 2, s, s];
-  const part8 = [s, s * 2, s, s];
-  const part9 = [s * 2, s * 2, s, s];
-
-  // target width/height (try different values!)
-  const width = 16 * size.x;
-  const height = 16 * size.y;
-
-  const img = tileInfo.getTextureInfo().image;
-
-  const originPos = pos.subtract(size.divide(vec2(2))).add(vec2( - 0.5));
-
-  // draw the corners
-  //context.imageSmoothingEnabled = false
-  context.drawImage(img, ...part1, originPos.x + 0, originPos.y + 0, s + 1, s + 1); // top left
-  context.drawImage(img, ...part3, originPos.x + width - s, originPos.y + 0, s + 1, s + 1); // top right
-  context.drawImage(img, ...part7, originPos.x + 0, originPos.y + height - s, s + 1, s + 1); // bottom left
-  context.drawImage(img, ...part9, originPos.x + width - s, originPos.y + height - s, s + 1, s + 1); // bottom right
-
-  // draw the edges
-  context.drawImage(img, ...part2, originPos.x + s, originPos.y + 0, width - 2 * s + 1, s + 1); // top
-  context.drawImage(img, ...part8, originPos.x + s, originPos.y + height - s, width - 2 * s + 1, s + 1); // bottom
-  context.drawImage(img, ...part4, originPos.x + 0, originPos.y + s, s + 1, height - 2 * s + 1); // left
-  context.drawImage(img, ...part6, originPos.x + width - s, originPos.y + s, s + 1, height - 2 * s + 1); // right
-
-  // draw the center
-  context.drawImage(img, ...part5, originPos.x + s, originPos.y + s, width - 2 * s + 1, height - 2 * s + 1);
+    // draw to overlay canvas for hud rendering
+    drawTextScreen('LittleJS Demo', 
+        vec2(mainCanvasSize.x/2, 70), 80,   // position, size
+        hsl(0,0,1), 6, hsl(0,0,0));         // color, outline size and color
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/jsconfig.json

@@ -5,6 +5,7 @@
     "./src/*.js",
     "./plugins/*.js",
     "./examples/**/*.js",
+    "./shortExamples/**/*.js",
   ],
   "exclude": [
   ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.11.2",
+  "version": "1.11.4",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",

package/plugins/box2d.js

@@ -69,7 +69,7 @@ class Box2dObject extends EngineObject
     {
         const isAsleep = !this.getIsAwake();
         const isStatic = this.getIsStatic();
-        const color = rgb(isAsleep,isAsleep,isStatic,.5);
+        const color = rgb(isAsleep?1:0 ,isAsleep?1:0, isStatic?1:0, .5);
         this.box2dDrawFixtures(color);
     }
 
@@ -353,7 +353,7 @@ function box2dBoxCastAll(pos, size)
 
     let queryObjects = [];
     box2dWorld.QueryAABB(queryCallback, aabb);
-    debugRaycast && debugRect(pos, size, raycstResult ? '#f00' : '#00f', .02);
+    debugRaycast && debugRect(pos, size, queryObjects.length ? '#f00' : '#00f', .02);
     return queryObjects;
 }
 
@@ -374,7 +374,7 @@ function box2dBoxCast(pos, size)
 
     let queryObject;
     box2dWorld.QueryAABB(queryCallback, aabb);
-    debugRaycast && debugRect(pos, size, raycstResult ? '#f00' : '#00f', .02);
+    debugRaycast && debugRect(pos, size, queryObject ? '#f00' : '#00f', .02);
     return queryObject;
 }
 
@@ -416,7 +416,7 @@ function box2dPointCast(pos, dynamicOnly=true)
             return true; // continue getting results
         if (!fixture.TestPoint(pos.getBox2d()))
             return true; // continue getting results
-        queryResult = fixture.GetBody().object;
+        queryObject = fixture.GetBody().object;
         return false; // stop getting results
     };
 
@@ -424,10 +424,10 @@ function box2dPointCast(pos, dynamicOnly=true)
     aabb.set_lowerBound(pos.getBox2d());
     aabb.set_upperBound(pos.getBox2d());
 
-    let queryResult;
-    debugRaycast && debugRect(pos, vec2(), queryResult ? '#f00' : '#00f', .02);
+    let queryObject;
+    debugRaycast && debugRect(pos, vec2(), queryObject ? '#f00' : '#00f', .02);
     box2dWorld.QueryAABB(queryCallback, aabb);
-    return queryResult;
+    return queryObject;
 }
 
 // box aabb cast and return all the fixtures
@@ -437,8 +437,8 @@ function box2dBoxCastAllFixtures(pos, size)
     queryCallback.ReportFixture = function(fixturePointer)
     {
         const fixture = box2d.wrapPointer(fixturePointer, box2d.b2Fixture);
-        if (!queryObjects.includes(fixture))
-            queryObjects.push(fixture); // add if not already in list
+        if (!queryFixtures.includes(fixture))
+            queryFixtures.push(fixture); // add if not already in list
         return true; // continue getting results
     };
 
@@ -448,7 +448,7 @@ function box2dBoxCastAllFixtures(pos, size)
 
     let queryFixtures = [];
     box2dWorld.QueryAABB(queryCallback, aabb);
-    debugRaycast && debugRect(pos, size, raycstResult ? '#f00' : '#00f', .02);
+    debugRaycast && debugRect(pos, size, queryFixtures.length ? '#f00' : '#00f', .02);
     return queryFixtures;
 }
 

package/plugins/newgrounds.js

@@ -12,7 +12,7 @@
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** Newgrounds medal auto unlocks in newgronds API */
+/** Newgrounds medal auto unlocks in newgrounds API */
 class NewgroundsMedal extends Medal
 {
     /** Create a medal object and adds it to the list of medals */

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.11.2';
+const engineVersion = '1.11.4';
 
 /** Frames per second to update
  *  @type {Number}
@@ -113,6 +113,7 @@ function engineAddPlugin(updateFunction, renderFunction)
  *  @memberof Engine */
 function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
 {
+    ASSERT(!mainContext, 'engine already initialized');
     ASSERT(Array.isArray(imageSources), 'pass in images as array');
 
     // Called automatically by engine to setup render system
@@ -279,7 +280,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         (canvasPixelated ? 'image-rendering:pixelated;' : '') + // pixel art
         'user-select:none;' +         // prevent hold to select
         '-webkit-user-select:none;' + // compatibility for ios
-        (!touchInputEnable ? '' :     // no touch css setttings
+        (!touchInputEnable ? '' :     // no touch css settings
         'touch-action:none;' +        // prevent mobile pinch to resize
         '-webkit-touch-callout:none');// compatibility for ios
     rootElement.style.cssText = styleRoot;
@@ -308,6 +309,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
         new Promise(resolve => 
         {
             const image = new Image;
+            image.crossOrigin = 'anonymous';
             image.onerror = image.onload = ()=> 
             {
                 textureInfos[textureIndex] = new TextureInfo(image);
@@ -352,7 +354,7 @@ function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRender
  *  @memberof Engine */
 function engineObjectsUpdate()
 {
-    // get list of solid objects for physics optimzation
+    // get list of solid objects for physics optimization
     engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
 
     // recursive object update

package/src/engineAudio.js

@@ -25,7 +25,7 @@ function audioInit()
 {
     if (!soundEnable || headlessMode) return;
     
-    // (createGain is more widely spported then GainNode construtor)
+    // (createGain is more widely supported then GainNode constructor)
     audioGainNode = audioContext.createGain();
     audioGainNode.connect(audioContext.destination);
     audioGainNode.gain.value = soundVolume; // set starting value
@@ -375,7 +375,7 @@ const zzfxR = 44100;
  *  @param {Number}  [sustain] - Sustain time, how long sound holds (seconds)
  *  @param {Number}  [release] - Release time, how fast sound fades out (seconds)
  *  @param {Number}  [shape] - Shape of the sound wave
- *  @param {Number}  [shapeCurve] - Squarenes of wave (0=square, 1=normal, 2=pointy)
+ *  @param {Number}  [shapeCurve] - Squareness of wave (0=square, 1=normal, 2=pointy)
  *  @param {Number}  [slide] - How much to slide frequency (kHz/s)
  *  @param {Number}  [deltaSlide] - How much to change slide (kHz/s/s)
  *  @param {Number}  [pitchJump] - Frequency of pitch jump (Hz)
@@ -387,7 +387,7 @@ const zzfxR = 44100;
  *  @param {Number}  [delay] - Overlap sound with itself for reverb and flanger effects (seconds)
  *  @param {Number}  [sustainVolume] - Volume level for sustain (percent)
  *  @param {Number}  [decay] - Decay time, how long to reach sustain after attack (seconds)
- *  @param {Number}  [tremolo] - Trembling effect, rate controlled by repeat time (precent)
+ *  @param {Number}  [tremolo] - Trembling effect, rate controlled by repeat time (percent)
  *  @param {Number}  [filter] - Filter cutoff frequency, positive for HPF, negative for LPF (Hz)
  *  @return {Array} - Array of audio samples
  *  @memberof Audio
@@ -491,7 +491,7 @@ function zzfxG
 // ZzFX Music Renderer v2.0.3 by Keith Clark and Frank Force
 
 /** Generate samples for a ZzFM song with given parameters
- *  @param {Array} instruments - Array of ZzFX sound paramaters
+ *  @param {Array} instruments - Array of ZzFX sound parameters
  *  @param {Array} patterns - Array of pattern data
  *  @param {Array} sequence - Array of pattern indexes
  *  @param {Number} [BPM] - Playback speed of the song in BPM

package/src/engineDebug.js

@@ -16,7 +16,7 @@
  *  @memberof Debug */
 const debug = true;
 
-/** True if asserts are enaled
+/** True if asserts are enabled
  *  @type {Boolean}
  *  @default
  *  @memberof Debug */
@@ -244,12 +244,8 @@ function debugRender()
 
     if (debugTakeScreenshot)
     {
-        // composite canvas
-        glCopyToContext(mainContext, true);
-        mainContext.drawImage(overlayCanvas, 0, 0);
-        overlayCanvas.width |= 0;
-
-        // remove alpha and save
+        // combine canvases, remove alpha and save
+        combineCanvases();
         const w = mainCanvas.width, h = mainCanvas.height;
         overlayContext.fillRect(0,0,w,h);
         overlayContext.drawImage(mainCanvas, 0, 0);

package/src/engineDraw.js

@@ -48,7 +48,7 @@ let overlayContext;
 let mainCanvasSize = vec2();
 
 /** Array containing texture info for batch rendering system
- *  @type {Array}
+ *  @type {Array<TextureInfo>}
  *  @memberof Draw */
 let textureInfos = [];
 
@@ -87,11 +87,13 @@ function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0)
 
     // use pos as a tile index
     const textureInfo = textureInfos[textureIndex];
-    ASSERT(textureInfo, 'Texture not loaded');
+    ASSERT(!!textureInfo, 'Texture not loaded');
     const sizePadded = size.add(vec2(padding*2));
-    const cols = textureInfo.size.x / sizePadded.x |0;
     if (typeof pos === 'number')
-        pos = vec2(pos%cols, pos/cols|0);
+    {
+        const cols = textureInfo.size.x / sizePadded.x |0;
+        pos = cols>0 ? vec2(pos%cols, pos/cols|0) : vec2();
+    }
     pos = vec2(pos.x*sizePadded.x+padding, pos.y*sizePadded.y+padding);
 
     // return a tile info object
@@ -397,24 +399,6 @@ function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, conte
     context.restore();
 }
 
-/** Enable normal or additive blend mode
- *  @param {Boolean} [additive]
- *  @param {Boolean} [useWebGL=glEnable]
- *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
- *  @memberof Draw */
-function setBlendMode(additive, useWebGL=glEnable, context)
-{
-    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
-    if (useWebGL)
-        glAdditive = additive;
-    else
-    {
-        if (!context)
-            context = mainContext;
-        context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
-    }
-}
-
 /** Draw text on main canvas in world space
  *  Automatically splits new lines into rows
  *  @param {String}  text
@@ -482,6 +466,38 @@ function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineCol
     });
 }
 
+/** Enable normal or additive blend mode
+ *  @param {Boolean} [additive]
+ *  @param {Boolean} [useWebGL=glEnable]
+ *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
+ *  @memberof Draw */
+function setBlendMode(additive, useWebGL=glEnable, context)
+{
+    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
+    if (useWebGL)
+        glAdditive = additive;
+    else
+    {
+        if (!context)
+            context = mainContext;
+        context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
+    }
+}
+
+/** Combines all LittleJS canvases onto the main canvas and clears them
+ *  This is necessary for things like saving a screenshot
+ *  @memberof Draw */
+function combineCanvases()
+{
+    // combine canvases
+    glCopyToContext(mainContext, true);
+    mainContext.drawImage(overlayCanvas, 0, 0);
+
+    // clear canvases
+    glClearCanvas();
+    overlayCanvas.width |= 0;
+}
+
 ///////////////////////////////////////////////////////////////////////////////
 
 let engineFontImage;
@@ -493,7 +509,7 @@ let engineFontImage;
  * - You can also use fonts from the main tile sheet
  * @example
  * // use built in font
- * const font = new ImageFont;
+ * const font = new FontImage;
  * 
  * // draw text
  * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
@@ -568,14 +584,14 @@ class FontImage
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-// Fullscreen mode
+// Display functions
 
 /** Returns true if fullscreen mode is active
  *  @return {Boolean}
  *  @memberof Draw */
 function isFullscreen() { return !!document.fullscreenElement; }
 
-/** Toggle fullsceen mode
+/** Toggle fullscreen mode
  *  @memberof Draw */
 function toggleFullscreen()
 {
@@ -587,4 +603,13 @@ function toggleFullscreen()
     }
     else if (rootElement.requestFullscreen)
         rootElement.requestFullscreen();
+}
+
+/** Set the cursor style
+ *  @param {String}  cursorStyle - CSS cursor style (auto, none, crosshair, etc)
+ *  @memberof Draw */
+function setCursor(cursorStyle = 'auto')
+{
+    const rootElement = mainCanvas.parentElement;
+    rootElement.style.cursor = cursorStyle;
 }