melonjs 10.9.0 → 10.10.0

package/src/state/stage.js

@@ -1,6 +1,7 @@
 import { renderer } from "./../video/video.js";
 import * as  game from "./../game.js";
 import Camera2d from "./../camera/camera2d.js";
+import Color from "./../math/color.js";
 
 // a default camera instance to use across all stages
 var default_camera;
@@ -37,6 +38,40 @@ class Stage {
          */
         this.cameras = new Map();
 
+        /**
+         * The list of active lights in this stage.
+         * (Note: Canvas Renderering mode will only properly support one light per stage)
+         * @public
+         * @type {Map<Light2d>}
+         * @name lights
+         * @memberof Stage
+         * @see Light2d
+         * @see Stage.ambientLight
+         * @example
+         * // create a white spot light
+         * var 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
+         * this.ambientLight.parseCSS("#1117");
+         * // make the light follow the mouse
+         * me.input.registerPointerEvent("pointermove", me.game.viewport, (event) => {
+         *    whiteLight.centerOn(event.gameX, event.gameY);
+         * });
+         */
+        this.lights = new Map();
+
+        /**
+         * an ambient light that will be added to the stage rendering
+         * @public
+         * @type {Color}
+         * @name ambientLight
+         * @memberof Stage
+         * @default "#000000"
+         * @see Light2d
+         */
+        this.ambientLight = new Color(0, 0, 0, 0);
+
         /**
          * The given constructor options
          * @public
@@ -92,7 +127,14 @@ class Stage {
         // update the camera/viewport
         // iterate through all cameras
         this.cameras.forEach(function(camera) {
-            if (camera.update(dt)) {
+            if (camera.update(dt) === true) {
+                isDirty = true;
+            };
+        });
+
+        // update all lights
+        this.lights.forEach((light) => {
+            if (light.update(dt) === true) {
                 isDirty = true;
             };
         });
@@ -110,9 +152,32 @@ class Stage {
      */
     draw(renderer) {
         // iterate through all cameras
-        this.cameras.forEach(function(camera) {
+        this.cameras.forEach((camera) => {
             // render the root container
             camera.draw(renderer, game.world);
+
+            // render the ambient light
+            if (this.ambientLight.alpha !== 0) {
+                renderer.save();
+                // iterate through all lights
+                this.lights.forEach((light) => {
+                    // cut out all lights visible areas
+                    renderer.setMask(light.getVisibleArea(), true);
+                });
+                // fill the screen with the ambient color
+                renderer.setColor(this.ambientLight);
+                renderer.fillRect(0, 0, camera.width, camera.height);
+                // clear all masks
+                renderer.clearMask();
+                renderer.restore();
+            }
+
+            // render all lights
+            this.lights.forEach((light) => {
+                light.preDraw(renderer, game.world);
+                light.draw(renderer, game.world);
+                light.postDraw(renderer, game.world);
+            });
         });
     }
 
@@ -123,6 +188,11 @@ class Stage {
     destroy() {
         // clear all cameras
         this.cameras.clear();
+        // clear all lights
+        this.lights.forEach((light) => {
+            light.destroy();
+        });
+        this.lights.clear();
         // notify the object
         this.onDestroyEvent.apply(this, arguments);
     }

package/src/text/text.js

@@ -1,6 +1,6 @@
 import Color from "./../math/color.js";
 import WebGLRenderer from "./../video/webgl/webgl_renderer.js";
-import { renderer as globalRenderer, createCanvas } from "./../video/video.js";
+import { renderer as globalRenderer } from "./../video/video.js";
 import { trimRight } from "./../utils/string.js";
 import pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
@@ -23,7 +23,7 @@ var toPX = [12, 24, 0.75, 1];
 // return a valid 2d context for Text rendering/styling
 var getContext2d = function (renderer, text) {
     if (text.offScreenCanvas === true) {
-        return text.context;
+        return text.canvasTexture.context;
     } else {
         return renderer.getFontContext();
     }
@@ -190,8 +190,7 @@ class Text extends Renderable {
 
         if (settings.offScreenCanvas === true) {
             this.offScreenCanvas = true;
-            this.canvas = createCanvas(2, 2, true);
-            this.context = this.canvas.getContext("2d");
+            this.canvasTexture = pool.pull("CanvasTexture", 2, 2, true);
         }
 
         // instance to text metrics functions
@@ -206,10 +205,9 @@ class Text extends Renderable {
         // free the canvas and potential corresponding texture when deactivated
         if (this.offScreenCanvas === true) {
             globalRenderer.currentCompositor.deleteTexture2D(globalRenderer.currentCompositor.getTexture2D(this.glTextureUnit));
-            globalRenderer.cache.delete(this.canvas);
-            this.canvas.width = this.canvas.height = 0;
-            this.context = undefined;
-            this.canvas = undefined;
+            globalRenderer.cache.delete(this.canvasTexture.canvas);
+            pool.push(this.canvasTexture);
+            this.canvasTexture = undefined;
             this.glTextureUnit = undefined;
         }
     }
@@ -307,7 +305,7 @@ class Text extends Renderable {
 
             if (globalRenderer instanceof WebGLRenderer) {
                 // invalidate the previous corresponding texture so that it can reuploaded once changed
-                this.glTextureUnit = globalRenderer.cache.getUnit(globalRenderer.cache.get(this.canvas));
+                this.glTextureUnit = globalRenderer.cache.getUnit(globalRenderer.cache.get(this.canvasTexture.canvas));
                 globalRenderer.currentCompositor.unbindTexture2D(null, this.glTextureUnit);
 
                 if (globalRenderer.WebGLVersion === 1) {
@@ -318,14 +316,12 @@ class Text extends Renderable {
             }
 
             // resize the cache canvas if necessary
-            if (this.canvas.width < width || this.canvas.height < height) {
-                this.canvas.width = width;
-                this.canvas.height = height;
-                // resizing the canvas will automatically clear its content
-            } else {
-                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            if (this.canvasTexture.width < width || this.canvasTexture.height < height) {
+                this.canvasTexture.resize(width, height);
             }
-            this._drawFont(this.context, this._text,  this.pos.x - this.metrics.x, this.pos.y - this.metrics.y, false);
+
+            this.canvasTexture.clear();
+            this._drawFont(this.canvasTexture.context, this._text,  this.pos.x - this.metrics.x, this.pos.y - this.metrics.y, false);
         }
 
         this.isDirty = true;
@@ -389,7 +385,7 @@ class Text extends Renderable {
 
         // draw the text
         if (this.offScreenCanvas === true) {
-            renderer.drawImage(this.canvas, x, y);
+            renderer.drawImage(this.canvasTexture.canvas, x, y);
         } else {
             renderer.drawFont(this._drawFont(renderer.getFontContext(), this._text, x, y, stroke));
         }

package/src/video/canvas/canvas_renderer.js

@@ -1,8 +1,9 @@
 import Color from "./../../math/color.js";
 import Renderer from "./../renderer.js";
-import TextureCache from "./../texture_cache.js";
+import TextureCache from "./../texture/cache.js";
 import Ellipse from "./../../geometries/ellipse.js";
 import RoundRect from "./../../geometries/roundrect.js";
+import Bounds from "./../../physics/bounds.js";
 import { createCanvas } from "./../video.js";
 
 
@@ -72,7 +73,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Reset context state
      * @name reset
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      */
     reset() {
@@ -83,7 +84,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Reset the canvas transform to identity
      * @name resetTransform
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      */
     resetTransform() {
@@ -103,7 +104,7 @@ class CanvasRenderer extends Renderer {
      * <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.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {string} [mode="normal"] blend mode : "normal", "multiply", "lighter, "additive", "screen"
      * @param {CanvasRenderingContext2D} [context]
@@ -141,7 +142,7 @@ class CanvasRenderer extends Renderer {
     /**
      * prepare the framebuffer for drawing a new frame
      * @name clear
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      */
     clear() {
@@ -153,7 +154,7 @@ class CanvasRenderer extends Renderer {
     /**
      * render the main framebuffer on screen
      * @name flush
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      */
     flush() {
@@ -165,7 +166,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Clears the main framebuffer with the given color
      * @name clearColor
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {Color|string} [color="#000000"] CSS color.
      * @param {boolean} [opaque=false] Allow transparency [default] or clear the surface completely [true]
@@ -182,7 +183,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).
      * @name clearRect
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @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.
@@ -196,7 +197,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Create a pattern with the specified repetition
      * @name createPattern
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {Image} image Source image
      * @param {string} repeat Define how the pattern should be repeated
@@ -215,7 +216,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Draw an image onto the main using the canvas api
      * @name drawImage
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @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 {number} sx The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
@@ -279,7 +280,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Draw a pattern within the given rectangle.
      * @name drawPattern
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {CanvasPattern} pattern Pattern object
      * @param {number} x
@@ -303,7 +304,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke an arc at the specified coordinates with given radius, start and end points
      * @name strokeArc
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} x arc center point x-axis
      * @param {number} y arc center point y-axis
@@ -330,7 +331,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Fill an arc at the specified coordinates with given radius, start and end points
      * @name fillArc
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} x arc center point x-axis
      * @param {number} y arc center point y-axis
@@ -346,7 +347,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke an ellipse at the specified coordinates with given radius
      * @name strokeEllipse
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} x ellipse center point x-axis
      * @param {number} y ellipse center point y-axis
@@ -388,7 +389,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Fill an ellipse at the specified coordinates with given radius
      * @name fillEllipse
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} x ellipse center point x-axis
      * @param {number} y ellipse center point y-axis
@@ -402,7 +403,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke a line of the given two points
      * @name strokeLine
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} startX the start x coordinate
      * @param {number} startY the start y coordinate
@@ -424,7 +425,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Fill a line of the given two points
      * @name fillLine
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} startX the start x coordinate
      * @param {number} startY the start y coordinate
@@ -438,7 +439,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke the given me.Polygon on the screen
      * @name strokePolygon
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {Polygon} poly the shape to draw
      * @param {boolean} [fill=false] also fill the shape with the current color if true
@@ -467,7 +468,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Fill the given me.Polygon on the screen
      * @name fillPolygon
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {Polygon} poly the shape to draw
      */
@@ -478,7 +479,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke a rectangle at the specified coordinates
      * @name strokeRect
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} x
      * @param {number} y
@@ -499,7 +500,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Draw a filled rectangle at the specified coordinates
      * @name fillRect
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} x
      * @param {number} y
@@ -513,7 +514,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Stroke a rounded rectangle at the specified coordinates
      * @name strokeRoundRect
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} x
      * @param {number} y
@@ -537,7 +538,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Draw a rounded filled rectangle at the specified coordinates
      * @name fillRoundRect
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} x
      * @param {number} y
@@ -553,7 +554,7 @@ class CanvasRenderer extends Renderer {
     /**
      * return a reference to the system 2d Context
      * @name getContext
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @returns {CanvasRenderingContext2D}
      */
@@ -573,7 +574,7 @@ class CanvasRenderer extends Renderer {
     /**
      * save the canvas context
      * @name save
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      */
     save() {
@@ -583,7 +584,7 @@ class CanvasRenderer extends Renderer {
     /**
      * restores the canvas context
      * @name restore
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      */
     restore() {
@@ -598,7 +599,7 @@ class CanvasRenderer extends Renderer {
     /**
      * rotates the canvas context
      * @name rotate
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} angle in radians
      */
@@ -609,7 +610,7 @@ class CanvasRenderer extends Renderer {
     /**
      * scales the canvas context
      * @name scale
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} x
      * @param {number} y
@@ -622,7 +623,7 @@ 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.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {Color|string} color css color value
      */
@@ -638,7 +639,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Set the global alpha
      * @name setGlobalAlpha
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} alpha 0.0 to 1.0 values accepted.
      */
@@ -649,7 +650,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Return the global alpha
      * @name getGlobalAlpha
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @returns {number} global alpha value
      */
@@ -660,7 +661,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Set the line width on the context
      * @name setLineWidth
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} width Line width
      */
@@ -672,7 +673,7 @@ class CanvasRenderer extends Renderer {
      * Reset (overrides) the renderer transformation matrix to the
      * identity one, and then apply the given transformation matrix.
      * @name setTransform
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {Matrix2d} mat2d Matrix to transform by
      */
@@ -684,7 +685,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Multiply given matrix into the renderer tranformation matrix
      * @name transform
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {Matrix2d} mat2d Matrix to transform by
      */
@@ -708,7 +709,7 @@ class CanvasRenderer extends Renderer {
     /**
      * Translates the context to the given position
      * @name translate
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} x
      * @param {number} y
@@ -728,7 +729,7 @@ class CanvasRenderer extends Renderer {
      * and restore it (with the restore() method) any time in the future.
      * (<u>this is an experimental feature !</u>)
      * @name clipRect
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      * @param {number} x
      * @param {number} y
@@ -761,21 +762,28 @@ class CanvasRenderer extends Renderer {
      * 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.prototype
+     * @memberof CanvasRenderer
      * @function
      * @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
      */
-    setMask(mask) {
+    setMask(mask, invert = false) {
         var context = this.getContext();
-        var _x = mask.pos.x, _y = mask.pos.y;
 
-        context.save();
-
-        context.beginPath();
+        if (this.maskLevel === 0) {
+            // only save context on the first mask
+            context.save();
+            context.beginPath();
+        }
 
         // https://github.com/melonjs/melonJS/issues/648
-        if (mask instanceof Ellipse) {
-            var hw = mask.radiusV.x,
+        else if (mask instanceof RoundRect) {
+            context.roundRect(mask.top, mask.left, mask.width, mask.height, mask.radius);
+        } else if (mask instanceof Rect || mask instanceof Bounds) {
+            context.rect(mask.top, mask.left, mask.width, mask.height);
+        }  else if (mask instanceof Ellipse) {
+            const _x = mask.pos.x, _y = mask.pos.y,
+                hw = mask.radiusV.x,
                 hh = mask.radiusV.y,
                 lx = _x - hw,
                 rx = _x + hw,
@@ -794,31 +802,41 @@ class CanvasRenderer extends Renderer {
             context.bezierCurveTo(rx, ymax, xmax, by, _x, by);
             context.bezierCurveTo(xmin, by, lx, ymax, lx, _y);
             context.bezierCurveTo(lx, ymin, xmin, ty, _x, ty);
-        } else if (mask instanceof RoundRect) {
-            context.roundRect(_x, _y, mask.width, mask.height, mask.radius);
         } else {
-            context.moveTo(_x + mask.points[0].x, _y + mask.points[0].y);
+            const _x = mask.pos.x, _y = mask.pos.y;
             var point;
+
+            context.moveTo(_x + mask.points[0].x, _y + mask.points[0].y);
             for (var i = 1; i < mask.points.length; i++) {
                 point = mask.points[i];
                 context.lineTo(_x + point.x, _y + point.y);
             }
         }
 
-        context.clip();
+        this.maskLevel++;
+
+        if (invert === true) {
+            context.closePath();
+            context.globalCompositeOperation = "destination-atop";
+            context.fill();
+        } else {
+            context.clip();
+        }
     }
 
     /**
      * disable (remove) the rendering mask set through setMask.
      * @name clearMask
      * @see CanvasRenderer#setMask
-     * @memberof CanvasRenderer.prototype
+     * @memberof CanvasRenderer
      * @function
      */
     clearMask() {
-        this.getContext().restore();
+        if (this.maskLevel > 0) {
+            this.maskLevel = 0;
+            this.getContext().restore();
+        }
     }
-
 };
 
 export default CanvasRenderer;