melonjs 15.0.0 → 15.1.0

package/dist/types/renderable/ui/uitextbutton.d.ts

@@ -5,25 +5,27 @@
  */
 export default class UITextButton extends UIBaseElement {
     /**
-     * A Text Button with an outlined background border, filled with background color.
+     * A Bitmap Text Button with an outlined background border, filled with background color.
      * It uses a RoundRect as background and changes the background color on hovering over.
      * The background will be drawn with 0.5 opacity, so that the background of the button is
      * slightly shining through.
      * @param {number} x - x pos of the button
      * @param {number} y - y pos of the button
      * @param {string} [settings.font] - The name of the BitmapText font to use
-     * @param {number} [settings.size] - The scale factor of the font (default: 1)
-     * @param {string} [settings.text] - The text to display (default: 'click me')
+     * @param {number} [settings.size=1] - The scale factor of the BitmapText
+     * @param {string} [settings.text] - The text to display
      * @param {string} [settings.bindKey] - The key to bind the action to (default: none)
-     * @param {string} [settings.backgroundColor] - The css value of a background color
-     * @param {string} [settings.hoverColor] - The css value of a color to be used if the pointer hovers over the button
-     * @param {string} [settings.borderStrokeColor] - The css value of a color to be used to draw the border
-     * @param {string} [settings.fillStyle] - The css value of a tint color to be used to tint the text
+     * @param {string} [settings.backgroundColor="#00aa0080"] - The css value of a background color
+     * @param {string} [settings.hoverColor="#00ff00ff"] - The css value of a color to be used if the pointer hovers over the button
+     * @param {string} [settings.borderStrokeColor="#000000"] - The css value of a color to be used to draw the border
+     * @param {string} [settings.fillStyle] - The css value of a tint color to be used to tint the BitmapText
+     * @param {string} [settings.textAlign="center"] - horizontal text alignment
+     * @param {string} [settings.textBaseline="middle"] - the text baseline
      * @param {number} [settings.borderWidth] - Width of the button
      * @param {number} [settings.borderHeight] - Height of the button
      * @example
      * // Create a new Button
-     * class PlayButton extends BaseTextButton {
+     * class PlayButton extends UITextButton {
      *      constructor(x,y) {
      *          super(x,y, {
      *              font: 'my-font',
@@ -39,13 +41,52 @@ export default class UITextButton extends UIBaseElement {
      *      }
      * }
      *
-     * game.world.addChild(new PlayButton(15,200));
+     * world.addChild(new PlayButton(15,200));
      */
     constructor(x: number, y: number, settings: any);
-    font: BitmapText;
+    /**
+     * The key to bind the action to
+     * @type {string}
+     */
+    bindKey: string;
+    /**
+     * The css value of a background color
+     * @type {string}
+     */
+    backgroundColor: string;
+    /**
+     * The css value of a color to be used if the pointer hovers over the button
+     * @type {string}
+     */
+    hoverColor: string;
+    /**
+     * The css value of a color to be used to draw the border
+     * @type {string}
+     */
+    borderStrokeColor: string;
+    /**
+     * Set the default text alignment (or justification),<br>
+     * possible values are "left", "right", and "center".
+     * @public
+     * @type {string}
+     * @default "center"
+     */
+    public textAlign: string;
+    /**
+     * Set the text baseline (e.g. the Y-coordinate for the draw operation), <br>
+     * possible values are "top", "hanging, "middle, "alphabetic, "ideographic, "bottom"<br>
+     * @public
+     * @type {string}
+     * @default "middle"
+     */
+    public textBaseline: string;
+    /**
+     * the bitmapText used by the UITextButton class
+     * @type {BitmapText}
+     */
+    bitmapText: BitmapText;
     dimensions: import("../../text/textmetrics.js").default;
     border: RoundRect;
-    settings: any;
     draw(renderer: any): void;
 }
 import UIBaseElement from "./uibaseelement.js";

package/dist/types/state/stage.d.ts

