littlejsengine 1.7.21 → 1.8.1

package/README.md

@@ -10,11 +10,11 @@
 
 LittleJS is a lightweight open source HTML5 game engine designed for modern web development.
 It's small footprint is packed with a comprehensive feature set, including hybrid rendering, physics, particles, sound effects, music, input handling, and debug tools.
-The code is very clean and well documented with a several examples to get you started. Choo-Choo! 🚂
+The code is very clean and well documented with some fun examples to get you started. Choo-Choo! 🚂
 
 <div align="center">
 
-## [Demo](https://killedbyapixel.github.io/LittleJS/examples/starter/) | [Docs](https://killedbyapixel.github.io/LittleJS/docs) | [Trailer](https://youtu.be/chuBzGjv7Ms) | [Discord](https://discord.gg/zb7hcGkyZe) | [Tutorial](https://github.com/KilledByAPixel/LittleJS/tree/main/examples/breakoutTutorial)
+## [Demo](https://killedbyapixel.github.io/LittleJS/examples/starter/) | [Docs](https://killedbyapixel.github.io/LittleJS/docs) | [Trailer](https://youtu.be/chuBzGjv7Ms) | [Discord](https://discord.gg/zb7hcGkyZe) | [Tutorial](https://github.com/KilledByAPixel/LittleJS/blob/main/examples/breakoutTutorial/README.md)
 
 </div>
 
@@ -22,36 +22,36 @@ The code is very clean and well documented with a several examples to get you st
 
 ## About LittleJS
 
-LittleJS is a small but powerful game engine with many features and no depenencies.
+LittleJS is a small but powerful game engine with many features and no dependencies.
 
 ### ✨ Graphics
 
 - Super fast sprite and tile map rendering engine with WebGL
