feat: sprite alpha and rotation

app/ecs/components/sprite.js

@@ -11,6 +11,9 @@ export default class Sprite extends Component {
         return super.animation;
       }
       set animation(animation) {
+        if (this.$$animation === animation) {
+          return;
+        }
         super.animation = animation;
         // eslint-disable-next-line no-self-assign
         this.frame = this.frame;
@@ -31,6 +34,27 @@ export default class Sprite extends Component {
         }
         return this.$$sourceJson.animations[this.animation].length;
       }
+      hasAnimation(animation) {
+        if (
+          !this.$$sourceJson.animations
+          || !(animation in this.$$sourceJson.animations)
+        ) {
+          return false;
+        }
+        return true;
+      }
+      get rotates() {
+        if (!this.$$sourceJson.meta) {
+          return false;
+        }
+        return 'rotation' in this.$$sourceJson.meta;
+      }
+      get rotation() {
+        if (!this.$$sourceJson.meta) {
+          return 0;
+        }
+        return this.$$sourceJson.meta.rotation;
+      }
       get scale() {
         return {x: this.scaleX, y: this.scaleY};
       }
@@ -51,6 +75,7 @@ export default class Sprite extends Component {
     super.markChange(entityId, key, value);
   }
   static properties = {
+    alpha: {defaultValue: 1, type: 'float32'},
     anchorX: {defaultValue: 0.5, type: 'float32'},
     anchorY: {defaultValue: 0.5, type: 'float32'},
     animation: {type: 'string'},

app/ecs/systems/sprite-direction.js

@@ -24,16 +24,20 @@ export default class SpriteDirection extends System {
         }
       }
       if (Direction) {
-        const name = {
-          0: 'right',
-          1: 'down',
-          2: 'left',
-          3: 'up',
-        };
-        parts.push(name[Direction.quantize(4)]);
+        if (!Sprite.rotates) {
+          const name = {
+            0: 'right',
+            1: 'down',
+            2: 'left',
+            3: 'up',
+          };
+          parts.push(name[Direction.quantize(4)]);
+        }
       }
       if (parts.length > 0) {
-        Sprite.animation = parts.join(':');
+        if (Sprite.hasAnimation(parts.join(':'))) {
+          Sprite.animation = parts.join(':');
+        }
       }
     }
   }

app/react/components/pixi/sprite.jsx

@@ -11,6 +11,9 @@ function textureFromAsset(asset, animation, frame) {
   }
   let texture;
   if (asset.data.animations) {
+    if (!animation) {
+      return undefined;
+    }
     texture = asset.animations[animation][frame];
   }
   else {
@@ -23,7 +26,7 @@ export default function Sprite({entity, ...rest}) {
   const [mounted, setMounted] = useState();
   const [normals, setNormals] = useState();
   const [normalsMounted, setNormalsMounted] = useState();
-  const {anchor, animation, frame, scale, source} = entity.Sprite;
+  const {alpha, anchor, animation, frame, scale, rotates, rotation, source} = entity.Sprite;
   const asset = useAsset(source);
   const normalsAsset = useAsset(normals);
   useEffect(() => {
@@ -59,8 +62,10 @@ export default function Sprite({entity, ...rest}) {
     <>
       {texture && (
         <PixiSprite
+          alpha={alpha}
           anchor={anchor}
           ref={setMounted}
+          {...(rotates ? {rotation: entity.Direction.direction + rotation} : {})}
           scale={scale}
           texture={texture}
           x={Math.round(entity.Position.x)}
@@ -70,8 +75,10 @@ export default function Sprite({entity, ...rest}) {
       )}
       {normalsTexture && (
         <PixiSprite
+          alpha={alpha}
           anchor={anchor}
           ref={setNormalsMounted}
+          {...(rotates ? {rotation: entity.Direction.direction + rotation} : {})}
           scale={scale}
           texture={normalsTexture}
           x={Math.round(entity.Position.x)}