@@ -38,7 +38,7 @@ export default class Stage {
      * @see Stage.ambientLight
      * @example
      * // create a white spot light
-     * var whiteLight = new me.Light2d(0, 0, 140, "#fff", 0.7);
+     * let whiteLight = new me.Light2d(0, 0, 140, "#fff", 0.7);
      * // and add the light to this current stage
      * this.lights.set("whiteLight", whiteLight);
      * // set a dark ambient light

package/dist/types/system/device.d.ts

@@ -10,7 +10,7 @@ export function onDeviceRotate(e: any): void;
 * @param {Function} fn - the function to be executed
 * @example
 * // small game skeleton
-* var game = {
+* let game = {
 *    // called by the me.device.onReady function
 *    onload = function () {
 *       // init video

package/dist/types/system/pooling.d.ts

@@ -1,5 +1,5 @@
 export default pool;
-declare var pool: ObjectPool;
+declare let pool: ObjectPool;
 /**
  * @classdesc
  * Object pooling - a technique that might speed up your game if used properly.<br>
@@ -46,11 +46,11 @@ declare class ObjectPool {
      * me.pool.register("enemy", EnemyEntity, true);
      * // ...
      * // when we need to manually create a new bullet:
-     * var bullet = me.pool.pull("bullet", x, y, direction);
+     * let bullet = me.pool.pull("bullet", x, y, direction);
      * // ...
      * // params aren't a fixed number
      * // when we need new enemy we can add more params, that the object construct requires:
-     * var enemy = me.pool.pull("enemy", x, y, direction, speed, power, life);
+     * let enemy = me.pool.pull("enemy", x, y, direction, speed, power, life);
      * // ...
      * // when we want to destroy existing object, the remove
      * // function will ensure the object can then be reallocated later

package/dist/types/system/timer.d.ts

@@ -60,7 +60,7 @@ declare class Timer {
      * @param {number} delay - the number of milliseconds (thousandths of a second) that the function call should be delayed by.
      * @param {boolean} [pauseable=true] - respects the pause state of the engine.
      * @param {...*} args - optional parameters which are passed through to the function specified by fn once the timer expires.
-     * @returns {number} The numerical ID of the timer, which can be used later with me.timer.clearTimeout().
+     * @returns {number} a positive integer value which identifies the timer created by the call to setTimeout(), which can be used later with me.timer.clearTimeout().
      * @example
      * // set a timer to call "myFunction" after 1000ms
      * me.timer.setTimeout(myFunction, 1000);
@@ -74,7 +74,7 @@ declare class Timer {
      * @param {number} delay - the number of milliseconds (thousandths of a second) on how often to execute the function
      * @param {boolean} [pauseable=true] - respects the pause state of the engine.
      * @param {...*} args - optional parameters which are passed through to the function specified by fn once the timer expires.
-     * @returns {number} The numerical ID of the timer, which can be used later with me.timer.clearInterval().
+     * @returns {number} a numeric, non-zero value which identifies the timer created by the call to setInterval(), which can be used later with me.timer.clearInterval().
      * @example
      * // set a timer to call "myFunction" every 1000ms
      * me.timer.setInterval(myFunction, 1000);
@@ -83,12 +83,12 @@ declare class Timer {
      */
     setInterval(fn: Function, delay: number, pauseable?: boolean | undefined, ...args: any[]): number;
     /**
-     * Clears the delay set by me.timer.setTimeout().
-     * @param {number} timeoutID - ID of the timeout to be cleared
+     * Cancels a timeout previously established by calling setTimeout().
+     * @param {number} timeoutID - ID of the timeout to be cancelled
      */
     clearTimeout(timeoutID: number): void;
     /**
-     * Clears the Interval set by me.timer.setInterval().
+     * cancels the timed, repeating action which was previously established by a call to setInterval().
      * @param {number} intervalID - ID of the interval to be cleared
      */
     clearInterval(intervalID: number): void;

package/dist/types/text/bitmaptext.d.ts

@@ -26,7 +26,7 @@ export default class BitmapText extends Renderable {
      *     { name: "arial", type: "image" src: "data/font/arial.png" },
      * ])
      * // Then create an instance of your bitmap font:
-     * var myFont = new me.BitmapText(x, y, {font:"arial", text:"Hello"});
+     * let myFont = new me.BitmapText(x, y, {font:"arial", text:"Hello"});
      * // two possibilities for using "myFont"
      * // either call the draw function from your Renderable draw function
      * myFont.draw(renderer, "Hello!", 0, 0);

package/dist/types/text/text.d.ts

@@ -20,7 +20,7 @@ export default class Text extends Renderable {
      * @param {number} [settings.wordWrapWidth] - the maximum length in CSS pixel for a single segment of text
      * @param {(string|string[])} [settings.text=""] - a string, or an array of strings
      * @example
-     * var font = new me.Text(0, 0, {font: "Arial", size: 8, fillStyle: this.color});
+     * let font = new me.Text(0, 0, {font: "Arial", size: 8, fillStyle: this.color});
      */
     constructor(x: number, y: number, settings: {
         font: string;

package/dist/types/utils/array.d.ts

@@ -10,7 +10,7 @@
  * @param {Array} arr - array from which to remove an object
  * @param {object} obj - to be removed
  * @returns {Array} the modified Array
- * var arr = [ "foo", "bar", "baz" ];
+ * let arr = [ "foo", "bar", "baz" ];
  * // remove "foo" from the array
  * me.utils.array.remove(arr, "foo");
  */
@@ -24,7 +24,7 @@ export function remove(arr: any[], obj: object): any[];
  * @returns {any} random member of array
  * @example
  * // Select a random array element
- * var arr = [ "foo", "bar", "baz" ];
+ * let arr = [ "foo", "bar", "baz" ];
  * console.log(me.utils.array.random(arr));
  */
 export function random(arr: any[]): any;

package/dist/types/video/canvas/canvas_renderer.d.ts

@@ -31,8 +31,6 @@ export default class CanvasRenderer extends Renderer {
     cache: TextureCache;
     /**
      * Reset the canvas transform to identity
-     * @name resetTransform
-     * @memberof CanvasRenderer
      */
     resetTransform(): void;
     /**
@@ -46,25 +44,19 @@ export default class CanvasRenderer extends Renderer {
      * <img src="images/lighter-blendmode.png" width="510"/> <br>
      * - "screen" : The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply) <br>
      * <img src="images/screen-blendmode.png" width="510"/> <br>
-     * @name setBlendMode
      * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
-     * @memberof CanvasRenderer
      * @param {string} [mode="normal"] - blend mode : "normal", "multiply", "lighter, "additive", "screen"
      * @param {CanvasRenderingContext2D} [context]
      */
     setBlendMode(mode?: string | undefined, context?: CanvasRenderingContext2D | undefined): void;
     /**
      * Clears the main framebuffer with the given color
-     * @name clearColor
-     * @memberof CanvasRenderer
      * @param {Color|string} [color="#000000"] - CSS color.
      * @param {boolean} [opaque=false] - Allow transparency [default] or clear the surface completely [true]
      */
     clearColor(color?: string | Color | undefined, opaque?: boolean | undefined): void;
     /**
      * Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).
-     * @name clearRect
-     * @memberof CanvasRenderer
      * @param {number} x - x axis of the coordinate for the rectangle starting point.
      * @param {number} y - y axis of the coordinate for the rectangle starting point.
      * @param {number} width - The rectangle's width.
@@ -73,24 +65,20 @@ export default class CanvasRenderer extends Renderer {
     clearRect(x: number, y: number, width: number, height: number): void;
     /**
      * Create a pattern with the specified repetition
-     * @name createPattern
-     * @memberof CanvasRenderer
-     * @param {Image} image - Source image
+     * @param {HTMLImageElement|SVGImageElement|HTMLVideoElement|HTMLCanvasElement|ImageBitmap|OffscreenCanvas|VideoFrame} image - Source image to be used as the pattern's image
      * @param {string} repeat - Define how the pattern should be repeated
      * @returns {CanvasPattern}
      * @see ImageLayer#repeat
      * @example
-     * var tileable   = renderer.createPattern(image, "repeat");
-     * var horizontal = renderer.createPattern(image, "repeat-x");
-     * var vertical   = renderer.createPattern(image, "repeat-y");
-     * var basic      = renderer.createPattern(image, "no-repeat");
+     * let tileable   = renderer.createPattern(image, "repeat");
+     * let horizontal = renderer.createPattern(image, "repeat-x");
+     * let vertical   = renderer.createPattern(image, "repeat-y");
+     * let basic      = renderer.createPattern(image, "no-repeat");
      */
-    createPattern(image: new (width?: number | undefined, height?: number | undefined) => HTMLImageElement, repeat: string): CanvasPattern;
+    createPattern(image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | VideoFrame, repeat: string): CanvasPattern;
     /**
      * Draw an image onto the main using the canvas api
-     * @name drawImage
-     * @memberof CanvasRenderer
-     * @param {Image} image - An element to draw into the context. The specification permits any canvas image source (CanvasImageSource), specifically, a CSSImageValue, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, or an OffscreenCanvas.
+     * @param {HTMLImageElement|SVGImageElement|HTMLVideoElement|HTMLCanvasElement|ImageBitmap|OffscreenCanvas|VideoFrame} image - An element to draw into the context.
      * @param {number} sx - The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
      * @param {number} sy - The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
      * @param {number} sw - The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.
@@ -107,11 +95,9 @@ export default class CanvasRenderer extends Renderer {
      * // Clip the image and position the clipped part on the canvas:
      * renderer.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
      */
-    drawImage(image: new (width?: number | undefined, height?: number | undefined) => HTMLImageElement, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
+    drawImage(image: HTMLImageElement | SVGImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap | OffscreenCanvas | VideoFrame, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
     /**
      * Draw a pattern within the given rectangle.
-     * @name drawPattern
-     * @memberof CanvasRenderer
      * @param {CanvasPattern} pattern - Pattern object
      * @param {number} x
      * @param {number} y
@@ -122,8 +108,6 @@ export default class CanvasRenderer extends Renderer {
     drawPattern(pattern: CanvasPattern, x: number, y: number, width: number, height: number): void;
     /**
      * Stroke an arc at the specified coordinates with given radius, start and end points
-     * @name strokeArc
-     * @memberof CanvasRenderer
      * @param {number} x - arc center point x-axis
      * @param {number} y - arc center point y-axis
      * @param {number} radius
@@ -135,8 +119,6 @@ export default class CanvasRenderer extends Renderer {
     strokeArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise?: boolean | undefined, fill?: boolean | undefined): void;
     /**
      * Fill an arc at the specified coordinates with given radius, start and end points
-     * @name fillArc
-     * @memberof CanvasRenderer
      * @param {number} x - arc center point x-axis
      * @param {number} y - arc center point y-axis
      * @param {number} radius
@@ -147,8 +129,6 @@ export default class CanvasRenderer extends Renderer {
     fillArc(x: number, y: number, radius: number, start: number, end: number, antiClockwise?: boolean | undefined): void;
     /**
      * Stroke an ellipse at the specified coordinates with given radius
-     * @name strokeEllipse
-     * @memberof CanvasRenderer
      * @param {number} x - ellipse center point x-axis
      * @param {number} y - ellipse center point y-axis
      * @param {number} w - horizontal radius of the ellipse
@@ -158,8 +138,6 @@ export default class CanvasRenderer extends Renderer {
     strokeEllipse(x: number, y: number, w: number, h: number, fill?: boolean | undefined): void;
     /**
      * Fill an ellipse at the specified coordinates with given radius
-     * @name fillEllipse
-     * @memberof CanvasRenderer
      * @param {number} x - ellipse center point x-axis
      * @param {number} y - ellipse center point y-axis
      * @param {number} w - horizontal radius of the ellipse
@@ -168,8 +146,6 @@ export default class CanvasRenderer extends Renderer {
     fillEllipse(x: number, y: number, w: number, h: number): void;
     /**
      * Stroke a line of the given two points
-     * @name strokeLine
-     * @memberof CanvasRenderer
      * @param {number} startX - the start x coordinate
      * @param {number} startY - the start y coordinate
      * @param {number} endX - the end x coordinate
@@ -178,8 +154,6 @@ export default class CanvasRenderer extends Renderer {
     strokeLine(startX: number, startY: number, endX: number, endY: number): void;
     /**
      * Fill a line of the given two points
-     * @name fillLine
-     * @memberof CanvasRenderer
      * @param {number} startX - the start x coordinate
      * @param {number} startY - the start y coordinate
      * @param {number} endX - the end x coordinate
@@ -188,23 +162,17 @@ export default class CanvasRenderer extends Renderer {
     fillLine(startX: number, startY: number, endX: number, endY: number): void;
     /**
      * Stroke the given me.Polygon on the screen
-     * @name strokePolygon
-     * @memberof CanvasRenderer
      * @param {Polygon} poly - the shape to draw
      * @param {boolean} [fill=false] - also fill the shape with the current color if true
      */
     strokePolygon(poly: Polygon, fill?: boolean | undefined): void;
     /**
      * Fill the given me.Polygon on the screen
-     * @name fillPolygon
-     * @memberof CanvasRenderer
      * @param {Polygon} poly - the shape to draw
      */
     fillPolygon(poly: Polygon): void;
     /**
      * Stroke a rectangle at the specified coordinates
-     * @name strokeRect
-     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -214,8 +182,6 @@ export default class CanvasRenderer extends Renderer {
     strokeRect(x: number, y: number, width: number, height: number, fill?: boolean | undefined): void;
     /**
      * Draw a filled rectangle at the specified coordinates
-     * @name fillRect
-     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -224,8 +190,6 @@ export default class CanvasRenderer extends Renderer {
     fillRect(x: number, y: number, width: number, height: number): void;
     /**
      * Stroke a rounded rectangle at the specified coordinates
-     * @name strokeRoundRect
-     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -236,8 +200,6 @@ export default class CanvasRenderer extends Renderer {
     strokeRoundRect(x: number, y: number, width: number, height: number, radius: number, fill?: boolean | undefined): void;
     /**
      * Draw a rounded filled rectangle at the specified coordinates
-     * @name fillRoundRect
-     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -247,16 +209,12 @@ export default class CanvasRenderer extends Renderer {
     fillRoundRect(x: number, y: number, width: number, height: number, radius: number): void;
     /**
      * Stroke a Point at the specified coordinates
-     * @name strokePoint
-     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      */
     strokePoint(x: number, y: number): void;
     /**
      * Draw a a point at the specified coordinates
-     * @name fillPoint
-     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -265,27 +223,19 @@ export default class CanvasRenderer extends Renderer {
     fillPoint(x: number, y: number): void;
     /**
      * save the canvas context
-     * @name save
-     * @memberof CanvasRenderer
      */
     save(): void;
     /**
      * restores the canvas context
-     * @name restore
-     * @memberof CanvasRenderer
      */
     restore(): void;
     /**
      * rotates the canvas context
-     * @name rotate
-     * @memberof CanvasRenderer
      * @param {number} angle - in radians
      */
     rotate(angle: number): void;
     /**
      * scales the canvas context
-     * @name scale
-     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      */
@@ -293,51 +243,37 @@ export default class CanvasRenderer extends Renderer {
     /**
      * Set the current fill & stroke style color.
      * By default, or upon reset, the value is set to #000000.
-     * @name setColor
-     * @memberof CanvasRenderer
      * @param {Color|string} color - css color value
      */
     setColor(color: Color | string): void;
     /**
      * Set the global alpha
-     * @name setGlobalAlpha
-     * @memberof CanvasRenderer
      * @param {number} alpha - 0.0 to 1.0 values accepted.
      */
     setGlobalAlpha(alpha: number): void;
     /**
      * Return the global alpha
-     * @name getGlobalAlpha
-     * @memberof CanvasRenderer
      * @returns {number} global alpha value
      */
     getGlobalAlpha(): number;
     /**
      * Set the line width on the context
-     * @name setLineWidth
-     * @memberof CanvasRenderer
      * @param {number} width - Line width
      */
     setLineWidth(width: number): void;
     /**
      * Reset (overrides) the renderer transformation matrix to the
      * identity one, and then apply the given transformation matrix.
-     * @name setTransform
-     * @memberof CanvasRenderer
      * @param {Matrix2d} mat2d - Matrix to transform by
      */
     setTransform(mat2d: Matrix2d): void;
     /**
      * Multiply given matrix into the renderer tranformation matrix
-     * @name transform
-     * @memberof CanvasRenderer
      * @param {Matrix2d} mat2d - Matrix to transform by
      */
     transform(mat2d: Matrix2d): void;
     /**
      * Translates the context to the given position
-     * @name translate
-     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      */
@@ -348,8 +284,6 @@ export default class CanvasRenderer extends Renderer {
      * You can however save the current region using the save(),
      * and restore it (with the restore() method) any time in the future.
      * (<u>this is an experimental feature !</u>)
-     * @name clipRect
-     * @memberof CanvasRenderer
      * @param {number} x
      * @param {number} y
      * @param {number} width
@@ -360,8 +294,6 @@ export default class CanvasRenderer extends Renderer {
      * A mask limits rendering elements to the shape and position of the given mask object.
      * So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.
      * Mask are not preserved through renderer context save and restore.
-     * @name setMask
-     * @memberof CanvasRenderer
      * @param {Rect|RoundRect|Polygon|Line|Ellipse} [mask] - the shape defining the mask to be applied
      * @param {boolean} [invert=false] - either the given shape should define what is visible (default) or the opposite
      */

package/dist/types/video/renderer.d.ts

@@ -13,6 +13,7 @@ export default class Renderer {
      * @param {boolean} [options.transparent=false] - Whether to enable transparency on the canvas
      * @param {boolean} [options.premultipliedAlpha=true] - in WebGL, whether the renderer will assume that colors have premultiplied alpha when canvas transparency is enabled
      * @param {boolean} [options.blendMode="normal"] - the default blend mode to use ("normal", "multiply")
+     * @param {boolean} [options.depthBuffer="sorting"] - ~Experimental~ the default method to sort object on the z axis in WebGL ("sorting", "z-buffer")
      * @param {boolean} [options.subPixel=false] - Whether to enable subpixel rendering (performance hit when enabled)
      * @param {boolean} [options.verbose=false] - Enable the verbose mode that provides additional details as to what the renderer is doing
      * @param {number} [options.zoomX=width] - The actual width of the canvas with scaling applied
@@ -27,6 +28,7 @@ export default class Renderer {
         transparent?: boolean | undefined;
         premultipliedAlpha?: boolean | undefined;
         blendMode?: boolean | undefined;
+        depthBuffer?: boolean | undefined;
         subPixel?: boolean | undefined;
         verbose?: boolean | undefined;
         zoomX?: number | undefined;
@@ -56,6 +58,12 @@ export default class Renderer {
      * @type {boolean}
      */
     isContextValid: boolean;
+    /**
+     * the default method to sort object ("sorting", "z-buffer")
+     * @type {string}
+     * @default "sorting"
+     */
+    depthTest: string;
     /**
      * The Path2D instance used by the renderer to draw primitives
      * @type {Path2D}
@@ -205,6 +213,46 @@ export default class Renderer {
      * @see Renderer#setTint
      */
     clearTint(): void;
+    /**
+     * creates a Blob object representing the last rendered frame
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning a Blob object representing the last rendered frame
+     * @example
+     * renderer.convertToBlob().then((blob) => console.log(blob));
+     */
+    toBlob(options?: {
+        type?: string | undefined;
+        quality?: number | undefined;
+    } | undefined): Promise<any>;
+    /**
+     * creates an ImageBitmap object of the last frame rendered
+     * (not supported by standard Canvas)
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning an ImageBitmap.
+     * @example
+     * renderer.transferToImageBitmap().then((image) => console.log(image));
+     */
+    toImageBitmap(options?: {
+        type?: string | undefined;
+        quality?: number | undefined;
+    } | undefined): Promise<any>;
+    /**
+     * returns a data URL containing a representation of the last frame rendered
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning a string containing the requested data URL.
+     * @example
+     * renderer.toDataURL().then((dataURL) => console.log(dataURL));
+     */
+    toDataURL(options?: {
+        type?: string | undefined;
+        quality?: number | undefined;
+    } | undefined): Promise<any>;
 }
 import Vector2d from "../math/vector2.js";
 import Path2D from "./../geometries/path2d.js";

package/dist/types/video/texture/atlas.d.ts

@@ -152,13 +152,13 @@ export class TextureAtlas {
      * ...
      * ...
      * // create a new "coin" sprite
-     * var sprite = game.texture.createSpriteFromName("coin.png");
+     * let sprite = game.texture.createSpriteFromName("coin.png");
      * // set the renderable position to bottom center
      * sprite.anchorPoint.set(0.5, 1.0);
      * ...
      * ...
      * // create a 9-slice sprite
-     * var dialogPanel = game.texture.createSpriteFromName(
+     * let dialogPanel = game.texture.createSpriteFromName(
      *    "rpg_dialo.png",
      *    // width & height are mandatory for 9-slice sprites
      *    { width: this.width, height: this.height },
@@ -180,7 +180,7 @@ export class TextureAtlas {
      * );
      *
      * // create a new Animated Sprite
-     * var sprite = game.texture.createAnimationFromName([
+     * let sprite = game.texture.createAnimationFromName([
      *     "walk0001.png", "walk0002.png", "walk0003.png",
      *     "walk0004.png", "walk0005.png", "walk0006.png",
      *     "walk0007.png", "walk0008.png", "walk0009.png",

package/dist/types/video/texture/canvas_texture.d.ts

@@ -57,6 +57,46 @@ declare class CanvasTexture {
      * @return {ImageData} The ImageData extracted from this CanvasTexture.
      */
     getImageData(x: number, y: number, width: number, height: number): ImageData;
+    /**
+     * creates a Blob object representing the image contained in this canvas texture
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning a Blob object representing the image contained in this canvas texture
+     * @example
+     * canvasTexture.convertToBlob().then((blob) => console.log(blob));
+     */
+    toBlob(options?: {
+        type?: string | undefined;
+        quality?: number | undefined;
+    } | undefined): Promise<any>;
+    /**
+     * creates an ImageBitmap object from the most recently rendered image of this canvas texture
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning an ImageBitmap.
+     * @example
+     * canvasTexture.transferToImageBitmap().then((bitmap) => console.log(bitmap));
+     */
+    toImageBitmap(options?: {
+        type?: string | undefined;
+        quality?: number | undefined;
+    } | undefined): Promise<any>;
+    /**
+     * returns a data URL containing a representation of the most recently rendered image of this canvas texture
+     * (not supported by OffscreenCanvas)
+     * @param {Object} [options] - An object with the following properties:
+     * @param {String} [options.type="image/png"] - A string indicating the image format
+     * @param {Number} [options.quality] - A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
+     * @return {Promise} A Promise returning a string containing the requested data URL.
+     * @example
+     * renderer.toDataURL().then((dataURL) => console.log(dataURL));
+     */
+    toDataURL(options?: {
+        type?: string | undefined;
+        quality?: number | undefined;
+    } | undefined): Promise<any>;
     /**
      * @ignore
      */

package/dist/types/video/webgl/glshader.d.ts

@@ -11,7 +11,7 @@ export default class GLShader {
      * @see https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders
      * @example
      * // create a basic shader
-     * var myShader = new me.GLShader(
+     * let myShader = new me.GLShader(
      *    // WebGL rendering context
      *    gl,
      *    // vertex shader