melonjs 10.1.1 → 10.2.3

package/src/level/tiled/TMXUtils.js

@@ -76,6 +76,9 @@ function setTMXValue(name, type, value) {
     return value;
 }
 
+/**
+ * @ignore
+ */
 function parseAttributes(obj, elt) {
     // do attributes
     if (elt.attributes && elt.attributes.length > 0) {
@@ -97,9 +100,8 @@ function parseAttributes(obj, elt) {
  * @ignore
  * @function
  * @name decompress
- * @param  {Number[]} data Array of bytes
- * @param  {String} format compressed data format ("gzip","zlib")
- * @return {Number[]} Decompressed data
+ * @param  {number[]} data Array of bytes
+ * @param  {string} format compressed data format ("gzip","zlib")
  */
 export function decompress() {
     throw new Error("GZIP/ZLIB compressed TMX Tile Map not supported!");
@@ -110,8 +112,8 @@ export function decompress() {
  * @ignore
  * @function
  * @name decodeCSV
- * @param  {String} input CSV formatted data (only numbers, everything else will be converted to NaN)
- * @return {Number[]} Decoded data
+ * @param  {string} input CSV formatted data (only numbers, everything else will be converted to NaN)
+ * @returns {number[]} Decoded data
  */
 export function decodeCSV(input) {
     var entries = input.replace("\n", "").trim().split(",");
@@ -128,9 +130,9 @@ export function decodeCSV(input) {
  * @ignore
  * @function
  * @name decodeBase64AsArray
- * @param {String} input Base64 encoded data
- * @param {Number} [bytes] number of bytes per array entry
- * @return {Uint32Array} Decoded data
+ * @param {string} input Base64 encoded data
+ * @param {number} [bytes] number of bytes per array entry
+ * @returns {Uint32Array} Decoded data
  */
 export function decodeBase64AsArray(input, bytes) {
     bytes = bytes || 1;
@@ -149,9 +151,9 @@ export function decodeBase64AsArray(input, bytes) {
 };
 
 /**
-* Decode the given data
-* @ignore
-*/
+ * Decode the given data
+ * @ignore
+ */
 export function decode(data, encoding, compression) {
     compression = compression || "none";
     encoding = encoding || "none";

package/src/level/tiled/renderer/TMXHexagonalRenderer.js

@@ -85,7 +85,7 @@ class TMXHexagonalRenderer extends TMXRenderer {
      * @public
      * @function
      * @param {me.TMXLayer} [layer] calculate the bounding rect for a specific layer (will return a new bounds object)
-     * @return {me.Bounds}
+     * @returns {me.Bounds}
      */
     getBounds(layer) {
         var bounds = layer instanceof TMXLayer ? pool.pull("Bounds") : this.bounds;

package/src/level/tiled/renderer/TMXIsometricRenderer.js

@@ -45,7 +45,7 @@ class TMXIsometricRenderer extends TMXRenderer {
      * @public
      * @function
      * @param {me.TMXLayer} [layer] calculate the bounding rect for a specific layer (will return a new bounds object)
-     * @return {me.Bounds}
+     * @returns {me.Bounds}
      */
     getBounds(layer) {
         var bounds = layer instanceof TMXLayer ? pool.pull("Bounds") : this.bounds;

package/src/level/tiled/renderer/TMXRenderer.js

@@ -10,10 +10,10 @@ import Bounds from "./../../../physics/Bounds.js";
  * @class TMXRenderer
  * @memberOf me
  * @constructor
- * @param {Number} cols width of the tilemap in tiles
- * @param {Number} rows height of the tilemap in tiles
- * @param {Number} tilewidth width of each tile in pixels
- * @param {Number} tileheight height of each tile in pixels
+ * @param {number} cols width of the tilemap in tiles
+ * @param {number} rows height of the tilemap in tiles
+ * @param {number} tilewidth width of each tile in pixels
+ * @param {number} tileheight height of each tile in pixels
  */
 class TMXRenderer {
 
@@ -31,7 +31,7 @@ class TMXRenderer {
      * @public
      * @function
      * @param {me.TMXTileMap|me.TMXLayer} component TMX Map or Layer
-     * @return {boolean}
+     * @returns {boolean}
      */
     canRender(component) {
         return (
@@ -52,7 +52,7 @@ class TMXRenderer {
      * @public
      * @function
      * @param {me.TMXLayer} [layer] calculate the bounding rect for a specific layer (will return a new bounds object)
-     * @return {me.Bounds}
+     * @returns {me.Bounds}
      */
     getBounds(layer) {
         var bounds = layer instanceof TMXLayer ? pool.pull("Bounds") : this.bounds;
@@ -69,10 +69,10 @@ class TMXRenderer {
      * @name me.TMXRenderer#pixelToTileCoords
      * @public
      * @function
-     * @param {Number} x X coordinate
-     * @param {Number} y Y coordinate
-     * @param {me.Vector2d} [vector] an optional vector object where to put the return values
-     * @return {me.Vector2d}
+     * @param {number} x X coordinate
+     * @param {number} y Y coordinate
+     * @param {me.Vector2d} [v] an optional vector object where to put the return values
+     * @returns {me.Vector2d}
      */
     pixelToTileCoords(x, y, v) {
         return v;
@@ -83,12 +83,12 @@ class TMXRenderer {
      * @name me.TMXRenderer#tileToPixelCoords
      * @public
      * @function
-     * @param {Number} col tile horizontal position
-     * @param {Number} row tile vertical position
-     * @param {me.Vector2d} [vector] an optional vector object where to put the return values
-     * @return {me.Vector2d}
+     * @param {number} col tile horizontal position
+     * @param {number} row tile vertical position
+     * @param {me.Vector2d} [v] an optional vector object where to put the return values
+     * @returns {me.Vector2d}
      */
-    tileToPixelCoords(x, y, v) {
+    tileToPixelCoords(col, row, v) {
         return v;
     }
 
@@ -98,8 +98,8 @@ class TMXRenderer {
      * @public
      * @function
      * @param {me.CanvasRenderer|me.WebGLRenderer} renderer a renderer object
-     * @param {Number} x X coordinate where to draw the tile
-     * @param {Number} y Y coordinate where to draw the tile
+     * @param {number} x X coordinate where to draw the tile
+     * @param {number} y Y coordinate where to draw the tile
      * @param {me.Tile} tile the tile object to draw
      */
     drawTile(renderer, x, y, tile) {

package/src/loader/loader.js

@@ -102,6 +102,9 @@ function preloadFontFace(data, onload, onerror) {
  * @ignore
  */
 function preloadTMX(tmxData, onload, onerror) {
+    /**
+     * @ignore
+     */
     function addToTMXList(data) {
         // set the TMX content
         tmxList[tmxData.name] = data;
@@ -337,7 +340,7 @@ var loader = {
      * The "anonymous" keyword means that there will be no exchange of user credentials via cookies,
      * client-side SSL certificates or HTTP authentication as described in the Terminology section of the CORS specification.<br>
      * @public
-     * @type String
+     * @type {string}
      * @name crossOrigin
      * @default undefined
      * @memberOf me.loader
@@ -355,7 +358,7 @@ var loader = {
      * indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies,
      * authorization headers or TLS client certificates. Setting withCredentials has no effect on same-site requests.
      * @public
-     * @type Boolean
+     * @type {boolean}
      * @name withCredentials
      * @default false
      * @memberOf me.loader
@@ -411,8 +414,8 @@ var loader = {
      * @memberOf me.loader
      * @public
      * @function
-     * @param {String} type  "*", "audio", binary", "image", "json", "js", "tmx", "tsx"
-     * @param {String} [url="./"] default base URL
+     * @param {string} type  "*", "audio", binary", "image", "json", "js", "tmx", "tsx"
+     * @param {string} [url="./"] default base URL
      * @example
      * // change the base URL relative address for audio assets
      * me.loader.setBaseURL("audio", "data/audio/");
@@ -442,12 +445,12 @@ var loader = {
      * @memberOf me.loader
      * @public
      * @function
-     * @param {Object[]} resources
-     * @param {String} resources.name internal name of the resource
-     * @param {String} resources.type  "audio", binary", "image", "json","js", "tmx", "tsx", "fontface"
-     * @param {String} resources.src  path and/or file name of the resource (for audio assets only the path is required)
-     * @param {Boolean} [resources.stream] Set to true to force HTML5 Audio, which allows not to wait for large file to be downloaded before playing.
-     * @param {function} [onload=me.loader.onload] function to be called when all resources are loaded
+     * @param {object[]} res
+     * @param {string} res.name internal name of the resource
+     * @param {string} res.type  "audio", binary", "image", "json","js", "tmx", "tsx", "fontface"
+     * @param {string} res.src  path and/or file name of the resource (for audio assets only the path is required)
+     * @param {boolean} [res.stream] Set to true to force HTML5 Audio, which allows not to wait for large file to be downloaded before playing.
+     * @param {Function} [onload=me.loader.onload] function to be called when all resources are loaded
      * @param {boolean} [switchToLoadState=true] automatically switch to the loading screen
      * @example
      * game_resources = [
@@ -478,7 +481,7 @@ var loader = {
      * // set all resources to be loaded
      * me.loader.preload(game.resources, this.loaded.bind(this));
      */
-    preload(res, onload, switchToLoadState) {
+    preload(res, onload, switchToLoadState = true) {
         // parse the resources
         for (var i = 0; i < res.length; i++) {
             resourceCount += this.load(
@@ -492,7 +495,7 @@ var loader = {
             this.onload = onload;
         }
 
-        if (switchToLoadState !== false) {
+        if (switchToLoadState === true) {
             // swith to the loading screen
             state.change(state.LOADING);
         }
@@ -507,13 +510,14 @@ var loader = {
      * @memberOf me.loader
      * @public
      * @function
-     * @param {Object} resource
-     * @param {String} resource.name internal name of the resource
-     * @param {String} resource.type  "audio", binary", "image", "json", "tmx", "tsx"
-     * @param {String} resource.src  path and/or file name of the resource (for audio assets only the path is required)
-     * @param {Boolean} [resource.stream] Set to true to force HTML5 Audio, which allows not to wait for large file to be downloaded before playing.
+     * @param {object} res
+     * @param {string} res.name internal name of the resource
+     * @param {string} res.type  "audio", binary", "image", "json", "tmx", "tsx"
+     * @param {string} res.src  path and/or file name of the resource (for audio assets only the path is required)
+     * @param {boolean} [res.stream] Set to true to force HTML5 Audio, which allows not to wait for large file to be downloaded before playing.
      * @param {Function} onload function to be called when the resource is loaded
      * @param {Function} onerror function to be called in case of error
+     * @returns {number} the amount of corresponding resource to be preloaded
      * @example
      * // load an image asset
      * me.loader.load({name: "avatar",  type:"image",  src: "data/avatar.png"}, this.onload.bind(this), this.onerror.bind(this));
@@ -576,8 +580,8 @@ var loader = {
      * @memberOf me.loader
      * @public
      * @function
-     * @param {Object} resource
-     * @return {Boolean} true if unloaded
+     * @param {object} res
+     * @returns {boolean} true if unloaded
      * @example me.loader.unload({name: "avatar",  type:"image",  src: "data/avatar.png"});
      */
     unload(res) {
@@ -691,8 +695,8 @@ var loader = {
      * @memberOf me.loader
      * @public
      * @function
-     * @param {String} tmx name of the tmx/tsx element ("map1");
-     * @return {XML|Object} requested element or null if not found
+     * @param {string} elt name of the tmx/tsx element ("map1");
+     * @returns {object} requested element or null if not found
      */
     getTMX(elt) {
         // force as string
@@ -709,8 +713,8 @@ var loader = {
      * @memberOf me.loader
      * @public
      * @function
-     * @param {String} name of the binary object ("ymTrack");
-     * @return {Object} requested element or null if not found
+     * @param {string} elt name of the binary object ("ymTrack");
+     * @returns {object} requested element or null if not found
      */
     getBinary(elt) {
         // force as string
@@ -727,8 +731,8 @@ var loader = {
      * @memberOf me.loader
      * @public
      * @function
-     * @param {String} image name of the Image element ("tileset-platformer");
-     * @return {HTMLImageElement} requested element or null if not found
+     * @param {string} image name of the Image element ("tileset-platformer");
+     * @returns {HTMLImageElement} requested element or null if not found
      */
     getImage(image) {
         // force as string and extract the base name
@@ -746,8 +750,8 @@ var loader = {
      * @memberOf me.loader
      * @public
      * @function
-     * @param {String} Name for the json file to load
-     * @return {Object}
+     * @param {string} elt name of the json file to load
+     * @returns {object}
      */
     getJSON(elt) {
         // force as string

package/src/loader/loadingscreen.js

@@ -71,9 +71,10 @@ class IconLogo extends Renderable {
         super(x, y, 100, 85);
 
         this.iconCanvas = createCanvas(
-            nextPowerOfTwo(this.width),
-            nextPowerOfTwo(this.height),
-        false);
+            renderer.WebGLVersion > 1 ? this.width : nextPowerOfTwo(this.width),
+            renderer.WebGLVersion > 1 ? this.height : nextPowerOfTwo(this.height),
+            false
+        );
 
         var context = renderer.getContext2d(this.iconCanvas);
 
@@ -114,70 +115,6 @@ class IconLogo extends Renderable {
     }
 };
 
-// the melonJS Text Logo
-class TextLogo extends Renderable {
-    /**
-     * @ignore
-     */
-    constructor(w, h) {
-        super(0, 0, w, h);
-
-        this.textWidth = 0;
-
-        // offscreen cache canvas
-        this.fontCanvas = createCanvas(256, 64, true);
-        this.drawFont(renderer.getContext2d(this.fontCanvas));
-
-        this.anchorPoint.set(0, 0.5);
-    }
-
-    drawFont(context) {
-        var logo1 = pool.pull("Text", 0, 0, {
-            font: "century gothic",
-            size: 32,
-            fillStyle: "white",
-            textAlign: "middle",
-            textBaseline : "top",
-            text: "melon"
-        });
-        var logo2 = pool.pull("Text", 0, 0, {
-            font: "century gothic",
-            size: 32,
-            fillStyle: "#55aa00",
-            textAlign: "middle",
-            textBaseline : "top",
-            bold: true,
-            text: "JS"
-        });
-
-
-        // compute both logo respective size
-        var logo1_width = logo1.measureText(context).width;
-        var logo2_width = logo2.measureText(context).width;
-
-        this.textWidth = logo1_width + logo2_width;
-
-        // calculate the final rendering position
-        this.pos.x = Math.round(this.width - this.textWidth / 2);
-        this.pos.y = Math.round(this.height + 16);
-
-        // use the private _drawFont method to directly draw on the canvas context
-        logo1._drawFont(context, ["melon"], 0, 0);
-        logo2._drawFont(context, ["JS"], logo1_width, 0);
-
-        // put them back into the object pool
-        pool.push(logo1);
-        pool.push(logo2);
-    }
-
-    /**
-     * @ignore
-     */
-    draw(renderer) {
-        renderer.drawImage(this.fontCanvas, Math.round((renderer.getWidth() - this.textWidth) / 2), this.pos.y);
-    }
-
-};
 
 /**
  * a default loading screen
@@ -185,12 +122,12 @@ class TextLogo extends Renderable {
  * @ignore
  * @constructor
  */
-var defaultLoadingScreen = new Stage({
+class DefaultLoadingScreen extends Stage {
     /**
      * call when the loader is resetted
      * @ignore
      */
-    onResetEvent : function () {
+    onResetEvent() {
         var barHeight = 8;
 
         // clear the background
@@ -211,12 +148,44 @@ var defaultLoadingScreen = new Stage({
 
         ), 2);
 
+        var logo1 = pool.pull("Text",
+            renderer.getWidth() / 2,
+            (renderer.getHeight() / 2) + 16, {
+                font: "century gothic",
+                size: 32,
+                fillStyle: "white",
+                textAlign: "left",
+                textBaseline : "top",
+                text: "melon",
+                offScreenCanvas: renderer.WebGLVersion >= 1
+            }
+        );
+        logo1.anchorPoint.set(0, 0);
+
+        var logo2 = pool.pull("Text",
+            renderer.getWidth() / 2,
+            (renderer.getHeight() / 2) + 16, {
+                font: "century gothic",
+                size: 32,
+                fillStyle: "#55aa00",
+                textAlign: "left",
+                textBaseline : "top",
+                bold: true,
+                text: "JS",
+                offScreenCanvas: renderer.WebGLVersion >= 1
+            }
+        );
+        logo2.anchorPoint.set(0, 0);
+
+        // adjust position of both text
+        var text_width = logo1.getBounds().width + logo2.getBounds().width;
+        logo1.pos.x = renderer.getWidth() / 2 - text_width / 2;
+        logo2.pos.x = logo1.pos.x + logo1.getBounds().width;
+
         // melonJS text
-        world.addChild(new TextLogo(
-            renderer.getWidth(),
-            renderer.getHeight()
-        ), 2);
+        world.addChild(logo1, 2);
+        world.addChild(logo2, 2);
     }
-});
+};
 
-export default defaultLoadingScreen;
+export default DefaultLoadingScreen;