feat: spritesheet support

examples/image.ts

@@ -0,0 +1,50 @@
+import { World, Image, Keys, KeyEvent } from '../mod.ts';
+
+
+class Game extends World {
+    public test = new Image(this, "assets/caviar.png", 200, 100, 414, 197);
+
+    public setup() {
+        this.addChild(this.test);
+    }
+    public draw() {
+
+    }
+    public keyDown(key: KeyEvent) {
+        switch (key.keycode) {
+            case Keys.ARROWUP: {
+                this.test.setY(this.test.y - 10);
+                break;
+            }
+            case Keys.ARROWDOWN: {
+                this.test.setY(this.test.y + 10);
+                break;
+            }
+            case Keys.ARROWLEFT: {
+                this.test.setX(this.test.x - 10);
+                break;
+            }
+            case Keys.ARROWRIGHT: {
+                this.test.setX(this.test.x + 10);
+                break;
+            }
+
+        }
+    }
+
+}
+
+const test = new Game({
+    title: "test",
+    width: 800,
+    height: 600,
+    centered: true,
+    fullscreen: false,
+    hidden: false,
+    resizable: true,
+    minimized: false,
+    maximized: false,
+    flags: null,
+});
+
+await test.start();

examples/sprite.ts

@@ -2,36 +2,14 @@ import { World, Sprite, Keys, KeyEvent } from '../mod.ts';
 
 
 class Game extends World {
-    public test = new Sprite(this, "assets/caviar.png", 200, 100, 414, 197);
+    public test = new Sprite(this, "assets/sample.png", 200, 100, 307, 127,{rows:1,cols:4},0);
 
     public setup() {
         this.addChild(this.test);
     }
     public draw() {
-
+        this.test.nextFrame();
     }
-    public keyDown(key: KeyEvent) {
-        switch (key.keycode) {
-            case Keys.ARROWUP: {
-                this.test.setY(this.test.y - 10);
-                break;
-            }
-            case Keys.ARROWDOWN: {
-                this.test.setY(this.test.y + 10);
-                break;
-            }
-            case Keys.ARROWLEFT: {
-                this.test.setX(this.test.x - 10);
-                break;
-            }
-            case Keys.ARROWRIGHT: {
-                this.test.setX(this.test.x + 10);
-                break;
-            }
-
-        }
-    }
-
 }
 
 const test = new Game({

mod.ts

@@ -1,4 +1,4 @@
 export { World } from './src/World.ts';
-export { Entity, Rectangle, Line, Point, Sprite, Text } from './src/entities/mod.ts';
+export { Entity, Rectangle, Line, Point, Image, Sprite, Text } from './src/entities/mod.ts';
 export { Keys } from './src/utils/Keycodes.ts';
 export type { KeyEvent } from "./src/types.ts"

src/World.ts

@@ -1,5 +1,5 @@
 import { Canvas } from "../deps.ts";
-import { Entity, Rectangle, Line, Sprite, Text } from "../mod.ts";
+import { Entity, Rectangle, Line, Sprite, Image, Text } from "../mod.ts";
 import { WorldOptions } from './types.ts';
 
 
@@ -41,7 +41,8 @@ export abstract class World extends Canvas {
                 this.fillRect(entity.x, entity.y, entity.width, entity.height);
             } else if (entity instanceof Line) {
                 this.drawLine(entity.p1, entity.p2);
-            } else if (entity instanceof Sprite) {
+
+            } else if (entity instanceof Image) {
                 this.copy(
                     entity.texture,
                     {
@@ -57,6 +58,22 @@ export abstract class World extends Canvas {
                         height: entity.height,
                     },
                 );
+            } else if (entity instanceof Sprite) {
+                this.copy(
+                    entity.texture,
+                    {
+                        x: Math.round(entity.frame.x),
+                        y: Math.round(entity.frame.y),
+                        width: Math.round(entity.frame.width),
+                        height: Math.round(entity.frame.height),
+                    },
+                    {
+                        x: Math.round(entity.x),
+                        y: Math.round(entity.y),
+                        width: Math.round(entity.frame.width),
+                        height: Math.round(entity.frame.height),
+                    },
+                );
             } else if (entity instanceof Text ) {
                 entity.render(this);
                 this.copy(

src/entities/mod.ts

@@ -1,4 +1,4 @@
 export { Entity } from './Entity.ts';
 export { Rectangle, Point, Line } from './geometry/mod.ts';
-export { Sprite } from './sprites/mod.ts';
+export { Sprite, Image } from './sprites/mod.ts';
 export { Text } from "./text/mod.ts";

src/entities/sprites/Image.ts

@@ -0,0 +1,15 @@
+import { Entity } from '../mod.ts';
+import { World } from '../../../mod.ts';
+export class Image extends Entity {
+    public width: number;
+    public height: number
+    public surface: any;
+    public texture: any;
+    constructor(world: World, texture: string, x: number, y: number, width: number, height: number) {
+        super(x, y);
+        this.width = width;
+        this.height = height;
+        this.surface = world.loadSurface(texture);
+        this.texture = world.createTextureFromSurface(this.surface);
+    }
+}

src/entities/sprites/Sprite.ts

@@ -1,15 +1,44 @@
 import { Entity } from '../mod.ts';
 import { World } from '../../../mod.ts';
+import { spriteConfig, Frame } from '../../types.ts';
+import { generateFrames } from "../../utils/mod.ts";
 export class Sprite extends Entity {
     public width: number;
     public height: number
     public surface: any;
     public texture: any;
-    constructor(world: World, texture: string, x: number, y: number, width: number, height: number) {
+    public frames: Array<Frame>;
+    public frame: Frame;
+    constructor(
+        world: World,
+        texture: string,
+        x: number,
+        y: number,
+        width: number,
+        height: number,
+        { rows, cols, }: spriteConfig,
+        frame: number = 0,
+    ) {
         super(x, y);
         this.width = width;
         this.height = height;
         this.surface = world.loadSurface(texture);
         this.texture = world.createTextureFromSurface(this.surface);
+        this.frames = generateFrames(this.width, this.height, rows, cols);
+        this.frame = this.frames[frame];
+
     }
-}
+
+    public nextFrame(): void {
+        this.frame = this.frames[(this.frames.indexOf(this.frame) + 1) % this.frames.length];
+    }
+    public previousFrame(): void {
+        this.frame = this.frames[(this.frames.indexOf(this.frame) - 1 + this.frames.length) % this.frames.length];
+    }
+    public setFrame(frame: number): void {
+        this.frame = this.frames[frame];
+    }
+
+}
+
+

src/entities/sprites/mod.ts

@@ -1 +1,2 @@
-export { Sprite } from './Sprite.ts';
+export { Image } from './Image.ts';
+export { Sprite } from './Sprite.ts';

src/types.ts

@@ -19,4 +19,16 @@ export interface KeyEvent {
     scancode: number,
     mod: number,
     repeat: boolean
+}
+
+export interface Frame {
+    x: number,
+    y: number,
+    width: number,
+    height: number
+}
+
+export interface spriteConfig {
+    cols: number,
+    rows: number,
 }

src/utils/mod.ts

@@ -1,9 +1,23 @@
-import type { RGBA } from "../types.ts";
+import type { RGBA, Frame } from "../types.ts";
+export { Keys } from "./Keycodes.ts";
 export const hexToRGBA = (hex: string): RGBA =>
     [
         parseInt(hex.slice(1, 3), 16),
         parseInt(hex.slice(3, 5), 16),
         parseInt(hex.slice(5, 7), 16),
         1
     ]
-export { Keys } from "./Keycodes.ts";
+export const generateFrames = (width: number, height: number, rows: number, cols: number): Array<Frame> => {
+    const frames = [];
+    for (let i = 0; i < cols; i++) {
+        for (let j = 0; j < rows; j++) {
+            frames.push({
+                x: i * (width/cols),
+                y: j * (height/rows),
+                width: width / cols,
+                height: height/rows
+            });
+        }
+    }
+    return frames;
+}