melonjs 12.0.0 → 13.1.1

package/src/video/renderer.js

@@ -2,7 +2,7 @@ import Color from "./../math/color.js";
 import Matrix3d from "./../math/matrix3.js";
 import { createCanvas, renderer } from "./video.js";
 import * as event from "./../system/event.js";
-import device from "./../system/device.js";
+import * as device from "./../system/device.js";
 import { setPrefixed } from "./../utils/agent.js";
 import Rect from "./../geometries/rectangle.js";
 import RoundRect from "./../geometries/roundrect.js";
@@ -22,7 +22,6 @@ class Renderer {
      * @param {number} options.width The width of the canvas without scaling
      * @param {number} options.height The height of the canvas without scaling
      * @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
-     * @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering
      * @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing, use false (default) for a pixelated effect.
      * @param {boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
      * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
@@ -84,13 +83,9 @@ class Renderer {
         } else if (typeof this.settings.canvas !== "undefined") {
             this.canvas = this.settings.canvas;
         } else {
-            this.canvas = createCanvas(this.settings.zoomX, this.settings.zoomY);
+            this.canvas = createCanvas(this.settings.width, this.settings.height);
         }
 
-        // canvas object and context
-        this.backBufferCanvas = this.canvas;
-        this.context = null;
-
         // global color
         this.currentColor = new Color(0, 0, 0, 1.0);
 
@@ -116,6 +111,13 @@ class Renderer {
      */
     clear() {}
 
+    /**
+     * render the main framebuffer on screen
+     * @name flush
+     * @memberof Renderer
+     */
+    flush() {}
+
     /**
      * Reset context state
      * @name reset
@@ -129,39 +131,29 @@ class Renderer {
         this.cache.clear();
         this.currentScissor[0] = 0;
         this.currentScissor[1] = 0;
-        this.currentScissor[2] = this.backBufferCanvas.width;
-        this.currentScissor[3] = this.backBufferCanvas.height;
+        this.currentScissor[2] = this.getCanvas().width;
+        this.currentScissor[3] = this.getCanvas().height;
         this.clearMask();
     }
 
     /**
-     * return a reference to the system canvas
+     * return a reference to the canvas which this renderer draws to
      * @name getCanvas
      * @memberof Renderer
      * @returns {HTMLCanvasElement}
      */
     getCanvas() {
-        return this.backBufferCanvas;
-    }
-
-    /**
-     * return a reference to the screen canvas
-     * @name getScreenCanvas
-     * @memberof Renderer
-     * @returns {HTMLCanvasElement}
-     */
-    getScreenCanvas() {
         return this.canvas;
     }
 
+
     /**
-     * return a reference to the screen canvas corresponding 2d Context<br>
-     * (will return buffered context if double buffering is enabled, or a reference to the Screen Context)
-     * @name getScreenContext
+     * return a reference to this renderer canvas corresponding Context
+     * @name getContext
      * @memberof Renderer
-     * @returns {CanvasRenderingContext2D}
+     * @returns {CanvasRenderingContext2D|WebGLRenderingContext}
      */
-    getScreenContext() {
+    getContext() {
         return this.context;
     }
 
@@ -220,7 +212,7 @@ class Renderer {
      * @returns {number}
      */
     getWidth() {
-        return this.backBufferCanvas.width;
+        return this.getCanvas().width;
     }
 
     /**
@@ -230,7 +222,7 @@ class Renderer {
      * @returns {number} height of the system Canvas
      */
     getHeight() {
-        return this.backBufferCanvas.height;
+        return this.getCanvas().height;
     }
 
     /**
@@ -276,9 +268,10 @@ class Renderer {
      * @param {number} height new height of the canvas
      */
     resize(width, height) {
-        if (width !== this.backBufferCanvas.width || height !== this.backBufferCanvas.height) {
-            this.canvas.width = this.backBufferCanvas.width = width;
-            this.canvas.height = this.backBufferCanvas.height = height;
+        var canvas = this.getCanvas();
+        if (width !== canvas.width || height !== canvas.height) {
+            canvas.width = width;
+            canvas.height = height;
             this.currentScissor[0] = 0;
             this.currentScissor[1] = 0;
             this.currentScissor[2] = width;

package/src/video/texture/canvas_texture.js

@@ -1,9 +1,12 @@
 import { createCanvas } from "./../video.js";
+import { setPrefixed } from "./../../utils/agent.js";
 
-// default video settings
+// default canvas settings
 var defaultAttributes = {
     offscreenCanvas : false,
-    willReadFrequently : false
+    willReadFrequently : false,
+    antiAlias : false,
+    context: "2d"
 };
 
 /**
@@ -13,9 +16,11 @@ 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 2d context
+     * @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) {
 
@@ -33,6 +38,9 @@ class CanvasTexture {
          * @type {CanvasRenderingContext2D}
          */
         this.context = this.canvas.getContext("2d", { willReadFrequently: attributes.willReadFrequently });
+
+        // enable or disable antiAlias if specified
+        this.setAntiAlias(attributes.antiAlias);
     }
 
     /**
@@ -51,6 +59,34 @@ class CanvasTexture {
         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

package/src/video/video.js

@@ -3,8 +3,8 @@ 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 { repaint } from "./../game.js";
-import device from "./../system/device.js";
+import game from "./../game.js";
+import * as device from "./../system/device.js";
 import { initialized, version } from "./../index.js";
 
 /**
@@ -20,10 +20,9 @@ var designHeight = 0;
 var settings = {
     parent : undefined,
     renderer : 2, // AUTO
-    doubleBuffering : false,
     autoScale : false,
     scale : 1.0,
-    scaleMethod : "fit",
+    scaleMethod : "manual",
     transparent : false,
     blendMode : "normal",
     antiAlias : false,
@@ -65,7 +64,7 @@ function onresize() {
         var canvasMaxHeight = Infinity;
 
         if (globalThis.getComputedStyle) {
-            var style = globalThis.getComputedStyle(renderer.getScreenCanvas(), null);
+            var style = globalThis.getComputedStyle(renderer.getCanvas(), null);
             canvasMaxWidth = parseInt(style.maxWidth, 10) || Infinity;
             canvasMaxHeight = parseInt(style.maxHeight, 10) || Infinity;
         }
@@ -119,6 +118,9 @@ function onresize() {
 
         // 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);
     }
 };
 
@@ -196,7 +198,6 @@ export let renderer = null;
  * @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 {boolean} [options.doubleBuffering=false] enable/disable double buffering
  * @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
@@ -211,8 +212,7 @@ export let renderer = null;
  *     parent : "screen",
  *     renderer : me.video.AUTO,
  *     scale : "auto",
- *     scaleMethod : "fit",
- *     doubleBuffering : true
+ *     scaleMethod : "fit"
  * });
  */
 export function init(width, height, options) {
@@ -228,7 +228,6 @@ export function init(width, height, options) {
     // sanitize potential given parameters
     settings.width = width;
     settings.height = height;
-    settings.doubleBuffering = !!(settings.doubleBuffering);
     settings.transparent = !!(settings.transparent);
     settings.antiAlias = !!(settings.antiAlias);
     settings.failIfMajorPerformanceCaveat = !!(settings.failIfMajorPerformanceCaveat);
@@ -248,24 +247,21 @@ export function init(width, height, options) {
         console.log("melonJS 2 (v" + version + ") | http://melonjs.org" );
     }
 
-    // override renderer settings if &webgl is defined in the URL
+    // 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);
 
-    // force double buffering if scaling is required
-    if (settings.autoScale || (settings.scale !== 1.0)) {
-        settings.doubleBuffering = true;
-    }
-
     // hold the requested video size ratio
     designRatio = width / height;
     designWidth = width;
@@ -302,7 +298,7 @@ export function init(width, height, options) {
         false
     );
 
-    if (device.ScreenOrientation === true) {
+    if (device.screenOrientation === true) {
         globalThis.screen.orientation.onchange = function (e) {
             event.emit(event.WINDOW_ONORIENTATION_CHANGE, e);
         };
@@ -337,7 +333,13 @@ export function init(width, height, options) {
 
     // 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.getScreenCanvas());
+    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();
@@ -362,7 +364,7 @@ export function init(width, height, options) {
             renderType + " renderer" + gpu_renderer + " | " +
             audioType + " | " +
             "pixel ratio " + device.devicePixelRatio + " | " +
-            (device.nodeJS ? "node.js" : device.isMobile ? "mobile" : "desktop") + " | " +
+            (device.platform.nodeJS ? "node.js" : device.platform.isMobile ? "mobile" : "desktop") + " | " +
             device.getScreenOrientation() + " | " +
             device.language
         );
@@ -382,18 +384,18 @@ export function init(width, height, options) {
  * @function video.createCanvas
  * @param {number} width width
  * @param {number} height height
- * @param {boolean} [offscreenCanvas=false] will return an OffscreenCanvas if supported
+ * @param {boolean} [returnOffscreenCanvas=false] will return an OffscreenCanvas if supported
  * @returns {HTMLCanvasElement|OffscreenCanvas}
  */
-export function createCanvas(width, height, offscreenCanvas = false) {
+export 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 (device.OffscreenCanvas === true && offscreenCanvas === true) {
-        _canvas = new OffscreenCanvas(0, 0);
+    if (device.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") {
@@ -428,8 +430,8 @@ export function getParent() {
  * @param {number} y y scaling multiplier
  */
 export function scale(x, y) {
-    var canvas = renderer.getScreenCanvas();
-    var context = renderer.getScreenContext();
+    var canvas = renderer.getCanvas();
+    var context = renderer.getContext();
     var settings = renderer.settings;
     var pixelRatio = device.devicePixelRatio;
 
@@ -448,5 +450,5 @@ export function scale(x, y) {
     renderer.setBlendMode(settings.blendMode, context);
 
     // force repaint
-    repaint();
+    game.repaint();
 };

package/src/video/webgl/glshader.js

@@ -1,5 +1,5 @@
 import * as event from "./../../system/event.js";
-import device from "./../../system/device.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";

package/src/video/webgl/webgl_compositor.js

@@ -132,8 +132,8 @@ class WebGLCompositor {
         // initial viewport size
         this.setViewport(
             0, 0,
-            this.renderer.getScreenCanvas().width,
-            this.renderer.getScreenCanvas().height
+            this.renderer.getCanvas().width,
+            this.renderer.getCanvas().height
         );
 
         // Initialize clear color

package/src/video/webgl/webgl_renderer.js

@@ -20,7 +20,6 @@ class WebGLRenderer extends Renderer {
      * @param {number} options.width The width of the canvas without scaling
      * @param {number} options.height The height of the canvas without scaling
      * @param {HTMLCanvasElement} [options.canvas] The html canvas to draw to on screen
-     * @param {boolean} [options.doubleBuffering=false] Whether to enable double buffering
      * @param {boolean} [options.antiAlias=false] Whether to enable anti-aliasing
      * @param {boolean} [options.failIfMajorPerformanceCaveat=true] If true, the renderer will switch to CANVAS mode if the performances of a WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.
      * @param {boolean} [options.transparent=false] Whether to enable transparency on the canvas (performance hit when enabled)
@@ -72,7 +71,7 @@ class WebGLRenderer extends Renderer {
          * @memberof WebGLRenderer
          * @type {WebGLRenderingContext}
          */
-        this.context = this.gl = this.getContextGL(this.getScreenCanvas(), options.transparent);
+        this.context = this.gl = this.getContextGL(this.getCanvas(), options.transparent);
 
         /**
          * Maximum number of texture unit supported under the current context
@@ -154,13 +153,13 @@ class WebGLRenderer extends Renderer {
         // to simulate context lost and restore in WebGL:
         // var ctx = me.video.renderer.context.getExtension('WEBGL_lose_context');
         // ctx.loseContext()
-        this.getScreenCanvas().addEventListener("webglcontextlost", (e) => {
+        this.getCanvas().addEventListener("webglcontextlost", (e) => {
             e.preventDefault();
             this.isContextValid = false;
             event.emit(event.ONCONTEXT_LOST, this);
         }, false );
         // ctx.restoreContext()
-        this.getScreenCanvas().addEventListener("webglcontextrestored", () => {
+        this.getCanvas().addEventListener("webglcontextrestored", () => {
             this.reset();
             this.isContextValid = true;
             event.emit(event.ONCONTEXT_RESTORED, this);
@@ -231,7 +230,7 @@ class WebGLRenderer extends Renderer {
      */
     createFontTexture(cache) {
         if (typeof this.fontTexture === "undefined") {
-            var canvas = this.backBufferCanvas;
+            var canvas = this.getCanvas();
             var width = canvas.width;
             var height = canvas.height;
 
@@ -459,17 +458,6 @@ class WebGLRenderer extends Renderer {
         this.currentCompositor.addQuad(pattern, x, y, width, height, uvs[0], uvs[1], uvs[2], uvs[3], this.currentTint.toUint32());
     }
 
-
-    /**
-     * return a reference to the screen canvas corresponding WebGL Context
-     * @name getScreenContext
-     * @memberof WebGLRenderer
-     * @returns {WebGLRenderingContext}
-     */
-    getScreenContext() {
-        return this.gl;
-    }
-
     /**
      * Returns the WebGL Context object of the given Canvas
      * @name getContextGL
@@ -627,8 +615,8 @@ class WebGLRenderer extends Renderer {
             this.gl.disable(this.gl.SCISSOR_TEST);
             this.currentScissor[0] = 0;
             this.currentScissor[1] = 0;
-            this.currentScissor[2] = this.backBufferCanvas.width;
-            this.currentScissor[3] = this.backBufferCanvas.height;
+            this.currentScissor[2] = this.getCanvas().width;
+            this.currentScissor[3] = this.getCanvas().height;
         }
     }
 
@@ -719,7 +707,7 @@ class WebGLRenderer extends Renderer {
      * @param {number} width Line width
      */
     setLineWidth(width) {
-        this.getScreenContext().lineWidth(width);
+        this.getContext().lineWidth(width);
     }
 
     /**
@@ -1015,7 +1003,7 @@ class WebGLRenderer extends Renderer {
      * @param {number} height
      */
     clipRect(x, y, width, height) {
-        var canvas = this.backBufferCanvas;
+        var canvas = this.getCanvas();
         var gl = this.gl;
         // if requested box is different from the current canvas size
         if (x !== 0 || y !== 0 || width !== canvas.width || height !== canvas.height) {