melonjs 15.15.0 → 16.1.0

package/dist/types/renderable/sprite.d.ts

@@ -8,7 +8,7 @@ export default class Sprite extends Renderable {
      * @param {number} x - the x coordinates of the sprite object
      * @param {number} y - the y coordinates of the sprite object
      * @param {object} settings - Configuration parameters for the Sprite object
-     * @param {HTMLImageElement|HTMLCanvasElement|TextureAtlas|string} settings.image - reference to spritesheet image, a texture atlas or to a texture atlas
+     * @param {HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|TextureAtlas|string} settings.image - reference to spritesheet image, a texture atlas, a video element, or to a texture atlas
      * @param {string} [settings.name=""] - name of this object
      * @param {string} [settings.region] - region name of a specific region to use when using a texture atlas, see {@link TextureAtlas}
      * @param {number} [settings.framewidth] - Width of a single frame within the spritesheet
@@ -35,9 +35,19 @@ export default class Sprite extends Renderable {
      *     image : mytexture,
      *     region : "npc2.png",
      * });
+     *
+     * // create a video sprite
+     * let videoSprite = new me.Sprite(0, 0, {
+     *     image : me.loader.getVideo("bigbunny"),
+     *     anchorPoint : new me.Vector2d(0.5, 0.5)
+     * });
+     * // scale the video sprite
+     * videoSprite.currentTransform.scale(2);
+     * // start playing the video (if video is preloaded with `autoplay` set to false)
+     * videoSprite.play();
      */
     constructor(x: number, y: number, settings: {
-        image: HTMLImageElement | HTMLCanvasElement | TextureAtlas | string;
+        image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | TextureAtlas | string;
         name?: string | undefined;
         region?: string | undefined;
         framewidth?: number | undefined;
@@ -48,38 +58,39 @@ export default class Sprite extends Renderable {
         anchorPoint?: any;
     });
     /**
-     * pause and resume animation
-     * @public
      * @type {boolean}
      * @default false
-     * @name Sprite#animationpause
      */
-    public animationpause: boolean;
+    animationpause: boolean;
     /**
      * animation cycling speed (delay between frame in ms)
-     * @public
      * @type {number}
      * @default 100
-     * @name Sprite#animationspeed
      */
-    public animationspeed: number;
+    animationspeed: number;
     /**
      * global offset for the position to draw from on the source image.
-     * @public
      * @type {Vector2d}
      * @default <0.0,0.0>
-     * @name offset
-     * @memberof Sprite#
      */
-    public offset: Vector2d;
+    offset: Vector2d;
+    /**
+     * true if this is a video sprite (e.g. a HTMLVideoElement was passed as as source)
+     * @type {boolean}
+     * @default false
+     */
+    isVideo: boolean;
+    /**
+     * a callback fired when the end of a video or current animation was reached
+     * @type {Function}
+     * @default undefined
+     */
+    onended: Function;
     /**
      * The source texture object this sprite object is using
-     * @public
      * @type {TextureAtlas}
-     * @name source
-     * @memberof Sprite#
      */
-    public source: TextureAtlas;
+    source: TextureAtlas;
     anim: {};
     resetAnim: Function | (() => Sprite) | undefined;
     current: {
@@ -98,20 +109,27 @@ export default class Sprite extends Renderable {
         callback: null;
         state: boolean;
     };
-    image: HTMLCanvasElement | HTMLImageElement;
+    image: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement;
     textureAtlas: any;
+    width: any;
+    height: any;
+    _onBlurFn: (() => void) | undefined;
     atlasIndices: any;
     /**
      * return the flickering state of the object
-     * @name isFlickering
-     * @memberof Sprite
      * @returns {boolean}
      */
     isFlickering(): boolean;
+    /**
+     * play or resume the current animation or video
+     */
+    play(): void;
+    /**
+     * play or resume the current animation or video
+     */
+    pause(): void;
     /**
      * make the object flicker
-     * @name flicker
-     * @memberof Sprite
      * @param {number} duration - expressed in milliseconds
      * @param {Function} callback - Function to call when flickering ends
      * @returns {Sprite} Reference to this object for method chaining
@@ -128,11 +146,8 @@ export default class Sprite extends Renderable {
      * For fixed-sized cell sprite sheet, the index list must follow the
      * logic as per the following example :<br>
      * <img src="images/spritesheet_grid.png"/>
-     * @name addAnimation
-     * @memberof Sprite
      * @param {string} name - animation id
-     * @param {number[]|string[]|object[]} index - list of sprite index or name
-     * defining the animation. Can also use objects to specify delay for each frame, see below
+     * @param {number[]|string[]|object[]} index - list of sprite index or name defining the animation. Can also use objects to specify delay for each frame, see below
      * @param {number} [animationspeed] - cycling speed for animation in ms
      * @returns {number} frame amount of frame added to the animation (delay between each frame).
      * @see Sprite#animationspeed
@@ -160,8 +175,6 @@ export default class Sprite extends Renderable {
     /**
      * set the current animation
      * this will always change the animation & set the frame to zero
-     * @name setCurrentAnimation
-     * @memberof Sprite
      * @param {string} name - animation id
      * @param {string|Function} [resetAnim] - animation id to switch to when complete, or callback
      * @param {boolean} [preserve_dt=false] - if false will reset the elapsed time counter since last frame
@@ -199,8 +212,6 @@ export default class Sprite extends Renderable {
     setCurrentAnimation(name: string, resetAnim?: string | Function | undefined, preserve_dt?: boolean | undefined): Sprite;
     /**
      * reverse the given or current animation if none is specified
-     * @name reverseAnimation
-     * @memberof Sprite
      * @param {string} [name] - animation id
      * @returns {Sprite} Reference to this object for method chaining
      * @see Sprite#animationspeed
@@ -208,8 +219,6 @@ export default class Sprite extends Renderable {
     reverseAnimation(name?: string | undefined): Sprite;
     /**
      * return true if the specified animation is the current one.
-     * @name isCurrentAnimation
-     * @memberof Sprite
      * @param {string} name - animation id
      * @returns {boolean}
      * @example
@@ -221,8 +230,6 @@ export default class Sprite extends Renderable {
     /**
      * change the current texture atlas region for this sprite
      * @see Texture.getRegion
-     * @name setRegion
-     * @memberof Sprite
      * @param {object} region - typically returned through me.Texture.getRegion()
      * @returns {Sprite} Reference to this object for method chaining
      * @example
@@ -232,8 +239,6 @@ export default class Sprite extends Renderable {
     setRegion(region: object): Sprite;
     /**
      * force the current animation frame index.
-     * @name setAnimationFrame
-     * @memberof Sprite
      * @param {number} [index=0] - animation frame index
      * @returns {Sprite} Reference to this object for method chaining
      * @example
@@ -243,15 +248,11 @@ export default class Sprite extends Renderable {
     setAnimationFrame(index?: number | undefined): Sprite;
     /**
      * return the current animation frame index.
-     * @name getCurrentAnimationFrame
-     * @memberof Sprite
      * @returns {number} current animation frame index
      */
     getCurrentAnimationFrame(): number;
     /**
      * Returns the frame object by the index.
-     * @name getAnimationFrameObjectByIndex
-     * @memberof Sprite
      * @ignore
      * @param {number} id - the frame id
      * @returns {number} if using number indices. Returns {object} containing frame data if using texture atlas

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

@@ -98,7 +98,7 @@ export default class BitmapText extends Renderable {
      * @private
      */
     private fontData;
-    public set fillStyle(arg: Color);
+    public set fillStyle(value: Color);
     /**
      * defines the color used to tint the bitmap text
      * @public

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

@@ -291,6 +291,13 @@ export function unwatchDeviceOrientation(): void;
  * me.device.vibrate(0);
  */
 export function vibrate(pattern: number | number[]): void;
+/**
+ * detect if the given video format is supported
+ * @function hasVideoFormat
+ * @param {"h264"|"h265"|"ogg"|"mp4"|"m4v"|"webm"|"vp9"|"hls"} codec - the video format to check for support
+ * @returns {boolean} return true if the given video format is supported
+ */
+export function hasVideoFormat(codec: "h264" | "h265" | "ogg" | "mp4" | "m4v" | "webm" | "vp9" | "hls"): boolean;
 /**
  * the device platform type
  * @name platform
@@ -422,6 +429,15 @@ export const hasHTML5Audio: boolean;
  * @public
  */
 export const sound: boolean;
+/**
+ * Device Video Support
+ * @name hasVideo
+ * @memberof device
+ * @type {boolean}
+ * @readonly
+ * @public
+ */
+export const hasVideo: boolean;
 /**
  * Browser Local Storage capabilities <br>
  * (this flag will be set to false if cookies are blocked)

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

@@ -65,13 +65,13 @@ export default class Renderer {
     currentTint: Color;
     projectionMatrix: Matrix3d;
     uvOffset: number;
-    set height(arg: number);
+    set height(value: number);
     /**
      * return the height of the canvas which this renderer draws to
      * @returns {number} height of the system Canvas
      */
     get height(): number;
-    set width(arg: number);
+    set width(value: number);
     /**
      * return the width of the canvas which this renderer draws to
      * @returns {number} width of the system Canvas
@@ -190,44 +190,32 @@ export default class Renderer {
     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.
+     * @param {string} [type="image/png"] - A string indicating the image format
+     * @param {number} [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.
      * @returns {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>;
+    toBlob(type?: string | undefined, quality?: number | 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.
+     * @param {string} [type="image/png"] - A string indicating the image format
+     * @param {number} [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.
      * @returns {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>;
+    toImageBitmap(type?: string | undefined, quality?: number | 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.
+     * @param {string} [type="image/png"] - A string indicating the image format
+     * @param {number} [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.
      * @returns {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>;
+    toDataURL(type?: string | undefined, quality?: number | undefined): Promise<any>;
 }
 import Vector2d from "../math/vector2.js";
 import Path2D from "./../geometries/path2d.js";

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

@@ -60,44 +60,32 @@ declare class 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.
+     * @param {string} [type="image/png"] - A string indicating the image format
+     * @param {number} [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.
      * @returns {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>;
+    toBlob(type?: string | undefined, quality?: number | 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.
+     * @param {string} [type="image/png"] - A string indicating the image format
+     * @param {number} [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.
      * @returns {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>;
+    toImageBitmap(type?: string | undefined, quality?: number | 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.
+     * @param {string} [type="image/png"] - A string indicating the image format
+     * @param {number} [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.
      * @returns {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>;
+    toDataURL(type?: string | undefined, quality?: number | undefined): Promise<any>;
     /**
      * invalidate the current CanvasTexture, and force a reupload of the corresponding texture
      * (call this if you modify the canvas content between two draw calls)
@@ -109,14 +97,14 @@ declare class CanvasTexture {
      * @ignore
      */
     destroy(): void;
-    public set width(arg: number);
+    public set width(val: number);
     /**
      * The width of this canvas texture in pixels
      * @public
      * @type {number}
      */
     public get width(): number;
-    public set height(arg: number);
+    public set height(val: number);
     /**
      * The height of this canvas texture in pixels
      * @public

package/dist/types/video/webgl/compositors/quad_compositor.d.ts

@@ -65,7 +65,8 @@ export default class QuadCompositor extends Compositor {
      * @param {number} u1 - Texture UV (u1) value.
      * @param {number} v1 - Texture UV (v1) value.
      * @param {number} tint - tint color to be applied to the texture in UINT32 (argb) format
+     * @param {boolean} reupload - Force the texture to be reuploaded even if already bound
      */
-    addQuad(texture: TextureAtlas, x: number, y: number, w: number, h: number, u0: number, v0: number, u1: number, v1: number, tint: number): void;
+    addQuad(texture: TextureAtlas, x: number, y: number, w: number, h: number, u0: number, v0: number, u1: number, v1: number, tint: number, reupload?: boolean): void;
 }
 import Compositor from "./compositor.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melonjs",
-  "version": "15.15.0",
+  "version": "16.1.0",
   "description": "melonJS Game Engine",
   "homepage": "http://www.melonjs.org/",
   "type": "module",
@@ -35,7 +35,7 @@
   "author": "Olivier Biot (AltByte Pte Ltd)",
   "funding": "https://github.com/sponsors/melonjs",
   "engines": {
-    "node": ">= 19"
+    "node": ">= 20"
   },
   "main": "dist/melonjs.module.js",
   "module": "dist/melonjs.module.js",
@@ -53,37 +53,38 @@
   ],
   "dependencies": {
     "@teppeis/multimaps": "^3.0.0",
-    "core-js": "^3.33.3",
+    "core-js": "^3.35.1",
     "earcut": "2.2.4",
     "eventemitter3": "^5.0.1",
-    "howler": "2.2.4"
+    "howler": "2.2.4",
+    "whatwg-fetch": "^3.6.20"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.23.3",
+    "@babel/eslint-parser": "^7.23.10",
     "@babel/plugin-syntax-import-assertions": "^7.23.3",
-    "@fastify/static": "^6.12.0",
+    "@fastify/static": "^7.0.0",
     "@melonjs/webdoc-theme": "^1.1.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@webdoc/cli": "^2.2.0",
-    "chromedriver": "^119.0.1",
+    "chromedriver": "^121.0.0",
     "cross-env": "^7.0.3",
     "del-cli": "^5.1.0",
-    "eslint": "^8.54.0",
-    "eslint-plugin-jsdoc": "^46.9.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-jsdoc": "^48.0.5",
     "expect": "^29.7.0",
-    "expect-mocha-image-snapshot": "^3.0.15",
-    "fastify": "^4.24.3",
+    "expect-mocha-image-snapshot": "^3.0.16",
+    "fastify": "^4.26.0",
     "mocha": "^10.2.0",
     "npm-self-link": "^1.1.7",
-    "puppeteer": "^21.5.2",
-    "rollup": "^4.5.0",
+    "puppeteer": "^22.0.0",
+    "rollup": "^4.9.6",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-string": "^3.0.0",
-    "terser": "^5.24.0",
-    "typescript": "^5.2.2"
+    "terser": "^5.27.0",
+    "typescript": "^5.3.3"
   },
   "scripts": {
     "build": "npm run lint && rollup -c --silent",

package/src/application/settings.js

@@ -17,13 +17,15 @@ export const defaultSettings = {
     powerPreference : "default",
     verbose : false,
     consoleHeader : true,
-    legacy : false
+    legacy : false,
+    canvas : undefined
 };
 
 /**
  * Application & Renderer Settings definition.
  * @typedef {object} Settings
  * @property {string|HTMLElement} [parent=document.body] - the DOM parent element to hold the canvas in the HTML file
+ * @property {HTMLCanvasElement} [canvas] - an existing canvas element to use as the renderer target (by default melonJS will create its own canvas based on given parameters)
  * @property {number|Renderer} [renderer=AUTO] - renderer to use (CANVAS, WEBGL, AUTO), or a custom renderer class
  * @property {number|string} [scale=1.0] - enable scaling of the canvas ('auto' for automatic scaling)
  * @property {"fit"|"fill-min"|"fill-max"|"flex"|"flex-width"|"flex-height"|"stretch"} [scaleMethod="fit"] - screen scaling modes : <br>

package/src/audio/audio.js

@@ -159,7 +159,9 @@ export function load(sound, onloadcb, onerrorcb) {
     audioTracks[sound.name] = new Howl({
         src : urls,
         volume : Howler.volume(),
-        html5 : sound.stream === true ||  sound.html5 === true,
+        autoplay : sound.autoplay === true,
+        loop : sound.loop = true,
+        html5 : sound.stream === true || sound.html5 === true,
         xhrWithCredentials : withCredentials,
         onloaderror() {
             soundLoadError.call(this, sound.name, onerrorcb);

package/src/geometries/ellipse.js

@@ -189,17 +189,15 @@ export default class Ellipse {
      *  // do something
      * }
      */
-    contains() {
+    contains(...args) {
         let _x, _y;
 
-        if (arguments.length === 2) {
+        if (args.length === 2) {
             // x, y
-            _x = arguments[0];
-            _y = arguments[1];
+            [_x, _y] = args;
         } else {
             // vector
-            _x = arguments[0].x;
-            _y = arguments[0].y;
+            [_x, _y] = [args[0].x, args[0].y];
         }
 
         // Make position relative to object center point.