littlejsengine 1.9.0 → 1.9.2

package/examples/typescript/game.js

@@ -1,12 +1,12 @@
 /*
-    Little TypeScript Demo
+    Little JS TypeScript Demo
     - A simple starter project
-    - Builds to a JavaScript file from TypeScript
+    - Shows how to use LittleJS with TypeScript
 */
 'use strict';
 // import module
-import * as LittleJS from '../../build/littlejs.esm.js';
-const { Vector2, Color, Timer, vec2, tile } = LittleJS;
+import * as LittleJS from '../../dist/littlejs.esm.js';
+const { Vector2, Color, Timer, tile, vec2, hsl, rgb } = LittleJS;
 // show the LittleJS splash screen
 LittleJS.setShowSplashScreen(true);
 // sound effects
@@ -16,51 +16,52 @@ const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJ
 LittleJS.medalsInit('Hello World');
 // game variables
 let particleEmitter;
-let gameTimer = new Timer;
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit() {
     // create tile collision and visible tile layer
-    LittleJS.initTileCollision(vec2(32, 16));
-    const pos = new Vector2;
-    const tileLayer = new LittleJS.TileLayer(pos, LittleJS.tileCollisionSize);
+    const tileCollisionSize = vec2(32, 16);
+    LittleJS.initTileCollision(tileCollisionSize);
+    const pos = vec2();
+    const tileLayer = new LittleJS.TileLayer(pos, tileCollisionSize);
     // get level data from the tiles image
-    const imageLevelDataRow = 1;
     const mainContext = LittleJS.mainContext;
     const tileImage = LittleJS.textureInfos[0].image;
     mainContext.drawImage(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);
-            }
+    const imageData = mainContext.getImageData(0, 0, tileImage.width, tileImage.height).data;
+    for (pos.x = tileCollisionSize.x; pos.x--;)
+        for (pos.y = tileCollisionSize.y; pos.y--;) {
+            // check if this pixel is set
+            const i = pos.x + tileImage.width * (15 + tileCollisionSize.y - pos.y);
+            if (!imageData[4 * i])
+                continue;
+            // set tile data
+            const tileIndex = 1;
+            const direction = LittleJS.randInt(4);
+            const mirror = !LittleJS.randInt(2);
+            const color = LittleJS.randColor();
+            const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
+            tileLayer.setData(pos, data);
+            LittleJS.setTileCollisionData(pos, 1);
         }
+    // draw tile layer with new data
     tileLayer.redraw();
     // move camera to center of collision
-    LittleJS.setCameraPos(LittleJS.tileCollisionSize.scale(.5));
+    LittleJS.setCameraPos(tileCollisionSize.scale(.5));
+    LittleJS.setCameraScale(48);
     // 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
