melonjs 10.2.3 → 10.5.0

package/src/renderable/imagelayer.js

@@ -9,32 +9,25 @@ import * as stringUtil from "./../utils/string.js";
 /**
  * @classdesc
  * a generic Image Layer Object
- * @class ImageLayer
- * @extends me.Renderable
- * @memberOf me
- * @constructor
- * @param {number} x x coordinate
- * @param {number} y y coordinate
- * @param {object} settings ImageLayer properties
- * @param {HTMLImageElement|HTMLCanvasElement|string} settings.image Image reference. See {@link me.loader.getImage}
- * @param {string} [settings.name="me.ImageLayer"] layer name
- * @param {number} [settings.z=0] z-index position
- * @param {number|me.Vector2d} [settings.ratio=1.0] Scrolling ratio to be applied. See {@link me.ImageLayer#ratio}
- * @param {string} [settings.repeat='repeat'] define if and how an Image Layer should be repeated (accepted values are 'repeat',
-'repeat-x', 'repeat-y', 'no-repeat'). See {@link me.ImageLayer#repeat}
- * @param {number|me.Vector2d} [settings.anchorPoint=0.0] Image origin. See {@link me.ImageLayer#anchorPoint}
- * @example
- * // create a repetitive background pattern on the X axis using the citycloud image asset
- * me.game.world.addChild(new me.ImageLayer(0, 0, {
- *     image:"citycloud",
- *     repeat :"repeat-x"
- * }), 1);
+ * @augments Renderable
  */
