@fi4f/hg 0.0.17 → 0.0.18

package/dist/frames.d.ts

@@ -1,15 +1,23 @@
+import type { Scene } from "./scene.js";
 export type Frame = {
+    atlas: HTMLImageElement;
     sx: number;
     sy: number;
     sw: number;
     sh: number;
 };
 export declare const Frame: {
-    "new"(sx: number, sy: number, sw: number, sh: number): {
+    "new"(atlas: HTMLImageElement, sx?: number, sy?: number, sw?: number, sh?: number): {
+        atlas: HTMLImageElement;
         sx: number;
         sy: number;
         sw: number;
         sh: number;
     };
+    draw({ g }: Scene.RenderContext, frame: Frame, dx?: number, dy?: number, dw?: number, dh?: number): void;
+};
+export declare const Frames: {
+    from(atlas: HTMLImageElement, w: number, h: number, n?: number): Frame[];
+    draw(context: Scene.RenderContext, frames: Array<Frame>, i?: number, dx?: number, dy?: number, dw?: number, dh?: number): void;
 };
 //# sourceMappingURL=frames.d.ts.map

package/dist/frames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frames.d.ts","sourceRoot":"","sources":["../src/frames.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;CACxB,CAAA;AAED,eAAO,MAAM,KAAK;cAEV,MAAM,MAAM,MAAM,MAClB,MAAM,MAAM,MAAM;;;;;;CAOzB,CAAA"}
+{"version":3,"file":"frames.d.ts","sourceRoot":"","sources":["../src/frames.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEvC,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,EAAE,gBAAgB,CAAA;IACvB,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IACvB,EAAE,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;CACxB,CAAA;AAED,eAAO,MAAM,KAAK;iBAEP,gBAAgB;;;;;;;gBAahB,KAAK,CAAC,aAAa,SACnB,KAAK;CAYf,CAAA;AAED,eAAO,MAAM,MAAM;gBACL,gBAAgB,KAAK,MAAM,KAAK,MAAM,MAAO,MAAM;kBA0BpD,KAAK,CAAC,aAAa,UACnB,KAAK,CAAC,KAAK,CAAC;CAaxB,CAAA"}

package/dist/frames.js

@@ -1,9 +1,40 @@
 export const Frame = {
-    new(sx, sy, sw, sh) {
+    new(atlas, sx = 0, sy = 0, sw = atlas.width, sh = atlas.height) {
         return {
+            atlas,
             sx, sy,
             sw, sh
         };
+    },
+    draw({ g }, frame, dx = 0, dy = 0, dw = frame.sw, dh = frame.sh) {
+        g.drawImage(frame.atlas, frame.sx, frame.sy, frame.sw, frame.sh, dx, dy, dw, dh);
+    }
+};
+export const Frames = {
+    from(atlas, w, h, n) {
+        const frames = new Array();
+        const rows = Math.floor(atlas.height / h);
+        const cols = Math.floor(atlas.width / w);
+        n ??= rows * cols;
+        for (let i = 0; i < n; i++) {
+            const row = Math.floor(i / cols);
+            const col = Math.floor(i % cols);
+            if (row < 0 || row >= rows ||
+                col < 0 || col >= cols)
+                break;
+            frames.push({
+                atlas: atlas,
+                sx: col * w,
+                sy: row * h,
+                sw: w, sh: h
+            });
+        }
+        return frames;
+    },
+    draw(context, frames, i = 0, dx = 0, dy = 0, dw = frames[i]?.sw ?? 0, dh = frames[i]?.sh ?? 0) {
+        if (!frames[i])
+            return;
+        Frame.draw(context, frames[i], dx, dy, dw, dh);
     }
 };
 //# sourceMappingURL=frames.js.map

package/dist/frames.js.map

@@ -1 +1 @@
-{"version":3,"file":"frames.js","sourceRoot":"","sources":["../src/frames.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,GAAG,CACD,EAAU,EAAE,EAAU,EACtB,EAAU,EAAE,EAAU;QAEtB,OAAO;YACL,EAAE,EAAE,EAAE;YACN,EAAE,EAAE,EAAE;SACS,CAAA;IACnB,CAAC;CACF,CAAA"}
+{"version":3,"file":"frames.js","sourceRoot":"","sources":["../src/frames.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,GAAG,CACD,KAAuB,EACvB,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,EACd,EAAE,GAAG,KAAK,CAAC,KAAK,EAChB,EAAE,GAAG,KAAK,CAAC,MAAM;QAEjB,OAAO;YACL,KAAK;YACL,EAAE,EAAE,EAAE;YACN,EAAE,EAAE,EAAE;SACS,CAAA;IACnB,CAAC;IAED,IAAI,CACF,EAAE,CAAC,EAAuB,EAC1B,KAAY,EACZ,EAAE,GAAC,CAAC,EACJ,EAAE,GAAC,CAAC,EACJ,EAAE,GAAC,KAAK,CAAC,EAAE,EACX,EAAE,GAAC,KAAK,CAAC,EAAE;QAEX,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,EACrB,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAClB,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAClB,EAAE,EAAG,EAAE,EAAG,EAAE,EAAG,EAAE,CAClB,CAAA;IACH,CAAC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,CAAC,KAAuB,EAAE,CAAS,EAAE,CAAS,EAAE,CAAW;QAC7D,MAAM,MAAM,GAAG,IAAI,KAAK,EAAS,CAAA;QACjC,MAAM,IAAI,GAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;QAC3C,MAAM,IAAI,GAAK,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAI,CAAC,CAAC,CAAA;QAE3C,CAAC,KAAK,IAAI,GAAG,IAAI,CAAA;QACjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAG,EAAE,CAAC;YAC5B,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;YAChC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;YAEhC,IACE,GAAG,GAAG,CAAC,IAAI,GAAG,IAAI,IAAI;gBACtB,GAAG,GAAG,CAAC,IAAI,GAAG,IAAI,IAAI;gBACtB,MAAM;YAER,MAAM,CAAC,IAAI,CAAC;gBACV,KAAK,EAAE,KAAK;gBACZ,EAAE,EAAE,GAAG,GAAG,CAAC;gBACX,EAAE,EAAE,GAAG,GAAG,CAAC;gBACX,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;aACb,CAAC,CAAA;QACJ,CAAC;QACD,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,CACF,OAA4B,EAC5B,MAAqB,EACrB,CAAC,GAAE,CAAC,EACJ,EAAE,GAAC,CAAC,EACJ,EAAE,GAAC,CAAC,EACJ,EAAE,GAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,EACrB,EAAE,GAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC;QAErB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;YAAE,OAAO;QACvB,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAC3B,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,CACP,CAAA;IACH,CAAC;CACF,CAAA"}

package/dist/sprite.d.ts

@@ -1,13 +1,26 @@
-import type { Frame } from "./frames.js";
+import { Frame } from "./frames.js";
 import type { Scene } from "./scene.js";
 export type Sprite = {
     frames: Array<Frame>;
-    atlas: HTMLImageElement;
     state: "playing" | "stopped" | "looping";
     frame: number;
     speed: number;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
 };
 export declare const Sprite: {
+    "new"(frames: Array<Frame>, w?: number, h?: number): {
+        frames: Frame[];
+        state: "stopped";
+        frame: number;
+        speed: number;
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
     /** Check if a sprite is playing. Returns `true` if the sprite is *not* stopped. */
     isPlaying(sprite: Sprite): boolean;
     /** Check if a sprite is stopped. Returns `true` if the sprite is stopped. */

package/dist/sprite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sprite.d.ts","sourceRoot":"","sources":["../src/sprite.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEvC,MAAM,MAAM,MAAM,GAAG;IACnB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IAEpB,KAAK,EAAE,gBAAgB,CAAA;IACvB,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAID,eAAO,MAAM,MAAM;IACjB,mFAAmF;sBACjE,MAAM;IAIxB,6EAA6E;sBAC3D,MAAM;IAIxB,6EAA6E;sBAC3D,MAAM;iBAIX,MAAM,MAAO;QAAE,KAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAM,CAAC,EAAE,MAAM,CAAA;KAAE;iBAIjD,MAAM,MAAO;QAAE,KAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAM,CAAC,EAAE,MAAM,CAAA;KAAE;iBAKjD,MAAM,MAAO;QAAE,KAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAM,CAAC,EAAE,MAAM,CAAA;KAAE;kBAIhD,KAAK,CAAC,aAAa,UAAU,MAAM;CAElD,CAAA"}
+{"version":3,"file":"sprite.d.ts","sourceRoot":"","sources":["../src/sprite.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAU,MAAM,aAAa,CAAA;AAC3C,OAAO,KAAK,EAAE,KAAK,EAAG,MAAM,YAAY,CAAA;AAExC,MAAM,MAAM,MAAM,GAAG;IACnB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACpB,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IAEb,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,eAAO,MAAM,MAAM;kBACL,KAAK,CAAC,KAAK,CAAC,MAAO,MAAM,MAAO,MAAM;;;;;;;;;;IAclD,mFAAmF;sBACjE,MAAM;IAIxB,6EAA6E;sBAC3D,MAAM;IAIxB,6EAA6E;sBAC3D,MAAM;iBAIX,MAAM,MAAO;QAAE,KAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAM,CAAC,EAAE,MAAM,CAAA;KAAE;iBAUjD,MAAM,MAAO;QAAE,KAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAM,CAAC,EAAE,MAAM,CAAA;KAAE;iBAUjD,MAAM,MAAO;QAAE,KAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAM,CAAC,EAAE,MAAM,CAAA;KAAE;kBAUhD,KAAK,CAAC,aAAa,UAAU,MAAM;CAoBlD,CAAA"}

package/dist/sprite.js

@@ -1,4 +1,18 @@
+import { Frame, Frames } from "./frames.js";
 export const Sprite = {
+    new(frames, w, h) {
+        w ??= frames[0]?.sw ?? 0;
+        h ??= frames[0]?.sh ?? 0;
+        return {
+            frames,
+            state: "stopped",
+            frame: 0,
+            speed: 1,
+            x: 0,
+            y: 0,
+            w, h,
+        };
+    },
     /** Check if a sprite is playing. Returns `true` if the sprite is *not* stopped. */
     isPlaying(sprite) {
         return sprite.state !== "stopped";
@@ -12,11 +26,44 @@ export const Sprite = {
         return sprite.state === "looping";
     },
     stop(sprite, o) {
+        if (o?.frame !== undefined)
+            sprite.frame = wrap(o.frame, sprite.frames.length);
+        if (o?.speed !== undefined)
+            sprite.speed = o.speed;
+        sprite.state = "stopped";
     },
     play(sprite, o) {
+        if (o?.frame !== undefined)
+            sprite.frame = wrap(o.frame, sprite.frames.length);
+        if (o?.speed !== undefined)
+            sprite.speed = o.speed;
+        sprite.state = "playing";
     },
     loop(sprite, o) {
+        if (o?.frame !== undefined)
+            sprite.frame = wrap(o.frame, sprite.frames.length);
+        if (o?.speed !== undefined)
+            sprite.speed = o.speed;
+        sprite.state = "looping";
     },
-    draw(context, sprite) { }
+    draw(context, sprite) {
+        if (sprite.state !== "stopped")
+            sprite.frame += sprite.speed * context.dt;
+        if (sprite.state === "playing") {
+            sprite.frame = clamp(sprite.frame, sprite.frames.length);
+            if (sprite.frame <= 0 ||
+                sprite.frame >= sprite.frames.length)
+                sprite.state = "stopped";
+        }
+        if (sprite.state === "looping")
+            sprite.frame = wrap(sprite.frame, sprite.frames.length);
+        Frames.draw(context, sprite.frames, Math.floor(sprite.frame), sprite.x, sprite.y, sprite.w, sprite.h);
+    }
 };
+function wrap(n, m) {
+    return (n % m + m) % m;
+}
+function clamp(n, m) {
+    return Math.max(0, Math.min(n, m));
+}
 //# sourceMappingURL=sprite.js.map

package/dist/sprite.js.map

@@ -1 +1 @@
-{"version":3,"file":"sprite.js","sourceRoot":"","sources":["../src/sprite.ts"],"names":[],"mappings":"AAcA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,mFAAmF;IACnF,SAAS,CAAC,MAAc;QACtB,OAAO,MAAM,CAAC,KAAK,KAAK,SAAS,CAAA;IACnC,CAAC;IAED,6EAA6E;IAC7E,SAAS,CAAC,MAAc;QACtB,OAAO,MAAM,CAAC,KAAK,KAAK,SAAS,CAAA;IACnC,CAAC;IAED,6EAA6E;IAC7E,SAAS,CAAC,MAAc;QACtB,OAAO,MAAM,CAAC,KAAK,KAAK,SAAS,CAAA;IACnC,CAAC;IAED,IAAI,CAAC,MAAc,EAAE,CAAyC;IAE9D,CAAC;IAED,IAAI,CAAC,MAAc,EAAE,CAAyC;IAE9D,CAAC;IAGD,IAAI,CAAC,MAAc,EAAE,CAAyC;IAE9D,CAAC;IAED,IAAI,CAAC,OAA4B,EAAE,MAAc,IAAG,CAAC;CAEtD,CAAA"}
+{"version":3,"file":"sprite.js","sourceRoot":"","sources":["../src/sprite.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fi4f/hg",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "A tiny 2d game engine for the web.",
   "homepage": "https://github.com/fi4f/hg#readme",
   "bugs": {