+    particleEmitter = new LittleJS.ParticleEmitter(vec2(16, 9), 0, // emitPos, emitAngle
     1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emiteCone
-    LittleJS.tile(0, 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
+    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
     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
-    // start the game timer
-    gameTimer.set();
 }
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdate() {
@@ -68,7 +69,7 @@ function gameUpdate() {
         // play sound when mouse is pressed
         sound_click.play(LittleJS.mousePos);
         // change particle color and set to fade out
-        particleEmitter.colorStartA = new Color;
+        particleEmitter.colorStartA = hsl();
         particleEmitter.colorStartB = LittleJS.randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1, 0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1, 0);
@@ -85,7 +86,9 @@ 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);
+    LittleJS.drawRect(vec2(16, 8), vec2(20, 14), hsl(0, 0, .6), 0, false);
+    // draw the logo as a tile
+    LittleJS.drawTile(vec2(21, 5), vec2(4.5), tile(3, 128));
 }
 ///////////////////////////////////////////////////////////////////////////////
 function gameRenderPost() {

package/examples/typescript/game.ts

@@ -1,14 +1,14 @@
 /*
-    Little TypeScript Demo
+    Little JS TypeScript Demo
     - A simple starter project
-    - Builds to a JavaScript file from TypeScript
+    - Shows how to use LittleJS with TypeScript
 */
 
 'use strict';
 
 // import module
-import * as LittleJS from '../../build/littlejs.esm.js';
-const {Vector2, Color, Timer, vec2, tile} = LittleJS;
+import * as LittleJS from '../../dist/littlejs.esm.js';
+const {Vector2, Color, Timer, tile, vec2, hsl, rgb} = LittleJS;
 
 // show the LittleJS splash screen
 LittleJS.setShowSplashScreen(true);
@@ -21,62 +21,63 @@ const medal_example = new LittleJS.Medal(0, 'Example Medal', 'Welcome to LittleJ
 LittleJS.medalsInit('Hello World');
 
 // game variables
-let particleEmitter: LittleJS.ParticleEmitter;
-let gameTimer = new Timer;
+let particleEmitter;
 
 ///////////////////////////////////////////////////////////////////////////////
 function gameInit()
 {
     // create tile collision and visible tile layer
-    LittleJS.initTileCollision(vec2(32, 16));
-    const pos = new Vector2;
-    const tileLayer = new LittleJS.TileLayer(pos, LittleJS.tileCollisionSize);
+    const tileCollisionSize = vec2(32, 16);
+    LittleJS.initTileCollision(tileCollisionSize);
+    const pos = vec2();
+    const tileLayer = new LittleJS.TileLayer(pos, tileCollisionSize);
 
     // get level data from the tiles image
-    const imageLevelDataRow = 1;
     const mainContext = LittleJS.mainContext;
     const tileImage = LittleJS.textureInfos[0].image;
     mainContext.drawImage(tileImage, 0, 0);
-    for (pos.x = LittleJS.tileCollisionSize.x; pos.x--;)
-    for (pos.y = LittleJS.tileCollisionSize.y; pos.y--;)
+    const imageData = mainContext.getImageData(0,0,tileImage.width,tileImage.height).data;
+    for (pos.x = tileCollisionSize.x; pos.x--;)
+    for (pos.y = 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);
-        }
+        // check if this pixel is set
+        const i = pos.x + tileImage.width*(15 + tileCollisionSize.y - pos.y);
+        if (!imageData[4*i])
+            continue;
+        
+        // set tile data
+        const tileIndex = 1;
+        const direction = LittleJS.randInt(4)
+        const mirror = !LittleJS.randInt(2);
+        const color = LittleJS.randColor();
+        const data = new LittleJS.TileLayerData(tileIndex, direction, mirror, color);
+        tileLayer.setData(pos, data);
+        LittleJS.setTileCollisionData(pos, 1);
     }
+
+    // draw tile layer with new data
     tileLayer.redraw();
 
     // move camera to center of collision
-    LittleJS.setCameraPos(LittleJS.tileCollisionSize.scale(.5));
+    LittleJS.setCameraPos(tileCollisionSize.scale(.5));
+    LittleJS.setCameraScale(48);
 
     // 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
-        LittleJS.tile(0, 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
+        vec2(16,9), 0,              // emitPos, emitAngle
+        1, 0, 500, Math.PI,         // emitSize, emitTime, emitRate, emiteCone
+        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
         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
+        .05, .5, true, true   // fadeRate, randomness, collide, additive
     );
     particleEmitter.elasticity = .3; // bounce when it collides
     particleEmitter.trailScale = 2;  // stretch in direction of motion
-
-    // start the game timer
-    gameTimer.set();
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -88,7 +89,7 @@ function gameUpdate()
         sound_click.play(LittleJS.mousePos);
 
         // change particle color and set to fade out
-        particleEmitter.colorStartA = new Color;
+        particleEmitter.colorStartA = hsl();
         particleEmitter.colorStartB = LittleJS.randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);
@@ -112,7 +113,10 @@ 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);
+    LittleJS.drawRect(vec2(16,8), vec2(20,14), hsl(0,0,.6), 0, false);
+    
+    // draw the logo as a tile
+    LittleJS.drawTile(vec2(21,5), vec2(4.5), tile(3,128));
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/typescript/index.html

@@ -6,4 +6,4 @@
 </head><body>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1812 type=module></script>
+<script src=game.js?192 type=module></script>

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "littlejsengine",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
-  "main": "build/littlejs.esm.js",
-  "types": "build/littlejs.esm.js",
+  "main": "dist/littlejs.esm.js",
+  "types": "dist/littlejs.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KilledByAPixel/LittleJS.git"

package/src/engine.js

@@ -30,7 +30,7 @@ const engineName = 'LittleJS';
  *  @type {String}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.9.0';