-
 class ImageLayer extends Sprite {
-
     /**
-     * @ignore
+     * @param {number} x x coordinate
+     * @param {number} y y coordinate
+     * @param {object} settings ImageLayer properties
+     * @param {HTMLImageElement|HTMLCanvasElement|string} settings.image Image reference. See {@link loader.getImage}
+     * @param {string} [settings.name="me.ImageLayer"] layer name
+     * @param {number} [settings.z=0] z-index position
+     * @param {number|Vector2d} [settings.ratio=1.0] Scrolling ratio to be applied. See {@link ImageLayer#ratio}
+     * @param {string} [settings.repeat='repeat'] define if and how an Image Layer should be repeated (accepted values are 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'). See {@link ImageLayer#repeat}
+     * @param {number|Vector2d} [settings.anchorPoint=0.0] Image origin. See {@link ImageLayer#anchorPoint}
+     * @example
+     * // create a repetitive background pattern on the X axis using the citycloud image asset
+     * me.game.world.addChild(new me.ImageLayer(0, 0, {
+     *     image:"citycloud",
+     *     repeat :"repeat-x"
+     * }), 1);
      */
     constructor(x, y, settings) {
         // call the constructor
@@ -54,9 +47,9 @@ class ImageLayer extends Sprite {
          * - a number, to change the value for both axis <br>
          * - a json expression like `json:{"x":0.5,"y":0.5}` if you wish to specify a different value for both x and y
          * @public
-         * @type {me.Vector2d}
+         * @type {Vector2d}
          * @default <1.0,1.0>
-         * @name me.ImageLayer#ratio
+         * @name ImageLayer#ratio
          */
         this.ratio = pool.pull("Vector2d", 1.0, 1.0);
 
@@ -82,9 +75,9 @@ class ImageLayer extends Sprite {
              * - a number, to change the value for both axis <br>
              * - a json expression like `json:{"x":0.5,"y":0.5}` if you wish to specify a different value for both x and y
              * @public
-             * @type {me.Vector2d}
+             * @type {Vector2d}
              * @default <0.0,0.0>
-             * @name me.ImageLayer#anchorPoint
+             * @name ImageLayer#anchorPoint
              */
             this.anchorPoint.set(0, 0);
         }
@@ -114,7 +107,7 @@ class ImageLayer extends Sprite {
      * @public
      * @type {string}
      * @default 'repeat'
-     * @name me.ImageLayer#repeat
+     * @name ImageLayer#repeat
      */
 
     get repeat() {
@@ -166,7 +159,7 @@ class ImageLayer extends Sprite {
     /**
      * resize the Image Layer to match the given size
      * @name resize
-     * @memberOf me.ImageLayer.prototype
+     * @memberof ImageLayer.prototype
      * @function
      * @param {number} w new width
      * @param {number} h new height
@@ -254,12 +247,12 @@ class ImageLayer extends Sprite {
 
     /**
      * draw the ImageLayer. <br>
-     * automatically called by the game manager {@link me.game}
+     * automatically called by the game manager {@link game}
      * @name draw
-     * @memberOf me.ImageLayer.prototype
+     * @memberof ImageLayer.prototype
      * @function
      * @protected
-     * @param {me.CanvasRenderer|me.WebGLRenderer} renderer a renderer object
+     * @param {CanvasRenderer|WebGLRenderer} renderer a renderer object
      */
     draw(renderer) {
         var width = this.width,

package/src/renderable/nineslicesprite.js

@@ -6,37 +6,33 @@ import Sprite from "./sprite.js";
  * 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
- * });
+ * @augments Sprite
  */
-
 class NineSliceSprite extends Sprite {
-
     /**
-     * @ignore
+     * @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 {number} [settings.insetx] the width of a corner over which the sprite is unscaled (default is a quarter of the sprite width)
+     * @param {number} [settings.insety] the height of a corner over which the sprite is unscaled (default is a quarter of the sprite height)
+     * @param {HTMLImageElement|HTMLCanvasElement|TextureAtlas|string} settings.image reference to spritesheet image, a texture atlas 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 TextureAtlas}
+     * @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 {number} [settings.flipX] flip the sprite on the horizontal axis
+     * @param {number} [settings.flipY] flip the sprite on the vertical axis
+     * @param {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
+     * });
      */
     constructor(x, y, settings) {
         // call the super constructor
@@ -47,10 +43,13 @@ class NineSliceSprite extends Sprite {
             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;
+        // nine slice sprite specific local variables
+        this.nss_width = Math.floor(settings.width);
+        this.nss_height = Math.floor(settings.height);
+
+        this.insetx = settings.insetx;
+        this.insety = settings.insety;
+
     }
 
     /**
@@ -85,8 +84,8 @@ class NineSliceSprite extends Sprite {
             sy = g_offset.y + frame_offset.y;
 
         // should this be configurable ?
-        var corner_width = frame.width / 4,
-            corner_height = frame.height / 4;
+        var corner_width = this.insetx || w / 4,
+            corner_height = this.insety || h / 4;
 
         // OPTIMIZE ME !
 
@@ -108,7 +107,7 @@ class NineSliceSprite extends Sprite {
             sx + w - corner_width,          // sx
             sy,                             // sy
             corner_width, corner_height,    // sw,sh
-            dx + this.width - corner_width, // dx
+            dx + this.nss_width - corner_width, // dx
             dy,                             // dy
             corner_width, corner_height     // dw,dh
         );
@@ -119,7 +118,7 @@ class NineSliceSprite extends Sprite {
             sy + h - corner_height,             // sy
             corner_width, corner_height,        // sw,sh
             dx,                                 // dx
-            dy + this.height - corner_height,   // dy
+            dy + this.nss_height - corner_height,   // dy
             corner_width, corner_height         // dw,dh
         );
         // Bottom Right
@@ -128,8 +127,8 @@ class NineSliceSprite extends Sprite {
             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
+            dx + this.nss_width - corner_width,     //dx
+            dy + this.nss_height - corner_height,   // dy
             corner_width, corner_height         // dw,dh
         );
 
@@ -138,8 +137,8 @@ class NineSliceSprite extends Sprite {
         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);
+        var target_center_width = this.nss_width - (corner_width << 1);
+        var target_center_height = this.nss_height - (corner_height << 1);
 
         //Top center
         renderer.drawImage(
@@ -162,7 +161,7 @@ class NineSliceSprite extends Sprite {
             image_center_width,                 // sw
             corner_height,                      // sh
             dx + corner_width,                  // dx
-            dy + this.height - corner_height,   // dx
+            dy + this.nss_height - corner_height,   // dx
             target_center_width,                // dw
             corner_height                       // dh
         );
@@ -187,7 +186,7 @@ class NineSliceSprite extends Sprite {
             sy + corner_height,             // sy
             corner_width,                   // sw
             image_center_height,            // sh
-            dx + this.width - corner_width, // dx
+            dx + this.nss_width - corner_width, // dx
             dy + corner_height,             // dy
             corner_width,                   // dw
             target_center_height            // dh