Basic implementations

js/retro/RetroAnimation.js

@@ -0,0 +1,60 @@
+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;
+    }
+}