melonjs 10.2.2 → 10.4.0

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