melonjs 14.1.2 → 14.3.0

package/src/video/utils/autodetect.js

@@ -0,0 +1,18 @@
+import { isWebGLSupported } from "../../system/device";
+import WebGLRenderer from "../webgl/webgl_renderer";
+import CanvasRenderer from "../canvas/canvas_renderer";
+
+/**
+ * Auto-detect the best renderer to use
+ * @ignore
+ */
+export 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);
+}

package/src/video/video.js

@@ -1,133 +1,14 @@
-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 * as event from "./../system/event.js";
-import game from "./../game.js";
+import { initialized, game } from "./../index.js";
 import * as device from "./../system/device.js";
-import { initialized, version } from "./../index.js";
+import utils from "./../utils/utils.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 (device.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 = device.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
  */
@@ -135,7 +16,6 @@ export const CANVAS = 0;
 
 /**
  * Select the WebGL renderer
- * @name WEBGL
  * @memberof video
  * @constant
  */
@@ -143,36 +23,15 @@ export const WEBGL = 1;
 
 /**
  * Auto-select the renderer (Attempt WebGL first, with fallback to Canvas)
- * @name AUTO
  * @memberof video
  * @constant
  */
 export const AUTO = 2;
 
-/**
- * the parent container of the main canvas element
- * @ignore
- * @type {HTMLElement}
- * @readonly
- * @name parent
- * @memberof video
- */
-export let parent = null;
-
-/**
- * the scaling ratio to be applied to the display canvas
- * @name scaleRatio
- * @type {Vector2d}
- * @default <1,1>
- * @memberof video
- */
-export let scaleRatio = new Vector2d(1, 1);
-
  /**
   * A reference to the active Canvas or WebGL active renderer renderer
-  * @name renderer
-  * @type {CanvasRenderer|WebGLRenderer}
   * @memberof video
+  * @type {CanvasRenderer|WebGLRenderer}
   */
 export let renderer = null;
 
@@ -193,12 +52,12 @@ export let renderer = null;
  * <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
+ * @memberof video
  * @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|Renderer} [options.renderer=video.AUTO] - renderer to use (me.video.CANVAS, me.video.WEBGL, me.video.AUTO), or a custom renderer class
  * @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
@@ -217,60 +76,22 @@ export let renderer = null;
  * });
  */
 export 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;
+    try {
+         // initialize the default game Application with the given options
+        game.init(width, height, options);
+    } catch (e) {
+        console(e.message);
+        // me.video.init() historically returns false if failing at creating/using a HTML5 canvas
+        return false;
     }
 
-    // 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;
+    // assign the default renderer
+    renderer = game.renderer;
 
     //add a channel for the onresize/onorientationchange event
     globalThis.addEventListener(
@@ -290,6 +111,7 @@ export function init(width, height, options) {
         },
         false
     );
+
     // pre-fixed implementation on mozzila
     globalThis.addEventListener(
         "onmozorientationchange",
@@ -310,68 +132,6 @@ export function init(width, height, options) {
         event.emit(event.WINDOW_ONSCROLL, e);
     }, 100), false);
 
-    // register to the channel
-    event.on(event.WINDOW_ONRESIZE, onresize, this);
-    event.on(event.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 = device.getElement(typeof settings.parent !== "undefined" ? settings.parent : document.body);
-    parent.appendChild(renderer.getCanvas());
-
-    // Mobile browser hacks
-    if (device.platform.isMobile) {
-        // Prevent the webview from moving on a swipe
-        device.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 = device.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 " + device.devicePixelRatio + " | " +
-            (device.platform.nodeJS ? "node.js" : device.platform.isMobile ? "mobile" : "desktop") + " | " +
-            device.getScreenOrientation() + " | " +
-            device.language
-        );
-        console.log( "resolution: " + "requested " + width + "x" + height +
-            ", got " + renderer.getWidth() + "x" + renderer.getHeight()
-        );
-    }
-
     // notify the video has been initialized
     event.emit(event.VIDEO_INIT);
 
@@ -380,7 +140,7 @@ export function init(width, height, options) {
 
 /**
  * Create and return a new Canvas element
- * @function video.createCanvas
+ * @memberof video
  * @param {number} width - width
  * @param {number} height - height
  * @param {boolean} [returnOffscreenCanvas=false] - will return an OffscreenCanvas if supported
@@ -412,42 +172,8 @@ export function createCanvas(width, height, returnOffscreenCanvas = false) {
 
 /**
  * return a reference to the parent DOM element holding the main canvas
- * @function video.getParent
  * @returns {HTMLElement}
  */
 export 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
- */
-export function scale(x, y) {
-    var canvas = renderer.getCanvas();
-    var context = renderer.getContext();
-    var settings = renderer.settings;
-    var pixelRatio = device.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();
+    return game.getParentElement();
 }

package/src/video/webgl/glshader.js

@@ -1,9 +1,8 @@
 import * as event from "./../../system/event.js";
-import * as device from "./../../system/device.js";
 import { extractUniforms } from "./utils/uniforms.js";
 import { extractAttributes } from "./utils/attributes.js";
 import { compileProgram } from "./utils/program.js";
-import { setPrecision } from "./utils/precision.js";
+import { setPrecision, getMaxShaderPrecision } from "./utils/precision.js";
 import { minify } from "./utils/string.js";
 
 /**
@@ -50,13 +49,13 @@ import { minify } from "./utils/string.js";
          * the vertex shader source code
          * @type {string}
          */
-        this.vertex = setPrecision(minify(vertex), precision || device.getMaxShaderPrecision(this.gl));
+        this.vertex = setPrecision(minify(vertex), precision || getMaxShaderPrecision(this.gl));
 
         /**
          * the fragment shader source code
          * @type {string}
          */
-        this.fragment = setPrecision(minify(fragment), precision || device.getMaxShaderPrecision(this.gl));
+        this.fragment = setPrecision(minify(fragment), precision || getMaxShaderPrecision(this.gl));
 
         /**
          * the location attributes of the shader

package/src/video/webgl/utils/precision.js

@@ -9,3 +9,21 @@ export function setPrecision(src, precision) {
     }
     return src;
 }
+
+/**
+ * return the highest precision format supported by this device for GL Shaders
+ * @ignore
+ * @param {WebGLRenderingContext} gl
+ * @returns {boolean} "lowp", "mediump", or "highp"
+ */
+export function getMaxShaderPrecision(gl) {
+    if (gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT ).precision > 0 &&
+        gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT ).precision > 0) {
+            return "highp";
+    }
+    if (gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.MEDIUM_FLOAT ).precision > 0 &&
+        gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.MEDIUM_FLOAT ).precision > 0) {
+            return "mediump";
+    }
+    return "lowp";
+}

package/src/video/webgl/webgl_renderer.js

@@ -136,6 +136,9 @@ import { isPowerOfTwo, nextPowerOfTwo } from "./../../math/math.js";
         // Create a texture cache
         this.cache = new TextureCache(this.maxTextures);
 
+        // set the renderer type
+        this.type =  "WebGL" + this.WebGLVersion;
+
         // to simulate context lost and restore in WebGL:
         // var ctx = me.video.renderer.context.getExtension('WEBGL_lose_context');
         // ctx.loseContext()