melonjs 10.0.2 → 10.2.1

package/src/renderable/nineslicesprite.js

@@ -0,0 +1,211 @@
+import Sprite from "./sprite.js";
+
+/**
+ * @classdesc
+ * A NineSliceSprite is similar to a Sprite, but it uses 9-slice scaling to strech its inner area to fit the size of the Renderable,
+ * by proportionally scaling a sprite by splitting it in a grid of nine parts (with only parts 1, 3, 7, 9 not being scaled). <br>
+ * <img src="images/9-slice-scaling.png"/><br>
+ * @see https://en.wikipedia.org/wiki/9-slice_scaling
+ * @class NineSliceSprite
+ * @extends me.Sprite
+ * @memberOf me
+ * @constructor
+ * @param {Number} x the x coordinates of the sprite object
+ * @param {Number} y the y coordinates of the sprite object
+ * @param {Object} settings Configuration parameters for the Sprite object
+ * @param {Number} settings.width the width of the Renderable over which the sprite needs to be stretched
+ * @param {Number} settings.height the height of the Renderable over which the sprite needs to be stretched
+ * @param {me.Renderer.Texture|HTMLImageElement|HTMLCanvasElement|String} settings.image reference to a texture, spritesheet image or to a texture atlas
+ * @param {String} [settings.name=""] name of this object
+ * @param {String} [settings.region] region name of a specific region to use when using a texture atlas, see {@link me.Renderer.Texture}
+ * @param {Number} [settings.framewidth] Width of a single frame within the spritesheet
+ * @param {Number} [settings.frameheight] Height of a single frame within the spritesheet
+ * @param {String|me.Color} [settings.tint] a tint to be applied to this sprite
+ * @param {Number} [settings.flipX] flip the sprite on the horizontal axis
+ * @param {Number} [settings.flipY] flip the sprite on the vertical axis
+ * @param {me.Vector2d} [settings.anchorPoint={x:0.5, y:0.5}] Anchor point to draw the frame at (defaults to the center of the frame).
+ * @example
+ * this.panelSprite = new me.NineSliceSprite(0, 0, {
+ *     image : game.texture,
+ *     region : "grey_panel",
+ *     width : this.width,
+ *     height : this.height
+ * });
+ */
+
+class NineSliceSprite extends Sprite {
+
+    /**
+     * @ignore
+     */
+    constructor(x, y, settings) {
+        // call the super constructor
+        super(x, y, settings);
+
+        // ensure mandatory properties are defined
+        if ((typeof settings.width !== "number") || (typeof settings.height !== "number")) {
+            throw new Error("height and width properties are mandatory");
+        }
+
+        // override the renderable sprite with the given one
+        // resize based on the active frame
+        this.width = settings.width;
+        this.height = settings.height;
+    }
+
+    /**
+     * @ignore
+     */
+    draw(renderer) {
+        // the frame to draw
+        var frame = this.current;
+
+        // cache the current position and size
+        var dx = this.pos.x,
+            dy = this.pos.y;
+
+        var w = frame.width,
+            h = frame.height;
+
+        // frame offset in the texture/atlas
+        var frame_offset = frame.offset;
+        var g_offset = this.offset;
+
+
+        // remove image's TexturePacker/ShoeBox rotation
+        if (frame.angle !== 0) {
+            renderer.translate(-dx, -dy);
+            renderer.rotate(frame.angle);
+            dx -= h;
+            w = frame.height;
+            h = frame.width;
+        }
+
+        var sx = g_offset.x + frame_offset.x,
+            sy = g_offset.y + frame_offset.y;
+
+        // should this be configurable ?
+        var corner_width = frame.width / 4,
+            corner_height = frame.height / 4;
+
+        // OPTIMIZE ME !
+
+        // DRAW CORNERS
+
+        // Top Left
+        renderer.drawImage(
+            this.image,
+            sx,                          // sx
+            sy,                          // sy
+            corner_width, corner_height, // sw,sh
+            dx, dy,                      // dx,dy
+            corner_width, corner_height  // dw,dh
+        );
+
+        // Top Right
+        renderer.drawImage(
+            this.image,
+            sx + w - corner_width,          // sx
+            sy,                             // sy
+            corner_width, corner_height,    // sw,sh
+            dx + this.width - corner_width, // dx
+            dy,                             // dy
+            corner_width, corner_height     // dw,dh
+        );
+        // Bottom Left
+        renderer.drawImage(
+            this.image,
+            sx,                                 // sx
+            sy + h - corner_height,             // sy
+            corner_width, corner_height,        // sw,sh
+            dx,                                 // dx
+            dy + this.height - corner_height,   // dy
+            corner_width, corner_height         // dw,dh
+        );
+        // Bottom Right
+        renderer.drawImage(
+            this.image,
+            sx + w - corner_width,              // sx
+            sy + h - corner_height,             // sy
+            corner_width, corner_height,        // sw,sh
+            dx + this.width - corner_width,     //dx
+            dy + this.height - corner_height,   // dy
+            corner_width, corner_height         // dw,dh
+        );
+
+
+        // DRAW SIDES and CENTER
+        var image_center_width = w - (corner_width << 1);
+        var image_center_height = h - (corner_height << 1);
+
+        var target_center_width = this.width - (corner_width << 1);
+        var target_center_height = this.height - (corner_height << 1);
+
+        //Top center
+        renderer.drawImage(
+            this.image,
+            sx + corner_width,         // sx
+            sy,                        // sy
+            image_center_width,        // sw
+            corner_height,             // sh
+            dx + corner_width,         // dx
+            dy,                        // dy
+            target_center_width,       // dw
+            corner_height              // dh
+        );
+
+        //Bottom center
+        renderer.drawImage(
+            this.image,
+            sx + corner_width,                  // sx
+            sy + h - corner_height,             // sy
+            image_center_width,                 // sw
+            corner_height,                      // sh
+            dx + corner_width,                  // dx
+            dy + this.height - corner_height,   // dx
+            target_center_width,                // dw
+            corner_height                       // dh
+        );
+
+        // Middle Left
+        renderer.drawImage(
+            this.image,
+            sx,                   // sx
+            sy + corner_height,   // sy
+            corner_width,         // sw
+            image_center_height,  // sh
+            dx,                   // dx
+            dy + corner_height,   // dy
+            corner_width,         // dw
+            target_center_height  // dh
+        );
+
+        // Middle Right
+        renderer.drawImage(
+            this.image,
+            sx + w - corner_width,          // sx
+            sy + corner_height,             // sy
+            corner_width,                   // sw
+            image_center_height,            // sh
+            dx + this.width - corner_width, // dx
+            dy + corner_height,             // dy
+            corner_width,                   // dw
+            target_center_height            // dh
+        );
+
+        // Middle Center
+        renderer.drawImage(
+            this.image,
+            sx + corner_width,    // sx
+            sy + corner_height,   // sy
+            image_center_width,   // sw
+            image_center_height,  // sh
+            dx + corner_width,    // dx
+            dy + corner_height,   // dy
+            target_center_width,  // dw
+            target_center_height  // dh
+        );
+    }
+};
+
+export default NineSliceSprite;

