melonjs 10.1.1 → 10.2.3

package/src/renderable/nineslicesprite.js

@@ -1,27 +1,36 @@
 import Sprite from "./sprite.js";
 
-
 /**
  * @classdesc
- * A NineSliceSprite is similar to a Sprite, but it it can strech its inner area to fit the size of the Renderable
+ * 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|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 {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 {
@@ -33,6 +42,11 @@ class NineSliceSprite extends Sprite {
         // 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;
@@ -41,14 +55,14 @@ class NineSliceSprite extends Sprite {
 
     /**
      * @ignore
-
+     */
     draw(renderer) {
         // the frame to draw
         var frame = this.current;
 
         // cache the current position and size
-        var xpos = this.pos.x,
-            ypos = this.pos.y;
+        var dx = this.pos.x,
+            dy = this.pos.y;
 
         var w = frame.width,
             h = frame.height;
@@ -60,63 +74,138 @@ class NineSliceSprite extends Sprite {
 
         // remove image's TexturePacker/ShoeBox rotation
         if (frame.angle !== 0) {
-            renderer.translate(-xpos, -ypos);
+            renderer.translate(-dx, -dy);
             renderer.rotate(frame.angle);
-            xpos -= h;
+            dx -= h;
             w = frame.height;
             h = frame.width;
         }
 
-        // positions based on frame size
-        const positions = [
-            w, h,
-            0, w,
-            h, 0,
-            w, h,
-            0, w,
-            h, 0
-        ];
-
-
-        /*
-    uvs[0] = u0;
-    uvs[1] = u0 + this._leftWidth;
-    uvs[2] = u1 - this._rightWidth;
-    uvs[3] = u1;
-    uvs[4] = v0;
-    uvs[5] = v0 + this._topHeight;
-    uvs[6] = v1 - this._bottomHeight;
-    uvs[7] = v1;
-
-    for (var row = 0; row < 3; row++) {
-        for (var col = 0; col < 3; col++) {
-
-            const ind = (col * 2) + (row * 8);
-            const sw = Math.max(1, uvs[col + 1] - uvs[col]);
-            const sh = Math.max(1, uvs[row + 5] - uvs[row + 4]);
-            const dw = Math.max(1, vertices[ind + 10] - vertices[ind]);
-            const dh = Math.max(1, vertices[ind + 11] - vertices[ind + 1]);
-
-            context.drawImage(textureSource,
-                uvs[col],   //sx
-                uvs[row + 4],  //sy
-                sw, sh, //
-                vertices[ind], vertices[ind + 1], // dx, dy
-                dw, dh
-            );
-
-            renderer.drawImage(
-                this.image,
-                g_offset.x + frame_offset.x, // sx
-                g_offset.y + frame_offset.y, // sy
-                w, h,                        // sw,sh
-                xpos, ypos,                  // dx,dy
-                w, h                         // dw,dh
-            );
-          }
-      }
+        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;