+const engineVersion = '1.9.2';
 
 /** Frames per second to update objects
  *  @type {Number}

package/src/engineAudio.js

@@ -146,22 +146,19 @@ class SoundWave extends Sound
         this.randomness = randomness;
 
         if (!soundEnable) return;
-        if (!soundDecoderContext)
-            soundDecoderContext = new AudioContext;
 
         fetch(filename)
         .then(response => response.arrayBuffer())
-        .then(arrayBuffer => soundDecoderContext.decodeAudioData(arrayBuffer))
+        .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
         .then(audioBuffer => 
         {
             this.sampleChannels = [];
             for (let i = audioBuffer.numberOfChannels; i--;)
-                this.sampleChannels[i] = audioBuffer.getChannelData(i);
+                this.sampleChannels[i] = Array.from(audioBuffer.getChannelData(i));
             this.sampleRate = audioBuffer.sampleRate;
         });
     }
 }
-let soundDecoderContext; // audio context used only to decode audio files
 
 /**
  * Music Object - Stores a zzfx music track for later use
@@ -275,8 +272,9 @@ function getNoteFrequency(semitoneOffset, rootFrequency=220)
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Audio context used by the engine
+ *  @type {AudioContext}
  *  @memberof Audio */
-let audioContext;
+let audioContext = new AudioContext;
 
 /** Play cached audio samples with given settings
  *  @param {Array}   sampleChannels - Array of arrays of samples to play (for stereo playback)
@@ -291,10 +289,6 @@ function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sample
 {
     if (!soundEnable) return;
 
-    // create audio context if needed
-    if (!audioContext)
-        audioContext = new AudioContext;
-
     // prevent sounds from building up if they can't be played
     if (audioContext.state != 'running')
     {

package/src/engineBuild.js

@@ -11,7 +11,7 @@
 'use strict';
 
 const ENGINE_NAME = 'littlejs';
-const BUILD_FOLDER = 'build';
+const BUILD_FOLDER = 'dist';
 const SOURCE_FOLDER = 'src';
 const engineSourceFiles =
 [
@@ -158,7 +158,14 @@ function typeScriptBuildStep(filename)
 {
     try
     {
-        child_process.execSync(`npx tsc ${filename} --declaration --allowJs --emitDeclarationOnly --outFile ${BUILD_FOLDER}/${ENGINE_NAME}.d.ts`);
+        const tsFilename = `${BUILD_FOLDER}/${ENGINE_NAME}.d.ts`
+        child_process.execSync(`npx tsc ${filename} --declaration --allowJs --emitDeclarationOnly --outFile ${tsFilename}`);
+
+        // Remove declare module part
+        //let fileContent = fs.readFileSync(tsFilename, 'utf8');
+        //const r = new RegExp(`declare module "${ENGINE_NAME}\.esm" \{([\\s\\S]*?)\}`);
+        //fs.writeFileSync(tsFilename, fileContent.replace(r, '$1'));
+
     }
     catch (e) { handleError(e, 'Failed to run TypeScript build step!'); }
 };

package/src/engineDebug.js

@@ -54,9 +54,13 @@ let debugPrimitives = [], debugPhysics = false, debugRaycast = false, debugParti
 
 /** Asserts if the experssion is false, does not do anything in release builds
  *  @param {Boolean} assert
- *  @param {Object} output
+ *  @param {Object} [output]
  *  @memberof Debug */
-function ASSERT(assert, output) { enableAsserts && console.assert(assert, output); }
+function ASSERT(assert, output) 
+{
+    if (enableAsserts)
+        output ? console.assert(assert, output) : console.assert(assert);
+}
 
 /** Draw a debug rectangle in world space
  *  @param {Vector2} pos

package/src/engineDraw.js

@@ -61,7 +61,7 @@ let drawCount;
  * Create a tile info object
  * - This can take vecs or floats for easier use and conversion
  * - If an index is passed in, the tile size and index will determine the position
- * @param {(Number|Vector2)} [pos=Vector2()]        - Top left corner of tile in pixels or index
+ * @param {(Number|Vector2)} [pos=(0,0)]            - Top left corner of tile in pixels or index
  * @param {(Number|Vector2)} [size=tileSizeDefault] - Size of tile in pixels
  * @param {Number} [textureIndex]                   - Texture index to use
  * @return {TileInfo}
@@ -104,7 +104,7 @@ function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0)
 class TileInfo
 {
     /** Create a tile info object
-     *  @param {Vector2} [pos=Vector2()]        - Top left corner of tile in pixels
+     *  @param {Vector2} [pos=(0,0)]            - Top left corner of tile in pixels
      *  @param {Vector2} [size=tileSizeDefault] - Size of tile in pixels
      *  @param {Number}  [textureIndex]         - Texture index to use
      */