package/src/renderable/renderable.js

@@ -49,7 +49,6 @@ class Renderable extends Rect {
          * @public
          * @type {me.Body}
          * @see me.Body
-         * @see me.collision#check
          * @name body
          * @memberOf me.Renderable#
          * @example
@@ -422,6 +421,7 @@ class Renderable extends Rect {
             if (isNaN(this.alpha)) {
                 this.alpha = 1.0;
             }
+            this.isDirty = true;
         }
     }
 
@@ -739,8 +739,8 @@ class Renderable extends Rect {
         // offset by the anchor point
         renderer.translate(-ax, -ay);
 
-        // apply the defined tint, if any
-        renderer.setTint(this.tint);
+        // apply the current tint and opacity
+        renderer.setTint(this.tint, this.getOpacity());
     }
 
     /**

package/src/renderable/sprite.js

@@ -21,7 +21,7 @@ import Renderable from "./renderable.js";
  * @param {String} [settings.region] region name of a specific region to use when using a texture atlas, see {@link me.Renderer.Texture}
  * @param {Number} [settings.framewidth] Width of a single frame within the spritesheet
  * @param {Number} [settings.frameheight] Height of a single frame within the spritesheet
- * @param {String|Color} [settings.tint] a tint to be applied to this sprite
+ * @param {String|me.Color} [settings.tint] a tint to be applied to this sprite
  * @param {Number} [settings.flipX] flip the sprite on the horizontal axis
  * @param {Number} [settings.flipY] flip the sprite on the vertical axis
  * @param {me.Vector2d} [settings.anchorPoint={x:0.5, y:0.5}] Anchor point to draw the frame at (defaults to the center of the frame).
@@ -182,7 +182,7 @@ class Sprite extends Renderable {
         // set the default rotation angle is defined in the settings
         // * WARNING: rotating sprites decreases performance with Canvas Renderer
         if (typeof (settings.rotation) !== "undefined") {
-            this.currentTransform.rotate(settings.rotation);
+            this.rotate(settings.rotation);
         }
 
         // update anchorPoint

package/src/state/stage.js

@@ -20,7 +20,7 @@ var default_settings = {
  * @memberOf me
  * @constructor
  * @param {Object} [options] The stage` parameters
- * @param {Boolean} [options.cameras=[new me.Camera2d()]] a list of cameras (experimental)
+ * @param {me.Camera2d[]} [options.cameras=[new me.Camera2d()]] a list of cameras (experimental)
  * @param {Function} [options.onResetEvent] called by the state manager when reseting the object
  * @param {Function} [options.onDestroyEvent] called by the state manager before switching to another state
  * @see me.state
@@ -57,7 +57,7 @@ class Stage {
      * @ignore
      */
     reset() {
-        
+
         // add all defined cameras
         this.settings.cameras.forEach((camera) => {
             this.cameras.set(camera.name, camera);

package/src/state/state.js

@@ -4,7 +4,7 @@ import * as event from "./../system/event.js";
 import timer from "./../system/timer.js";
 import * as game from "./../game.js";
 import Stage from "./../state/stage.js";
-import defaultLoadingScreen from "./../loader/loadingscreen.js";
+import DefaultLoadingScreen from "./../loader/loadingscreen.js";
 
 
 // current state
@@ -137,7 +137,7 @@ function _switchState(state) {
 // initialize me.state on system boot
 event.on(event.BOOT, () => {
     // set the built-in loading stage
-    state.set(state.LOADING, defaultLoadingScreen);
+    state.set(state.LOADING, new DefaultLoadingScreen());
     // set and enable the default stage
     state.set(state.DEFAULT, new Stage());
     // enable by default as soon as the display is initialized

package/src/system/device.js

@@ -130,6 +130,10 @@ function _checkCapabilities() {
     device.hasDeviceOrientation = !!window.DeviceOrientationEvent;
     device.hasAccelerometer = !!window.DeviceMotionEvent;
 
+    // support the ScreenOrientation API
+    device.ScreenOrientation = (typeof screen !== "undefined") &&
+                               (typeof screen.orientation !== "undefined");
+
     // fullscreen api detection & polyfill when possible
     device.hasFullscreenSupport = prefixed("fullscreenEnabled", document) ||
                                 document.mozFullScreenEnabled;
@@ -273,6 +277,16 @@ let device = {
      */
     hasDeviceOrientation : false,
 
+    /**
+     * Supports the ScreenOrientation API
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/onchange
+     * @type Boolean
+     * @readonly
+     * @name ScreenOrientation
+     * @memberOf me.device
+     */
+    ScreenOrientation : false,
+
     /**
      * Browser full screen support
      * @type Boolean
@@ -705,7 +719,7 @@ let device = {
         var screen = window.screen;
 
         // first try using "standard" values
-        if (typeof screen !== "undefined") {
+        if (this.ScreenOrientation === true) {
             var orientation = prefixed("orientation", screen);
             if (typeof orientation !== "undefined" && typeof orientation.type === "string") {
                 // Screen Orientation API specification

package/src/text/text.js

@@ -1,9 +1,11 @@
 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 +24,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) {
@@ -52,7 +54,8 @@ var setContextStyle = function(context, font, stroke) {
  * @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});
  */
@@ -143,6 +146,17 @@ class Text extends Renderable {
          */
         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
@@ -185,8 +199,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;
+        }
     }
 
     /**
@@ -267,11 +304,7 @@ class Text extends Renderable {
      * @param {Number|String|String[]} value a string, or an array of strings
      * @return 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 +322,25 @@ class Text extends Renderable {
      * @name measureText
      * @memberOf me.Text.prototype
      * @function
-     * @param {me.CanvasRenderer|me.WebGLRenderer} [renderer] reference a renderer instance
+     * @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) {
         var context;
+        var textMetrics = ret || this.getBounds();
+        var lineHeight = this.fontSize * this.lineHeight;
+        var strings = typeof text !== "undefined" ? ("" + (text)).split("\n") : this._text;
 
-        if (typeof _renderer === "undefined") {
-            context = renderer.getFontContext();
+        if (this.offScreenCanvas === true) {
+            context = this.context;
         } else if (_renderer instanceof Renderer) {
             context = _renderer.getFontContext();
         } else {
-            // else it's a 2d rendering context object
-            context = _renderer;
+            context = renderer.getFontContext();
         }
 
-        var textMetrics = ret || this.getBounds();
-        var lineHeight = this.fontSize * this.lineHeight;
-
-        var strings = typeof text !== "undefined" ? ("" + (text)).split("\n") : this._text;
-
         // save the previous context
         context.save();
 
@@ -346,7 +376,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;
     }
@@ -396,7 +452,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") {
@@ -428,7 +489,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/video/renderer.js

@@ -180,7 +180,7 @@ class Renderer {
      * @function
      * @param {HTMLCanvasElement} canvas
      * @param {Boolean} [transparent=true] use false to disable transparency
-     * @return {Context2d}
+     * @return {CanvasRenderingContext2D}
      */
     getContext2d(c, transparent) {
         if (typeof c === "undefined" || c === null) {
@@ -422,11 +422,13 @@ class Renderer {
      * @name setTint
      * @memberOf me.Renderer.prototype
      * @function
-     * @param {me.Color} [tint] the tint color
+     * @param {me.Color} tint the tint color
+     * @param {Number} [alpha] an alpha value to be applied to the tint
      */
-    setTint(tint) {
+    setTint(tint, alpha = tint.alpha) {
         // global tint color
         this.currentTint.copy(tint);
+        this.currentTint.alpha *= alpha;
     }
 
     /**

package/src/video/texture.js

@@ -282,10 +282,10 @@ export class Texture {
             var sh = atlas[frame].height;
 
             atlas[frame].uvs = new Float32Array([
-                s.x / w,        // Left
-                s.y / h,        // Top
-                (s.x + sw) / w, // Right
-                (s.y + sh) / h  // Bottom
+                s.x / w,        // u0 (left)
+                s.y / h,        // v0 (top)
+                (s.x + sw) / w, // u1 (right)
+                (s.y + sh) / h  // v1 (bottom)
             ]);
             // Cache source coordinates
             // TODO: Remove this when the Batcher only accepts a region name
@@ -421,7 +421,8 @@ export class Texture {
      * @function
      * @param {String} name name of the sprite
      * @param {Object} [settings] Additional settings passed to the {@link me.Sprite} contructor
-     * @return {me.Sprite}
+     * @param {Boolean} [nineSlice=false] if true returns a 9-slice sprite
+     * @return {me.Sprite|me.NineSliceSprite}
      * @example
      * // create a new texture object under the `game` namespace
      * game.texture = new me.video.renderer.Texture(
@@ -434,11 +435,20 @@ export class Texture {
      * var sprite = game.texture.createSpriteFromName("coin.png");
      * // set the renderable position to bottom center
      * sprite.anchorPoint.set(0.5, 1.0);
+     * ...
+     * ...
+     * // create a 9-slice sprite
+     * var dialogPanel = game.texture.createSpriteFromName(
+     *    "rpg_dialo.png",
+     *    // width & height are mandatory for 9-slice sprites
+     *    { width: this.width, height: this.height },
+     *    true
+     * );
      */
-    createSpriteFromName(name, settings) {
+    createSpriteFromName(name, settings, nineSlice = false) {
         // instantiate a new sprite object
         return pool.pull(
-            "me.Sprite",
+            nineSlice === true ? "me.NineSliceSprite" : "me.Sprite",
             0, 0,
             Object.assign({
                 image: this,

package/src/video/texture_cache.js

@@ -57,6 +57,17 @@ class TextureCache {
         return this.cache.get(image);
     }
 
+    /**
+     * @ignore
+     */
+    remove(image) {
+        if (!this.cache.has(image)) {
+            if (this.cache.remove(image) === true) {
+                this.length--;
+            }
+        }
+    }
+
     /**
      * @ignore
      */

package/src/video/video.js

@@ -302,9 +302,9 @@ export function init(game_width, game_height, options) {
         },
         false
     );
-    if (typeof window.screen !== "undefined") {
-        // is this one required ?
-        window.screen.onorientationchange = function (e) {
+
+    if (device.ScreenOrientation === true) {
+        window.screen.orientation.onchange = function (e) {
             event.emit(event.WINDOW_ONORIENTATION_CHANGE, e);
         };
     }