littlejsengine 1.13.1 → 1.13.4

package/README.md

@@ -36,27 +36,28 @@ LittleJS is a small but powerful game engine with many features and no dependenc
 
 ### ✨ Graphics
 
-- Super fast sprite and tile map rendering engine with WebGL2
-- Update and render 100,000+ sprites at a solid 60fps
-- Apply [Shadertoy](https://www.shadertoy.com) compatible shaders for post-processing effects
+- Super fast WebGL2 + Canvas2D hybrid rendering
+- 100,000+ sprites at solid 60fps
+- Apply [Shadertoy](https://www.shadertoy.com) style shaders for post-processing effects
 - Robust particle effect system and [effect design tool](https://killedbyapixel.github.io/LittleJS/examples/particles/)
 
 ### 🔊 Audio
 
-- Positional sound effects with wave files, mp3s, or ZzFX
+- Positional sound effects with distance falloff
 - Use [ZzFX](https://killedbyapixel.github.io/ZzFX/) sound effect generator to play sounds without asset files
-- Music with mp3, ogg, wave, or [ZzFXM](https://keithclark.github.io/ZzFXM/)
+- Music and sound with mp3, ogg, wave, or [ZzFXM](https://keithclark.github.io/ZzFXM/)
 
 ### 🎮 Input
 
 - Comprehensive input handling for keyboard, mouse, gamepad, and touch
+- Automatic touch mouse emulation
 - On screen touch gamepad designed for mobile devices
 
 ### 💥 Physics
 
 - Robust arcade physics system with collision handling
-- Very fast collision and raycasting for tile maps
-- Full Box2d support using [super fast wasm build of box2d.js](https://github.com/kripken/box2d.js/)
+- Box2d fully integrated for more realistic physics
+- Tilemap collision with raycasting
 
 ### 🚀 Flexibility
 
@@ -65,11 +66,12 @@ LittleJS is a small but powerful game engine with many features and no dependenc
 - Ideal for size coding competitions like [Js13kGames](https://js13kgames.com/)
 - 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...
+### 🛠️ Developer Tools
 
-- Node.js build system
-- 2D vector math library
+- Live example browser with code editor
 - Debug primitive rendering system
+- Screenshot and video capture tools
+- Node.js build system
 - Bitmap font rendering and built in engine font
 - Medal tracking system with [Newgrounds](https://www.newgrounds.com/) support
 
@@ -119,8 +121,9 @@ The starter example project includes a node js file [build.js](https://github.co
 Here are a few of the many amazing games created with LittleJS...
 
 - [Space Huggers](https://www.newgrounds.com/portal/view/819609) - Rogulike platformer shoot-em-up game with procedural levels. by [KilledByAPixel](https://frankforce.com/)
-- [Undergrowth](https://undergrowth.squidband.uk/) - An interactive music videogame for the band Squid. by [KilledByAPixel](https://frankforce.com/)
+- [L1ttl3 Paws](https://github.com/KilledByAPixel/JS13K2025) - Cat glider with procedural art and levels for JS13K! by [KilledByAPixel](https://frankforce.com/)
 - [The Way of the Dodo](https://js13kgames.com/2024/games/the-way-of-the-dodo) - Single button platformer. JS13k 5th place winner! by [repsej](https://github.com/repsej)
+- [Undergrowth](https://undergrowth.squidband.uk/) - An interactive music videogame for the band Squid. by [KilledByAPixel](https://frankforce.com/)
 - [204Snake!](https://www.newgrounds.com/portal/view/960100) - A puzzle game that combines 2048 with snake. LittleJS Jam 1st place winner! by [Sodoj](https://sodoj.itch.io/) and [Shai-P](https://shai-p.itch.io/)
 - [GATOR](https://www.newgrounds.com/portal/view/960757) - Retro platformer shooter game where you rescue animals. LittleJS Jam 2nd place winner! by [eoinmcg](https://eoinmcg.itch.io/)
 - [A Hedgehog's search](https://willsm1111.itch.io/a-hedgehogs-search) - Adventure game staring a hedgehog. LittleJS Jam 3rd place winner! by [willsm1111](https://willsm1111.itch.io/)
@@ -142,4 +145,4 @@ Here are a few of the many amazing games created with LittleJS...
 [deepscan]: https://deepscan.io/api/teams/22950/projects/26229/branches/831487/badge/grade.svg
 [deepscan-url]: https://deepscan.io/dashboard#view=project&tid=22950&pid=26229&bid=831487
 [discord]: https://img.shields.io/discord/939926111469568050
-[discord-url]: https://discord.gg/zb7hcGkyZe
+[discord-url]: https://discord.gg/zb7hcGkyZe

package/dist/littlejs.d.ts

@@ -262,6 +262,12 @@ declare module "littlejsengine" {
      *  @default
      *  @memberof Settings */
     export let cameraScale: number;
+    /** Enable applying color to tiles when using canvas2d
+     *  - This is slower but should be the same as webgl rendering
+     *  @type {boolean}
+     *  @default
+     *  @memberof Settings */
+    export let canvasColorTiles: boolean;
     /** The max size of the canvas, centered if window is larger
      *  @type {Vector2}
      *  @default Vector2(1920,1080)
@@ -273,13 +279,19 @@ declare module "littlejsengine" {
      *  @default Vector2()
      *  @memberof Settings */
     export let canvasFixedSize: Vector2;
-    /** Use nearest neighbor canvas scaling for more pixelated look
-     *  - Must be set before startup to take effect
+    /** Use nearest canvas scaling for more pixelated look
      *  - If enabled sets css image-rendering:pixelated
      *  @type {boolean}
      *  @default
      *  @memberof Settings */
     export let canvasPixelated: boolean;
+    /** Use nearest canvas scaling for more pixelated look
+     *  - If enabled sets css image-rendering:pixelated
+     *  - This defaults to false because text looks better with smoothing
+     *  @type {boolean}
+     *  @default
+     *  @memberof Settings */
+    export let overlayCanvasPixelated: boolean;
     /** Disables texture filtering for crisper pixel art
      *  @type {boolean}
      *  @default
@@ -451,6 +463,13 @@ declare module "littlejsengine" {
      *  @param {number} scale
      *  @memberof Settings */
     export function setCameraScale(scale: number): void;
+    /** Set if tiles should be colorized when using canvas2d
+     *  This can be slower but results should look nearly identical to webgl rendering
+     *  It can be enabled/disabled at any time
+     *  Optimized for performance, and will use faster method if color is white or untextured
+     *  @param {boolean} colorTiles
+     *  @memberof Settings */
+    export function setCanvasColorTiles(colorTiles: boolean): void;
     /** Set max size of the canvas
      *  @param {Vector2} size
      *  @memberof Settings */
@@ -459,10 +478,17 @@ declare module "littlejsengine" {
      *  @param {Vector2} size
      *  @memberof Settings */
     export function setCanvasFixedSize(size: Vector2): void;
-    /** Use nearest neighbor scaling algorithm for canvas for more pixelated look
+    /** Use nearest scaling algorithm for canvas for more pixelated look
+     *  - If enabled sets css image-rendering:pixelated
      *  @param {boolean} pixelated
      *  @memberof Settings */
     export function setCanvasPixelated(pixelated: boolean): void;
+    /** Use nearest scaling algorithm for canvas for more pixelated look
+     *  - If enabled sets css image-rendering:pixelated
+     *  - This defaults to false because text looks better with smoothing
+     *  @param {boolean} pixelated
+     *  @memberof Settings */
+    export function setOverlayCanvasPixelated(pixelated: boolean): void;
     /** Disables texture filtering for crisper pixel art
      *  @param {boolean} pixelated
      *  @memberof Settings */
@@ -703,10 +729,11 @@ declare module "littlejsengine" {
      *  @memberof Utilities */
     export function nearestPowerOfTwo(value: number): number;
     /** Returns true if two axis aligned bounding boxes are overlapping
+     *  this can be used for simple collision detection between objects
      *  @param {Vector2} posA          - Center of box A
      *  @param {Vector2} sizeA         - Size of box A
      *  @param {Vector2} posB          - Center of box B
-     *  @param {Vector2} [sizeB=(0,0)] - Size of box B, a point if undefined
+     *  @param {Vector2} [sizeB=(0,0)] - Size of box B, uses a point if undefined
      *  @return {boolean}              - True if overlapping
      *  @memberof Utilities */
     export function isOverlapping(posA: Vector2, sizeA: Vector2, posB: Vector2, sizeB?: Vector2): boolean;
@@ -722,9 +749,10 @@ declare module "littlejsengine" {
      *  @param {number} [frequency] - Frequency of the wave in Hz
      *  @param {number} [amplitude] - Amplitude (max height) of the wave
      *  @param {number} [t=time]    - Value to use for time of the wave
+     *  @param {number} [offset]    - Value to use for time offset of the wave
      *  @return {number}            - Value waving between 0 and amplitude
      *  @memberof Utilities */
-    export function wave(frequency?: number, amplitude?: number, t?: number): number;
+    export function wave(frequency?: number, amplitude?: number, t?: number, offset?: number): number;
     /** Formats seconds to mm:ss style for display purposes
      *  @param {number} t - time in seconds
      *  @return {string}
@@ -1126,6 +1154,20 @@ declare module "littlejsengine" {
      * @memberof Utilities
      */
     export function isColor(c: any): boolean;
+    /**
+     * Check if object is a valid Vector2
+     * @param {any} v
+     * @return {boolean}
+     * @memberof Utilities
+     */
+    export function isVector2(v: any): boolean;
+    /**
+     * Check if object is a valid number, not NaN or undefined, but it may be infinite
+     * @param {any} n
+     * @return {boolean}
+     * @memberof Utilities
+     */
+    export function isNumber(n: any): boolean;
     /** Color - White #ffffff
      *  @type {Color}
      *  @memberof Utilities */
@@ -1186,10 +1228,10 @@ declare module "littlejsengine" {
      * Create a tile info object using a grid based system
      * - 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 {Vector2|number} [pos=0]                - Index of tile in sheet
+     * @param {Vector2|number} [pos=0] - Index of tile in sheet
      * @param {Vector2|number} [size=tileSizeDefault] - Size of tile in pixels
-     * @param {number} [textureIndex]                   - Texture index to use
-     * @param {number} [padding]                        - How many pixels padding around tiles
+     * @param {number} [textureIndex] - Texture index to use
+     * @param {number} [padding] - How many pixels padding around tiles
      * @return {TileInfo}
      * @example
      * tile(2)                       // a tile at index 2 using the default tile size of 16
@@ -1326,7 +1368,7 @@ declare module "littlejsengine" {
      *  @param {Color}   [color=(1,1,1,1)]
      *  @param {number}  [angle]
      *  @param {boolean} [useWebGL=glEnable]
-     *  @param {boolean} [screenSpace=false]
+     *  @param {boolean} [screenSpace]
      *  @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;
@@ -1335,42 +1377,48 @@ declare module "littlejsengine" {
      *  @param {Vector2} posB
      *  @param {number}  [thickness]
      *  @param {Color}   [color=(1,1,1,1)]
+     *  @param {Vector2} [pos=(0,0)] - Offset to apply
+     *  @param {number}  [angle] - Angle to rotate by
      *  @param {boolean} [useWebGL=glEnable]
-     *  @param {boolean} [screenSpace=false]
+     *  @param {boolean} [screenSpace]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
-    export function drawLine(posA: Vector2, posB: Vector2, thickness?: number, color?: Color, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    export function drawLine(posA: Vector2, posB: Vector2, thickness?: 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 {Array<Vector2>} points - Array of Vector2 points
      *  @param {Color}   [color=(1,1,1,1)]
-     *  @param {number}  [lineWidth=0]
+     *  @param {number}  [lineWidth]
      *  @param {Color}   [lineColor=(0,0,0,1)]
-     *  @param {boolean} [screenSpace=false]
+     *  @param {Vector2} [pos=(0,0)] - Offset to apply
+     *  @param {number}  [angle] - Angle to rotate by
+     *  @param {boolean} [useWebGL] - Webgl not supported
+     *  @param {boolean} [screenSpace]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      *  @memberof Draw */
-    export function drawPoly(points: Array<Vector2>, color?: Color, lineWidth?: number, lineColor?: Color, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    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 {number}  [width=1]
-     *  @param {number}  [height=1]
-     *  @param {number}  [angle=0]
+     *  @param {Vector2} [size=(1,1)]
      *  @param {Color}   [color=(1,1,1,1)]
-     *  @param {number}  [lineWidth=0]
+     *  @param {number}  [angle]
+     *  @param {number}  [lineWidth]
      *  @param {Color}   [lineColor=(0,0,0,1)]
-     *  @param {boolean} [screenSpace=false]
+     *  @param {boolean} [useWebGL] - Webgl not supported
+     *  @param {boolean} [screenSpace]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      *  @memberof Draw */
-    export function drawEllipse(pos: Vector2, width?: number, height?: number, angle?: number, color?: Color, lineWidth?: number, lineColor?: Color, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    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 {Color}   [color=(1,1,1,1)]
      *  @param {number}  [lineWidth=0]
      *  @param {Color}   [lineColor=(0,0,0,1)]
+     *  @param {boolean} [useWebGL] - Webgl not supported
      *  @param {boolean} [screenSpace=false]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=drawContext]
      *  @memberof Draw */
-    export function drawCircle(pos: Vector2, radius?: number, color?: Color, lineWidth?: number, lineColor?: Color, screenSpace?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    export function drawCircle(pos: Vector2, radius?: 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
@@ -1424,10 +1472,9 @@ declare module "littlejsengine" {
     export function drawTextScreen(text: string, pos: Vector2, size?: number, color?: Color, lineWidth?: number, lineColor?: Color, textAlign?: CanvasTextAlign, font?: string, maxWidth?: number, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Enable normal or additive blend mode
      *  @param {boolean} [additive]
-     *  @param {boolean} [useWebGL=glEnable]
      *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
      *  @memberof Draw */
-    export function setBlendMode(additive?: boolean, useWebGL?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
+    export function setBlendMode(additive?: boolean, context?: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void;
     /** Combines all LittleJS canvases onto the main canvas and clears them
      *  This is necessary for things like saving a screenshot
      *  @memberof Draw */
@@ -1490,12 +1537,13 @@ declare module "littlejsengine" {
     /**
      * LittleJS WebGL Interface
      * - All webgl used by the engine is wrapped up here
+     * - Will fall back to 2D canvas rendering if webgl is not supported
      * - 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
+     * - Supports shadertoy style post processing shaders via plugin
      * @namespace WebGL
      */
     /** The WebGL canvas which appears above the main canvas and below the overlay canvas
@@ -2972,42 +3020,10 @@ declare module "littlejsengine" {
          *  @param {Vector2} pos
          *  @param {number} angle
          *  @param {Color} [color]
-         *  @param {Color} [outlineColor]
-         *  @param {number} [lineWidth]
-         *  @param {CanvasRenderingContext2D} [context] */
-        drawFixture(fixture: any, pos: Vector2, angle: number, color?: Color, outlineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
-        /** draws a circle
-         *  @param {Vector2} pos
-         *  @param {number} radius
-         *  @param {Color} [color]
-         *  @param {Color} [outlineColor]
-         *  @param {number} [lineWidth]
-         *  @param {CanvasRenderingContext2D} [context] */
-        drawCircle(pos: Vector2, radius: number, color?: Color, outlineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
-        /** draws a polygon
-         *  @param {Vector2} pos
-         *  @param {number} angle
-         *  @param {Array<Vector2>} points
-         *  @param {Color} [color]
-         *  @param {Color} [outlineColor]
+         *  @param {Color} [lineColor]
          *  @param {number} [lineWidth]
          *  @param {CanvasRenderingContext2D} [context] */
-        drawPoly(pos: Vector2, angle: number, points: Array<Vector2>, color?: Color, outlineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
-        /** draws a line
-         *  @param {Vector2} pos
-         *  @param {number} angle
-         *  @param {Vector2} posA
-         *  @param {Vector2} posB
-         *  @param {Color} [color]
-         *  @param {number} [lineWidth]
-         *  @param {CanvasRenderingContext2D} [context] */
-        drawLine(pos: Vector2, angle: number, posA: Vector2, posB: Vector2, color?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
-        /** performs a fill or stroke as a helper to the other draw functions
-         *  @param {Color} [color]
-         *  @param {Color} [outlineColor]
-         *  @param {number} [lineWidth]
-         *  @param {CanvasRenderingContext2D} [context] */
-        drawFillStroke(color?: Color, outlineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
+        drawFixture(fixture: any, pos: Vector2, angle: number, color?: Color, lineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
         /** converts a box2d vec2 to a Vector2
          *  @param {Object} v */
         vec2From(v: any): Vector2;
@@ -3042,13 +3058,13 @@ declare module "littlejsengine" {
          *  @param {number}   [renderOrder] */
         constructor(pos?: Vector2, size?: Vector2, tileInfo?: TileInfo, angle?: number, color?: Color, bodyType?: number, renderOrder?: number);
         body: any;
-        outlineColor: Color;
+        lineColor: Color;
         /** Draws all this object's fixtures
          *  @param {Color}  [color]
-         *  @param {Color}  [outlineColor]
+         *  @param {Color}  [lineColor]
          *  @param {number} [lineWidth]
          *  @param {CanvasRenderingContext2D} [context] */
-        drawFixtures(color?: Color, outlineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
+        drawFixtures(color?: Color, lineColor?: Color, lineWidth?: number, context?: CanvasRenderingContext2D): void;
         /** Called when a contact begins
          *  @param {Box2dObject} otherObject */
         beginContact(otherObject: Box2dObject): void;
@@ -3797,14 +3813,15 @@ declare module "littlejsengine" {
      *  @param {Vector2} size - World space size
      *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
      *  @param {Color} [color] - Color to modulate with
-     *  @param {number} [borderSize=1] - Width of the border sections
+     *  @param {number} [borderSize] - Width of the border sections
      *  @param {Color} [additiveColor] - Additive color
-     *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+     *  @param {number} [extraSpace] - Extra spacing adjustment
+     *  @param {number} [angle] - Angle to rotate by
      *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
      *  @param {boolean} [screenSpace] - Use screen space coordinates
      *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
      *  @memberof DrawUtilities */
-    export function drawNineSlice(pos: Vector2, size: Vector2, startTile: TileInfo, color?: Color, borderSize?: number, additiveColor?: Color, extraSpace?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D): void;
+    export function drawNineSlice(pos: Vector2, size: Vector2, startTile: TileInfo, color?: Color, borderSize?: number, additiveColor?: Color, extraSpace?: number, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D): void;
     /**
      * LittleJS Drawing Utilities Plugin
      * - Extra drawing functions for LittleJS
@@ -3816,31 +3833,34 @@ declare module "littlejsengine" {
      *  @param {Vector2} pos - Screen space position
      *  @param {Vector2} size - Screen space size
      *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
-     *  @param {number} [borderSize=1] - Width of the border sections
-     *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+     *  @param {number} [borderSize] - Width of the border sections
+     *  @param {number} [extraSpace] - Extra spacing adjustment
+     *  @param {number} [angle] - Angle to rotate by
      *  @memberof DrawUtilities */
-    export function drawNineSliceScreen(pos: Vector2, size: Vector2, startTile: TileInfo, borderSize?: number, extraSpace?: number): void;
+    export function drawNineSliceScreen(pos: Vector2, size: Vector2, startTile: TileInfo, borderSize?: number, extraSpace?: number, angle?: number): void;
     /** Draw a scalable three-slice UI element in world space
      *  This function can apply color and additive color if webgl is enabled
      *  @param {Vector2} pos - World space position
      *  @param {Vector2} size - World space size
      *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
      *  @param {Color} [color] - Color to modulate with
-     *  @param {number} [borderSize=1] - Width of the border sections
+     *  @param {number} [borderSize] - Width of the border sections
      *  @param {Color} [additiveColor] - Additive color
-     *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+     *  @param {number} [extraSpace] - Extra spacing adjustment
+     *  @param {number} [angle] - Angle to rotate by
      *  @param {boolean} [useWebGL=glEnable] - Use WebGL for rendering
      *  @param {boolean} [screenSpace] - Use screen space coordinates
      *  @param {CanvasRenderingContext2D} [context] - Canvas context to use
      *  @memberof DrawUtilities */
-    export function drawThreeSlice(pos: Vector2, size: Vector2, startTile: TileInfo, color?: Color, borderSize?: number, additiveColor?: Color, extraSpace?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D): void;
+    export function drawThreeSlice(pos: Vector2, size: Vector2, startTile: TileInfo, color?: Color, borderSize?: number, additiveColor?: Color, extraSpace?: number, angle?: number, useWebGL?: boolean, screenSpace?: boolean, context?: CanvasRenderingContext2D): void;
     /** Draw a scalable three-slice UI element to the overlay canvas in screen space
      *  This function can not apply color because it draws using the overlay 2d context
      *  @param {Vector2} pos - Screen space position
      *  @param {Vector2} size - Screen space size
      *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
-     *  @param {number} [borderSize=1] - Width of the border sections
-     *  @param {number} [extraSpace=.01] - Extra spacing adjustment
+     *  @param {number} [borderSize] - Width of the border sections
+     *  @param {number} [extraSpace] - Extra spacing adjustment
+     *  @param {number} [angle] - Angle to rotate by
      *  @memberof DrawUtilities */
-    export function drawThreeSliceScreen(pos: Vector2, size: Vector2, startTile: TileInfo, borderSize?: number, extraSpace?: number): void;
+    export function drawThreeSliceScreen(pos: Vector2, size: Vector2, startTile: TileInfo, borderSize?: number, extraSpace?: number, angle?: number): void;
 }