2019-03-18 22:20:03 -05:00
|
|
|
import {compose} from '@avocado/core';
|
2019-03-19 18:06:08 -05:00
|
|
|
import {hasGraphics, AnimationView} from '@avocado/graphics';
|
2019-03-19 20:58:19 -05:00
|
|
|
import {Rectangle, Vector} from '@avocado/math';
|
2019-03-19 18:06:08 -05:00
|
|
|
import {Animation} from '@avocado/timing';
|
2019-03-18 22:20:03 -05:00
|
|
|
|
|
|
|
import {simpleState, Trait} from '../trait';
|
|
|
|
|
|
|
|
const decorate = compose(
|
2019-03-19 18:06:08 -05:00
|
|
|
simpleState('currentAnimation', {
|
|
|
|
track: true,
|
|
|
|
}),
|
2019-03-18 22:20:03 -05:00
|
|
|
simpleState('currentFrame', {
|
|
|
|
track: true,
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
|
|
|
|
class AnimatedBase extends Trait {
|
|
|
|
|
|
|
|
static defaultParams() {
|
|
|
|
return {
|
2019-03-19 18:06:08 -05:00
|
|
|
animations: {},
|
2019-03-18 22:20:03 -05:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
static defaultState() {
|
|
|
|
return {
|
2019-03-19 18:06:08 -05:00
|
|
|
currentAnimation: 'idle',
|
2019-03-18 22:20:03 -05:00
|
|
|
currentFrame: 0,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2019-03-19 20:58:19 -05:00
|
|
|
hideAnimation(key) {
|
|
|
|
if (!this.animationViews) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const animationView = this.animationViews[key];
|
|
|
|
if (!animationView) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.entity.container.removeChild(animationView);
|
|
|
|
}
|
|
|
|
|
2019-03-19 11:25:42 -05:00
|
|
|
initialize() {
|
2019-03-19 18:06:08 -05:00
|
|
|
this.animations = {};
|
|
|
|
this.animationViews = undefined;
|
|
|
|
this.animationsPromise = undefined;
|
2019-03-18 22:20:03 -05:00
|
|
|
}
|
|
|
|
|
2019-03-19 18:06:08 -05:00
|
|
|
loadAnimations() {
|
|
|
|
if (this.animationsPromise) {
|
2019-03-19 10:40:59 -05:00
|
|
|
return;
|
|
|
|
}
|
2019-03-19 18:06:08 -05:00
|
|
|
const animations = this.params.get('animations');
|
|
|
|
const animationPromises = [];
|
|
|
|
// Load all animations.
|
|
|
|
for (const key in animations) {
|
2019-03-19 21:11:04 -05:00
|
|
|
const {uri} = animations[key];
|
2019-03-19 18:06:08 -05:00
|
|
|
const promise = Animation.load(uri).then((animation) => {
|
|
|
|
// Zip with key to make populating animations and views trivial.
|
|
|
|
return {animation, key};
|
|
|
|
});
|
|
|
|
animationPromises.push(promise);
|
2019-03-19 10:46:20 -05:00
|
|
|
}
|
2019-03-19 18:06:08 -05:00
|
|
|
this.animationsPromise = Promise.all(animationPromises);
|
|
|
|
// Store keyed animations.
|
|
|
|
this.animations = {};
|
|
|
|
this.animationsPromise.then((animations) => {
|
|
|
|
animations.forEach(({animation, key}) => {
|
|
|
|
this.animations[key] = animation;
|
|
|
|
// Listen for index changes.
|
|
|
|
animation.on('indexChanged', () => {
|
|
|
|
if (this.entity.currentAnimation === key) {
|
|
|
|
this.entity.currentFrame = animation.index;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
2019-03-19 10:40:59 -05:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-03-19 18:06:08 -05:00
|
|
|
loadAnimationImagesIfPossible() {
|
|
|
|
if (!this.entity.container) {
|
2019-03-19 11:29:07 -05:00
|
|
|
return;
|
2019-03-19 10:22:35 -05:00
|
|
|
}
|
2019-03-19 18:06:08 -05:00
|
|
|
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);
|
|
|
|
// Ensure animation is made visible upfront.
|
|
|
|
const isCurrentAnimation = key === this.entity.currentAnimation;
|
|
|
|
if (isCurrentAnimation) {
|
2019-03-19 20:58:19 -05:00
|
|
|
this.showAnimation(key);
|
2019-03-19 18:06:08 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
2019-03-19 10:22:35 -05:00
|
|
|
}
|
|
|
|
|
2019-03-19 20:58:19 -05:00
|
|
|
showAnimation(key) {
|
|
|
|
if (!this.animationViews) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const animationView = this.animationViews[key];
|
|
|
|
if (!animationView) {
|
|
|
|
return;
|
|
|
|
}
|
2019-03-19 21:11:04 -05:00
|
|
|
const animations = this.params.get('animations');
|
|
|
|
const {offset} = animations[key];
|
2019-03-19 20:58:19 -05:00
|
|
|
const {animation} = animationView;
|
|
|
|
const size = Rectangle.size(animation.sourceRectangle)
|
2019-03-19 21:11:04 -05:00
|
|
|
const halfway = Vector.scale(size, -0.5);
|
|
|
|
animationView.position = Vector.add(halfway, offset);
|
2019-03-19 20:58:19 -05:00
|
|
|
this.entity.container.addChild(animationView);
|
|
|
|
}
|
|
|
|
|
2019-03-18 22:20:03 -05:00
|
|
|
listeners() {
|
|
|
|
return {
|
2019-03-19 18:06:08 -05:00
|
|
|
currentAnimationChanged: (oldKey) => {
|
|
|
|
// Reset old animation.
|
|
|
|
const oldAnimation = this.animations[oldKey];
|
|
|
|
if (oldAnimation) {
|
|
|
|
oldAnimation.reset();
|
|
|
|
}
|
|
|
|
// Only client/graphics.
|
|
|
|
if (!this.animationViews) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// Swap the animation.
|
2019-03-19 20:58:19 -05:00
|
|
|
this.hideAnimation(oldKey);
|
|
|
|
this.showAnimation(this.entity.currentAnimation);
|
2019-03-19 18:06:08 -05:00
|
|
|
},
|
2019-03-18 22:20:03 -05:00
|
|
|
currentFrameChanged: () => {
|
2019-03-19 18:06:08 -05:00
|
|
|
// Animation index from current entity frame.
|
|
|
|
const animation = this.animations[this.entity.currentAnimation];
|
|
|
|
if (!animation) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
animation.index = this.entity.currentFrame;
|
2019-03-18 22:20:03 -05:00
|
|
|
},
|
|
|
|
directionChanged: () => {
|
2019-03-19 18:06:08 -05:00
|
|
|
// All animations track direction.
|
|
|
|
for (const key in this.animations) {
|
|
|
|
const animation = this.animations[key];
|
|
|
|
animation.direction = this.entity.direction;
|
|
|
|
}
|
2019-03-18 22:20:03 -05:00
|
|
|
},
|
|
|
|
tick: (elapsed) => {
|
2019-03-19 18:06:08 -05:00
|
|
|
// Only tick current animation.
|
|
|
|
const animation = this.animations[this.entity.currentAnimation];
|
|
|
|
if (!animation) {
|
2019-03-18 22:20:03 -05:00
|
|
|
return;
|
|
|
|
}
|
2019-03-19 18:06:08 -05:00
|
|
|
animation.tick(elapsed);
|
2019-03-18 22:20:03 -05:00
|
|
|
},
|
|
|
|
traitAdded: (trait) => {
|
2019-03-19 18:06:08 -05:00
|
|
|
if (-1 === [
|
|
|
|
'animated',
|
|
|
|
'graphical'
|
|
|
|
].indexOf(trait.constructor.type())) {
|
2019-03-18 22:20:03 -05:00
|
|
|
return;
|
|
|
|
}
|
2019-03-19 18:06:08 -05:00
|
|
|
this.loadAnimations();
|
|
|
|
this.loadAnimationImagesIfPossible();
|
2019-03-18 22:20:03 -05:00
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
export class Animated extends decorate(AnimatedBase) {}
|