feat: visible scaling

packages/graphics/traits/pictured.trait.js

@@ -78,6 +78,7 @@ export class Pictured extends decorate(Trait) {
     Promise.all(imagePromises).then((images) => {
       // Bounding box update.
       this.entity.updateVisibleBoundingBox();
+      this.setSpriteScale();
     });
   }
 
@@ -88,6 +89,17 @@ export class Pictured extends decorate(Trait) {
     return this._images[key].offset;
   }
 
+  setSpriteScale() {
+    if (!this.sprites) {
+      return;
+    }
+    const rawScale = this.entity.rawVisibleScale;
+    for (const key in this.sprites) {
+      const sprite = this.sprites[key];
+      sprite.scale = rawScale;
+    }
+  }
+
   showImage(key) {
     if (!this.sprites) {
       return;
@@ -117,7 +129,13 @@ export class Pictured extends decorate(Trait) {
         }
         const viewPosition = this.offsetFor(key);
         const position = Vector.add(this.entity.position, viewPosition);
-        return Rectangle.compose(position, this.sizeFor(key));
+        const size = this.sizeFor(key);
+        const rectangle = Rectangle.compose(position, size);
+        const expanded = Rectangle.expand(
+          rectangle,
+          Vector.sub(Vector.mul(size, this.entity.rawVisibleScale), size),
+        );
+        return expanded;
       },
 
     }
@@ -137,6 +155,11 @@ export class Pictured extends decorate(Trait) {
         this.hideImage(oldKey);
         this.showImage(this.entity.currentImage);
       },
+
+      scaleChanged: () => {
+        this.setSpriteScale();
+      },
+
       traitAdded: (type) => {
         if (-1 === [
           'visible',

packages/graphics/traits/visible.trait.js

@@ -1,3 +1,5 @@
+import * as I from 'immutable';
+
 import {compose} from '@avocado/core';
 import {StateProperty, Trait} from '@avocado/entity';
 import {Rectangle, Vector} from '@avocado/math';
@@ -16,7 +18,10 @@ const decorate = compose(
       this.entity.emit(...args);
     },
     track: true,
-  })
+  }),
+  StateProperty('visibleScale', {
+    track: true,
+  }),
 );
 
 export class Visible extends decorate(Trait) {
@@ -30,6 +35,7 @@ export class Visible extends decorate(Trait) {
   static defaultState() {
     return {
       isVisible: true,
+      visibleScale: [1, 1],
     };
   }
 
@@ -52,6 +58,15 @@ export class Visible extends decorate(Trait) {
     return this._container;
   }
 
+  get rawVisibleScale() {
+    const scale = this.entity.visibleScale;
+    return [scale.get(0), scale.get(1)];
+  }
+
+  set rawVisibleScale(scale) {
+    this.entity.visibleScale = I.List(scale);
+  }
+
   shouldSynchronizePosition() {
     return this._container && this.trackPosition;
   }

packages/timing/traits/animated.trait.js

@@ -114,6 +114,7 @@ class AnimatedBase extends Trait {
           this.showAnimation(key);
         }
       });
+      this.setSpriteScale();
     });
   }
 
@@ -124,6 +125,17 @@ class AnimatedBase extends Trait {
     return this._animations[key].offset;
   }
 
+  setSpriteScale() {
+    if (!this.animationViews) {
+      return;
+    }
+    const rawScale = this.entity.rawVisibleScale;
+    for (const key in this.animationViews) {
+      const animationView = this.animationViews[key];
+      animationView.scale = rawScale;
+    }
+  }
+
   showAnimation(key) {
     if (!this.animationViews) {
       return;
@@ -146,7 +158,13 @@ class AnimatedBase extends Trait {
         }
         const viewPosition = this.offsetFor(key);
         const position = Vector.add(this.entity.position, viewPosition);
-        return Rectangle.compose(position, animation.frameSize);
+        const size = animation.frameSize;
+        const rectangle = Rectangle.compose(position, size);
+        const expanded = Rectangle.expand(
+          rectangle,
+          Vector.sub(Vector.mul(size, this.entity.rawVisibleScale), size),
+        );
+        return expanded;
       },
 
     }
@@ -184,6 +202,10 @@ class AnimatedBase extends Trait {
         this._isAnimating = false;
       },
 
+      scaleChanged: () => {
+        this.setSpriteScale();
+      },
+
       traitAdded: (type) => {
         if (-1 === [
           'animated',
@@ -194,6 +216,7 @@ class AnimatedBase extends Trait {
         this.loadAnimations();
         this.loadAnimationImagesIfPossible();
       },
+
     };
   }