@@ -181,16 +181,16 @@ function 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=Vector2(1,1)]            - Size of the tile in world space
- *  @param {TileInfo}[tileInfo]                     - Tile info to use, untextured if undefined
- *  @param {Color}   [color=Color()]                - Color to modulate with
- *  @param {Number}  [angle]                        - Angle to rotate by
- *  @param {Boolean} [mirror]                       - If true image is flipped along the Y axis
- *  @param {Color}   [additiveColor=Color(0,0,0,0)] - Additive color to be applied
- *  @param {Boolean} [useWebGL=glEnable]            - Use accelerated WebGL rendering
- *  @param {Boolean} [screenSpace]                  - If true the pos and size are in screen space
- *  @param {CanvasRenderingContext2D} [context]     - Canvas 2D context to draw to
+ *  @param {Vector2} pos                        - Center of the tile in world space
+ *  @param {Vector2} [size=(1,1)]               - Size of the tile in world space
+ *  @param {TileInfo}[tileInfo]                 - Tile info to use, untextured if undefined
+ *  @param {Color}   [color=(1,1,1,1)]          - Color to modulate with
+ *  @param {Number}  [angle]                    - Angle to rotate by
+ *  @param {Boolean} [mirror]                   - If true image is flipped along the Y axis
+ *  @param {Color}   [additiveColor=(0,0,0,0)]  - Additive color to be applied
+ *  @param {Boolean} [useWebGL=glEnable]        - Use accelerated WebGL rendering
+ *  @param {Boolean} [screenSpace=false]        - If true the pos and size are in screen space
+ *  @param {CanvasRenderingContext2D} [context] - Canvas 2D context to draw to
  *  @memberof Draw */
 function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
     angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace, context)
@@ -258,11 +258,11 @@ function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
 
 /** Draw colored rect centered on pos
  *  @param {Vector2} pos
- *  @param {Vector2} [size=Vector2(1,1)]
- *  @param {Color}   [color=Color()]
+ *  @param {Vector2} [size=(1,1)]
+ *  @param {Color}   [color=(1,1,1,1)]
  *  @param {Number}  [angle]
  *  @param {Boolean} [useWebGL=glEnable]
- *  @param {Boolean} [screenSpace]
+ *  @param {Boolean} [screenSpace=false]
  *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
 function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
@@ -272,8 +272,8 @@ function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
 
 /** Draw colored polygon using passed in points
  *  @param {Array}   points - Array of Vector2 points
- *  @param {Color}   [color=Color()]
- *  @param {Boolean} [screenSpace]
+ *  @param {Color}   [color=(1,1,1,1)]
+ *  @param {Boolean} [screenSpace=false]
  *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
 function drawPoly(points, color=new Color, screenSpace, context=mainContext)
@@ -289,9 +289,9 @@ function drawPoly(points, color=new Color, screenSpace, context=mainContext)
  *  @param {Vector2} posA
  *  @param {Vector2} posB
  *  @param {Number}  [thickness]
- *  @param {Color}   [color=Color()]
+ *  @param {Color}   [color=(1,1,1,1)]
  *  @param {Boolean} [useWebGL=glEnable]
- *  @param {Boolean} [screenSpace]
+ *  @param {Boolean} [screenSpace=false]
  *  @param {CanvasRenderingContext2D} [context]
  *  @memberof Draw */
 function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, context)
@@ -307,7 +307,7 @@ function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, contex
  *  @param {Number}   angle
  *  @param {Boolean}  mirror
  *  @param {Function} drawFunction
- *  @param {Boolean} [screenSpace]
+ *  @param {Boolean} [screenSpace=false]
  *  @param {CanvasRenderingContext2D} [context=mainContext]
  *  @memberof Draw */
 function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, context=mainContext)
@@ -349,9 +349,9 @@ function setBlendMode(additive, useWebGL=glEnable, context)
  *  @param {String}  text
  *  @param {Vector2} pos
  *  @param {Number}  [size]
- *  @param {Color}   [color=Color()]
+ *  @param {Color}   [color=(1,1,1,1)]
  *  @param {Number}  [lineWidth]
