60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
|
import RetroSprite from "./RetroSprite.js";
|
||
|
|
|
||
|
|
export default class RetroAnimation extends RetroSprite
|
||
|
|
{
|
||
|
|
constructor(image, frames, scale = 1, fps = 6)
|
||
|
|
{
|
||
|
|
super(image, scale);
|
||
|
|
this.frames = frames;
|
||
|
|
this.fps = fps;
|
||
|
|
this.frameDuration = 1000 / this.fps;
|
||
|
|
this.currentFrame = 0;
|
||
|
|
this.lastUpdate = undefined;
|
||
|
|
this.frameWidth = this.canvas.width / this.frames;
|
||
|
|
this.isPlaying = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
getWidth() {
|
||
|
|
return this.frameWidth;
|
||
|
|
}
|
||
|
|
|
||
|
|
setFootPosition(x, y) {
|
||
|
|
this.position.x = x - this.frameWidth * 0.5;
|
||
|
|
this.position.y = y - this.canvas.height;
|
||
|
|
}
|
||
|
|
|
||
|
|
play(timestamp)
|
||
|
|
{
|
||
|
|
this.isPlaying = true;
|
||
|
|
|
||
|
|
if (this.lastUpdate === undefined) {
|
||
|
|
this.lastUpdate = timestamp;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (timestamp - this.lastUpdate >= this.frameDuration) {
|
||
|
|
this.currentFrame = (this.currentFrame + 1) % this.frames;
|
||
|
|
this.lastUpdate = timestamp;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
draw(context)
|
||
|
|
{
|
||
|
|
if (!this.isPlaying) {
|
||
|
|
this.currentFrame = 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
context.drawImage(
|
||
|
|
this.canvas,
|
||
|
|
this.frameWidth * this.currentFrame,
|
||
|
|
0,
|
||
|
|
this.frameWidth,
|
||
|
|
this.canvas.height,
|
||
|
|
this.position.x,
|
||
|
|
this.position.y,
|
||
|
|
this.frameWidth,
|
||
|
|
this.canvas.height
|
||
|
|
);
|
||
|
|
|
||
|
|
this.isPlaying = false;
|
||
|
|
}
|
||
|
|
}
|