melonjs 14.0.2 → 14.1.1

package/dist/melonjs.mjs/video/texture/canvas_texture.js

@@ -0,0 +1,144 @@
+/*!
+ * melonJS Game Engine - v14.1.1
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ */
+import { createCanvas } from '../video.js';
+import { setPrefixed } from '../../utils/agent.js';
+
+// default canvas settings
+var defaultAttributes = {
+    offscreenCanvas : false,
+    willReadFrequently : false,
+    antiAlias : false,
+    context: "2d"
+};
+
+/**
+ * Creates a Canvas Texture of the given size
+ */
+class CanvasTexture {
+    /**
+     * @param {number} width - the desired width of the canvas
+     * @param {number} height - the desired height of the canvas
+     * @param {object} attributes - The attributes to create both the canvas and context
+     * @param {boolean} [attributes.context="2d"] - the context type to be created ("2d", "webgl", "webgl2")
+     * @param {boolean} [attributes.offscreenCanvas=false] - will create an offscreenCanvas if true instead of a standard canvas
+     * @param {boolean} [attributes.willReadFrequently=false] - Indicates whether or not a lot of read-back operations are planned
+     * @param {boolean} [attributes.antiAlias=false] - Whether to enable anti-aliasing, use false (default) for a pixelated effect.
+     */
+    constructor(width, height, attributes = defaultAttributes) {
+
+        // clean up the given attributes
+        attributes = Object.assign(defaultAttributes, attributes || {});
+
+        /**
+         * the canvas created for this CanvasTexture
+         * @type {HTMLCanvasElement|OffscreenCanvas}
+         */
+        this.canvas = createCanvas(width, height, attributes.offscreenCanvas);
+
+        /**
+         * the rendering context of this CanvasTexture
+         * @type {CanvasRenderingContext2D}
+         */
+        this.context = this.canvas.getContext("2d", { willReadFrequently: attributes.willReadFrequently });
+
+        // enable or disable antiAlias if specified
+        this.setAntiAlias(attributes.antiAlias);
+    }
+
+    /**
+     * @ignore
+     */
+    onResetEvent(width, height) {
+        this.clear();
+        this.resize(width, height);
+    }
+
+    /**
+     * Clears the content of the canvas texture
+     */
+    clear() {
+        this.context.setTransform(1, 0, 0, 1, 0, 0);
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    /**
+     * enable/disable image smoothing (scaling interpolation)
+     * @param {boolean} [enable=false]
+     */
+    setAntiAlias(enable = false) {
+        var canvas = this.canvas;
+
+        // enable/disable antialias on the given Context2d object
+        setPrefixed("imageSmoothingEnabled", enable, this.context);
+
+        // set antialias CSS property on the main canvas
+        if (typeof canvas.style !== "undefined") {
+            if (enable !== true) {
+                // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
+                canvas.style["image-rendering"] = "optimizeSpeed"; // legal fallback
+                canvas.style["image-rendering"] = "-moz-crisp-edges"; // Firefox
+                canvas.style["image-rendering"] = "-o-crisp-edges"; // Opera
+                canvas.style["image-rendering"] = "-webkit-optimize-contrast"; // Safari
+                canvas.style["image-rendering"] = "optimize-contrast"; // CSS 3
+                canvas.style["image-rendering"] = "crisp-edges"; // CSS 4
+                canvas.style["image-rendering"] = "pixelated"; // CSS 4
+                canvas.style.msInterpolationMode = "nearest-neighbor"; // IE8+
+            } else {
+                canvas.style["image-rendering"] = "auto";
+            }
+        }
+    }
+
+    /**
+     * Resizes the canvas texture to the given width and height.
+     * @param {number} width - the desired width
+     * @param {number} height - the desired height
+     */
+    resize(width, height) {
+        this.canvas.width = Math.round(width);
+        this.canvas.height = Math.round(height);
+    }
+
+    /**
+     * @ignore
+     */
+    destroy() {
+        this.context = undefined;
+        this.canvas = undefined;
+    }
+
+    /**
+     * The width of this canvas texture in pixels
+     * @public
+     * @type {number}
+     */
+    get width() {
+        return this.canvas.width;
+    }
+
+    set width(val) {
+        this.canvas.width = Math.round(val);
+    }
+
+    /**
+     * The height of this canvas texture in pixels
+     * @public
+     * @type {number}
+     */
+    get height() {
+        return this.canvas.height;
+    }
+
+    set height(val) {
+        this.canvas.height = Math.round(val);
+    }
+}
+
+var CanvasTexture$1 = CanvasTexture;
+
+export { CanvasTexture$1 as default };

package/dist/melonjs.mjs/video/video.js

@@ -0,0 +1,462 @@
+/*!
+ * melonJS Game Engine - v14.1.1
+ * http://www.melonjs.org
+ * melonjs is licensed under the MIT License.
+ * http://www.opensource.org/licenses/mit-license
+ * @copyright (C) 2011 - 2022 Olivier Biot (AltByte Pte Ltd)
+ */
+import Vector2d from '../math/vector2.js';
+import WebGLRenderer from './webgl/webgl_renderer.js';
+import CanvasRenderer from './canvas/canvas_renderer.js';
+import utils from '../utils/utils.js';
+import { emit, WINDOW_ONRESIZE, WINDOW_ONORIENTATION_CHANGE, WINDOW_ONSCROLL, on, VIDEO_INIT } from '../system/event.js';
+import game from '../game.js';
+import { offscreenCanvas, screenOrientation, getElement, platform, enableSwipe, devicePixelRatio, getScreenOrientation, language, isWebGLSupported, getParentBounds, hasWebAudio } from '../system/device.js';
+import { initialized, version } from '../index.js';
+
+/**
+ * video functions
+ * @namespace video
+ */
+
+var designRatio = 1;
+var designWidth = 0;
+var designHeight = 0;
+
+// default video settings
+var settings = {
+    parent : undefined,
+    renderer : 2, // AUTO
+    autoScale : false,
+    scale : 1.0,
+    scaleMethod : "manual",
+    transparent : false,
+    premultipliedAlpha: true,
+    blendMode : "normal",
+    antiAlias : false,
+    failIfMajorPerformanceCaveat : true,
+    subPixel : false,
+    preferWebGL1 : false,
+    powerPreference : "default",
+    verbose : false,
+    consoleHeader : true
+};
+
+/**
+ * Auto-detect the best renderer to use
+ * @ignore
+ */
+function autoDetectRenderer(options) {
+    try {
+        if (isWebGLSupported(options)) {
+            return new WebGLRenderer(options);
+        }
+    } catch (e) {
+        console.log("Error creating WebGL renderer :" + e.message);
+    }
+    return new CanvasRenderer(options);
+}
+
+/**
+ * callback for window resize event
+ * @ignore
+ */
+function onresize() {
+    var settings = renderer.settings;
+    var scaleX = 1, scaleY = 1;
+
+    if (settings.autoScale) {
+
+        // set max the canvas max size if CSS values are defined
+        var canvasMaxWidth = Infinity;
+        var canvasMaxHeight = Infinity;
+
+        if (globalThis.getComputedStyle) {
+            var style = globalThis.getComputedStyle(renderer.getCanvas(), null);
+            canvasMaxWidth = parseInt(style.maxWidth, 10) || Infinity;
+            canvasMaxHeight = parseInt(style.maxHeight, 10) || Infinity;
+        }
+
+        // get the maximum canvas size within the parent div containing the canvas container
+        var nodeBounds = getParentBounds(getParent());
+
+        var _max_width = Math.min(canvasMaxWidth, nodeBounds.width);
+        var _max_height = Math.min(canvasMaxHeight, nodeBounds.height);
+
+        // calculate final canvas width & height
+        var screenRatio = _max_width / _max_height;
+
+        if ((settings.scaleMethod === "fill-min" && screenRatio > designRatio) ||
+            (settings.scaleMethod === "fill-max" && screenRatio < designRatio) ||
+            (settings.scaleMethod === "flex-width")
+        ) {
+            // resize the display canvas to fill the parent container
+            var sWidth = Math.min(canvasMaxWidth, designHeight * screenRatio);
+            scaleX = scaleY = _max_width / sWidth;
+            renderer.resize(Math.floor(sWidth), designHeight);
+        }
+        else if ((settings.scaleMethod === "fill-min" && screenRatio < designRatio) ||
+                 (settings.scaleMethod === "fill-max" && screenRatio > designRatio) ||
+                 (settings.scaleMethod === "flex-height")
+        ) {
+            // resize the display canvas to fill the parent container
+            var sHeight = Math.min(canvasMaxHeight, designWidth * (_max_height / _max_width));
+            scaleX = scaleY = _max_height / sHeight;
+            renderer.resize(designWidth, Math.floor(sHeight));
+        }
+        else if (settings.scaleMethod === "flex") {
+            // resize the display canvas to fill the parent container
+            renderer.resize(Math.floor(_max_width), Math.floor(_max_height));
+        }
+        else if (settings.scaleMethod === "stretch") {
+            // scale the display canvas to fit with the parent container
+            scaleX = _max_width / designWidth;
+            scaleY = _max_height / designHeight;
+        }
+        else {
+            // scale the display canvas to fit the parent container
+            // make sure we maintain the original aspect ratio
+            if (screenRatio < designRatio) {
+                scaleX = scaleY = _max_width / designWidth;
+            }
+            else {
+                scaleX = scaleY = _max_height / designHeight;
+            }
+        }
+
+        // adjust scaling ratio based on the new scaling ratio
+        scale(scaleX, scaleY);
+    } else {
+        // adjust scaling ratio based on the given settings
+        scale(settings.scale, settings.scale);
+    }
+}
+
+/**
+ * Select the HTML5 Canvas renderer
+ * @name CANVAS
+ * @memberof video
+ * @constant
+ */
+const CANVAS = 0;
+
+/**
+ * Select the WebGL renderer
+ * @name WEBGL
+ * @memberof video
+ * @constant
+ */
+const WEBGL = 1;
+
+/**
+ * Auto-select the renderer (Attempt WebGL first, with fallback to Canvas)
+ * @name AUTO
+ * @memberof video
+ * @constant
+ */
+const AUTO = 2;
+
+/**
+ * the parent container of the main canvas element
+ * @ignore
+ * @type {HTMLElement}
+ * @readonly
+ * @name parent
+ * @memberof video
+ */
+let parent = null;
+
+/**
+ * the scaling ratio to be applied to the display canvas
+ * @name scaleRatio
+ * @type {Vector2d}
+ * @default <1,1>
+ * @memberof video
+ */
+let scaleRatio = new Vector2d(1, 1);
+
+ /**
+  * A reference to the active Canvas or WebGL active renderer renderer
+  * @name renderer
+  * @type {CanvasRenderer|WebGLRenderer}
+  * @memberof video
+  */
+let renderer = null;
+
+/**
+ * Initialize the "video" system (create a canvas based on the given arguments, and the related renderer). <br>
+ * melonJS support various scaling mode, that can be enabled <u>once the scale option is set to <b>`auto`</b></u> : <br>
+ *  - <i><b>`fit`</b></i> : Letterboxed; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-fit.png"/></center><br>
+ *  - <i><b>`fill-min`</b></i> : Canvas is resized to fit minimum design resolution; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-fill-min.png"/></center><br>
+ *  - <i><b>`fill-max`</b></i> : Canvas is resized to fit maximum design resolution; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-fill-max.png"/></center><br>
+ *  - <i><b>`flex`</b><</i> : Canvas width & height is resized to fit; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-flex.png"/></center><br>
+ *  - <i><b>`flex-width`</b></i> : Canvas width is resized to fit; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-flex-width.png"/></center><br>
+ *  - <i><b>`flex-height`</b></i> : Canvas height is resized to fit; content is scaled to design aspect ratio <br>
+ * <center><img src="images/scale-flex-height.png"/></center><br>
+ *  - <i><b>`stretch`</b></i> : Canvas is resized to fit; content is scaled to screen aspect ratio
+ * <center><img src="images/scale-stretch.png"/></center><br>
+ * @function video.init
+ * @param {number} width - The width of the canvas viewport
+ * @param {number} height - The height of the canvas viewport
+ * @param {object} [options] - The optional video/renderer parameters.<br> (see Renderer(s) documentation for further specific options)
+ * @param {string|HTMLElement} [options.parent=document.body] - the DOM parent element to hold the canvas in the HTML file
+ * @param {number} [options.renderer=video.AUTO] - renderer to use (me.video.CANVAS, me.video.WEBGL, me.video.AUTO)
+ * @param {number|string} [options.scale=1.0] - enable scaling of the canvas ('auto' for automatic scaling)
+ * @param {string} [options.scaleMethod="fit"] - screen scaling modes ('fit','fill-min','fill-max','flex','flex-width','flex-height','stretch')
+ * @param {boolean} [options.preferWebGL1=false] - if true the renderer will only use WebGL 1
+ * @param {string} [options.powerPreference="default"] - a hint to the user agent indicating what configuration of GPU is suitable for the WebGL context ("default", "high-performance", "low-power"). To be noted that Safari and Chrome (since version 80) both default to "low-power" to save battery life and improve the user experience on these dual-GPU machines.
+ * @param {boolean} [options.transparent=false] - whether to allow transparent pixels in the front buffer (screen).
+ * @param {boolean} [options.antiAlias=false] - whether to enable or not video scaling interpolation
+ * @param {boolean} [options.consoleHeader=true] - whether to display melonJS version and basic device information in the console
+ * @returns {boolean} false if initialization failed (canvas not supported)
+ * @example
+ * // init the video with a 640x480 canvas
+ * me.video.init(640, 480, {
+ *     parent : "screen",
+ *     renderer : me.video.AUTO,
+ *     scale : "auto",
+ *     scaleMethod : "fit"
+ * });
+ */
+function init(width, height, options) {
+
+    // ensure melonjs has been properly initialized
+    if (!initialized) {
+        throw new Error("me.video.init() called before engine initialization.");
+    }
+
+    // revert to default options if not defined
+    settings = Object.assign(settings, options || {});
+
+    // sanitize potential given parameters
+    settings.width = width;
+    settings.height = height;
+    settings.transparent = !!(settings.transparent);
+    settings.antiAlias = !!(settings.antiAlias);
+    settings.failIfMajorPerformanceCaveat = !!(settings.failIfMajorPerformanceCaveat);
+    settings.subPixel = !!(settings.subPixel);
+    settings.verbose = !!(settings.verbose);
+    if (settings.scaleMethod.search(/^(fill-(min|max)|fit|flex(-(width|height))?|stretch)$/) !== -1) {
+        settings.autoScale = (settings.scale === "auto") || true;
+    } else {
+        // default scaling method
+        settings.scaleMethod = "fit";
+        settings.autoScale = (settings.scale === "auto") || false;
+    }
+
+    // display melonJS version
+    if (settings.consoleHeader !== false) {
+        // output video information in the console
+        console.log("melonJS 2 (v" + version + ") | http://melonjs.org" );
+    }
+
+    // override renderer settings if &webgl or &canvas is defined in the URL
+    var uriFragment = utils.getUriFragment();
+    if (uriFragment.webgl === true || uriFragment.webgl1 === true || uriFragment.webgl2 === true) {
+        settings.renderer = WEBGL;
+        if (uriFragment.webgl1 === true) {
+            settings.preferWebGL1 = true;
+        }
+    } else if (uriFragment.canvas === true) {
+        settings.renderer = CANVAS;
+    }
+
+    // normalize scale
+    settings.scale = (settings.autoScale) ? 1.0 : (+settings.scale || 1.0);
+    scaleRatio.set(settings.scale, settings.scale);
+
+    // hold the requested video size ratio
+    designRatio = width / height;
+    designWidth = width;
+    designHeight = height;
+
+    // default scaled size value
+    settings.zoomX = width * scaleRatio.x;
+    settings.zoomY = height * scaleRatio.y;
+
+    //add a channel for the onresize/onorientationchange event
+    globalThis.addEventListener(
+        "resize",
+        utils.function.throttle(
+            (e) => {
+                emit(WINDOW_ONRESIZE, e);
+            }, 100
+        ), false
+    );
+
+    // Screen Orientation API
+    globalThis.addEventListener(
+        "orientationchange",
+        (e) => {
+            emit(WINDOW_ONORIENTATION_CHANGE, e);
+        },
+        false
+    );
+    // pre-fixed implementation on mozzila
+    globalThis.addEventListener(
+        "onmozorientationchange",
+        (e) => {
+            emit(WINDOW_ONORIENTATION_CHANGE, e);
+        },
+        false
+    );
+
+    if (screenOrientation === true) {
+        globalThis.screen.orientation.onchange = function (e) {
+            emit(WINDOW_ONORIENTATION_CHANGE, e);
+        };
+    }
+
+    // Automatically update relative canvas position on scroll
+    globalThis.addEventListener("scroll", utils.function.throttle((e) => {
+        emit(WINDOW_ONSCROLL, e);
+    }, 100), false);
+
+    // register to the channel
+    on(WINDOW_ONRESIZE, onresize, this);
+    on(WINDOW_ONORIENTATION_CHANGE, onresize, this);
+
+    try {
+        switch (settings.renderer) {
+            case AUTO:
+            case WEBGL:
+                renderer = autoDetectRenderer(settings);
+                break;
+            default:
+                renderer = new CanvasRenderer(settings);
+                break;
+        }
+    } catch (e) {
+        console(e.message);
+        // me.video.init() returns false if failing at creating/using a HTML5 canvas
+        return false;
+    }
+
+    // add our canvas (default to document.body if settings.parent is undefined)
+    parent = getElement(typeof settings.parent !== "undefined" ? settings.parent : document.body);
+    parent.appendChild(renderer.getCanvas());
+
+    // Mobile browser hacks
+    if (platform.isMobile) {
+        // Prevent the webview from moving on a swipe
+        enableSwipe(false);
+    }
+
+    // trigger an initial resize();
+    onresize();
+
+    // add an observer to detect when the dom tree is modified
+    if ("MutationObserver" in globalThis) {
+        // Create an observer instance linked to the callback function
+        var observer = new MutationObserver(onresize.bind(this));
+
+        // Start observing the target node for configured mutations
+        observer.observe(parent, {
+            attributes: false, childList: true, subtree: true
+        });
+    }
+
+    if (settings.consoleHeader !== false) {
+        var renderType = (renderer instanceof CanvasRenderer) ? "CANVAS" : "WebGL" + renderer.WebGLVersion;
+        var audioType = hasWebAudio ? "Web Audio" : "HTML5 Audio";
+        var gpu_renderer = (typeof renderer.GPURenderer === "string") ? " (" + renderer.GPURenderer + ")" : "";
+        // output video information in the console
+        console.log(
+            renderType + " renderer" + gpu_renderer + " | " +
+            audioType + " | " +
+            "pixel ratio " + devicePixelRatio + " | " +
+            (platform.nodeJS ? "node.js" : platform.isMobile ? "mobile" : "desktop") + " | " +
+            getScreenOrientation() + " | " +
+            language
+        );
+        console.log( "resolution: " + "requested " + width + "x" + height +
+            ", got " + renderer.getWidth() + "x" + renderer.getHeight()
+        );
+    }
+
+    // notify the video has been initialized
+    emit(VIDEO_INIT);
+
+    return true;
+}
+
+/**
+ * Create and return a new Canvas element
+ * @function video.createCanvas
+ * @param {number} width - width
+ * @param {number} height - height
+ * @param {boolean} [returnOffscreenCanvas=false] - will return an OffscreenCanvas if supported
+ * @returns {HTMLCanvasElement|OffscreenCanvas}
+ */
+function createCanvas(width, height, returnOffscreenCanvas = false) {
+    var _canvas;
+
+    if (width === 0 || height === 0) {
+        throw new Error("width or height was zero, Canvas could not be initialized !");
+    }
+
+    if (offscreenCanvas === true && returnOffscreenCanvas === true) {
+        _canvas = new globalThis.OffscreenCanvas(0, 0);
+        // stubbing style for compatibility,
+        // as OffscreenCanvas is detached from the DOM
+        if (typeof _canvas.style === "undefined") {
+            _canvas.style = {};
+        }
+    } else {
+        // "else" create a "standard" canvas
+        _canvas = document.createElement("canvas");
+    }
+    _canvas.width = width;
+    _canvas.height = height;
+
+    return _canvas;
+}
+
+/**
+ * return a reference to the parent DOM element holding the main canvas
+ * @function video.getParent
+ * @returns {HTMLElement}
+ */
+function getParent() {
+    return parent;
+}
+
+/**
+ * scale the "displayed" canvas by the given scalar.
+ * this will modify the size of canvas element directly.
+ * Only use this if you are not using the automatic scaling feature.
+ * @function video.scale
+ * @see video.init
+ * @param {number} x - x scaling multiplier
+ * @param {number} y - y scaling multiplier
+ */
+function scale(x, y) {
+    var canvas = renderer.getCanvas();
+    var context = renderer.getContext();
+    var settings = renderer.settings;
+    var pixelRatio = devicePixelRatio;
+
+    var w = settings.zoomX = canvas.width * x * pixelRatio;
+    var h = settings.zoomY = canvas.height * y * pixelRatio;
+
+    // update the global scale variable
+    scaleRatio.set(x * pixelRatio, y * pixelRatio);
+
+    // adjust CSS style based on device pixel ratio
+    canvas.style.width = (w / pixelRatio) + "px";
+    canvas.style.height = (h / pixelRatio) + "px";
+
+    // if anti-alias and blend mode were resetted (e.g. Canvas mode)
+    renderer.setAntiAlias(context, settings.antiAlias);
+    renderer.setBlendMode(settings.blendMode, context);
+
+    // force repaint
+    game.repaint();
+}
+
+export { AUTO, CANVAS, WEBGL, createCanvas, getParent, init, parent, renderer, scale, scaleRatio };