littlejsengine 1.14.2 → 1.14.5

package/README.md

@@ -1,6 +1,6 @@
 # LittleJS - The Tiny Fast JavaScript Game Engine
 
-<div align="center">
+<div align='center'>
     
 ![LittleJS Screenshot](examples/logo.png)
 
@@ -22,7 +22,7 @@ The code is clean and well documented with some fun examples to get you started
 
 *The Second Annual LittleJS Game Jam will take place From Oct 3 to Nov 3! Unleash your creativity and develop amazing games using the LittleJS game engine. 🕹️🎮 [Sign up today and get more info about the jam on itch.io!](https://itch.io/jam/littlejs-game-jam-2025)*
 
-<div align="center">
+<div align='center'>
 
 ## [Demos](https://killedbyapixel.github.io/LittleJS/examples) | [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) | [FAQ](https://github.com/KilledByAPixel/LittleJS/blob/main/FAQ.md)
 
@@ -80,7 +80,7 @@ LittleJS is a small but powerful game engine with many features and no dependenc
 
 To get started download the latest LittleJS package from GitHub or install via npm: ```npm install littlejsengine```
 
-*You need to run a local web server to run LittleJS games during development!* You may see a console error like "The image element contains cross-origin data." Don't panic, it's easy to fix! If you are using [Visual Studio Code](https://code.visualstudio.com/) there is a [Live Preview Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) that will handle this for you automatically. Another option is to setup a simple local web server like [http-server](https://www.npmjs.com/package/http-server) via npm.
+*You need to run a local web server to run LittleJS games during development!* You may see a console error like 'The image element contains cross-origin data.' Don't panic, it's easy to fix! If you are using [Visual Studio Code](https://code.visualstudio.com/) there is a [Live Preview Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) that will handle this for you automatically. Another option is to setup a simple local web server like [http-server](https://www.npmjs.com/package/http-server) via npm.
 
 - [Watch this GitNation talk](https://youtu.be/_dXKU0WgAj8?si=ZDXLYAFDWp54hrGT) to hear more about LittleJS works and get some tips on how to use it.
 - Learn how to make a simple game from scratch with [The Breakout Tutorial.](https://github.com/KilledByAPixel/LittleJS/tree/main/examples/breakoutTutorial)

package/dist/littlejs.d.ts

@@ -168,12 +168,12 @@ declare module "littlejsengine" {
     export function debugPoly(pos: Vector2, points: Array<Vector2>, color?: string, time?: number, angle?: number, fill?: boolean): void;
     /** Draw a debug circle in world space
      *  @param {Vector2} pos
-     *  @param {number}  [radius]
+     *  @param {number}  [size] - diameter
      *  @param {string}  [color]
      *  @param {number}  [time]
      *  @param {boolean} [fill]
      *  @memberof Debug */
-    export function debugCircle(pos: Vector2, radius?: number, color?: string, time?: number, fill?: boolean): void;
+    export function debugCircle(pos: Vector2, size?: number, color?: string, time?: number, fill?: boolean): void;
     /** Draw a debug point in world space
      *  @param {Vector2} pos
      *  @param {string}  [color]
@@ -185,10 +185,10 @@ declare module "littlejsengine" {
      *  @param {Vector2} posA
      *  @param {Vector2} posB
      *  @param {string}  [color]
-     *  @param {number}  [thickness]
+     *  @param {number}  [width]
      *  @param {number}  [time]
      *  @memberof Debug */
-    export function debugLine(posA: Vector2, posB: Vector2, color?: string, thickness?: number, time?: number): void;
+    export function debugLine(posA: Vector2, posB: Vector2, color?: string, width?: number, time?: number): void;
     /** Draw a debug combined axis aligned bounding box in world space
      *  @param {Vector2} posA
      *  @param {Vector2} sizeA
@@ -1216,6 +1216,10 @@ declare module "littlejsengine" {
      *  @type {Array<TextureInfo>}
      *  @memberof Draw */
     export let textureInfos: Array<TextureInfo>;
+    /** Keeps track of how many draw calls there were each frame for debugging
+     *  @type {number}
+     *  @memberof Draw */
+    export let drawCount: number;
     /**
      * Create a tile info object using a grid based system
      * - This can take vecs or floats for easier use and conversion
@@ -1318,6 +1322,14 @@ declare module "littlejsengine" {
      *  @type {CanvasRenderingContext2D}
      *  @memberof Draw */
     export let mainContext: CanvasRenderingContext2D;
+    /** The default canvas to use for drawing, usually mainCanvas
+     *  @type {HTMLCanvasElement|OffscreenCanvas}
+     *  @memberof Draw */
+    export let drawCanvas: HTMLCanvasElement | OffscreenCanvas;
+    /** The default 2d context to use for drawing, usually mainContext
+     *  @type {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D}
+     *  @memberof Draw */
+    export let drawContext: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
     /** A canvas that appears on top of everything the same size as mainCanvas
      *  @type {HTMLCanvasElement}
      *  @memberof Draw */
@@ -1363,10 +1375,33 @@ declare module "littlejsengine" {
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
     export function drawRect(pos: Vector2, size?: Vector2, color?: Color, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    /** Draw a rect centered on pos with a gradient from top to bottom
+     *  @param {Vector2} pos
+     *  @param {Vector2} [size=(1,1)]
+     *  @param {Color}   [colorTop=(1,1,1,1)]
+     *  @param {Color}   [colorBottom=(0,0,0,1)]
+     *  @param {number}  [angle]
+     *  @param {boolean} [useWebGL=glEnable]
+     *  @param {boolean} [screenSpace]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+     *  @memberof Draw */
+    export function drawRectGradient(pos: Vector2, size?: Vector2, colorTop?: Color, colorBottom?: Color, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    /** Draw connected lines between a series of points
+     *  @param {Array<Vector2>} points
+     *  @param {number}  [width]
+     *  @param {Color}   [color=(1,1,1,1)]
+     *  @param {boolean} [wrap] - Should the last point connect to the first?
+     *  @param {Vector2} [pos=(0,0)] - Offset to apply
+     *  @param {number}  [angle] - Angle to rotate by
+     *  @param {boolean} [useWebGL=glEnable]
+     *  @param {boolean} [screenSpace]
+     *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
+     *  @memberof Draw */
+    export function drawLineList(points: Array<Vector2>, width?: number, color?: Color, wrap?: boolean, pos?: Vector2, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw colored line between two points
      *  @param {Vector2} posA
      *  @param {Vector2} posB
-     *  @param {number}  [thickness]
+     *  @param {number}  [width]
      *  @param {Color}   [color=(1,1,1,1)]
      *  @param {Vector2} [pos=(0,0)] - Offset to apply
      *  @param {number}  [angle] - Angle to rotate by
@@ -1374,7 +1409,7 @@ declare module "littlejsengine" {
      *  @param {boolean} [screenSpace]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
-    export function drawLine(posA: Vector2, posB: Vector2, thickness?: number, color?: Color, pos?: Vector2, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    export function drawLine(posA: Vector2, posB: Vector2, width?: number, color?: Color, pos?: Vector2, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw colored polygon using passed in points
      *  @param {Array<Vector2>} points - Array of Vector2 points
      *  @param {Color}   [color=(1,1,1,1)]
@@ -1389,7 +1424,7 @@ declare module "littlejsengine" {
     export function drawPoly(points: Array<Vector2>, color?: Color, lineWidth?: number, lineColor?: Color, pos?: Vector2, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw colored ellipse using passed in point
      *  @param {Vector2} pos
-     *  @param {Vector2} [size=(1,1)]
+     *  @param {Vector2} [size=(1,1)] - Width and height diameter
      *  @param {Color}   [color=(1,1,1,1)]
      *  @param {number}  [angle]
      *  @param {number}  [lineWidth]
@@ -1401,7 +1436,7 @@ declare module "littlejsengine" {
     export function drawEllipse(pos: Vector2, size?: Vector2, color?: Color, angle?: number, lineWidth?: number, lineColor?: Color, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw colored circle using passed in point
      *  @param {Vector2} pos
-     *  @param {number}  [radius=1]
+     *  @param {number}  [size=1] - Diameter
      *  @param {Color}   [color=(1,1,1,1)]
      *  @param {number}  [lineWidth=0]
      *  @param {Color}   [lineColor=(0,0,0,1)]
@@ -1409,7 +1444,7 @@ declare module "littlejsengine" {
      *  @param {boolean} [screenSpace]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
-    export function drawCircle(pos: Vector2, radius?: number, color?: Color, lineWidth?: number, lineColor?: Color, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    export function drawCircle(pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Draw directly to a 2d canvas context in world space
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
@@ -1481,7 +1516,7 @@ declare module "littlejsengine" {
      * const font = new FontImage;
      *
      * // draw text
-     * font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
+     * font.drawTextScreen('LittleJS\nHello World!', vec2(200, 50));
      */
     export class FontImage {
         /** Create an image font
@@ -1614,7 +1649,7 @@ declare module "littlejsengine" {
      *  @memberof WebGL */
     export function glDraw(x: number, y: number, sizeX: number, sizeY: number, angle?: number, uv0X?: number, uv0Y?: number, uv1X?: number, uv1Y?: number, rgba?: number, rgbaAdditive?: number): void;
     /** Transform and add a polygon to the gl draw list
-     *  @param {Array} points - Array of Vector2 points
+     *  @param {Array<Vector2>} points - Array of Vector2 points
      *  @param {number} rgba - Color of the polygon as a 32-bit integer
      *  @param {number} x
      *  @param {number} y
@@ -1623,9 +1658,9 @@ declare module "littlejsengine" {
      *  @param {number} angle
      *  @param {boolean} [tristrip] - should tristrip algorithm be used
      *  @memberof WebGL */
-    export function glDrawPointsTransform(points: any[], rgba: number, x: number, y: number, sx: number, sy: number, angle: number, tristrip?: boolean): void;
+    export function glDrawPointsTransform(points: Array<Vector2>, rgba: number, x: number, y: number, sx: number, sy: number, angle: number, tristrip?: boolean): void;
     /** Transform and add a polygon to the gl draw list
-     *  @param {Array} points - Array of Vector2 points
+     *  @param {Array<Vector2>} points - Array of Vector2 points
      *  @param {number} rgba - Color of the polygon as a 32-bit integer
      *  @param {number} lineWidth - Width of the outline
      *  @param {number} x
@@ -1633,13 +1668,19 @@ declare module "littlejsengine" {
      *  @param {number} sx
      *  @param {number} sy
      *  @param {number} angle
+     *  @param {boolean} [wrap] - Should the outline connect the first and last points
      *  @memberof WebGL */
-    export function glDrawOutlineTransform(points: any[], rgba: number, lineWidth: number, x: number, y: number, sx: number, sy: number, angle: number): void;
-    /** Add a polygon to the gl draw list
-     *  @param {Array} points - Array of Vector2 points in triangle strip order
-     *  @param {number} rgba - Color of the polygon as a 32-bit integer
+    export function glDrawOutlineTransform(points: Array<Vector2>, rgba: number, lineWidth: number, x: number, y: number, sx: number, sy: number, angle: number, wrap?: boolean): void;
+    /** Add a list of points to the gl draw list
+     *  @param {Array<Vector2>} points - Array of Vector2 points in tri strip order
+     *  @param {number} rgba - Color as a 32-bit integer
+     *  @memberof WebGL */
+    export function glDrawPoints(points: Array<Vector2>, rgba: number): void;
+    /** Add a list of colored points to the gl draw list
+     *  @param {Array<Vector2>} points - Array of Vector2 points in tri strip order
+     *  @param {Array<number>} pointColors - Array of 32-bit integer colors
      *  @memberof WebGL */
-    export function glDrawPoints(points: any[], rgba: number): void;
+    export function glDrawColoredPoints(points: Array<Vector2>, pointColors: Array<number>): void;
     /** Should WebGL be setup with anti-aliasing? must be set before calling engineInit
      *  @type {boolean}
      *  @memberof WebGL */
@@ -2209,7 +2250,6 @@ declare module "littlejsengine" {
      * - Caches arrays of tiles to off screen canvas for fast rendering
      * - Unlimited numbers of layers, allocates canvases as needed
      * - Tile layers can be drawn to using their context with canvas2d
-     * - Drawn directly to the main canvas without using WebGL
      * - Tile layers can also have collision with EngineObjects
      * @namespace TileCollision
      */