animated sprites

animation/sprite.ts

@@ -0,0 +1,45 @@
+import { Vector } from "../geometry/vector.ts";
+
+export class SpriteAnimation {
+  image: HTMLImageElement;
+  origin: Vector;
+  constructor(
+    private imageUrl: string,
+    private cellWidth: number,
+    private cellHeight: number,
+    private cellCountX: number,
+    private cellCountY: number,
+    private timing = 1,
+    private scale = 1,
+  ) {
+    this.image = new Image();
+    this.image.src = this.imageUrl;
+    this.origin = new Vector();
+  }
+
+  private _frameCount = 0;
+  private get frameCount() {
+    return this._frameCount += this.timing;
+  }
+
+  getCell() {
+    const time = Math.floor(this.frameCount);
+    const x = (time % this.cellCountX) * this.cellWidth;
+    const y = (Math.floor(time / this.cellCountX) % this.cellCountY) *
+      this.cellHeight;
+    return { x, y };
+  }
+
+  draw() {
+    const { x, y } = this.getCell();
+    doodler.drawSprite(
+      this.image,
+      new Vector(x, y),
+      this.cellWidth,
+      this.cellHeight,
+      this.origin,
+      this.cellWidth * this.scale,
+      this.cellHeight * this.scale,
+    );
+  }
+}

bundle.js

@@ -259,6 +259,47 @@ class OriginVector extends Vector {
         return new OriginVector(origin, v);
     }
 }
