247 lines
6.1 KiB
JavaScript
247 lines
6.1 KiB
JavaScript
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;
|
|
}
|
|
|
|
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.destroy();
|
|
}
|
|
}
|
|
|
|
hideAnimation(key) {
|
|
if (!this.animationViews) {
|
|
return;
|
|
}
|
|
const animationView = this.animationViews[key];
|
|
if (!animationView) {
|
|
return;
|
|
}
|
|
this.entity.container.removeChild(animationView);
|
|
}
|
|
|
|
jitterFor(key) {
|
|
if (!this._animations[key] || !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.entity.currentAnimation;
|
|
if (isCurrentAnimation) {
|
|
this.showAnimation(key);
|
|
}
|
|
});
|
|
this.setSpriteScale();
|
|
});
|
|
}
|
|
|
|
offsetFor(key) {
|
|
if (!this._animations[key] || !this._animations[key].offset) {
|
|
return [0, 0];
|
|
}
|
|
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;
|
|
}
|
|
const animationView = this.animationViews[key];
|
|
if (!animationView) {
|
|
return;
|
|
}
|
|
this.entity.container.addChild(animationView);
|
|
}
|
|
|
|
hooks() {
|
|
return {
|
|
|
|
visibleBoundingBoxes: () => {
|
|
const key = this.entity.currentAnimation;
|
|
const animation = this.animations[key];
|
|
if (!animation) {
|
|
return [0, 0, 0, 0];
|
|
}
|
|
const viewPosition = this.offsetFor(key);
|
|
const position = Vector.add(this.entity.position, viewPosition);
|
|
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;
|
|
},
|
|
|
|
}
|
|
}
|
|
|
|
listeners() {
|
|
return {
|
|
|
|
currentAnimationChanged: (oldKey) => {
|
|
// Reset old animation.
|
|
const oldAnimation = this.animations[oldKey];
|
|
if (oldAnimation) {
|
|
oldAnimation.reset();
|
|
}
|
|
// Bounding box update.
|
|
this.entity.updateVisibleBoundingBox();
|
|
// Only client/graphics.
|
|
if (!this.animationViews) {
|
|
return;
|
|
}
|
|
// Swap the animation.
|
|
this.hideAnimation(oldKey);
|
|
this.showAnimation(this.entity.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.setSpriteScale();
|
|
},
|
|
|
|
traitAdded: (type) => {
|
|
if (-1 === [
|
|
'animated',
|
|
'visible',
|
|
].indexOf(type)) {
|
|
return;
|
|
}
|
|
this.loadAnimations();
|
|
this.loadAnimationImagesIfPossible();
|
|
},
|
|
|
|
};
|
|
}
|
|
|
|
tick(elapsed) {
|
|
if (!this.isAnimating) {
|
|
return;
|
|
}
|
|
// Only tick current animation.
|
|
const currentAnimation = this.entity.currentAnimation;
|
|
const animation = this.animations[currentAnimation];
|
|
if (!animation) {
|
|
return;
|
|
}
|
|
const jitter = Math.random() * this.jitterFor(currentAnimation);
|
|
const halfJitter = jitter / 2;
|
|
animation.tick(elapsed + (jitter - halfJitter));
|
|
}
|
|
|
|
}
|
|
|
|
export class Animated extends decorate(AnimatedBase) {}
|