avocado-old/packages/entity/traits/animated.js

import {compose} from '@avocado/core';
import {AnimationView} from '@avocado/graphics';
import {Rectangle, Vector} from '@avocado/math';
import {Animation} from '@avocado/timing';

import {simpleState, Trait} from '../trait';

const decorate = compose(
  simpleState('currentAnimation', {
    track: true,
  }),
  simpleState('currentFrame', {
    track: true,
  }),
);

class AnimatedBase extends Trait {

  static defaultParams() {
    return {
      animations: {},
    };
  }

  static defaultState() {
    return {
      currentAnimation: 'idle',
      currentFrame: 0,
    };
  }

  initialize() {
    this.animations = {};
    this.animationListeners = {};
    this.animationViews = undefined;
    this.animationsPromise = undefined;
  }

  destroy() {
    if (this.animationViews) {
      for (const key in this.animationViews) {
        this.hideAnimation(key);
        const animationView = this.animationViews[key];
        animationView.destroy();
      }
    }
    for (const key in this.animations) {
      const animation = this.animations[key];
      animation.off('indexChanged', this.animationListeners[key]);
      animation.destroy();
    }
  }

  hideAnimation(key) {
    if (!this.animationViews) {
      return;
    }
    const animationView = this.animationViews[key];
    if (!animationView) {
      return;
    }
    this.entity.container.removeChild(animationView);
  }

  loadAnimations() {
    if (this.animationsPromise) {
      return;
    }
    const animations = this.params.get('animations');
    const animationPromises = [];
    // Load all animations.
    for (const key in animations) {
      const {uri} = animations[key];
      const promise = Animation.load(uri).then((animation) => {
        // Zip with key to make populating animations and views trivial.
        return {animation, key};
      });
      animationPromises.push(promise);
    }
    this.animationsPromise = Promise.all(animationPromises);
    // Store keyed animations.
    this.animations = {};
    this.animationsPromise.then((animations) => {
      animations.forEach(({animation, key}) => {
        this.animations[key] = animation;
        // Set direction upfront.
        animation.direction = this.entity.direction;
        // Listen for index changes.
        this.animationListeners[key] = () => {
          if (this.entity.currentAnimation === key) {
            this.entity.currentFrame = animation.index;
          }
        };
        animation.on('indexChanged', this.animationListeners[key]);
      });
    });
  }

  loadAnimationImagesIfPossible() {
    if (!this.entity.container) {
      return;
    }
    if (!this.animationsPromise) {
      return;
    }
    if (this.animationViews) {
      return;
    }
    // Store keyed animation views.
    this.animationViews = {};
    this.animationsPromise.then((animations) => {
      const animationParams = this.params.get('animations');
      animations.forEach(({animation, key}) => {
        this.animationViews[key] = new AnimationView(animation);
        // Calculate any offset.
        const animationView = this.animationViews[key];
        const size = Rectangle.size(animation.sourceRectangle);
        const halfway = Vector.scale(size, -0.5);
        const {offset} = animationParams[key];
        animationView.position = Vector.add(halfway, offset);
        // Ensure animation is made visible upfront.
        const isCurrentAnimation = key === this.entity.currentAnimation;
        if (isCurrentAnimation) {
          this.showAnimation(key);
        }
      });
    });
  }

  showAnimation(key) {
    if (!this.animationViews) {
      return;
    }
    const animationView = this.animationViews[key];
    if (!animationView) {
      return;
    }
    this.entity.container.addChild(animationView);
  }

  listeners() {
    return {
      currentAnimationChanged: (oldKey) => {
        // Reset old animation.
        const oldAnimation = this.animations[oldKey];
        if (oldAnimation) {
          oldAnimation.reset();
        }
        // Only client/graphics.
        if (!this.animationViews) {
          return;
        }
        // Swap the animation.
        this.hideAnimation(oldKey);
        this.showAnimation(this.entity.currentAnimation);
      },
      currentFrameChanged: () => {
        // Animation index from current entity frame.
        const animation = this.animations[this.entity.currentAnimation];
        if (!animation) {
          return;
        }
        animation.index = this.entity.currentFrame;
      },
      directionChanged: () => {
        // All animations track direction.
        for (const key in this.animations) {
          const animation = this.animations[key];
          animation.direction = this.entity.direction;
        }
      },
      tick: (elapsed) => {
        // Only tick current animation.
        const animation = this.animations[this.entity.currentAnimation];
        if (!animation) {
          return;
        }
        animation.tick(elapsed);
      },
      traitAdded: (trait) => {
        if (-1 === [
          'animated',
          'graphical',
        ].indexOf(trait.constructor.type())) {
          return;
        }
        this.loadAnimations();
        this.loadAnimationImagesIfPossible();
      },
    };
  }

}

export class Animated extends decorate(AnimatedBase) {}