- *  @param {Color}   [lineColor=Color(0,0,0)]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
  *  @param {CanvasTextAlign}  [textAlign='center']
  *  @param {String}  [font=fontDefault]
  *  @param {CanvasRenderingContext2D} [context=overlayContext]
@@ -366,9 +366,9 @@ function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, f
  *  @param {String}  text
  *  @param {Vector2} pos
  *  @param {Number}  [size]
- *  @param {Color}   [color=Color()]
+ *  @param {Color}   [color=(1,1,1,1)]
  *  @param {Number}  [lineWidth]
- *  @param {Color}   [lineColor=Color(0,0,0)]
+ *  @param {Color}   [lineColor=(0,0,0,1)]
  *  @param {CanvasTextAlign}  [textAlign]
  *  @param {String}  [font=fontDefault]
  *  @param {CanvasRenderingContext2D} [context=overlayContext]
@@ -411,9 +411,9 @@ let engineFontImage;
 class FontImage
 {
     /** Create an image font
-     *  @param {HTMLImageElement} [image] - Image for the font, if undefined default font is used
-     *  @param {Vector2} [tileSize=Vector2(8)] - Size of the font source tiles
-     *  @param {Vector2} [paddingSize=Vector2(0,1)] - How much extra space to add between characters
+     *  @param {HTMLImageElement} [image]    - Image for the font, if undefined default font is used
+     *  @param {Vector2} [tileSize=(8,8)]    - Size of the font source tiles
+     *  @param {Vector2} [paddingSize=(0,1)] - How much extra space to add between characters
      *  @param {CanvasRenderingContext2D} [context=overlayContext] - context to draw to
      */
     constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), context=overlayContext)

package/src/engineInput.js

@@ -191,10 +191,10 @@ function inputUpdatePost()
 ///////////////////////////////////////////////////////////////////////////////
 // Mouse event handlers
 
-onmousedown = (e)=> {isUsingGamepad = false; inputData[0][e.button] = 3; window.onmousemove(e); e.button && e.preventDefault();}
+onmousedown = (e)=> {isUsingGamepad = false; inputData[0][e.button] = 3; mousePosScreen = mouseToScreen(e); e.button && e.preventDefault();}
 onmouseup   = (e)=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
 onmousemove = (e)=> mousePosScreen = mouseToScreen(e);
-onwheel     = (e)=> e.ctrlKey || (mouseWheel = sign(e.deltaY));
+onwheel     = (e)=> mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY);
 oncontextmenu = (e)=> false; // prevent right click menu
 
 // convert a mouse or touch event position to screen space
@@ -288,7 +288,7 @@ function gamepadsUpdate()
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Pulse the vibration hardware if it exists
- *  @param {Number} [pattern] - a single value in miliseconds or vibration interval array
+ *  @param {Number|Array} [pattern] - single value in ms or vibration interval array
  *  @memberof Input */
 function vibrate(pattern=100)
 { vibrateEnable && navigator && navigator.vibrate && navigator.vibrate(pattern); }
