feat(#15): separate sprite from player

index.css

@@ -19,3 +19,10 @@ body {
 #resources {
   display: none;
 }
+
+.pixelify-sans-regular {
+  font-family: "Pixelify Sans", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 600;
+  font-style: normal;
+}

index.html

@@ -7,6 +7,19 @@
       content="width=device-width, initial-scale=1.0"
     />
     <title>Game Engine</title>
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap"
+      rel="stylesheet"
+    />
     <link
       rel="stylesheet"
       href="index.css"
@@ -19,6 +32,10 @@
         id="overworld"
         src="resources/overworld.png"
       />
+      <img
+        id="character"
+        src="resources/character.png"
+      />
     </div>
     <div id="container">
       <button id="debug">Debug</button>

index.js

@@ -1,10 +1,12 @@
-import { GAME_HEIGHT, GAME_WIDTH } from "./modules/constants.js";
+import { GAME_HEIGHT, GAME_WIDTH, TILE_SIZE } from "./modules/constants.js";
 import {
   Camera,
   CanvasResizer,
   FpsCounter,
   GameObject,
   MapManagement,
+  Player,
+  SpriteSheet,
 } from "./modules/game-objects/index.js";
 
 const backgroundMaps = [
@@ -29,8 +31,41 @@ const foregroundMaps = [
   { name: "ocean", imageId: "overworld", elementId: "level2", layer: 2 },
 ];
 
+const foregroundCollisionMaps = [
+  {
+    name: "overworld",
+    imageId: "overworld",
+    elementId: "level1",
+    layer: 2,
+    selected: true,
+    collision: true,
+  },
+  {
+    name: "ocean",
+    imageId: "overworld",
+    elementId: "level2",
+    layer: 2,
+    collision: true,
+  },
+];
+
 const clicableObjects = ["debug", "level1", "level2"];
 
+const playerAnimations = {
+  idle: {
+    left: [51],
+    right: [17],
+    top: [34],
+    bottom: [0],
+  },
+  walk: {
+    left: [51, 52, 53, 54],
+    right: [17, 18, 19, 20],
+    top: [34, 35, 36, 37],
+    bottom: [0, 1, 2, 3],
+  },
+};
+
 class Game extends GameObject {
   constructor({ canvas }) {
     super();
@@ -41,13 +76,25 @@ class Game extends GameObject {
       height: GAME_HEIGHT,
       percentage: 0.9,
     });
+    const player = new Player({
+      speed: 1,
+      gameObjects: [new SpriteSheet({ imageId: "character", tileHeight: 32 })],
+      animations: playerAnimations,
+      x: 6 * TILE_SIZE,
+      y: 4 * TILE_SIZE,
+      width: TILE_SIZE,
+      height: 2 * TILE_SIZE,
+    });
     const camera = new Camera({
       gameObjects: [
         new MapManagement({ maps: backgroundMaps }),
         new MapManagement({ maps: foregroundMaps }),
+        player,
+        new MapManagement({ maps: foregroundCollisionMaps }),
       ],
+      target: player,
     });
-    const fpsCounter = new FpsCounter({ debug: false });
+    const fpsCounter = new FpsCounter();
     this.gameObjects = [canvasResizer, camera, fpsCounter];
 
     this.canvas = canvas;

modules/game-objects/animation.js

@@ -0,0 +1,7 @@
+export class Animation extends GameObject {
+  constructor({ frames = [], name, x = 0, y = 0 }) {
+    super({ x, y });
+    this.frames = frames;
+    this.name = name;
+  }
+}

modules/game-objects/camera.js

@@ -9,41 +9,23 @@ export class Camera extends GameObject {
     width = GAME_WIDTH,
     height = GAME_HEIGHT,
     speed = 1,
+    target = { x: 0, y: 0, width: 0, height: 0 }, // A camera that follows a target
   }) {
     super({ x, y, gameObjects, width, height });
     this.speed = speed;
-    this.keys = [
-      { key: "ArrowUp", pressed: false, value: [0, -1] },
-      { key: "ArrowDown", pressed: false, value: [0, 1] },
-      { key: "ArrowLeft", pressed: false, value: [-1, 0] },
-      { key: "ArrowRight", pressed: false, value: [1, 0] },
-    ];
-    this.availableKeys = this.keys.reduce(
-      (acc, item) => ({ ...acc, [item.key]: item }),
-      {}
-    );
-    this.eventEmitter.on("changeLevel", () => {
+    this.target = target;
+    this.eventEmitter.on("levelChanged", () => {
       this.x = x;
       this.y = y;
     });
+    this.eventEmitter.on("targetChanged", (target) => {
+      this.target = target;
+    });
   }
 
   update(delta) {
-    this.keys.forEach((item) => {
-      if (item.pressed) {
-        this.moveCamera(...item.value, delta);
-      }
-    });
-  }
-
-  onKeyPressed(key) {
-    if (!this.availableKeys[key]) return;
-    this.availableKeys[key].pressed = true;
-  }
-
-  onKeyReleased(key) {
-    if (!this.availableKeys[key]) return;
-    this.availableKeys[key].pressed = false;
+    super.update(delta);
+    this.followTarget();
   }
 
   render(ctx) {
@@ -52,16 +34,19 @@ export class Camera extends GameObject {
     );
   }
 
-  moveCamera(dx, dy, delta) {
+  followTarget() {
+    const { x, y, width: tWidth, height: tHeight } = this.target;
+    const centerX = x + tWidth / 2;
+    const centerY = y + tHeight / 2;
     const [item] = this.gameObjects;
     const { height, width } = item.selected ?? item;
-    this.x = Math.min(
-      Math.max(this.x + dx * Math.floor(delta * this.speed * 100), 0),
-      width * TILE_SIZE - this.width
+    this.x = Math.max(
+      0,
+      Math.min(centerX - this.width / 2, width * TILE_SIZE - this.width)
     );
-    this.y = Math.min(
-      Math.max(this.y + dy * Math.floor(delta * this.speed * 100), 0),
-      height * TILE_SIZE - this.height
+    this.y = Math.max(
+      0,
+      Math.min(centerY - this.height / 2, height * TILE_SIZE - this.height)
     );
   }
 }

modules/game-objects/fps-counter.js

@@ -1,8 +1,8 @@
 import { GameObject } from "./game-object.js";
 
 export class FpsCounter extends GameObject {
-  constructor({ debug = false }) {
-    super({ debug });
+  constructor() {
+    super();
     this.fps = 0;
   }
 
@@ -15,7 +15,7 @@ export class FpsCounter extends GameObject {
       return;
     }
     ctx.fillStyle = "Red";
-    ctx.font = "normal 12pt Arial";
+    ctx.font = "normal 12pt Pixelify Sans";
     ctx.fillText(this.fps + " fps", 5, 15);
   }
 }

modules/game-objects/index.js

@@ -4,3 +4,6 @@ export { FpsCounter } from "./fps-counter.js";
 export { GameObject } from "./game-object.js";
 export { MapManagement } from "./map-management.js";
 export { Map } from "./map.js";
+export { Player } from "./player.js";
+export { Sprite } from "./sprite.js";
+export { SpriteSheet } from "./sprite-sheet.js";

modules/game-objects/map-management.js

@@ -27,6 +27,6 @@ export class MapManagement extends GameObject {
     }
     const map = this.gameObjects.find((item) => item.elementId === elementId);
     this.selected = map.name;
-    this.eventEmitter.emit("changeLevel");
+    this.eventEmitter.emit("levelChanged");
   }
 }

modules/game-objects/player.js

@@ -0,0 +1,108 @@
+import { TILE_SIZE } from "../constants.js";
+import { GameObject } from "./game-object.js";
+
+export class Player extends GameObject {
+  constructor({
+    gameObjects = [],
+    animations = {},
+    defaultAnimation = { idle: "bottom" },
+    x = 0,
+    y = 0,
+    speed = 1,
+    width = TILE_SIZE,
+    height = TILE_SIZE,
+  }) {
+    super({ x, y, gameObjects, width, height });
+    this.speed = speed;
+    this.keys = [
+      { key: "ArrowUp", pressed: false, value: [0, -1] },
+      { key: "ArrowDown", pressed: false, value: [0, 1] },
+      { key: "ArrowLeft", pressed: false, value: [-1, 0] },
+      { key: "ArrowRight", pressed: false, value: [1, 0] },
+    ];
+    this.availableKeys = this.keys.reduce(
+      (acc, item) => ({ ...acc, [item.key]: item }),
+      {}
+    );
+    this.eventEmitter.on("levelChanged", (...args) => {
+      this.x = x;
+      this.y = y;
+    });
+
+    // TODO: Decouple animation into animation class
+    this.animations = animations;
+    this.defaultAnimation = defaultAnimation;
+    this.currentAnimation = defaultAnimation;
+    this.currentAnimationFrame = 0;
+  }
+
+  update(delta) {
+    let idle = true;
+    this.keys.forEach((item) => {
+      if (item.pressed) {
+        this.moveCharacter(delta, ...item.value);
+        this.updateAnimation(delta, "walk", ...item.value);
+        idle = false;
+      }
+    });
+    if (idle) {
+      this.updateAnimation(delta, "idle");
+    }
+  }
+
+  onKeyPressed(key) {
+    if (!this.availableKeys[key]) return;
+    this.availableKeys[key].pressed = true;
+  }
+
+  onKeyReleased(key) {
+    if (!this.availableKeys[key]) return;
+    this.availableKeys[key].pressed = false;
+  }
+
+  render(ctx, ...args) {
+    // TODO: Decouple animation into animation class
+    const [x, y] = args;
+    const [spriteSheet] = this.gameObjects;
+    if (this.debug) {
+      spriteSheet.sprites.forEach((item, index) => {
+        item.render(ctx, this.x - x + index * TILE_SIZE, this.y - y);
+      });
+    } else {
+      const [currentAnimationKey] = Object.keys(this.currentAnimation);
+      const currentAnimationDirection =
+        this.currentAnimation[currentAnimationKey];
+      const frames =
+        this.animations[currentAnimationKey][currentAnimationDirection];
+      if (!frames) {
+        throw Error("No animation defined for " + this.currentAnimation);
+      }
+      const item = frames.map((frame) => spriteSheet.sprites[frame])[
+        Math.floor(this.currentAnimationFrame) % frames.length
+      ];
+      item.render(ctx, this.x - x, this.y - y);
+    }
+  }
+
+  moveCharacter(delta, dx, dy) {
+    const speed = Math.floor(delta * this.speed * 100);
+    this.x = this.x + dx * speed;
+    this.y = this.y + dy * speed;
+    // TODO: Check for collisions and stop movement if needed
+  }
+
+  // TODO: Decouple animation into animation class
+  updateAnimation(delta, animation, dx, dy) {
+    if (animation === "idle") {
+      const [value] = Object.values(this.currentAnimation);
+      this.currentAnimation = { [animation]: value };
+      return;
+    }
+    if (dx !== 0) {
+      this.currentAnimation = { [animation]: dx > 0 ? "right" : "left" };
+    } else if (dy !== 0) {
+      this.currentAnimation = { [animation]: dy > 0 ? "bottom" : "top" };
+    }
+    this.currentAnimationFrame += 10 * delta;
+  }
+}

modules/game-objects/sprite-sheet.js

@@ -0,0 +1,49 @@
+import { TILE_SIZE } from "../constants.js";
+import { GameObject } from "./game-object.js";
+import { Sprite } from "./sprite.js";
+
+export class SpriteSheet extends GameObject {
+  constructor({
+    imageId,
+    x = 0,
+    y = 0,
+    tileWidth = TILE_SIZE,
+    tileHeight = TILE_SIZE,
+    offsetX = 0,
+    offsetY = 0,
+  }) {
+    super({ x, y });
+    this.image = document.getElementById(imageId);
+    this.imageWidth = this.image.width;
+    this.imageHeight = this.image.height;
+    this.tileWidth = tileWidth;
+    this.tileHeight = tileHeight;
+    this.offsetX = offsetX;
+    this.offsetY = offsetY;
+  }
+
+  get sprites() {
+    if (this.gameObjects?.length) {
+      return this.gameObjects;
+    }
+    const sprites = [];
+    let index = 0;
+    for (let row = 0; row < this.imageHeight; row += this.tileHeight) {
+      for (let col = 0; col < this.imageWidth; col += this.tileWidth) {
+        sprites.push(
+          new Sprite({
+            image: this.image,
+            index,
+            x: col + this.offsetX,
+            y: row + this.offsetY,
+            width: this.tileWidth,
+            height: this.tileHeight,
+          })
+        );
+        index++;
+      }
+    }
+
+    return (this.gameObjects = sprites);
+  }
+}

modules/game-objects/sprite.js

@@ -0,0 +1,30 @@
+import { GameObject } from "./game-object.js";
+
+export class Sprite extends GameObject {
+  constructor({ image, x = 0, y = 0, width = 0, height = 0, index = 0 }) {
+    super({ x, y, height, width });
+    this.index = index;
+    this.image = image;
+    this.imageWidth = this.image.width;
+    this.imageHeight = this.image.height;
+  }
+
+  render(ctx, destinationX, destinationY) {
+    ctx.drawImage(
+      this.image,
+      this.x,
+      this.y,
+      this.width,
+      this.height,
+      destinationX,
+      destinationY,
+      this.width,
+      this.height
+    );
+    if (this.debug) {
+      ctx.fillStyle = "Red";
+      ctx.font = "normal 8pt Pixelify Sans";
+      ctx.fillText(this.index, destinationX, destinationY + 8);
+    }
+  }
+}

resources/overworld.json

@@ -33,17 +33,48 @@
          "x":0,
          "y":0
         }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 605, 607, 606, 607, 606, 607, 606, 607, 606, 607, 606, 607, 606, 607, 606, 607, 607, 607, 607, 607,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 367, 528, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 407, 568, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 13, 9, 10, 11, 0, 0, 0,
+            446, 446, 446, 446, 446, 446, 446, 446, 446, 447, 568, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 568, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 214, 215, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 568, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 568, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":20,
+         "id":2,
+         "name":"Tile Layer 2",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":30,
+         "x":0,
+         "y":0
+        }, 
         {
          "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 485, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486, 486,
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 525, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526, 526,
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 565, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 566, 449, 566,
-            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 605, 607, 606, 607, 606, 607, 606, 607, 606, 607, 606, 607, 606, 607, 606, 607, 607, 607, 607, 607,
-            0, 0, 0, 0, 0, 0, 0, 0, 0, 367, 528, 0, 0, 0, 0, 0, 0, 0, 0, 0, 522, 523, 523, 523, 523, 523, 523, 523, 523, 524,
-            0, 0, 0, 0, 0, 0, 0, 0, 0, 407, 568, 0, 0, 0, 0, 0, 0, 0, 0, 0, 562, 0, 12, 13, 9, 10, 11, 0, 0, 564,
-            446, 446, 446, 446, 446, 446, 446, 446, 446, 447, 568, 0, 0, 0, 0, 0, 0, 0, 0, 0, 562, 0, 47, 53, 49, 50, 51, 0, 0, 564,
-            486, 486, 486, 486, 486, 486, 486, 486, 486, 487, 568, 0, 0, 0, 0, 0, 0, 0, 0, 0, 562, 0, 87, 88, 89, 90, 91, 214, 215, 564,
-            526, 526, 526, 526, 526, 526, 526, 526, 526, 527, 568, 0, 450, 451, 0, 0, 0, 450, 451, 0, 562, 0, 127, 128, 129, 130, 131, 254, 255, 564,
-            566, 566, 566, 566, 566, 566, 566, 566, 566, 567, 568, 0, 490, 491, 0, 0, 0, 490, 491, 0, 562, 0, 167, 168, 169, 170, 171, 294, 295, 564,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 522, 523, 523, 523, 523, 523, 523, 523, 523, 524,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 562, 0, 0, 0, 0, 0, 0, 0, 0, 564,
+            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 562, 0, 47, 53, 49, 50, 51, 0, 0, 564,
+            486, 486, 486, 486, 486, 486, 486, 486, 486, 487, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 562, 0, 87, 88, 89, 90, 91, 0, 0, 564,
+            526, 526, 526, 526, 526, 526, 526, 526, 526, 527, 0, 0, 450, 451, 0, 0, 0, 450, 451, 0, 562, 0, 127, 128, 129, 130, 131, 254, 255, 564,
+            566, 566, 566, 566, 566, 566, 566, 566, 566, 567, 0, 0, 490, 491, 0, 0, 0, 490, 491, 0, 562, 0, 167, 168, 169, 170, 171, 294, 295, 564,
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 562, 0, 0, 0, 0, 0, 0, 0, 0, 564,
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 602, 603, 603, 642, 0, 641, 603, 603, 603, 604,
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
@@ -55,8 +86,8 @@
             0, 0, 0, 0, 0, 0, 0, 0, 85, 86, 0, 0, 0, 0, 0, 85, 86, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
             0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          "height":20,
-         "id":2,
-         "name":"Tile Layer 2",
+         "id":6,
+         "name":"Tile Layer 3",
          "opacity":1,
          "type":"tilelayer",
          "visible":true,
@@ -64,7 +95,7 @@
          "x":0,
          "y":0
         }],
- "nextlayerid":3,
+ "nextlayerid":8,
  "nextobjectid":1,
  "orientation":"orthogonal",
  "renderorder":"right-down",