+class SpriteAnimation {
+    imageUrl;
+    cellWidth;
+    cellHeight;
+    cellCountX;
+    cellCountY;
+    timing;
+    scale;
+    image;
+    origin;
+    constructor(imageUrl, cellWidth, cellHeight, cellCountX, cellCountY, timing = 1, scale = 1){
+        this.imageUrl = imageUrl;
+        this.cellWidth = cellWidth;
+        this.cellHeight = cellHeight;
+        this.cellCountX = cellCountX;
+        this.cellCountY = cellCountY;
+        this.timing = timing;
+        this.scale = scale;
+        this._frameCount = 0;
+        this.image = new Image();
+        this.image.src = this.imageUrl;
+        this.origin = new Vector();
+    }
+    _frameCount;
+    get frameCount() {
+        return this._frameCount += this.timing;
+    }
+    getCell() {
+        const time = Math.floor(this.frameCount);
+        const x = time % this.cellCountX * this.cellWidth;
+        const y = Math.floor(time / this.cellCountX) % this.cellCountY * this.cellHeight;
+        return {
+            x,
+            y
+        };
+    }
+    draw() {
+        const { x, y } = this.getCell();
+        doodler.drawSprite(this.image, new Vector(x, y), this.cellWidth, this.cellHeight, this.origin, this.cellWidth * this.scale, this.cellHeight * this.scale);
+    }
+}
 const easeInOut = (x)=>x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
 const map = (value, x1, y1, x2, y2)=>(value - x1) * (y2 - x2) / (y1 - x1) + x2;
 class Doodler {
@@ -844,33 +885,10 @@ const img = new Image();
 img.src = "./skeleton.png";
 img.hidden;
 document.body.append(img);
-const p = new Vector(200, 200);
+new Vector(200, 200);
+const animSprite = new SpriteAnimation("./EngineSprites.png", 100, 20, 1, 5, .02, 5);
 doodler.createLayer(()=>{
-    const [gamepad] = navigator.getGamepads();
+    animSprite.draw();
-    if (gamepad) {
-        const leftX = gamepad.axes[0];
-        const leftY = gamepad.axes[1];
-        p.add(Math.min(Math.max(leftX - 0.04, 0), leftX + 0.04), Math.min(Math.max(leftY - 0.04, 0), leftY + 0.04));
-        const rigthX = gamepad.axes[2];
-        const rigthY = gamepad.axes[3];
-        doodler.moveOrigin({
-            x: -rigthX * 5,
-            y: -rigthY * 5
-        });
-        if (gamepad.buttons[7].value) {
-            doodler.scaleAt({
-                x: 200,
-                y: 200
-            }, 1 + gamepad.buttons[7].value / 5);
-        }
-        if (gamepad.buttons[6].value) {
-            doodler.scaleAt({
-                x: 200,
-                y: 200
-            }, 1 - gamepad.buttons[6].value / 5);
-        }
-    }
-    doodler.drawImageWithOutline(img, p);
 });
 document.addEventListener("keyup", (e)=>{
     e.preventDefault();

main.ts

@@ -1,5 +1,6 @@
 /// <reference types="./global.d.ts" />
 
+import { SpriteAnimation } from "./animation/sprite.ts";
 import { initializeDoodler, Vector } from "./mod.ts";
 import { ZoomableDoodler } from "./zoomableCanvas.ts";
 
@@ -25,35 +26,46 @@ document.body.append(img);
 
 const p = new Vector(200, 200);
 
+const animSprite = new SpriteAnimation(
+  "./EngineSprites.png",
+  100,
+  20,
+  1,
+  5,
+  .02,
+  5,
+);
+
 doodler.createLayer(() => {
-  const [gamepad] = navigator.getGamepads();
+  animSprite.draw();
-  const deadzone = 0.04;
+  // const [gamepad] = navigator.getGamepads();
-  if (gamepad) {
+  // const deadzone = 0.04;
-    const leftX = gamepad.axes[0];
+  // if (gamepad) {
-    const leftY = gamepad.axes[1];
+  //   const leftX = gamepad.axes[0];
-    p.add(
+  //   const leftY = gamepad.axes[1];
-      Math.min(Math.max(leftX - deadzone, 0), leftX + deadzone),
+  //   p.add(
-      Math.min(Math.max(leftY - deadzone, 0), leftY + deadzone),
+  //     Math.min(Math.max(leftX - deadzone, 0), leftX + deadzone),
-    );
+  //     Math.min(Math.max(leftY - deadzone, 0), leftY + deadzone),
+  //   );
 
-    const rigthX = gamepad.axes[2];
+  //   const rigthX = gamepad.axes[2];
-    const rigthY = gamepad.axes[3];
+  //   const rigthY = gamepad.axes[3];
-    (doodler as ZoomableDoodler).moveOrigin({ x: -rigthX * 5, y: -rigthY * 5 });
+  //   (doodler as ZoomableDoodler).moveOrigin({ x: -rigthX * 5, y: -rigthY * 5 });
 
-    if (gamepad.buttons[7].value) {
+  //   if (gamepad.buttons[7].value) {
-      (doodler as ZoomableDoodler).scaleAt(
+  //     (doodler as ZoomableDoodler).scaleAt(
-        { x: 200, y: 200 },
+  //       { x: 200, y: 200 },
-        1 + (gamepad.buttons[7].value / 5),
+  //       1 + (gamepad.buttons[7].value / 5),
-      );
+  //     );
-    }
+  //   }
-    if (gamepad.buttons[6].value) {
+  //   if (gamepad.buttons[6].value) {
-      (doodler as ZoomableDoodler).scaleAt(
+  //     (doodler as ZoomableDoodler).scaleAt(
-        { x: 200, y: 200 },
+  //       { x: 200, y: 200 },
-        1 - (gamepad.buttons[6].value / 5),
+  //       1 - (gamepad.buttons[6].value / 5),
-      );
+  //     );
-    }
+  //   }
-  }
+  // }
-  doodler.drawImageWithOutline(img, p);
+  // doodler.drawImageWithOutline(img, p);
   // doodler.line(new Vector(100, 100), new Vector(200, 200))
   // doodler.dot(new Vector(300, 300))
   // doodler.fillCircle(movingVector, 6, { color: 'red' });