littlejsengine 1.7.13 → 1.8.1

package/build/littlejs.d.ts

@@ -1,8 +1,4 @@
 declare module "littlejs.esm" {
-    /**
-     * LittleJS Module Export
-     * - Export engine as a module with functions where necessary
-     */
     /** Set position of camera in world space
      *  @param {Vector2} pos
      *  @memberof Settings */
@@ -181,7 +177,7 @@ declare module "littlejs.esm" {
      *  @default Vector2(16,16)
      *  @memberof Settings */
     export let tileSizeDefault: Vector2;
-    /** Prevent tile bleeding from neighbors in pixels
+    /** How many pixels smaller to draw tiles to prevent bleeding from neighbors
      *  @type {Number}
      *  @default
      *  @memberof Settings */
@@ -231,6 +227,11 @@ declare module "littlejs.esm" {
      *  @default
      *  @memberof Settings */
     export let particleEmitRateScale: number;
+    /**
+     * LittleJS Engine Settings
+     * - All settings for the engine are here
+     * @namespace Settings
+     */
     /** Position of camera in world space
      *  @type {Vector2}
      *  @default Vector2()
@@ -333,6 +334,15 @@ declare module "littlejs.esm" {
      *  @default
      *  @memberof Settings */
     export let medalDisplayIconSize: number;
+    /**
+     * LittleJS Debug System
+     * - Press Esc to show debug overlay with mouse pick
+     * - Number keys toggle debug functions
+     * - +/- apply time scale
+     * - Debug primitive rendering
+     * - Save a 2d canvas as a png image
+     * @namespace Debug
+     */
     /** True if debug is enabled
      *  @type {Boolean}
      *  @default
@@ -407,6 +417,15 @@ declare module "littlejs.esm" {
      *  @param {String}            [type='image/png']
      *  @memberof Debug */
     export function debugSaveCanvas(canvas: HTMLCanvasElement, filename?: string, type?: string): void;
+    /**
+     * LittleJS Utility Classes and Functions
+     * - General purpose math library
+     * - Vector2 - fast, simple, easy 2D vector class
+     * - Color - holds a rgba color with some math functions
+     * - Timer - tracks time automatically
+     * - RandomGenerator - seeded random number generator
+     * @namespace Utilities
+     */
     /** A shortcut to get Math.PI
      *  @type {Number}
      *  @default Math.PI
@@ -560,10 +579,10 @@ declare module "littlejs.esm" {
      * - Can be used to create a deterministic random number sequence
      * @example
      * let r = new RandomGenerator(123); // random number generator with seed 123
-     * let a = r.rand();                 // random value between 0 and 1
-     * let b = r.randInt(10);            // random integer between 0 and 9
+     * let a = r.float();                // random value between 0 and 1
+     * let b = r.int(10);                // random integer between 0 and 9
      * r.seed = 123;                     // reset the seed
-     * let c = r.rand();                 // the same value as a
+     * let c = r.float();                // the same value as a
      */
     export class RandomGenerator {
         /** Create a random number generator with the seed passed in
@@ -821,7 +840,7 @@ declare module "littlejs.esm" {
     }
     /**
      * Create a 2d vector, can take another Vector2 to copy, 2 scalars, or 1 scalar
-     * @param {Number} [x=0]
+     * @param {(Number|Vector2)} [x=0]
      * @param {Number} [y=0]
      * @return {Vector2}
      * @example
@@ -831,7 +850,7 @@ declare module "littlejs.esm" {
      * b = vec2();         // set b to (0, 0)
      * @memberof Utilities
      */
-    export function vec2(x?: number, y?: number): Vector2;
+    export function vec2(x?: (number | Vector2), y?: number): Vector2;
     /**
      * Create a color object with RGBA values
      * @param {Number} [r=1] - red
@@ -852,6 +871,9 @@ declare module "littlejs.esm" {
      * @memberof Utilities
      */
     export function hsl(h?: number, s?: number, l?: number, a?: number): Color;
+    /**
+     * LittleJS Object System
+     */
     /**
      * LittleJS Object Base Object Class
      * - Top level object class used by the engine
@@ -879,23 +901,20 @@ declare module "littlejs.esm" {
      */
     export class EngineObject {
         /** Create an engine object and adds it to the list of objects
-         *  @param {Vector2} [position=Vector2()]        - World space position of the object
-         *  @param {Vector2} [size=Vector2(1,1)]         - World space size of the object
-         *  @param {Number}  [tileIndex=-1]              - Tile to use to render object (-1 is untextured)
-         *  @param {Vector2} [tileSize=tileSizeDefault]  - Size of tile in source pixels
-         *  @param {Number}  [angle=0]                   - Angle the object is rotated by
-         *  @param {Color}   [color=Color()]             - Color to apply to tile when rendered
-         *  @param {Number}  [renderOrder=0]             - Objects sorted by renderOrder before being rendered
+         *  @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=0]                  - Angle the object is rotated by
+         *  @param {Color}   [color=Color()]            - Color to apply to tile when rendered
+         *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
          */
-        constructor(pos?: Vector2, size?: Vector2, tileIndex?: number, tileSize?: Vector2, angle?: number, color?: Color, renderOrder?: number);
+        constructor(pos?: Vector2, size?: Vector2, tileInfo?: TileInfo, angle?: number, color?: Color, renderOrder?: number);
         /** @property {Vector2} - World space position of the object */
         pos: Vector2;
         /** @property {Vector2} - World space width and height of the object */
         size: Vector2;
-        /** @property {Number}  - Tile to use to render object (-1 is untextured) */
-        tileIndex: number;
-        /** @property {Vector2} - Size of tile in source pixels */
-        tileSize: Vector2;
+        /** @property {TileInfo} - Tile info to render object (undefined is untextured) */
+        tileInfo: TileInfo;
         /** @property {Number}  - Angle to rotate the object */
         angle: number;
         /** @property {Color}   - Color to apply when rendered */
@@ -975,10 +994,85 @@ declare module "littlejs.esm" {
          *  @return {String} */
         toString(): string;
     }
-    /** Tile sheet for batch rendering system
-     *  @type {CanvasImageSource}
+    /** Array containing texture info for batch rendering system
+     *  @type {Array}
      *  @memberof Draw */
-    export const tileImage: CanvasImageSource;
+    export let textureInfos: any[];
+    /**
+     * 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)} [size=tileSizeDefault]  - Size of tile in pixels
+     * @param {Number} [textureIndex=0]                  - Texture index to use
+     * @return {TileInfo}
+     * @example
+     * tile(2)                       // a tile at index 2 using the default tile size of 16
+     * tile(5, 8)                    // a tile at index 5 using a tile size of 8
+     * tile(1, 16, 3)                // a tile at index 1 of size 16 on texture 3
+     * tile(vec2(4,8), vec2(30,10))  // a tile at pixel location (4,8) with a size of (30,10)
+     * @memberof Draw
+     */
+    export function tile(pos?: (number | Vector2), size?: (number | Vector2), textureIndex?: number): TileInfo;
+    /**
+     * Tile Info - Stores info about how to draw a tile
+     */
+    export class TileInfo {
+        /** Create a tile info object
+         *  @param {Vector2} [pos=Vector2()]        - Top left corner of tile in pixels
+         *  @param {Vector2} [size=tileSizeDefault] - Size of tile in pixels
+         *  @param {Number}  [textureIndex=0]       - Texture index to use
+         */
+        constructor(pos?: Vector2, size?: Vector2, textureIndex?: number);
+        /** @property {Vector2} - Top left corner of tile in pixels */
+        pos: Vector2;
+        /** @property {Vector2} - Size of tile in pixels */
+        size: Vector2;
+        /** @property {Number} - Texture index to use */
+        textureIndex: number;
+        /** Returns an offset copy of this tile, useful for animation
+        *  @param {Vector2} offset - Offset to apply in pixels
+        *  @return {TileInfo}
+        */
+        offset(offset: Vector2): TileInfo;
+        /** Returns the texture info for this tile
+        *  @return {TextureInfo}
+        */
+        getTextureInfo(): TextureInfo;
+    }
+    /** Texture Info - Stores info about each texture */
+    export class TextureInfo {
+        constructor(image: any);
+        /** @property {CanvasImageSource} - image source */
+        image: any;
+        /** @property {Vector2} - size of the image */
+        size: Vector2;
+        /** @property {WebGLTexture} - webgl texture */
+        glTexture: WebGLTexture;
+        /** @property {Vector2} - size to adjust tile to fix bleeding */
+        fixBleedSize: Vector2;
+    }
+    /**
+     * LittleJS Drawing System
+     * - Hybrid system with both Canvas2D and WebGL available
+     * - Super fast tile sheet rendering with WebGL
+     * - Can apply rotation, mirror, color and additive color
+     * - Font rendering system with built in engine font
+     * - Many useful utility functions
+     *
+     * LittleJS uses a hybrid rendering solution with the best of both Canvas2D and WebGL.
+     * There are 3 canvas/contexts available to draw to...
+     * mainCanvas - 2D background canvas, non WebGL stuff like tile layers are drawn here.
+     * glCanvas - Used by the accelerated WebGL batch rendering system.
+     * overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
+     *
+     * The WebGL rendering system is very fast with some caveats...
+     * - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
+     * - Group additive rendering together using renderOrder to mitigate this issue
+     *
+     * The LittleJS rendering solution is intentionally simple, feel free to adjust it for your needs!
+     * @namespace Draw
+     */
     /** The primary 2D canvas visible to the user
      *  @type {HTMLCanvasElement}
      *  @memberof Draw */
@@ -1012,7 +1106,7 @@ declare module "littlejs.esm" {
     /** 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 {Number}  [tileIndex=-1]                 - Tile index to use, negative is untextured
+     *  @param {TileInfo}[tileInfo]                     - Tile info to use, untextured if undefined
      *  @param {Vector2} [tileSize=tileSizeDefault]     - Tile size in source pixels
      *  @param {Color}   [color=Color()]                - Color to modulate with
      *  @param {Number}  [angle=0]                      - Angle to rotate by
@@ -1021,7 +1115,7 @@ declare module "littlejs.esm" {
      *  @param {Boolean} [useWebGL=glEnable]            - Use accelerated WebGL rendering
      *  @param {Boolean} [screenSpace=0]                - If true the pos and size are in screen space
      *  @memberof Draw */
-    export function drawTile(pos: Vector2, size?: Vector2, tileIndex?: number, tileSize?: Vector2, color?: Color, angle?: number, mirror?: boolean, additiveColor?: Color, useWebGL?: boolean, screenSpace?: boolean): void;
+    export function drawTile(pos: Vector2, size?: Vector2, tileInfo?: TileInfo, color?: Color, angle?: number, mirror?: boolean, additiveColor?: Color, useWebGL?: boolean, screenSpace?: boolean): void;
     /** Draw colored rect centered on pos
      *  @param {Vector2} pos
      *  @param {Vector2} [size=Vector2(1,1)]
@@ -1099,14 +1193,12 @@ declare module "littlejs.esm" {
          *  @param {HTMLImageElement} [image] - Image for the font, if undefined default font is used
          *  @param {Vector2} [tileSize=vec2(8)] - Size of the font source tiles
          *  @param {Vector2} [paddingSize=vec2(0,1)] - How much extra space to add between characters
-         *  @param {Number}  [startTileIndex=0] - Tile index in image where font starts
          *  @param {CanvasRenderingContext2D} [context=overlayContext] - context to draw to
          */
-        constructor(image?: HTMLImageElement, tileSize?: Vector2, paddingSize?: Vector2, startTileIndex?: number, context?: CanvasRenderingContext2D);
+        constructor(image?: HTMLImageElement, tileSize?: Vector2, paddingSize?: Vector2, context?: CanvasRenderingContext2D);
         image: any;
         tileSize: Vector2;
         paddingSize: Vector2;
-        startTileIndex: number;
         context: CanvasRenderingContext2D;
         /** Draw text in world space using the image font
          *  @param {String}  text
@@ -1130,6 +1222,14 @@ declare module "littlejs.esm" {
     /** Toggle fullsceen mode
      *  @memberof Draw */
     export function toggleFullscreen(): void;
+    /**
+     * LittleJS Input System
+     * - Tracks keyboard down, pressed, and released
+     * - Tracks mouse buttons, position, and wheel
+     * - Tracks multiple analog gamepads
+     * - Virtual gamepad for touch devices
+     * @namespace Input
+     */
     /** Returns true if device key is down
      *  @param {Number} key
      *  @param {Number} [device=0]
@@ -1151,6 +1251,14 @@ declare module "littlejs.esm" {
     /** Clears all input
      *  @memberof Input */
     export function clearInput(): void;
+    /**
+     * LittleJS Input System
+     * - Tracks keyboard down, pressed, and released
+     * - Tracks mouse buttons, position, and wheel
+     * - Tracks multiple analog gamepads
+     * - Virtual gamepad for touch devices
+     * @namespace Input
+     */
     /** Returns true if device key is down
      *  @param {Number} key
      *  @param {Number} [device=0]
@@ -1225,6 +1333,16 @@ declare module "littlejs.esm" {
     /** True if a touch device has been detected
      *  @memberof Input */
     export const isTouchDevice: boolean;
+    /**
+     * LittleJS Audio System
+     * - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - ZzFX Sound Effect Generator
+     * - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a> - ZzFXM Music System
+     * - Caches sounds and music for fast playback
+     * - Can attenuate and apply stereo panning to sounds
+     * - Ability to play mp3, ogg, and wave files
+     * - Speech synthesis functions
+     * @namespace Audio
+     */
     /**
      * Sound Object - Stores a zzfx sound for later use and can be played positionally
      *
@@ -1249,22 +1367,39 @@ declare module "littlejs.esm" {
         taper: number;
         /** @property {Number} - How much to randomize frequency each time sound plays */
         randomness: any;
-        cachedSamples: any[];
+        sampleChannels: any[][];
+        sampleRate: number;
         /** Play the sound
          *  @param {Vector2} [pos] - World space position to play the sound, sound is not attenuated if null
          *  @param {Number}  [volume=1] - How much to scale volume by (in addition to range fade)
          *  @param {Number}  [pitch=1] - How much to scale pitch by (also adjusted by this.randomness)
          *  @param {Number}  [randomnessScale=1] - How much to scale randomness
-         *  @return {AudioBufferSourceNode} - The audio, can be used to stop sound later
+         *  @param {Boolean} [loop=0] - Should the sound loop
+         *  @return {AudioBufferSourceNode} - The audio source node
          */
-        play(pos?: Vector2, volume?: number, pitch?: number, randomnessScale?: number): AudioBufferSourceNode;
+        play(pos?: Vector2, volume?: number, pitch?: number, randomnessScale?: number, loop?: boolean): AudioBufferSourceNode;
+        source: number | AudioBufferSourceNode;
+        /** Stop the last instance of this sound that was played */
+        stop(): void;
         /** Play the sound as a note with a semitone offset
          *  @param {Number}  semitoneOffset - How many semitones to offset pitch
          *  @param {Vector2} [pos] - World space position to play the sound, sound is not attenuated if null
          *  @param {Number}  [volume=1] - How much to scale volume by (in addition to range fade)
-         *  @return {AudioBufferSourceNode} - The audio, can be used to stop sound later
+         *  @return {AudioBufferSourceNode} - The audio source node
          */
         playNote(semitoneOffset: number, pos?: Vector2, volume?: number): AudioBufferSourceNode;
+        /** Get how long this sound is in seconds
+         *  @return {Number} - How long the sound is in seconds (undefined if loading)
+         */
+        getDuration(): number;
+        /** Check if the last instance of this sound is playing
+         *  @return {Boolean} - True if the sound is playing
+         */
+        isPlaying(): boolean;
+        /** Check if sound is loading, for sounds fetched from a url
+         *  @return {Boolean} - True if sound is loading and not ready to play
+         */
+        isLoading(): boolean;
     }
     /**
      * Music Object - Stores a zzfx music track for later use
@@ -1296,30 +1431,23 @@ declare module "littlejs.esm" {
      * // play the music
      * music_example.play();
      */
-    export class Music {
+    export class Music extends Sound {
         /** Create a music object and cache the zzfx music samples for later use
          *  @param {Array} zzfxMusic - Array of zzfx music parameters
          */
         constructor(zzfxMusic: any[]);
-        cachedSamples: any[];
+        sampleChannels: any[];
         /** Play the music
          *  @param {Number}  [volume=1] - How much to scale volume by
-         *  @param {Boolean} [loop=1] - True if the music should loop when it reaches the end
-         *  @return {AudioBufferSourceNode} - The audio node, can be used to stop sound later
+         *  @param {Boolean} [loop=1] - True if the music should loop
+         *  @return {AudioBufferSourceNode} - The audio source node
          */
         play(volume?: number, loop?: boolean): AudioBufferSourceNode;
-        source: number | AudioBufferSourceNode;
-        /** Stop the music */
-        stop(): void;
-        /** Check if music is playing
-         *  @return {Boolean}
-         */
-        isPlaying(): boolean;
     }
-    /** Play an mp3 or wav audio from a local file or url
+    /** Play an mp3, ogg, or wav audio from a local file or url
      *  @param {String}  url - Location of sound file to play
      *  @param {Number}  [volume=1] - How much to scale volume by
-     *  @param {Boolean} [loop=1] - True if the music should loop when it reaches the end
+     *  @param {Boolean} [loop=1] - True if the music should loop
      *  @return {HTMLAudioElement} - The audio element for this sound
      *  @memberof Audio */
     export function playAudioFile(url: string, volume?: number, loop?: boolean): HTMLAudioElement;
@@ -1350,9 +1478,10 @@ declare module "littlejs.esm" {
      *  @param {Number}  [rate=1] - The playback rate to use
      *  @param {Number}  [pan=0] - How much to apply stereo panning
      *  @param {Boolean} [loop=0] - True if the sound should loop when it reaches the end
+     *  @param {Number}  [sampleRate=44100] - Sample rate for the sound
      *  @return {AudioBufferSourceNode} - The audio node of the sound played
      *  @memberof Audio */
-    export function playSamples(sampleChannels: any[], volume?: number, rate?: number, pan?: number, loop?: boolean): AudioBufferSourceNode;
+    export function playSamples(sampleChannels: any[], volume?: number, rate?: number, pan?: number, loop?: boolean, sampleRate?: number): AudioBufferSourceNode;
     /** Generate and play a ZzFX sound
      *
      *  <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
@@ -1360,6 +1489,17 @@ declare module "littlejs.esm" {
      *  @return {AudioBufferSourceNode} - The audio node of the sound played
      *  @memberof Audio */
     export function zzfx(...zzfxSound: any[]): AudioBufferSourceNode;
+    /**
+     * LittleJS Tile Layer System
+     * - Caches arrays of tiles to off screen canvas for fast rendering
+     * - Unlimted numbers of layers, allocates canvases as needed
+     * - Interfaces with EngineObject for collision
+     * - Collision layer is separate from visible layers
+     * - It is recommended to have a visible layer that matches the collision
+     * - Tile layers can be drawn to using their context with canvas2d
+     * - Drawn directly to the main canvas without using WebGL
+     * @namespace TileCollision
+     */
     /** The tile collision layer array, use setTileCollisionData and getTileCollisionData to access
      *  @type {Array}
      *  @memberof TileCollision */
@@ -1425,7 +1565,7 @@ declare module "littlejs.esm" {
         clear(): void;
     }
     /**
-     * Tile layer object - cached rendering system for tile layers
+     * Tile Layer - cached rendering system for tile layers
      * - Each Tile layer is rendered to an off screen canvas
      * - To allow dynamic modifications, layers are rendered using canvas 2d
      * - Some devices like mobile phones are limited to 4k texture resolution
@@ -1440,11 +1580,11 @@ declare module "littlejs.esm" {
         /** Create a tile layer object
             *  @param {Vector2} [position=Vector2()]       - World space position
             *  @param {Vector2} [size=tileCollisionSize]   - World space size
-            *  @param {Vector2} [tileSize=tileSizeDefault] - Size of tiles in source pixels
+            *  @param {TileInfo} [tileInfo]                - Tile info for layer
             *  @param {Vector2} [scale=Vector2(1,1)]       - How much to scale this layer when rendered
             *  @param {Number}  [renderOrder=0]            - Objects sorted by renderOrder before being rendered
             */
-        constructor(pos: any, size?: Vector2, tileSize?: Vector2, scale?: Vector2, renderOrder?: number);
+        constructor(pos: any, size?: Vector2, tileInfo?: TileInfo, scale?: Vector2, renderOrder?: number);
         /** @property {HTMLCanvasElement}        - The canvas used by this tile layer */
         canvas: HTMLCanvasElement;
         /** @property {CanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
@@ -1486,12 +1626,11 @@ declare module "littlejs.esm" {
         /** Draw a tile directly onto the layer canvas
          *  @param {Vector2} pos
          *  @param {Vector2} [size=Vector2(1,1)]
-         *  @param {Number}  [tileIndex=-1]
-         *  @param {Vector2} [tileSize=tileSizeDefault]
+         *  @param {TileInfo} [tileInfo]
          *  @param {Color}   [color=Color()]
          *  @param {Number}  [angle=0]
          *  @param {Boolean} [mirror=0] */
-        drawTile(pos: Vector2, size?: Vector2, tileIndex?: number, tileSize?: Vector2, color?: Color, angle?: number, mirror?: boolean): void;
+        drawTile(pos: Vector2, size?: Vector2, tileInfo?: TileInfo, color?: Color, angle?: number, mirror?: boolean): void;
         /** Draw a rectangle directly onto the layer canvas
          *  @param {Vector2} pos
          *  @param {Vector2} [size=Vector2(1,1)]
@@ -1499,6 +1638,9 @@ declare module "littlejs.esm" {
          *  @param {Number}  [angle=0] */
         drawRect(pos: Vector2, size?: Vector2, color?: Color, angle?: number): void;
     }
+    /**
+     * LittleJS Particle System
+     */
     /**
      * Particle Emitter - Spawns particles with the given settings
      * @extends EngineObject
@@ -1508,7 +1650,7 @@ declare module "littlejs.esm" {
      * let particleEmiter = new ParticleEmitter
      * (
      *     pos, 0, 1, 0, 500, PI,  // pos, angle, emitSize, emitTime, emitRate, emiteCone
-     *     0, vec2(16),                            // tileIndex, tileSize
+     *     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
      *     2, .2, .2, .1, .05,  // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
@@ -1524,8 +1666,7 @@ declare module "littlejs.esm" {
          *  @param {Number}  [emitTime=0]       - How long to stay alive (0 is forever)
          *  @param {Number}  [emitRate=100]     - 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 {Number}  [tileIndex=-1]     - Index into tile sheet, if <0 no texture is applied
-         *  @param {Vector2} [tileSize=tileSizeDefault] - Tile size for particles
+         *  @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
@@ -1547,7 +1688,7 @@ declare module "littlejs.esm" {
          *  @param {Number}  [renderOrder=0]        - Render order for particles (additive is above other stuff by default)
          *  @param {Boolean}  [localSpace=0]        - Should it be in local space of emitter (world space is default)
          */
-        constructor(pos: any, angle?: number, emitSize?: number, emitTime?: number, emitRate?: number, emitConeAngle?: number, tileIndex?: number, tileSize?: Vector2, colorStartA?: Color, colorStartB?: Color, colorEndA?: Color, colorEndB?: Color, particleTime?: number, sizeStart?: number, sizeEnd?: number, speed?: number, angleSpeed?: number, damping?: number, angleDamping?: number, gravityScale?: number, particleConeAngle?: number, fadeRate?: number, randomness?: number, collideTiles?: boolean, additive?: boolean, randomColorLinear?: boolean, renderOrder?: number, localSpace?: boolean);
+        constructor(pos: any, angle?: number, emitSize?: number, emitTime?: number, emitRate?: number, emitConeAngle?: number, tileInfo?: TileInfo, colorStartA?: Color, colorStartB?: Color, colorEndA?: Color, colorEndB?: Color, particleTime?: number, sizeStart?: number, sizeEnd?: number, speed?: number, angleSpeed?: number, damping?: number, angleDamping?: number, gravityScale?: number, particleConeAngle?: number, fadeRate?: number, randomness?: number, collideTiles?: boolean, additive?: boolean, randomColorLinear?: boolean, renderOrder?: number, localSpace?: boolean);
         /** @property {Number} - World space size of the emitter (float for circle diameter, vec2 for rect) */
         emitSize: number;
         /** @property {Number} - How long to stay alive (0 is forever) */
@@ -1603,12 +1744,18 @@ declare module "littlejs.esm" {
         /**
          * Create a particle with the given settings
          * @param {Vector2} position                   - World space position of the particle
-         * @param {Number}  [tileIndex=-1]             - Tile to use to render, untextured if -1
-         * @param {Vector2} [tileSize=tileSizeDefault] - Size of tile in source pixels
+         * @param {TileInfo} [tileInfo]                - Tile info to render particles (undefined is untextured)
          * @param {Number}  [angle=0]                  - Angle to rotate the particle
          */
-        constructor(pos: any, tileIndex?: number, tileSize?: Vector2, angle?: number);
+        constructor(pos: any, tileInfo?: TileInfo, angle?: number);
     }
+    /**
+     * LittleJS Medal System
+     * - Tracks and displays medals
+     * - Saves medals to local storage
+     * - Newgrounds integration
+     * @namespace Medals
+     */
     /** List of all medals
      *  @type {Array}
      *  @memberof Medals */
@@ -1627,10 +1774,11 @@ declare module "littlejs.esm" {
     /** This can used to enable Newgrounds functionality
      *  @param {Number} app_id   - The newgrounds App ID
      *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
+     *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher
      *  @memberof Medals */
-    export function newgroundsInit(app_id: number, cipher?: string): void;
+    export function newgroundsInit(app_id: number, cipher?: string, cryptoJS?: any): void;
     /**
-     * Medal Object - Tracks an unlockable medal
+     * Medal - Tracks an unlockable medal
      * @example
      * // create a medal
      * const medal_example = new Medal(0, 'Example Medal', 'More info about the medal goes here.', '🎖️');
@@ -1642,7 +1790,7 @@ declare module "littlejs.esm" {
      * medal_example.unlock();
      */
     export class Medal {
-        /** Create an medal object and adds it to the list of medals
+        /** Create a medal object and adds it to the list of medals
          *  @param {Number} id            - The unique identifier of the medal
          *  @param {String} name          - Name of the medal
          *  @param {String} [description] - Description of the medal
@@ -1673,20 +1821,20 @@ declare module "littlejs.esm" {
     /**
      * Newgrounds API wrapper object
      * @example
-     * // create a newgrounds object, replace the app id and cipher with your own
+     * // create a newgrounds object, replace the app id with your own
      * const app_id = '53123:1ZuSTQ9l';
-     * const cipher = 'enF0vGH@Mj/FRASKL23Q==';
-     * newgrounds = new Newgrounds(app_id, cipher);
+     * newgrounds = new Newgrounds(app_id);
      */
     export class Newgrounds {
         /** Create a newgrounds object
          *  @param {Number} app_id   - The newgrounds App ID
-         *  @param {String} [cipher] - The encryption Key (AES-128/Base64) */
-        constructor(app_id: number, cipher?: string);
+         *  @param {String} [cipher] - The encryption Key (AES-128/Base64)
+         *  @param {Object} [cryptoJS] - An instance of CryptoJS, if there is a cipher */
+        constructor(app_id: number, cipher?: string, cryptoJS?: any);
         app_id: number;
         cipher: string;
-        host: string;
         cryptoJS: any;
+        host: string;
         session_id: string;
         medals: any;
         scoreboards: any;
@@ -1715,8 +1863,18 @@ declare module "littlejs.esm" {
          * @return {Object}                - The response JSON object
          */
         call(component: string, parameters?: any, async?: boolean): any;
-        CryptoJS(): any;
     }
+    /**
+     * LittleJS WebGL Interface
+     * - All webgl used by the engine is wrapped up here
+     * - For normal stuff you won't need to see or call anything in this file
+     * - For advanced stuff there are helper functions to create shaders, textures, etc
+     * - Can be disabled with glEnable to revert to 2D canvas rendering
+     * - Batches sprite rendering on GPU for incredibly fast performance
+     * - Sprite transform math is done in the shader where possible
+     * - Supports shadertoy style post processing shaders
+     * @namespace WebGL
+     */
     /** The WebGL canvas which appears above the main canvas and below the overlay canvas
      *  @type {HTMLCanvasElement}
      *  @memberof WebGL */
@@ -1729,11 +1887,11 @@ declare module "littlejs.esm" {
      *  @param {Boolean} [additive=0]
      *  @memberof WebGL */
     export function glSetBlendMode(additive?: boolean): void;
-    /** Set the WebGl texture, not normally necessary unless multiple tile sheets are used
+    /** Set the WebGl texture, called automatically if using multiple textures
      *  - This may also flush the gl buffer resulting in more draw calls and worse performance
-     *  @param {WebGLTexture} [texture=glTileTexture]
+     *  @param {WebGLTexture} texture
      *  @memberof WebGL */
-    export function glSetTexture(texture?: WebGLTexture): void;
+    export function glSetTexture(texture: WebGLTexture): void;
     /** Compile WebGL shader of the given type, will throw errors if in debug mode
      *  @param {String} source
      *  @param          type
@@ -1756,6 +1914,25 @@ declare module "littlejs.esm" {
      *  @param {Boolean} includeOverlay
      *  @memberof WebGL */
     export function glInitPostProcess(shaderCode: string, includeOverlay: boolean): void;
+    /**
+     * LittleJS - The Tiny JavaScript Game Engine That Can!
+     * MIT License - Copyright 2021 Frank Force
+     *
+     * Engine Features
+     * - Object oriented system with base class engine object
+     * - Base class object handles update, physics, collision, rendering, etc
+     * - Engine helper classes and functions like Vector2, Color, and Timer
+     * - Super fast rendering system for tile sheets
+     * - Sound effects audio with zzfx and music with zzfxm
+     * - Input processing system with gamepad and touchscreen support
+     * - Tile layer rendering and collision system
+     * - Particle effect system
+     * - Medal system tracks and displays achievements
+     * - Debug tools and debug rendering system
+     * - Post processing effects
+     * - Call engineInit() to start it up!
+     * @namespace Engine
+     */
     /** Name of engine
      *  @type {String}
      *  @default
@@ -1807,9 +1984,9 @@ declare module "littlejs.esm" {
      *  @param {Function} gameUpdatePost  - Called after physics and objects are updated, setup camera and prepare for render
      *  @param {Function} gameRender      - Called before objects are rendered, draw any background effects that appear behind objects
      *  @param {Function} gameRenderPost  - Called after objects are rendered, draw effects or hud that appear above all objects
-     *  @param {String} [tileImageSource] - Tile image to use, everything starts when the image is finished loading
+     *  @param {String} [imageSources='tiles.png'] - Image to load
      *  @memberof Engine */
-    export function engineInit(gameInit: Function, gameUpdate: Function, gameUpdatePost: Function, gameRender: Function, gameRenderPost: Function, tileImageSource?: string): void;
+    export function engineInit(gameInit: Function, gameUpdate: Function, gameUpdatePost: Function, gameRender: Function, gameRenderPost: Function, imageSources?: string): void;
     /** Update each engine object, remove destroyed objects, and update time
      *  @memberof Engine */
     export function engineObjectsUpdate(): void;