Merge 9a9422a into ba27d56

straker · Sep 5, 2019 · 42223d8 · 42223d8
2 parents ba27d56 + 9a9422a
commit 42223d8
Show file tree

Hide file tree

Showing 8 changed files with 296 additions and 36 deletions.
diff --git a/docs/api/sprite.html b/docs/api/sprite.html
@@ -1683,6 +1683,7 @@ <h2 id="height">
           </h2>
 
           <p>The height of the sprite. If the sprite is a <a href="api/sprite/#rectangle-sprite">rectangle sprite</a>, it uses the passed in value. For an <a href="api/sprite/#image-sprite">image sprite</a> it is the height of the image. And for an <a href="api/sprite/#animation-sprite">animation sprite</a> it is the height of a single frame of the animation.</p>
+<p>Setting the value to a negative number will result in the sprite being flipped across the horizontal axis while the height will remain a positive value.</p>
 
         </section>
         <section>
@@ -1955,6 +1956,7 @@ <h2 id="width">
           </h2>
 
           <p>The width of the sprite. If the sprite is a <a href="api/sprite/#rectangle-sprite">rectangle sprite</a>, it uses the passed in value. For an <a href="api/sprite/#image-sprite">image sprite</a> it is the width of the image. And for an <a href="api/sprite/#animation-sprite">animation sprite</a> it is the width of a single frame of the animation.</p>
+<p>Setting the value to a negative number will result in the sprite being flipped across the vertical axis while the width will remain a positive value.</p>
 
         </section>
         <section>