@@ -314,9 +314,9 @@ if (isTouchDevice)
     // handle all touch events the same way
     ontouchstart = ontouchmove = ontouchend = (e)=>
     {
-        // fix stalled audio on mobile
-        if (soundEnable)
-            audioContext ? audioContext.resume() : zzfx(0);
+        // fix stalled audio requiring user interaction
+        if (soundEnable && audioContext && audioContext.state != 'running')
+            zzfx(0);
 
         // check if touching and pass to mouse events
         const touching = e.touches.length;
@@ -462,7 +462,7 @@ function touchGamepadRender()
     const rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
     for (let i=4; i--;)
     {
-        const pos = rightCenter.add(vec2().setAngle(i*PI/2, touchGamepadSize/2));
+        const pos = rightCenter.add(vec2().setDirection(i, touchGamepadSize/2));
         overlayContext.fillStyle = touchGamepadButtons[i] ? '#fff' : '#000';
         overlayContext.beginPath();
         overlayContext.arc(pos.x, pos.y, touchGamepadSize/4, 0,9);

package/src/engineMedals.js

@@ -90,8 +90,8 @@ class Medal
         // draw containing rect and clip to that region
         context.save();
         context.beginPath();
-        context.fillStyle = rgb(.9,.9,.9).toString();
-        context.strokeStyle = rgb(0,0,0).toString();
+        context.fillStyle = new Color(.9,.9,.9).toString();
+        context.strokeStyle = new Color(0,0,0).toString();
         context.lineWidth = 3;
         context.rect(x, y, width, medalDisplaySize.y);
         context.fill();

package/src/engineObject.js

@@ -32,12 +32,12 @@
 class EngineObject
 {
     /** Create an engine object and adds it to the list of objects
-     *  @param {Vector2}  [pos=Vector2()]     - World space position of the object
-     *  @param {Vector2}  [size=Vector2(1,1)] - World space size of the object
-     *  @param {TileInfo} [tileInfo]          - Tile info to render object (undefined is untextured)
-     *  @param {Number}   [angle]             - Angle the object is rotated by
-     *  @param {Color}    [color=Color()]     - Color to apply to tile when rendered
-     *  @param {Number}   [renderOrder]       - Objects sorted by renderOrder before being rendered
+     *  @param {Vector2}  [pos=(0,0)]       - World space position of the object
+     *  @param {Vector2}  [size=(1,1)]      - World space size of the object
+     *  @param {TileInfo} [tileInfo]        - Tile info to render object (undefined is untextured)
+     *  @param {Number}   [angle]           - Angle the object is rotated by
+     *  @param {Color}    [color=(1,1,1,1)] - Color to apply to tile when rendered
+     *  @param {Number}   [renderOrder]     - Objects sorted by renderOrder before being rendered
      */
     constructor(pos=vec2(), size=vec2(1), tileInfo, angle=0, color, renderOrder=0)
     {
@@ -337,7 +337,7 @@ class EngineObject
 
     /** Attaches a child to this with a given local transform
      *  @param {EngineObject} child
-     *  @param {Vector2}      [localPos=Vector2()]
+     *  @param {Vector2}      [localPos=(0,0)]
      *  @param {Number}       [localAngle] */
     addChild(child, localPos=vec2(), localAngle=0)
     {

package/src/engineParticles.js

@@ -10,12 +10,12 @@
  * @example
  * // create a particle emitter
  * let pos = vec2(2,3);
- * let particleEmiter = new ParticleEmitter
+ * let particleEmitter = new ParticleEmitter
  * (
- *     pos, 0, 1, 0, 500, PI,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
- *     tile(0, 16),            // tileInfo
- *     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
+ *     pos, 0, 1, 0, 500, PI,      // pos, angle, emitSize, emitTime, emitRate, emiteCone
+ *     tile(0, 16),                // tileInfo
+ *     rgb(1,1,1),   rgb(0,0,0),   // colorStartA, colorStartB
+ *     rgb(1,1,1,0), rgb(0,0,0,0), // colorEndA, colorEndB
  *     2, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
  *     .99, 1, 1, PI, .05,  // damping, angleDamping, gravityScale, particleCone, fadeRate, 
  *     .5, 1                // randomness, collide, additive, randomColorLinear, renderOrder
@@ -31,10 +31,10 @@ class ParticleEmitter extends EngineObject
      *  @param {Number} [emitRate] - How many particles per second to spawn, does not emit if 0
      *  @param {Number} [emitConeAngle=PI] - Local angle to apply velocity to particles from emitter
      *  @param {TileInfo} [tileInfo] - Tile info to render particles (undefined is untextured)
-     *  @param {Color} [colorStartA=Color()] - Color at start of life 1, randomized between start colors
-     *  @param {Color} [colorStartB=Color()] - Color at start of life 2, randomized between start colors
-     *  @param {Color} [colorEndA=Color(1,1,1,0)] - Color at end of life 1, randomized between end colors
-     *  @param {Color} [colorEndB=Color(1,1,1,0)] - Color at end of life 2, randomized between end colors
+     *  @param {Color} [colorStartA=(1,1,1,1)] - Color at start of life 1, randomized between start colors
+     *  @param {Color} [colorStartB=(1,1,1,1)] - Color at start of life 2, randomized between start colors
+     *  @param {Color} [colorEndA=(1,1,1,0)] - Color at end of life 1, randomized between end colors
+     *  @param {Color} [colorEndB=(1,1,1,0)] - Color at end of life 2, randomized between end colors
      *  @param {Number} [particleTime]      - How long particles live
      *  @param {Number} [sizeStart]         - How big are particles at start
      *  @param {Number} [sizeEnd]           - How big are particles at end