avocado-old/packages/timing/traits/animated.trait.js

import {compose} from '@avocado/core';
import {StateProperty, Trait} from '@avocado/entity';
import {Rectangle, Vector} from '@avocado/math';

import {Animation} from '../animation';
import {AnimationView} from '../animation-view';

const decorate = compose(
  StateProperty('currentAnimation', {
    track: true,
  }),
  StateProperty('isAnimating', {
    track: true,
  }),
);

class AnimatedBase extends Trait {

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

  static defaultState() {
    return {
      currentAnimation: 'idle',
      isAnimating: true,
    };
  }

  initialize() {
    this._animations = this.params.get('animations').toJS();
    this.animations = {};
    this.animationViews = undefined;
    this.animationsPromise = undefined;
    this._cachedAabbs = {};
    this._currentAnimation = this.entity.currentAnimation;
  }

  destroy() {
    if (this.animationViews) {
      for (const key in this.animationViews) {
        this.hideAnimation(key);
        const animationView = this.animationViews[key];
        animationView.destroy();
      }
      this.animationViews = undefined;
    }
    for (const key in this.animations) {
      const animation = this.animations[key];
      animation.destroy();
    }
    this.animations = {};
    this.animationsPromise = undefined;
    this._cachedAabbs = {};
  }

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

  jitterFor(key) {
    if (!(key in this._animations) || !this._animations[key].jitter) {
      return 0;
    }
    return this._animations[key].jitter;
  }

  loadAnimations() {
    if (this.animationsPromise) {
      return;
    }
    const animationPromises = [];
    // Load all animations.
    for (const key in this._animations) {
      const {uri} = this._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;
      });
      // Bounding box update.
      this.entity.updateVisibleBoundingBox();
    });
  }

  loadAnimationImagesIfPossible() {
    if (!this.entity.container) {
      return;
    }
    if (!this.animationsPromise) {
      return;
    }
    if (this.animationViews) {
      return;
    }
    // Store keyed animation views.
    this.animationViews = {};
    this.animationsPromise.then((animations) => {
      animations.forEach(({animation, key}) => {
        this.animationViews[key] = new AnimationView(animation);
        // Calculate any offset.
        const animationView = this.animationViews[key];
        animationView.position = this.offsetFor(key);
        // Ensure animation is made visible upfront.
        const isCurrentAnimation = key === this._currentAnimation;
        if (isCurrentAnimation) {
          this.showAnimation(key);
        }
      });
      this.setSpriteScale();
    });
  }

  offsetFor(key) {
    if (!(key in this._animations) || !this._animations[key].offset) {
      return [0, 0];
    }
    return this._animations[key].offset;
  }

  setSpriteScale() {
    if (!this.animationViews) {
      return;
    }
    const rawScale = this._visibleScale;
    for (const key in this.animationViews) {
      const animationView = this.animationViews[key];
      animationView.scale = rawScale;
    }
  }

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

  hooks() {
    return {

      visibleAabbs: () => {
        const key = this._currentAnimation;
        if (key in this._cachedAabbs) {
          return this._cachedAabbs[key];
        }
        if (!(key in this.animations)) {
          return [0, 0, 0, 0];
        }
        const animation = this.animations[key];
        const viewPosition = this.offsetFor(key);
        const size = animation.frameSize;
        const rectangle = Rectangle.compose(viewPosition, size);
        const expanded = Rectangle.expand(
          rectangle,
          Vector.sub(Vector.mul(size, this._visibleScale), size),
        );
        return this._cachedAabbs[key] = expanded;
      },

    }
  }

  listeners() {
    return {

      currentAnimationChanged: (oldKey, currentAnimation) => {
        this._currentAnimation = currentAnimation;
        // Reset old animation.
        if (oldKey in this.animations) {
          const oldAnimation = this.animations[oldKey];
          oldAnimation.reset();
        }
        // Bounding box update.
        this.entity.updateVisibleBoundingBox();
        // Only client/graphics.
        if (!this.animationViews) {
          return;
        }
        // Swap the animation.
        this.hideAnimation(oldKey);
        this.showAnimation(this._currentAnimation);
      },

      directionChanged: () => {
        // All animations track direction.
        for (const key in this.animations) {
          const animation = this.animations[key];
          animation.direction = this.entity.direction;
        }
      },

      dying: () => {
        this.isAnimating = false;
      },

      visibleScaleChanged: () => {
        this._cachedAabbs = {};
        this.setSpriteScale();
      },

      traitAdded: (type) => {
        if (-1 === [
          'animated',
          'visible',
        ].indexOf(type)) {
          return;
        }
        this.loadAnimations();
        this.loadAnimationImagesIfPossible();
        if (this.entity.is('visible')) {
          this._visibleScale = this.entity.rawVisibleScale;
        }
      },

      visibleScaleChanged: () => {
        this._visibleScale = this.entity.rawVisibleScale;
      }

    };
  }

  tick(elapsed) {
    if (!this.isAnimating) {
      return;
    }
    // Only tick current animation.
    const currentAnimation = this._currentAnimation;
    if (!(currentAnimation in this.animations)) {
      return;
    }
    const animation = this.animations[currentAnimation];
    const jitterAmount = this.jitterFor(currentAnimation);
    if (jitterAmount > 0) {
      const jitter = Math.random() * jitterAmount;
      const halfJitter = jitter / 2;
      elapsed += jitter - halfJitter;
    }
    animation.tick(elapsed);
  }

}

export class Animated extends decorate(AnimatedBase) {}