diff --git a/docs/assets/js/kontra.js b/docs/assets/js/kontra.js
diff --git a/kontra.js b/kontra.js
@@ -2398,17 +2398,8 @@ class Sprite {
 
     // defaults
 
-    /**
-     * The width of the sprite. If the sprite is a [rectangle sprite](api/sprite/#rectangle-sprite), it uses the passed in value. For an [image sprite](api/sprite/#image-sprite) it is the width of the image. And for an [animation sprite](api/sprite/#animation-sprite) it is the width of a single frame of the animation.
-     * @memberof Sprite
-     * @property {Number} width
-     */
-
-    /**
-     * The height of the sprite. If the sprite is a [rectangle sprite](api/sprite/#rectangle-sprite), it uses the passed in value. For an [image sprite](api/sprite/#image-sprite) it is the height of the image. And for an [animation sprite](api/sprite/#animation-sprite) it is the height of a single frame of the animation.
-     * @memberof Sprite
-     * @property {Number} height
-     */
+    // sx = flipX, sy = flipY
+    this._fx = this._fy = 1;
 
     /**
      * The rotation of the sprite around the origin in radians.
@@ -2622,6 +2613,28 @@ class Sprite {
     return this.y - this.sy;
   }
 
+  /**
+   * The width of the sprite. If the sprite is a [rectangle sprite](api/sprite/#rectangle-sprite), it uses the passed in value. For an [image sprite](api/sprite/#image-sprite) it is the width of the image. And for an [animation sprite](api/sprite/#animation-sprite) it is the width of a single frame of the animation.
+   *
+   * Setting the value to a negative number will result in the sprite being flipped across the vertical axis while the width will remain a positive value.
+   * @memberof Sprite
+   * @property {Number} width
+   */
+  get width() {
+    return this._w;
+  }
+
+  /**
+   * The height of the sprite. If the sprite is a [rectangle sprite](api/sprite/#rectangle-sprite), it uses the passed in value. For an [image sprite](api/sprite/#image-sprite) it is the height of the image. And for an [animation sprite](api/sprite/#animation-sprite) it is the height of a single frame of the animation.
+   *
+   * Setting the value to a negative number will result in the sprite being flipped across the horizontal axis while the height will remain a positive value.
+   * @memberof Sprite
+   * @property {Number} height
+   */
+  get height() {
+    return this._h;
+  }
+
   set x(value) {
     this.position.x = value;
   }
@@ -2672,6 +2685,19 @@ class Sprite {
     return;
   }
 
+  set width(value) {
+    let sign = value < 0 ? -1 : 1;
+
+    this._fx = sign;
+    this._w = value * sign;
+  }
+  set height(value) {
+    let sign = value < 0 ? -1 : 1;
+
+    this._fy = sign;
+    this._h = value * sign;
+  }
+
   /**
    * Check if the sprite is alive. Primarily used by kontra.Pool to know when to recycle an object.
    * @memberof Sprite
@@ -2912,10 +2938,21 @@ class Sprite {
     this.context.save();
     this.context.translate(this.viewX, this.viewY);
 
+    // rotate around the anchor
     if (this.rotation) {
       this.context.rotate(this.rotation);
     }
 
+    // flip sprite around the center so the x/y position does not change
+    if (this._fx == -1 || this._fy == -1) {
+      let x = this.width / 2 + anchorWidth;
+      let y = this.height / 2 + anchorHeight;
+
+      this.context.translate(x, y);
+      this.context.scale(this._fx, this._fy);
+      this.context.translate(-x, -y);
+    }
+
     if (this.image) {
       this.context.drawImage(
         this.image,

diff --git a/kontra.min.js b/kontra.min.js
diff --git a/kontra.min.mjs b/kontra.min.mjs
diff --git a/kontra.mjs b/kontra.mjs
@@ -2395,17 +2395,8 @@ class Sprite {
 
     // defaults
 
-    /**
-     * The width of the sprite. If the sprite is a [rectangle sprite](api/sprite/#rectangle-sprite), it uses the passed in value. For an [image sprite](api/sprite/#image-sprite) it is the width of the image. And for an [animation sprite](api/sprite/#animation-sprite) it is the width of a single frame of the animation.
-     * @memberof Sprite
-     * @property {Number} width
-     */
-
-    /**
-     * The height of the sprite. If the sprite is a [rectangle sprite](api/sprite/#rectangle-sprite), it uses the passed in value. For an [image sprite](api/sprite/#image-sprite) it is the height of the image. And for an [animation sprite](api/sprite/#animation-sprite) it is the height of a single frame of the animation.
-     * @memberof Sprite
-     * @property {Number} height
-     */
+    // sx = flipX, sy = flipY
+    this._fx = this._fy = 1;
 
     /**
      * The rotation of the sprite around the origin in radians.
@@ -2619,6 +2610,28 @@ class Sprite {
     return this.y - this.sy;
   }
 
+  /**
+   * The width of the sprite. If the sprite is a [rectangle sprite](api/sprite/#rectangle-sprite), it uses the passed in value. For an [image sprite](api/sprite/#image-sprite) it is the width of the image. And for an [animation sprite](api/sprite/#animation-sprite) it is the width of a single frame of the animation.
+   *
+   * Setting the value to a negative number will result in the sprite being flipped across the vertical axis while the width will remain a positive value.
+   * @memberof Sprite
+   * @property {Number} width
+   */
+  get width() {
+    return this._w;
+  }
+
+  /**
+   * The height of the sprite. If the sprite is a [rectangle sprite](api/sprite/#rectangle-sprite), it uses the passed in value. For an [image sprite](api/sprite/#image-sprite) it is the height of the image. And for an [animation sprite](api/sprite/#animation-sprite) it is the height of a single frame of the animation.
+   *
+   * Setting the value to a negative number will result in the sprite being flipped across the horizontal axis while the height will remain a positive value.
+   * @memberof Sprite
+   * @property {Number} height
+   */
+  get height() {
+    return this._h;
+  }
+
   set x(value) {
     this.position.x = value;
   }
@@ -2669,6 +2682,19 @@ class Sprite {
     return;
   }
 
+  set width(value) {
+    let sign = value < 0 ? -1 : 1;
+
+    this._fx = sign;
+    this._w = value * sign;
+  }
+  set height(value) {
+    let sign = value < 0 ? -1 : 1;
+
+    this._fy = sign;
+    this._h = value * sign;
+  }
+
   /**
    * Check if the sprite is alive. Primarily used by kontra.Pool to know when to recycle an object.
    * @memberof Sprite
@@ -2909,10 +2935,21 @@ class Sprite {
     this.context.save();
     this.context.translate(this.viewX, this.viewY);
 
+    // rotate around the anchor
     if (this.rotation) {
       this.context.rotate(this.rotation);
     }
 
+    // flip sprite around the center so the x/y position does not change
+    if (this._fx == -1 || this._fy == -1) {
+      let x = this.width / 2 + anchorWidth;
+      let y = this.height / 2 + anchorHeight;
+
+      this.context.translate(x, y);
+      this.context.scale(this._fx, this._fy);
+      this.context.translate(-x, -y);
+    }
+
     if (this.image) {
       this.context.drawImage(
         this.image,

diff --git a/src/sprite.js b/src/sprite.js
@@ -72,17 +72,8 @@ class Sprite {
 
     // defaults
 
-    /**
-     * The width of the sprite. If the sprite is a [rectangle sprite](api/sprite/#rectangle-sprite), it uses the passed in value. For an [image sprite](api/sprite/#image-sprite) it is the width of the image. And for an [animation sprite](api/sprite/#animation-sprite) it is the width of a single frame of the animation.
-     * @memberof Sprite
-     * @property {Number} width
-     */
-
-    /**
-     * The height of the sprite. If the sprite is a [rectangle sprite](api/sprite/#rectangle-sprite), it uses the passed in value. For an [image sprite](api/sprite/#image-sprite) it is the height of the image. And for an [animation sprite](api/sprite/#animation-sprite) it is the height of a single frame of the animation.
-     * @memberof Sprite
-     * @property {Number} height
-     */
+    // sx = flipX, sy = flipY
+    this._fx = this._fy = 1;
 
     /**
      * The rotation of the sprite around the origin in radians.
@@ -296,6 +287,28 @@ class Sprite {
     return this.y - this.sy;
   }
 
+  /**
+   * The width of the sprite. If the sprite is a [rectangle sprite](api/sprite/#rectangle-sprite), it uses the passed in value. For an [image sprite](api/sprite/#image-sprite) it is the width of the image. And for an [animation sprite](api/sprite/#animation-sprite) it is the width of a single frame of the animation.
+   *
+   * Setting the value to a negative number will result in the sprite being flipped across the vertical axis while the width will remain a positive value.
+   * @memberof Sprite
+   * @property {Number} width
+   */
+  get width() {
+    return this._w;
+  }
+
+  /**
+   * The height of the sprite. If the sprite is a [rectangle sprite](api/sprite/#rectangle-sprite), it uses the passed in value. For an [image sprite](api/sprite/#image-sprite) it is the height of the image. And for an [animation sprite](api/sprite/#animation-sprite) it is the height of a single frame of the animation.
+   *
+   * Setting the value to a negative number will result in the sprite being flipped across the horizontal axis while the height will remain a positive value.
+   * @memberof Sprite
+   * @property {Number} height
+   */
+  get height() {
+    return this._h;
+  }
+
   set x(value) {
     this.position.x = value;
   }
@@ -346,6 +359,19 @@ class Sprite {
     return;
   }
 
+  set width(value) {
+    let sign = value < 0 ? -1 : 1;
+
+    this._fx = sign
+    this._w = value * sign;
+  }
+  set height(value) {
+    let sign = value < 0 ? -1 : 1;
+
+    this._fy = sign;
+    this._h = value * sign;
+  }
+
   /**
    * Check if the sprite is alive. Primarily used by kontra.Pool to know when to recycle an object.
    * @memberof Sprite
@@ -586,10 +612,21 @@ class Sprite {
     this.context.save();
     this.context.translate(this.viewX, this.viewY);
 
+    // rotate around the anchor
     if (this.rotation) {
       this.context.rotate(this.rotation);
     }
 
+    // flip sprite around the center so the x/y position does not change
+    if (this._fx == -1 || this._fy == -1) {
+      let x = this.width / 2 + anchorWidth;
+      let y = this.height / 2 + anchorHeight;
+
+      this.context.translate(x, y);
+      this.context.scale(this._fx, this._fy);
+      this.context.translate(-x, -y);
+    }
+
     if (this.image) {
       this.context.drawImage(
         this.image,