melonjs 10.1.0 → 10.2.2

package/src/text/bitmaptext.js

@@ -38,18 +38,19 @@ var measureTextHeight = function(font) {
  * @extends me.Renderable
  * @memberOf me
  * @constructor
- * @param {Number} [scale=1.0]
- * @param {Object} settings the text configuration
- * @param {String|Image} settings.font a font name to identify the corresponing source image
- * @param {String} [settings.fontData=settings.font] the bitmap font data corresponding name, or the bitmap font data itself
- * @param {Number} [settings.size] size a scaling ratio
- * @param {me.Color|String} [settings.fillStyle] a CSS color value used to tint the bitmapText (@see me.BitmapText.tint)
- * @param {Number} [settings.lineWidth=1] line width, in pixels, when drawing stroke
- * @param {String} [settings.textAlign="left"] horizontal text alignment
- * @param {String} [settings.textBaseline="top"] the text baseline
- * @param {Number} [settings.lineHeight=1.0] line spacing height
+ * @param {number} x position of the text object
+ * @param {number} y position of the text object
+ * @param {object} settings the text configuration
+ * @param {string|Image} settings.font a font name to identify the corresponing source image
+ * @param {string} [settings.fontData=settings.font] the bitmap font data corresponding name, or the bitmap font data itself
+ * @param {number} [settings.size] size a scaling ratio
+ * @param {me.Color|string} [settings.fillStyle] a CSS color value used to tint the bitmapText (@see me.BitmapText.tint)
+ * @param {number} [settings.lineWidth=1] line width, in pixels, when drawing stroke
+ * @param {string} [settings.textAlign="left"] horizontal text alignment
+ * @param {string} [settings.textBaseline="top"] the text baseline
+ * @param {number} [settings.lineHeight=1.0] line spacing height
  * @param {me.Vector2d} [settings.anchorPoint={x:0.0, y:0.0}] anchor point to draw the text at
- * @param {(String|String[])} [settings.text] a string, or an array of strings
+ * @param {(string|string[])} [settings.text] a string, or an array of strings
  * @example
  * // Use me.loader.preload or me.loader.load to load assets
  * me.loader.preload([
@@ -76,7 +77,7 @@ class BitmapText extends Renderable {
          * Set the default text alignment (or justification),<br>
          * possible values are "left", "right", and "center".
          * @public
-         * @type String
+         * @type {string}
          * @default "left"
          * @name textAlign
          * @memberOf me.BitmapText
@@ -87,7 +88,7 @@ class BitmapText extends Renderable {
          * Set the text baseline (e.g. the Y-coordinate for the draw operation), <br>
          * possible values are "top", "hanging, "middle, "alphabetic, "ideographic, "bottom"<br>
          * @public
-         * @type String
+         * @type {string}
          * @default "top"
          * @name textBaseline
          * @memberOf me.BitmapText
@@ -98,7 +99,7 @@ class BitmapText extends Renderable {
          * Set the line spacing height (when displaying multi-line strings). <br>
          * Current font height will be multiplied with this value to set the line height.
          * @public
-         * @type Number
+         * @type {number}
          * @default 1.0
          * @name lineHeight
          * @memberOf me.BitmapText
@@ -108,7 +109,7 @@ class BitmapText extends Renderable {
         /**
          * the text to be displayed
          * @private
-         * @type {String[]}
+         * @type {string[]}
          * @name _text
          * @memberOf me.BitmapText
          */
@@ -167,9 +168,9 @@ class BitmapText extends Renderable {
      * @name set
      * @memberOf me.BitmapText.prototype
      * @function
-     * @param {String} textAlign ("left", "center", "right")
-     * @param {Number} [scale]
-     * @return this object for chaining
+     * @param {string} textAlign ("left", "center", "right")
+     * @param {number} [scale]
+     * @returns {me.BitmapText} this object for chaining
      */
     set(textAlign, scale) {
         this.textAlign = textAlign;
@@ -187,8 +188,8 @@ class BitmapText extends Renderable {
      * @name setText
      * @memberOf me.BitmapText.prototype
      * @function
-     * @param {Number|String|String[]} value a string, or an array of strings
-     * @return this object for chaining
+     * @param {number|string|string[]} value a string, or an array of strings
+     * @returns {me.BitmapText} this object for chaining
      */
     setText(value) {
         if (typeof value === "undefined") {
@@ -215,16 +216,9 @@ class BitmapText extends Renderable {
      * @see me.Renderable#tint
      * @memberOf me.BitmapText
      */
-
-    /**
-     * @ignore
-     */
     get fillStyle() {
         return this.tint;
     }
-    /**
-     * @ignore
-     */
     set fillStyle(value) {
         this.tint = value;
     }
@@ -234,8 +228,8 @@ class BitmapText extends Renderable {
      * @name resize
      * @memberOf me.BitmapText.prototype
      * @function
-     * @param {Number} scale ratio
-     * @return this object for chaining
+     * @param {number} scale ratio
+     * @returns {me.BitmapText} this object for chaining
      */
     resize(scale) {
         this.fontScale.set(scale, scale);
@@ -250,7 +244,7 @@ class BitmapText extends Renderable {
      * @name measureText
      * @memberOf me.BitmapText.prototype
      * @function
-     * @param {String} [text]
+     * @param {string} [text]
      * @param {me.Rect} [ret] a object in which to store the text metrics
      * @returns {TextMetrics} a TextMetrics object with two properties: `width` and `height`, defining the output dimensions
      */
@@ -286,9 +280,9 @@ class BitmapText extends Renderable {
      * @memberOf me.BitmapText.prototype
      * @function
      * @param {me.CanvasRenderer|me.WebGLRenderer} renderer Reference to the destination renderer instance
-     * @param {String} [text]
-     * @param {Number} [x]
-     * @param {Number} [y]
+     * @param {string} [text]
+     * @param {number} [x]
+     * @param {number} [y]
      */
     draw(renderer, text, x, y) {
         // save the previous global alpha value

package/src/text/bitmaptextdata.js

@@ -5,7 +5,7 @@ var capChars = ["M", "N", "B", "D", "C", "E", "F", "K", "A", "G", "H", "I", "J",
 
 /**
  * Gets the value from a string of pairs.
- * @private
+ * @ignore
  */
 function getValueFromPair(string, pattern) {
     var value = string.match(pattern);
@@ -18,11 +18,11 @@ function getValueFromPair(string, pattern) {
 
 /**
  * Gets the first glyph in the map that is not a space character
- * @private
+ * @ignore
  * @name _getFirstGlyph
  * @memberOf me.BitmapTextData
  * @function
- * @param {Object} glyphs the map of glyphs, each key is a char code
+ * @param {object} glyphs the map of glyphs, each key is a char code
  * @returns {me.Glyph}
  */
 function getFirstGlyph(glyphs) {
@@ -37,11 +37,11 @@ function getFirstGlyph(glyphs) {
 
 /**
  * Creates a glyph to use for the space character
- * @private
+ * @ignore
  * @name createSpaceGlyph
  * @memberOf me.BitmapTextData
  * @function
- * @param {Object} glyphs the map of glyphs, each key is a char code
+ * @param {object} glyphs the map of glyphs, each key is a char code
  */
 function createSpaceGlyph(glyphs) {
     var spaceCharCode = " ".charCodeAt(0);
@@ -60,8 +60,8 @@ function createSpaceGlyph(glyphs) {
  * Class for storing relevant data from the font file.
  * @class me.BitmapTextData
  * @memberOf me
- * @private
- * @param data {String} - The bitmap font data pulled from the resource loader using me.loader.getBinary()
+ * @ignore
+ * @param data {string} - The bitmap font data pulled from the resource loader using me.loader.getBinary()
  * @constructor
  */
 class BitmapTextData {
@@ -88,7 +88,7 @@ class BitmapTextData {
         /**
          * The map of glyphs, each key is a char code.
          * @name glyphs
-         * @type {Object}
+         * @type {object}
          * @memberOf me.BitmapTextData
          */
         this.glyphs = {};
@@ -102,7 +102,7 @@ class BitmapTextData {
      * @name parse
      * @memberOf me.BitmapTextData
      * @function
-     * @param {String} fontData
+     * @param {string} fontData
      */
     parse(fontData) {
         if (!fontData) {

package/src/text/text.js

@@ -1,9 +1,10 @@
 import Color from "./../math/color.js";
-import Renderer from "./../video/renderer.js";
-import { renderer } from "./../video/video.js";
+import WebGLRenderer from "./../video/webgl/webgl_renderer.js";
+import { renderer, createCanvas } from "./../video/video.js";
 import * as stringUtil from "./../utils/string.js";
 import pool from "./../system/pooling.js";
 import Renderable from "./../renderable/renderable.js";
+import { nextPowerOfTwo } from "./../math/math.js";
 
 
 /*
@@ -22,7 +23,7 @@ var toPX = [12, 24, 0.75, 1];
  * apply the current font style to the given context
  * @ignore
  */
-var setContextStyle = function(context, font, stroke) {
+var setContextStyle = function(context, font, stroke = false) {
     context.font = font.font;
     context.fillStyle = font.fillStyle.toRGBA();
     if (stroke === true) {
@@ -40,19 +41,20 @@ var setContextStyle = function(context, font, stroke) {
  * @extends me.Renderable
  * @memberOf me
  * @constructor
- * @param {Number} x position of the text object
- * @param {Number} y position of the text object
- * @param {Object} settings the text configuration
- * @param {String} settings.font a CSS family font name
- * @param {Number|String} settings.size size, or size + suffix (px, em, pt)
- * @param {me.Color|String} [settings.fillStyle="#000000"] a CSS color value
- * @param {me.Color|String} [settings.strokeStyle="#000000"] a CSS color value
- * @param {Number} [settings.lineWidth=1] line width, in pixels, when drawing stroke
- * @param {String} [settings.textAlign="left"] horizontal text alignment
- * @param {String} [settings.textBaseline="top"] the text baseline
- * @param {Number} [settings.lineHeight=1.0] line spacing height
+ * @param {number} x position of the text object
+ * @param {number} y position of the text object
+ * @param {object} settings the text configuration
+ * @param {string} settings.font a CSS family font name
+ * @param {number|string} settings.size size, or size + suffix (px, em, pt)
+ * @param {me.Color|string} [settings.fillStyle="#000000"] a CSS color value
+ * @param {me.Color|string} [settings.strokeStyle="#000000"] a CSS color value
+ * @param {number} [settings.lineWidth=1] line width, in pixels, when drawing stroke
+ * @param {string} [settings.textAlign="left"] horizontal text alignment
+ * @param {string} [settings.textBaseline="top"] the text baseline
+ * @param {number} [settings.lineHeight=1.0] line spacing height
  * @param {me.Vector2d} [settings.anchorPoint={x:0.0, y:0.0}] anchor point to draw the text at
- * @param {(String|String[])} [settings.text] a string, or an array of strings
+ * @param {boolean} [settings.offScreenCanvas=false] whether to draw the font to an individual "cache" texture first
+ * @param {(string|string[])} [settings.text=""] a string, or an array of strings
  * @example
  * var font = new me.Text(0, 0, {font: "Arial", size: 8, fillStyle: this.color});
  */
@@ -71,7 +73,7 @@ class Text extends Renderable {
         /**
          * defines the color used to draw the font.<br>
          * @public
-         * @type me.Color
+         * @type {me.Color}
          * @default black
          * @name me.Text#fillStyle
          */
@@ -89,7 +91,7 @@ class Text extends Renderable {
         /**
          * defines the color used to draw the font stroke.<br>
          * @public
-         * @type me.Color
+         * @type {me.Color}
          * @default black
          * @name me.Text#strokeStyle
          */
@@ -107,7 +109,7 @@ class Text extends Renderable {
         /**
          * sets the current line width, in pixels, when drawing stroke
          * @public
-         * @type Number
+         * @type {number}
          * @default 1
          * @name me.Text#lineWidth
          */
@@ -117,7 +119,7 @@ class Text extends Renderable {
          * Set the default text alignment (or justification),<br>
          * possible values are "left", "right", and "center".<br>
          * @public
-         * @type String
+         * @type {string}
          * @default "left"
          * @name me.Text#textAlign
          */
@@ -127,7 +129,7 @@ class Text extends Renderable {
          * Set the text baseline (e.g. the Y-coordinate for the draw operation), <br>
          * possible values are "top", "hanging, "middle, "alphabetic, "ideographic, "bottom"<br>
          * @public
-         * @type String
+         * @type {string}
          * @default "top"
          * @name me.Text#textBaseline
          */
@@ -137,16 +139,27 @@ class Text extends Renderable {
          * Set the line spacing height (when displaying multi-line strings). <br>
          * Current font height will be multiplied with this value to set the line height.
          * @public
-         * @type Number
+         * @type {number}
          * @default 1.0
          * @name me.Text#lineHeight
          */
         this.lineHeight = settings.lineHeight || 1.0;
 
+        /**
+         * whether to draw the font to a indidividual offscreen canvas texture first <br>
+         * Note: this will improve performances when using WebGL, but will impact
+         * memory consumption as every text element will have its own canvas texture
+         * @public
+         * @type {boolean}
+         * @default false
+         * @name me.Text#offScreenCanvas
+         */
+        this.offScreenCanvas = false;
+
         /**
          * the text to be displayed
          * @private
-         * @type {String[]}
+         * @type {string[]}
          * @name _text
          * @memberOf me.Text
          */
@@ -155,11 +168,11 @@ class Text extends Renderable {
         /**
          * the font size (in px)
          * @public
-         * @type {Number}
+         * @type {number}
          * @name fontSize
          * @default 10
          * @memberOf me.Text
-        */
+         */
         this.fontSize = 10;
 
         // anchor point
@@ -185,8 +198,31 @@ class Text extends Renderable {
             this.italic();
         }
 
+        if (settings.offScreenCanvas === true) {
+            this.offScreenCanvas = true;
+            this.canvas = createCanvas(2, 2, true);
+            this.context = this.canvas.getContext("2d");
+        }
+
         // set the text
         this.setText(settings.text);
+
+        // force update bounds on object creation
+        this.update(0);
+    }
+
+    /** @ignore */
+    onDeactivateEvent() {
+        // free the canvas and potential corresponding texture when deactivated
+        if (this.offScreenCanvas === true) {
+            if (renderer instanceof WebGLRenderer) {
+                renderer.currentCompositor.unbindTexture2D(renderer.cache.get(this.canvas));
+                renderer.cache.remove(this.canvas);
+            }
+            this.canvas.width = this.canvas.height = 0;
+            this.context = undefined;
+            this.canvas = undefined;
+        }
     }
 
     /**
@@ -194,7 +230,7 @@ class Text extends Renderable {
      * @name bold
      * @memberOf me.Text.prototype
      * @function
-     * @return this object for chaining
+     * @returns {me.Text} this object for chaining
      */
     bold() {
         this.font = "bold " + this.font;
@@ -207,7 +243,7 @@ class Text extends Renderable {
      * @name italic
      * @memberOf me.Text.prototype
      * @function
-     * @return this object for chaining
+     * @returns {me.Text} this object for chaining
      */
     italic() {
         this.font = "italic " + this.font;
@@ -220,9 +256,9 @@ class Text extends Renderable {
      * @name setFont
      * @memberOf me.Text.prototype
      * @function
-     * @param {String} font a CSS font name
-     * @param {Number|String} [size=10] size in px, or size + suffix (px, em, pt)
-     * @return this object for chaining
+     * @param {string} font a CSS font name
+     * @param {number|string} [size=10] size in px, or size + suffix (px, em, pt)
+     * @returns {me.Text} this object for chaining
      * @example
      * font.setFont("Arial", 20);
      * font.setFont("Arial", "1.5em");
@@ -264,14 +300,10 @@ class Text extends Renderable {
      * @name setText
      * @memberOf me.Text.prototype
      * @function
-     * @param {Number|String|String[]} value a string, or an array of strings
-     * @return this object for chaining
+     * @param {number|string|string[]} value a string, or an array of strings
+     * @returns {me.Text} this object for chaining
      */
-    setText(value) {
-        if (typeof value === "undefined") {
-            value = "";
-        }
-
+    setText(value = "") {
         if (this._text.toString() !== value.toString()) {
             if (!Array.isArray(value)) {
                 this._text = ("" + value).split("\n");
@@ -289,28 +321,23 @@ class Text extends Renderable {
      * @name measureText
      * @memberOf me.Text.prototype
      * @function
-     * @param {me.CanvasRenderer|me.WebGLRenderer} [renderer] reference a renderer instance
-     * @param {String} [text] the text to be measured
+     * @param {me.CanvasRenderer|me.WebGLRenderer} [renderer] reference to the active renderer
+     * @param {string} [text] the text to be measured
      * @param {me.Rect|me.Bounds} [ret] a object in which to store the text metrics
      * @returns {TextMetrics} a TextMetrics object with two properties: `width` and `height`, defining the output dimensions
      */
-    measureText(_renderer, text, ret) {
+    measureText(renderer, text, ret) {
         var context;
-
-        if (typeof _renderer === "undefined") {
-            context = renderer.getFontContext();
-        } else if (_renderer instanceof Renderer) {
-            context = _renderer.getFontContext();
-        } else {
-            // else it's a 2d rendering context object
-            context = _renderer;
-        }
-
         var textMetrics = ret || this.getBounds();
         var lineHeight = this.fontSize * this.lineHeight;
-
         var strings = typeof text !== "undefined" ? ("" + (text)).split("\n") : this._text;
 
+        if (this.offScreenCanvas === true) {
+            context = this.context;
+        } else {
+            context = renderer.getFontContext();
+        }
+
         // save the previous context
         context.save();
 
@@ -346,7 +373,33 @@ class Text extends Renderable {
      */
     update(/* dt */) {
         if (this.isDirty === true) {
-            this.measureText();
+            var bounds = this.measureText(renderer);
+            if (this.offScreenCanvas === true) {
+                var width = Math.round(bounds.width),
+                    height = Math.round(bounds.height);
+
+                if (renderer instanceof WebGLRenderer) {
+                    // invalidate the previous corresponding texture so that it can reuploaded once changed
+                    renderer.currentCompositor.unbindTexture2D(renderer.cache.get(this.canvas));
+
+                    if (renderer.WebGLVersion === 1) {
+                        // round size to next Pow2
+                        width = nextPowerOfTwo(bounds.width);
+                        height = nextPowerOfTwo(bounds.height);
+                    }
+                }
+
+                // 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);
+                }
+                this._drawFont(this.context, this._text,  this.pos.x - bounds.x, this.pos.y - bounds.y, false);
+
+            }
         }
         return this.isDirty;
     }
@@ -357,9 +410,10 @@ class Text extends Renderable {
      * @memberOf me.Text.prototype
      * @function
      * @param {me.CanvasRenderer|me.WebGLRenderer} renderer Reference to the destination renderer instance
-     * @param {String} [text]
-     * @param {Number} [x]
-     * @param {Number} [y]
+     * @param {string} [text]
+     * @param {number} [x]
+     * @param {number} [y]
+     * @param {boolean} [stroke=false] draw stroke the the text if true
      */
     draw(renderer, text, x, y, stroke) {
         // "hacky patch" for backward compatibilty
@@ -396,7 +450,12 @@ class Text extends Renderable {
         }
 
         // draw the text
-        renderer.drawFont(this._drawFont(renderer.getFontContext(), this._text, x, y, stroke || false));
+        if (this.offScreenCanvas === true) {
+            renderer.drawImage(this.canvas, this.getBounds().x, this.getBounds().y);
+        } else {
+            renderer.drawFont(this._drawFont(renderer.getFontContext(), this._text, x, y, stroke));
+        }
+
 
         // for backward compatibilty
         if (typeof this.ancestor === "undefined") {
@@ -417,9 +476,9 @@ class Text extends Renderable {
      * @memberOf me.Text.prototype
      * @function
      * @param {me.CanvasRenderer|me.WebGLRenderer} renderer Reference to the destination renderer instance
-     * @param {String} text
-     * @param {Number} x
-     * @param {Number} y
+     * @param {string} text
+     * @param {number} x
+     * @param {number} y
      */
     drawStroke(renderer, text, x, y) {
         this.draw(renderer, text, x, y, true);
@@ -428,7 +487,7 @@ class Text extends Renderable {
     /**
      * @ignore
      */
-    _drawFont(context, text, x, y, stroke) {
+    _drawFont(context, text, x, y, stroke = false) {
         setContextStyle(context, this, stroke);
 
         var lineHeight = this.fontSize * this.lineHeight;

package/src/tweens/easing.js

@@ -1,7 +1,7 @@
 /**
-* Tween.js - Licensed under the MIT license
-* https://github.com/tweenjs/tween.js
-*/
+ * Tween.js - Licensed under the MIT license
+ * https://github.com/tweenjs/tween.js
+ */
 
 /* eslint-disable quotes, keyword-spacing, comma-spacing, no-return-assign */
 
@@ -42,7 +42,7 @@
  * </p>
  * @public
  * @constant
- * @type enum
+ * @enum {Function}
  * @name Easing
  * @memberOf me.Tween
  */

package/src/tweens/interpolation.js

@@ -1,7 +1,7 @@
 /**
-* Tween.js - Licensed under the MIT license
-* https://github.com/tweenjs/tween.js
-*/
+ * Tween.js - Licensed under the MIT license
+ * https://github.com/tweenjs/tween.js
+ */
 
 /**
  * Interpolation Function :<br>
@@ -12,7 +12,7 @@
  * </p>
  * @public
  * @constant
- * @type enum
+ * @enum {Function}
  * @name Interpolation
  * @memberOf me.Tween
  */