melonjs 10.2.0 → 10.3.0

package/src/video/renderer.js

@@ -5,31 +5,30 @@ import * as event from "./../system/event.js";
 import device from "./../system/device.js";
 import { setPrefixed } from "./../utils/agent.js";
 import { Texture } from "./texture.js";
-import Rect from "./../shapes/rectangle.js";
-import Ellipse from "./../shapes/ellipse.js";
-import Polygon from "./../shapes/poly.js";
-import Line from "./../shapes/line.js";
+import Rect from "./../geometries/rectangle.js";
+import Ellipse from "./../geometries/ellipse.js";
+import Polygon from "./../geometries/poly.js";
+import Line from "./../geometries/line.js";
 import Bounds from "./../physics/bounds.js";
 
 /**
  * @classdesc
  * a base renderer object
  * @class Renderer
- * @memberOf me
- * @constructor
- * @param {Object} options The renderer parameters
- * @param {Number} options.width The width of the canvas without scaling
- * @param {Number} options.height The height of the canvas without scaling
+ * @memberof me
+ * @param {object} options The renderer parameters
+ * @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)
- * @param {Boolean} [options.blendMode="normal"] the default blend mode to use ("normal", "multiply")
- * @param {Boolean} [options.subPixel=false] Whether to enable subpixel rendering (performance hit when enabled)
- * @param {Boolean} [options.verbose=false] Enable the verbose mode that provides additional details as to what the renderer is doing
- * @param {Number} [options.zoomX=width] The actual width of the canvas with scaling applied
- * @param {Number} [options.zoomY=height] The actual height of the canvas with scaling applied
+ * @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)
+ * @param {boolean} [options.blendMode="normal"] the default blend mode to use ("normal", "multiply")
+ * @param {boolean} [options.subPixel=false] Whether to enable subpixel rendering (performance hit when enabled)
+ * @param {boolean} [options.verbose=false] Enable the verbose mode that provides additional details as to what the renderer is doing
+ * @param {number} [options.zoomX=width] The actual width of the canvas with scaling applied
+ * @param {number} [options.zoomY=height] The actual height of the canvas with scaling applied
  */
 class Renderer {
 
@@ -38,17 +37,17 @@ class Renderer {
          * The given constructor options
          * @public
          * @name settings
-         * @memberOf me.Renderer#
-         * @enum {Object}
+         * @memberof me.Renderer#
+         * @enum {object}
          */
         this.settings = options;
 
         /**
          * true if the current rendering context is valid
          * @name isContextValid
-         * @memberOf me.Renderer
+         * @memberof me.Renderer
          * @default true
-         * type {Boolean}
+         * type {boolean}
          */
         this.isContextValid = true;
 
@@ -104,7 +103,7 @@ class Renderer {
     /**
      * prepare the framebuffer for drawing a new frame
      * @name clear
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
      */
     clear() {}
@@ -112,7 +111,7 @@ class Renderer {
     /**
      * Reset context state
      * @name reset
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
      */
     reset() {
@@ -130,9 +129,9 @@ class Renderer {
     /**
      * return a reference to the system canvas
      * @name getCanvas
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
-     * @return {HTMLCanvasElement}
+     * @returns {HTMLCanvasElement}
      */
     getCanvas() {
         return this.backBufferCanvas;
@@ -141,9 +140,9 @@ class Renderer {
     /**
      * return a reference to the screen canvas
      * @name getScreenCanvas
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
-     * @return {HTMLCanvasElement}
+     * @returns {HTMLCanvasElement}
      */
     getScreenCanvas() {
         return this.canvas;
@@ -153,9 +152,9 @@ class Renderer {
      * 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
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
-     * @return {Context2d}
+     * @returns {CanvasRenderingContext2D}
      */
     getScreenContext() {
         return this.context;
@@ -164,9 +163,9 @@ class Renderer {
     /**
      * returns the current blend mode for this renderer
      * @name getBlendMode
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
-     * @return {String} blend mode
+     * @returns {string} blend mode
      */
     getBlendMode() {
         return this.currentBlendMode;
@@ -176,21 +175,21 @@ class Renderer {
      * Returns the 2D Context object of the given Canvas<br>
      * Also configures anti-aliasing and blend modes based on constructor options.
      * @name getContext2d
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
      * @param {HTMLCanvasElement} canvas
-     * @param {Boolean} [transparent=true] use false to disable transparency
-     * @return {CanvasRenderingContext2D}
+     * @param {boolean} [transparent=true] use false to disable transparency
+     * @returns {CanvasRenderingContext2D}
      */
-    getContext2d(c, transparent) {
-        if (typeof c === "undefined" || c === null) {
+    getContext2d(canvas, transparent) {
+        if (typeof canvas === "undefined" || canvas === null) {
             throw new Error(
                 "You must pass a canvas element in order to create " +
                 "a 2d context"
             );
         }
 
-        if (typeof c.getContext === "undefined") {
+        if (typeof canvas.getContext === "undefined") {
             throw new Error(
                 "Your browser does not support HTML5 canvas."
             );
@@ -200,12 +199,12 @@ class Renderer {
             transparent = true;
         }
 
-        var _context = c.getContext("2d", {
+        var _context = canvas.getContext("2d", {
                 "alpha" : transparent
         });
 
         if (!_context.canvas) {
-            _context.canvas = c;
+            _context.canvas = canvas;
         }
         this.setAntiAlias(_context, this.settings.antiAlias);
         return _context;
@@ -214,9 +213,9 @@ class Renderer {
     /**
      * return the width of the system Canvas
      * @name getWidth
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
-     * @return {Number}
+     * @returns {number}
      */
     getWidth() {
         return this.backBufferCanvas.width;
@@ -225,9 +224,9 @@ class Renderer {
     /**
      * return the height of the system Canvas
      * @name getHeight
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
-     * @return {Number}
+     * @returns {number} height of the system Canvas
      */
     getHeight() {
         return this.backBufferCanvas.height;
@@ -236,9 +235,9 @@ class Renderer {
     /**
      * get the current fill & stroke style color.
      * @name getColor
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
-     * @param {me.Color} current global color
+     * @returns {me.Color} current global color
      */
     getColor() {
         return this.currentColor;
@@ -247,9 +246,9 @@ class Renderer {
     /**
      * return the current global alpha
      * @name globalAlpha
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
-     * @return {Number}
+     * @returns {number}
      */
     globalAlpha() {
         return this.currentColor.glArray[3];
@@ -258,10 +257,10 @@ class Renderer {
     /**
      * check if the given rect or bounds overlaps with the renderer screen coordinates
      * @name overlaps
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
      * @param  {me.Rect|me.Bounds} bounds
-     * @return {boolean} true if overlaps
+     * @returns {boolean} true if overlaps
      */
     overlaps(bounds) {
         return (
@@ -274,10 +273,10 @@ class Renderer {
     /**
      * resizes the system canvas
      * @name resize
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
-     * @param {Number} width new width of the canvas
-     * @param {Number} height new height of the canvas
+     * @param {number} width new width of the canvas
+     * @param {number} height new height of the canvas
      */
     resize(width, height) {
         if (width !== this.backBufferCanvas.width || height !== this.backBufferCanvas.height) {
@@ -295,10 +294,10 @@ class Renderer {
     /**
      * enable/disable image smoothing (scaling interpolation) for the given context
      * @name setAntiAlias
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
-     * @param {Context2d} context
-     * @param {Boolean} [enable=false]
+     * @param {CanvasRenderingContext2D} context
+     * @param {boolean} [enable=false]
      */
     setAntiAlias(context, enable) {
         var canvas = context.canvas;
@@ -325,7 +324,7 @@ class Renderer {
     /**
      * set/change the current projection matrix (WebGL only)
      * @name setProjection
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
      * @param {me.Matrix3d} matrix
      */
@@ -336,9 +335,10 @@ class Renderer {
     /**
      * stroke the given shape
      * @name stroke
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
      * @param {me.Rect|me.Polygon|me.Line|me.Ellipse} shape a shape object to stroke
+     * @param {boolean} [fill=false] fill the shape with the current color if true
      */
     stroke(shape, fill) {
         if (shape instanceof Rect || shape instanceof Bounds) {
@@ -359,12 +359,12 @@ class Renderer {
     /**
      * tint the given image or canvas using the given color
      * @name tint
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
-     * @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} image the source image to be tinted
-     * @param {me.Color|String} color the color that will be used to tint the image
-     * @param {String} [mode="multiply"] the composition mode used to tint the image
-     * @return {HTMLCanvasElement|OffscreenCanvas} a new canvas element representing the tinted image
+     * @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} src the source image to be tinted
+     * @param {me.Color|string} color the color that will be used to tint the image
+     * @param {string} [mode="multiply"] the composition mode used to tint the image
+     * @returns {HTMLCanvasElement|OffscreenCanvas} a new canvas element representing the tinted image
      */
     tint(src, color, mode) {
         var canvas = createCanvas(src.width, src.height, true);
@@ -388,7 +388,7 @@ class Renderer {
     /**
      * fill the given shape
      * @name fill
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
      * @param {me.Rect|me.Polygon|me.Line|me.Ellipse} shape a shape object to fill
      */
@@ -401,7 +401,7 @@ class 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 me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
      * @param {me.Rect|me.Polygon|me.Line|me.Ellipse} [mask] the shape defining the mask to be applied
      */
@@ -412,7 +412,7 @@ class Renderer {
      * disable (remove) the rendering mask set through setMask.
      * @name clearMask
      * @see me.Renderer#setMask
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
      */
     clearMask() {}
@@ -420,10 +420,10 @@ class Renderer {
     /**
      * set a coloring tint for sprite based renderables
      * @name setTint
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
      * @param {me.Color} tint the tint color
-     * @param {Number} [alpha] an alpha value to be applied to the tint
+     * @param {number} [alpha] an alpha value to be applied to the tint
      */
     setTint(tint, alpha = tint.alpha) {
         // global tint color
@@ -435,7 +435,7 @@ class Renderer {
      * clear the rendering tint set through setTint.
      * @name clearTint
      * @see me.Renderer#setTint
-     * @memberOf me.Renderer.prototype
+     * @memberof me.Renderer.prototype
      * @function
      */
     clearTint() {

package/src/video/texture.js

@@ -8,62 +8,60 @@ import loader from "./../loader/loader.js";
 import { ETA } from "./../math/math.js";
 
 /**
-  * @classdesc
-  * A Texture atlas object, currently supports : <br>
-  * - [TexturePacker]{@link http://www.codeandweb.com/texturepacker/} : through JSON export (standard and multipack texture atlas) <br>
-  * - [ShoeBox]{@link http://renderhjs.net/shoebox/} : through JSON export using the
-  * melonJS setting [file]{@link https://github.com/melonjs/melonJS/raw/master/media/shoebox_JSON_export.sbx} <br>
-  * - [Free Texture Packer]{@link http://free-tex-packer.com/app/} : through JSON export (standard and multipack texture atlas) <br>
-  * - Standard (fixed cell size) spritesheet : through a {framewidth:xx, frameheight:xx, anchorPoint:me.Vector2d} object
-  * @class Texture
-  * @memberOf me.Renderer
-  * @constructor
-  * @param {Object|Object[]} atlas atlas information. See {@link me.loader.getJSON}
-  * @param {HTMLImageElement|HTMLCanvasElement|String|HTMLImageElement[]|HTMLCanvasElement[]|String[]} [source=atlas.meta.image] Image source
-  * @param {Boolean} [cached=false] Use true to skip caching this Texture
-  * @example
-  * // create a texture atlas from a JSON Object
-  * game.texture = new me.video.renderer.Texture(
-  *     me.loader.getJSON("texture")
-  * );
-  *
-  * // create a texture atlas from a multipack JSON Object
-  * game.texture = new me.video.renderer.Texture([
-  *     me.loader.getJSON("texture-0"),
-  *     me.loader.getJSON("texture-1"),
-  *     me.loader.getJSON("texture-2")
-  * ]);
-  *
-  * // create a texture atlas for a spritesheet with an anchorPoint in the center of each frame
-  * game.texture = new me.video.renderer.Texture(
-  *     {
-  *         framewidth : 32,
-  *         frameheight : 32,
-  *         anchorPoint : new me.Vector2d(0.5, 0.5)
-  *     },
-  *     me.loader.getImage("spritesheet")
-  * );
-  */
-
-  /**
-   * create a simple 1 frame texture atlas based on the given parameters
-   * @ignore
-   */
+ * create a simple 1 frame texture atlas based on the given parameters
+ * @ignore
+ */
 export function createAtlas(width, height, name = "default", repeat = "no-repeat") {
-    return {
-        "meta" : {
-            "app" : "melonJS",
-            "size" : { "w" : width, "h" : height },
-            "repeat" : repeat,
-            "image" : "default"
-        },
-        "frames" : [{
-            "filename" : name,
-            "frame" : { "x" : 0, "y" : 0, "w" : width, "h" : height }
-        }]
-    };
+   return {
+       "meta" : {
+           "app" : "melonJS",
+           "size" : { "w" : width, "h" : height },
+           "repeat" : repeat,
+           "image" : "default"
+       },
+       "frames" : [{
+           "filename" : name,
+           "frame" : { "x" : 0, "y" : 0, "w" : width, "h" : height }
+       }]
+   };
 }
 
+/**
+ * @classdesc
+ * A Texture atlas object, currently supports : <br>
+ * - [TexturePacker]{@link http://www.codeandweb.com/texturepacker/} : through JSON export (standard and multipack texture atlas) <br>
+ * - [ShoeBox]{@link http://renderhjs.net/shoebox/} : through JSON export using the
+ * melonJS setting [file]{@link https://github.com/melonjs/melonJS/raw/master/media/shoebox_JSON_export.sbx} <br>
+ * - [Free Texture Packer]{@link http://free-tex-packer.com/app/} : through JSON export (standard and multipack texture atlas) <br>
+ * - Standard (fixed cell size) spritesheet : through a {framewidth:xx, frameheight:xx, anchorPoint:me.Vector2d} object
+ * @class Texture
+ * @memberof me.Renderer
+ * @param {object|object[]} atlases atlas information. See {@link me.loader.getJSON}
+ * @param {HTMLImageElement|HTMLCanvasElement|string|HTMLImageElement[]|HTMLCanvasElement[]|string[]} [src=atlas.meta.image] Image source
+ * @param {boolean} [cache=false] Use true to skip caching this Texture
+ * @example
+ * // create a texture atlas from a JSON Object
+ * game.texture = new me.video.renderer.Texture(
+ *     me.loader.getJSON("texture")
+ * );
+ *
+ * // create a texture atlas from a multipack JSON Object
+ * game.texture = new me.video.renderer.Texture([
+ *     me.loader.getJSON("texture-0"),
+ *     me.loader.getJSON("texture-1"),
+ *     me.loader.getJSON("texture-2")
+ * ]);
+ *
+ * // create a texture atlas for a spritesheet with an anchorPoint in the center of each frame
+ * game.texture = new me.video.renderer.Texture(
+ *     {
+ *         framewidth : 32,
+ *         frameheight : 32,
+ *         anchorPoint : new me.Vector2d(0.5, 0.5)
+ *     },
+ *     me.loader.getImage("spritesheet")
+ * );
+ */
 export class Texture {
 
     constructor (atlases, src, cache) {
@@ -75,14 +73,14 @@ export class Texture {
 
         /**
          * the texture source(s) itself
-         * @type Map
+         * @type {Map}
          * @ignore
          */
         this.sources = new Map();
 
         /**
          * the atlas dictionnaries
-         * @type Map
+         * @type {Map}
          * @ignore
          */
         this.atlases = new Map();
@@ -325,14 +323,14 @@ export class Texture {
     /**
      * return the default or specified atlas dictionnary
      * @name getAtlas
-     * @memberOf me.Renderer.Texture
+     * @memberof me.Renderer.Texture
      * @function
-     * @param {String} [name] atlas name in case of multipack textures
-     * @return {Object}
+     * @param {string} [name] atlas name in case of multipack textures
+     * @returns {object}
      */
-    getAtlas(key) {
-        if (typeof key === "string") {
-            return this.atlases.get(key);
+    getAtlas(name) {
+        if (typeof name === "string") {
+            return this.atlases.get(name);
         } else {
             return this.atlases.values().next().value;
         }
@@ -341,9 +339,9 @@ export class Texture {
     /**
      * return the format of the atlas dictionnary
      * @name getFormat
-     * @memberOf me.Renderer.Texture
+     * @memberof me.Renderer.Texture
      * @function
-     * @return {String} will return "texturepacker", or "ShoeBox", or "melonJS", or "Spritesheet (fixed cell size)"
+     * @returns {string} will return "texturepacker", or "ShoeBox", or "melonJS", or "Spritesheet (fixed cell size)"
      */
     getFormat() {
         return this.format;
@@ -352,10 +350,10 @@ export class Texture {
     /**
      * return the source texture for the given region (or default one if none specified)
      * @name getTexture
-     * @memberOf me.Renderer.Texture
+     * @memberof me.Renderer.Texture
      * @function
-     * @param {Object} [region] region name in case of multipack textures
-     * @return {HTMLImageElement|HTMLCanvasElement}
+     * @param {object} [region] region name in case of multipack textures
+     * @returns {HTMLImageElement|HTMLCanvasElement}
      */
     getTexture(region) {
         if ((typeof region === "object") && (typeof region.texture === "string")) {
@@ -368,11 +366,11 @@ export class Texture {
     /**
      * return a normalized region (or frame) information for the specified sprite name
      * @name getRegion
-     * @memberOf me.Renderer.Texture
+     * @memberof me.Renderer.Texture
      * @function
-     * @param {String} name name of the sprite
-     * @param {String} [atlas] name of a specific atlas where to search for the region
-     * @return {Object}
+     * @param {string} name name of the sprite
+     * @param {string} [atlas] name of a specific atlas where to search for the region
+     * @returns {object}
      */
     getRegion(name, atlas) {
         var region;
@@ -393,10 +391,10 @@ export class Texture {
     /**
      * return the uvs mapping for the given region
      * @name getUVs
-     * @memberOf me.Renderer.Texture
+     * @memberof me.Renderer.Texture
      * @function
-     * @param {Object} region region (or frame) name
-     * @return {Float32Array} region Uvs
+     * @param {object} name region (or frame) name
+     * @returns {Float32Array} region Uvs
      */
     getUVs(name) {
         // Get the source texture region
@@ -417,12 +415,12 @@ export class Texture {
     /**
      * Create a sprite object using the first region found using the specified name
      * @name createSpriteFromName
-     * @memberOf me.Renderer.Texture
+     * @memberof me.Renderer.Texture
      * @function
-     * @param {String} name name of the sprite
-     * @param {Object} [settings] Additional settings passed to the {@link me.Sprite} contructor
-     * @param {Boolean} [nineSlice=false] if true returns a 9-slice sprite
-     * @return {me.Sprite|me.NineSliceSprite}
+     * @param {string} name name of the sprite
+     * @param {object} [settings] Additional settings passed to the {@link me.Sprite} contructor
+     * @param {boolean} [nineSlice=false] if true returns a 9-slice sprite
+     * @returns {me.Sprite|me.NineSliceSprite}
      * @example
      * // create a new texture object under the `game` namespace
      * game.texture = new me.video.renderer.Texture(
@@ -460,12 +458,12 @@ export class Texture {
     /**
      * Create an animation object using the first region found using all specified names
      * @name createAnimationFromName
-     * @memberOf me.Renderer.Texture
+     * @memberof me.Renderer.Texture
      * @function
-     * @param {String[]|Number[]} names list of names for each sprite
+     * @param {string[]|number[]} names list of names for each sprite
      * (when manually creating a Texture out of a spritesheet, only numeric values are authorized)
-     * @param {Object} [settings] Additional settings passed to the {@link me.Sprite} contructor
-     * @return {me.Sprite}
+     * @param {object} [settings] Additional settings passed to the {@link me.Sprite} contructor
+     * @returns {me.Sprite}
      * @example
      * // create a new texture object under the `game` namespace
      * game.texture = new me.video.renderer.Texture(

package/src/video/texture_cache.js

@@ -60,11 +60,9 @@ class TextureCache {
     /**
      * @ignore
      */
-    remove(image) {
+    delete(image) {
         if (!this.cache.has(image)) {
-            if (this.cache.remove(image) === true) {
-                this.length--;
-            }
+            this.cache.delete(image);
         }
     }