-- Update and render 10,000+ objects at 60fps, often many times more
-- Particle effect system and [design tool](https://killedbyapixel.github.io/LittleJS/examples/particles/)
+- Update and render over 10,000 objects at a solid 60fps
 - Apply [Shadertoy](https://www.shadertoy.com) compatible shaders for post processinge effects
+- Robust particle effect system and [effect design tool](https://killedbyapixel.github.io/LittleJS/examples/particles/)
 
 ### 🔊 Audio
 
-- Positional sound effects with wav or [ZzFX](https://killedbyapixel.github.io/ZzFX/) sound effect generator
+- Positional sound effects with wave or [ZzFX](https://killedbyapixel.github.io/ZzFX/)
 - Music with mp3, ogg, wave, or [ZzFXM](https://keithclark.github.io/ZzFXM/)
 
 ### 🎮 Input
 
-- Input processing system for keyboard, mouse, gamepad, and touch
-- On screen touch gamepad for mobile devices
+- Comprehensive system for keyboard, mouse, gamepad, and touch
+- On screen touch gamepad designed for mobile devices
 
 ### 💥 Physics
 
 - 2D physics engine with collision handling for axis aligned boxes
-- Very fast collision handling and raycasting for tile maps
+- Very fast collision and raycasting for tile maps
 
 ### 🚀 Flexability
 
-- Designed to work with all modern web bowsers and mobile devices
-- Compatible with TypeScript and Modules with example projects for both
-- For size coding competitions like [js13kGames](https://js13kgames.com/), [a special example project builds to a 7KB zip file](https://killedbyapixel.github.io/LittleJS/examples/js13k)
-- Builds to a Windows executable with [Electron](https://www.electronjs.org/) for distribution on PC platforms like Steam
+- Compatible with all modern web bowsers and on mobile devices
+- Support for TypeScript and Modules with example projects for both
+- Ideal for size coding competitions like [js13kGames](https://js13kgames.com/), [starter project builds to a 7KB zip](https://killedbyapixel.github.io/LittleJS/examples/js13k)
+- Builds to an executable with [Electron](https://www.electronjs.org/) for distribution on Windows, macOS, and Linux
 - Open Source with the [MIT license](https://github.com/KilledByAPixel/LittleJS/blob/main/LICENSE) so it can be used for anything you want forever
 
 ### 🛠️ And more...
@@ -66,65 +66,37 @@ LittleJS is a small but powerful game engine with many features and no depenenci
 ## Demos
 
 ### [Starter Project](https://killedbyapixel.github.io/LittleJS/examples/starter/) - Clean example with only a few things to get you started
+### [Breakout](https://killedbyapixel.github.io/LittleJS/examples/breakout/) - Breakout game with post processing effect
 ### [Puzzle Game](https://killedbyapixel.github.io/LittleJS/examples/puzzle/) - Match 3 puzzle game with HD rendering and high score tracking
 ### [Platformer](https://killedbyapixel.github.io/LittleJS/examples/platformer/) - Platformer/shooter with procedural generation and destruction
-### [Breakout](https://killedbyapixel.github.io/LittleJS/examples/breakout/) - Breakout game with post processing effect
 ### [Stress Test](https://killedbyapixel.github.io/LittleJS/examples/stress/) - Max sprite/object test and music system demo
 ### [Particle System Designer](https://killedbyapixel.github.io/LittleJS/examples/particles/) - Particle system editor and visualizer
 
 ## How to use LittleJS
 
-To use LittleJS download the latest package from GitHub or call ```npm install littlejsengine```. This package contains the engine and several small examples.
-
-[You can use the empty example template as a starting point.](https://github.com/KilledByAPixel/LittleJS/blob/main/examples/empty/game.js) This file contains just the minimal setup to start the engine. You can also download and include [littlejs.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.js) or [littlejs.min.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.min.js).
+To use LittleJS download the latest package from GitHub or call ```npm install littlejsengine```.
 
-If your game loads any files like images you will need to run a local web server. Some editors can do this automatically like [Visual Studio Code](https://code.visualstudio.com/) with the [Live Server plugin](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). You can also use [http-server](https://www.npmjs.com/package/http-server) via npm.
+[The Breakout Tutorial](https://github.com/KilledByAPixel/LittleJS/tree/main/examples/breakoutTutorial) demonstrates how to make a simple game from scratch. [The tutorial is also available on YouTube.](https://youtu.be/tSwDx-NWTXE?si=bkjMa8-7AN2Wg5MO)
 
-[The Breakout Tutorial](https://github.com/KilledByAPixel/LittleJS/blob/main/examples/breakoutTutorial) is provided to demonstrate how to make a simple game from scratch. [The tutorial is also available on YouTube.](https://youtu.be/tSwDx-NWTXE?si=bkjMa8-7AN2Wg5MO)
+[This GitNation talk explains how LittleJS works with some tips on how to use it.](https://youtu.be/_dXKU0WgAj8?si=ZDXLYAFDWp54hrGT)
 
 ## Builds
 
-To easily include LittleJS in your game, you can use one of the 3 pre-built js files. These are also built automatically by the build scripts.
+To easily include LittleJS in your game, you can use one of the pre-built js files.
 
 - [littlejs.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.js) - The full game engine with debug mode available
 - [littlejs.release.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.release.js) - The engine optimized for release builds
 - [littlejs.min.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.min.js) - The engine in release mode and minified
-
-LittleJS can also be imported as a module. There are two module flavors that are automatically built.
-
 - [littlejs.esm.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.esm.js) - The engine exported as a module with debug mode available
 - [littlejs.esm.min.js](https://github.com/KilledByAPixel/LittleJS/blob/main/build/littlejs.esm.min.js) - The engine exported as a minified module in release mode
 
 To rebuild the engine you must first run ```npm install``` to setup the necessary npm dependencies. Then call ```npm run build``` to build the engine.
 
-The starter example project also includes a node js file [build.js](https://github.com/KilledByAPixel/LittleJS/blob/main/examples/starter/build.js) that compresses everything into a tiny zip file using Google Closure, UglifyJS, and ECT Zip.
-
-## Engine Source Code
-
-This engine is made with simplicity in mind using clean easy to read code.
-There are only a few core files used by the entire engine.
-
-- [engine.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engine.js) - Top level engine init, update, and render
-- [engineSettings.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineSettings.js) - Global engine settings
-- [engineObject.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineObject.js) - Base object class and physics
-- [engineDraw.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineDraw.js) - Code for canvas drawing and text
-- [engineAudio.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineAudio.js) - Spacial sound effects, and zzfx sound generator
-- [engineInput.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineInput.js) - Input for keyboard, mouse, touch, and gamepad
-- [engineUtilities.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineUtilities.js) - Vector2, Color, and Timer clases and math functions
-
-Optional Components, these components are built to synergize with the rest of the engine but are not required.
-
-- [engineTileLayer.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineTileLayer.js) - Tile layer rendering and collision
-- [engineParticles.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineParticles.js) - Particle system with fast rendering and collision
-- [engineWebGL.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineWebGL.js) - Super fast rendering with WebGL and post processing
-- [engineMedals.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineMedals.js) - Achievement tracker with Newgrounds integration
-- [engineDebug.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineDebug.js) - Debug rendering system and information overlay
-- [engineExport.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineExport.js) - Included when exporting engine as a module
-- [engineBuild.js](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineBuild.js) - Node script used to build the engine
+The starter example project includes a node js file [build.js](https://github.com/KilledByAPixel/LittleJS/blob/main/examples/starter/build.js) that compresses everything into a tiny zip file using Google Closure, UglifyJS, and ECT Zip.
 
 ## LittleJS Setup
 
-To start LittleJS, you must create 5 functions and pass them to engineInit. A canvas will automatically be created and added to the document. 
+To start LittleJS, you need to create these 5 functions and pass them to engineInit.
 
 ```javascript
 function gameInit()
@@ -158,21 +130,22 @@ function gameRenderPost()
 }
 
 // Startup LittleJS Engine
-engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');
+engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost);
 ```
 
 ## LittleJS Objects
 
-Though not required, LittleJS is intended to be used as an object oriented system by extending the base class [EngineObject](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineObject.js) with your own. This lightweight class provides many useful features including physics, collision, parent/child system, and sorted rendering. Engine objects are automatically added to the global list of objects where they will be updated and rendered until destroyed. 
+LittleJS can be used as an object oriented system by extending the base class [EngineObject](https://github.com/KilledByAPixel/LittleJS/blob/main/src/engineObject.js) with your own. This lightweight class provides many useful features including physics, collision, parent/child system, and sorted rendering. These objects are added to the global list of objects where they will automatically be updated and rendered until destroyed. 
 
 Here is a template you can use to make objects that behave however you want. See the examples for a complete demonstration.
 
 ```javascript
 class MyObject extends EngineObject 
 {
-    constructor(pos, size, tileIndex, tileSize, angle)
+    constructor(pos, size, tileInfo, angle)
     {
-        super(pos, size, tileIndex, tileSize, angle);
+        super(pos, size, tileInfo, angle);
+        // setup object
     }
 
     update()
@@ -202,7 +175,7 @@ Debug builds of LittleJS have a special menu that can be opened by pressing the
 
 ## Games Made With LittleJS
 
-Here are a few of the amazing games people are making with LittleJS.
+Here are a few of the amazing games people are making with LittleJS...
 
 - [Space Huggers](https://www.newgrounds.com/portal/view/819609) - Run and gun platformer with procedural levels
 - [Undergrowth](https://undergrowth.squidband.uk/) - An interactive music videogame for the band Squid
@@ -214,13 +187,12 @@ Here are a few of the amazing games people are making with LittleJS.
 - [Necrotic Commander](https://js13kgames.com/entries/necrotic-commander) - Tower defense game by [Daniel Jeffery](https://github.com/d-jeffery/NecroticCommander)
 - [Boxing up Bamboo](https://patrickgh3.itch.io/boxing-up-bamboo) - A challenging puzzle game by [Patrick Traynor](https://cwpat.me/about)
 - [Samurai Sam](https://dev.js13kgames.com/2023/games/samurai-sam) - A Fruit Ninja inspired game by [John Edvard](https://reitgames.com)
-- Send me your games!
 
 ![LittleJS Logo](examples/favicon.png)
 
 [npm]: https://img.shields.io/npm/v/littlejsengine
 [npm-url]: https://www.npmjs.com/package/littlejsengine
-[build-size]: https://badgen.net/bundlephobia/minzip/littlejsengine?1
+[build-size]: https://img.shields.io/bundlephobia/minzip/littlejsengine
 [build-size-url]: https://bundlephobia.com/result?p=littlejsengine
 [npm-downloads]: https://img.shields.io/npm/dw/littlejsengine
 [npmtrends-url]: https://www.npmtrends.com/littlejsengine

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 */
@@ -583,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
@@ -844,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
@@ -854,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
@@ -905,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 */
@@ -1001,10 +994,64 @@ 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
@@ -1059,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
@@ -1068,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)]
@@ -1146,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
@@ -1520,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
@@ -1535,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 */
@@ -1581,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)]
@@ -1606,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
@@ -1622,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
@@ -1645,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) */
@@ -1701,11 +1744,10 @@ 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
@@ -1732,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.', '🎖️');
@@ -1747,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
@@ -1778,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;
@@ -1820,7 +1863,6 @@ declare module "littlejs.esm" {
          * @return {Object}                - The response JSON object
          */
         call(component: string, parameters?: any, async?: boolean): any;
-        CryptoJS(): any;
     }
     /**
      * LittleJS WebGL Interface
@@ -1830,6 +1872,7 @@ declare module "littlejs.esm" {
      * - 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
@@ -1844,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
@@ -1941,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;