Updated movement and added textures by Job

package-lock.json

@@ -151,9 +151,9 @@
       }
     },
     "asdf-games": {
-      "version": "1.0.1",
+      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/asdf-games/-/asdf-games-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/asdf-games/-/asdf-games-1.0.5.tgz",
-      "integrity": "sha512-+7b+Na5rcAJg/zhLK+VuQ5WWtMxwGvYNdGSLLRbcNZai1Hdf2GDiXYV0xHi64WCxV4YdeRI0ymBOtyPME0OimA=="
+      "integrity": "sha512-dRjnLUvjd7umMShBOmitgJhyo9LA2pKgDa1if5Zshd9y6Exj0LcfY0f8WJpA8cxXYlMq3duiT3lE1bFrgtifow=="
     },
     "astral-regex": {
       "version": "1.0.0",

package.json

@@ -10,7 +10,7 @@
   "author": "McArn",
   "license": "ISC",
   "dependencies": {
-    "asdf-games": "^1.0.1"
+    "asdf-games": "^1.0.5"
   },
   "devDependencies": {
     "electron": "^8.0.2",

res/tilemap.min.js

@@ -0,0 +1,42 @@
+/** -------------------------------------------------------------------
+  *                        Tile map for caa-game
+  *                       Index for tilemap file
+  *
+  *                         0. Corner top-left
+  *                   1. normal top wall middle piece
+  *                     2. Corner top -> left wall
+  *                           3. Left wall
+  *                      4. top wall before corner
+  *                     5. corner top -> right wall
+  *                     6. normal right wall piece
+  *                       7. Corner right -> top
+  *                      8. Corner right -> bottom
+  *                    9. bottom wall piece before 8.
+  *                    10. normal bottom wall piece
+  *                      11. Corner bottom -> right
+  *                      12. Corner right -> bottom
+  *                      13. Corner bottom -> left
+  *                   14. Bottom wall piece before 13.
+  *                      15. Corner left -> bottom
+  *                        16. Normal floor tile
+  *                        17. +-shaped floor tile
+  *                    18. Heavily cracked floor tile
+  *                    19. Lightly cracked floor tile
+  *                        20. Normal brick wall 1
+  *                        21. Normal brick wall 2
+  *                        22. Normal brick wall 3
+  *                        23. blood brick wall 1
+  *                        24. blood brick wall 2
+  *                        25. blood brick wall 3
+  *                     26. light vines brick wall 1
+  *                     27. light vines brick wall 2
+  *                     28. light vines brick wall 3
+  *                     29. heavy vines brick wall 1
+  *                     30. heavy vines brick wall 2
+  *                     31. heavy vines brick wall 3
+  *                            32. Chest closed
+  *                            33. Chest opened
+  *                               34. Rock 1
+  *                               35. Rock 2
+------------------------------------------------------------------- */
+module.exports=[{x:0,y:0,walkable:!1},{x:16,y:0,walkable:!1},{x:32,y:0,walkable:!1},{x:48,y:0,walkable:!1},{x:64,y:0,walkable:!1},{x:0,y:16,walkable:!1},{x:16,y:16,walkable:!1},{x:32,y:16,walkable:!1},{x:48,y:16,walkable:!1},{x:64,y:16,walkable:!1},{x:0,y:32,walkable:!1},{x:16,y:32,walkable:!1},{x:32,y:32,walkable:!1},{x:48,y:32,walkable:!1},{x:64,y:32,walkable:!1},{x:0,y:48,walkable:!1},{x:16,y:48,walkable:!0},{x:32,y:48,walkable:!0},{x:48,y:48,walkable:!0},{x:64,y:48,walkable:!0},{x:0,y:64,walkable:!1},{x:16,y:64,walkable:!1},{x:32,y:64,walkable:!1},{x:48,y:64,walkable:!1},{x:64,y:64,walkable:!1},{x:0,y:80,walkable:!1},{x:16,y:80,walkable:!1},{x:32,y:80,walkable:!1},{x:48,y:80,walkable:!1},{x:64,y:80,walkable:!1},{x:0,y:96,walkable:!1},{x:16,y:96,walkable:!1},{x:32,y:96,walkable:!1},{x:48,y:96,walkable:!1},{x:64,y:96,walkable:!1},{x:0,y:112,walkable:!1}];

src/entities/player.js

@@ -1,79 +1,87 @@
 var asdf = require("asdf-games");
-const { Texture, TileSprite } = asdf;
+const { Texture, TileSprite, AnimManager } = asdf;
 
 var texture = new Texture("./res/player.png");
 
 class Player extends TileSprite {
-  constructor(keys, window) {
+  constructor(keys, window, level) {
     super(texture, 24, 24);
     this.scale = { x: 2, y: 2 };
 
     this.window = window;
 
-    // Rate walking = 0.4
+    this.rate = {
-    // Rate running = 0.08
+      walking: 0.2,
+      running: 0.08
+    };
 
-    this.rate = 1;
+    this.anims = new AnimManager(this);
-    this.direction = 1;
+    // North
-    this.frames = [
+    this.anims.add("walk_n", [0, 1, 2, 3].map(x => ({ x, y: 0 })), this.rate.walking);
-      { x: 0, y: 1 },
+    this.anims.add("run_n", [0, 1, 2, 3].map(x => ({ x, y: 0 })), this.rate.running);
-      { x: 1, y: 1 },
+    // East
-      { x: 2, y: 1 },
+    this.anims.add("walk_e", [0, 1, 2, 3].map(x => ({ x, y: 2 })), this.rate.walking);
-      { x: 3, y: 1 }
+    this.anims.add("run_e", [0, 1, 2, 3].map(x => ({ x, y: 2 })), this.rate.running);
-    ];
+    // South
-    this.curTime = 0;
+    this.anims.add("walk_s", [0, 1, 2, 3].map(x => ({ x, y: 1 })), this.rate.walking);
-    this.curFrame = 0;
+    this.anims.add("run_s", [0, 1, 2, 3].map(x => ({ x, y: 1 })), this.rate.running);
-    this.frame = this.frames[this.curFrame];
+    // West
+    this.anims.add("walk_w", [0, 1, 2, 3].map(x => ({ x, y: 3 })), this.rate.walking);
+    this.anims.add("run_w", [0, 1, 2, 3].map(x => ({ x, y: 3 })), this.rate.running);
     
-    this.pos.x = (this.window.w / 2) - (24 * this.scale.x / 2);
+    this.anims.play("walk_s");
-    this.pos.y = (this.window.h / 2) - (24 * this.scale.y / 2);
+
+    this.pos.x = (level.w / 2) - (24 * this.scale.x / 2);
+    this.pos.y = (level.h / 2) - (24 * this.scale.y / 2);
 
     this.keys = keys;
   }
     
   update(dt) {
-    const { rate, frames } = this;
+    super.update(dt);
-    this.curTime += dt;
 
-    // Change speed
+    // Animate
-    if (this.keys.x || this.keys.y) {
-      // Walking
-      this.rate = 0.35;
-    } else {
-      // Standstill
-      this.curFrame = 0;
-    }
-    if (this.keys.action && (this.keys.x || this.keys.y)) {
-      // Running
-      this.rate = 0.08;
-    }
-
-    // Change walking direction
     if (this.keys.x == -1) {
       // Left
-      this.direction = 3;
+      (this.keys.action) ?
+        this.anims.play("run_w") : this.anims.play("walk_w");
+    } else if (this.keys.x == 1) {
+      // Right
+      (this.keys.action) ?
+        this.anims.play("run_e") : this.anims.play("walk_e");
+    } else if (this.keys.y == -1) {
+      // Up
+      (this.keys.action) ?
+        this.anims.play("run_n") : this.anims.play("walk_n");
+    } else if (this.keys.y == 1) {
+      // Down
+      (this.keys.action) ?
+        this.anims.play("run_s") : this.anims.play("walk_s");
+    } else {
+      // Idle
+      this.anims.stop();
+    }
+
+    // Move
+    if (this.keys.x == -1) {
+      // Left
+      this.pos.x += this.keys.x * dt * (600 * (1 - (this.keys.action) ?
+        this.rate.running : this.rate.walking ));
     }
     if (this.keys.x == 1) {
       // Right
-      this.direction = 2;
+      this.pos.x += this.keys.x * dt * (600 * (1 - (this.keys.action) ?
+        this.rate.running : this.rate.walking ));
     }
     if (this.keys.y == -1) {
-      // Down
+      // Up
-      this.direction = 0;
+      this.pos.y += this.keys.y * dt * (600 * (1 - (this.keys.action) ?
+        this.rate.running : this.rate.walking ));
     }
     if (this.keys.y == 1) {
-      // Up
+      // Down
-      this.direction = 1;
+      this.pos.y += this.keys.y * dt * (600 * (1 - (this.keys.action) ?
-    } 
+        this.rate.running : this.rate.walking ));
-
-    this.frames.forEach(element => {
-      element.y = this.direction;
-    });
-
-    // Animate
-    if (this.curTime > rate) {
-      this.frame = frames[this.curFrame++ % frames.length];
-      this.curTime -= rate;
     }
   }
 }

src/game.js

@@ -1,7 +1,7 @@
 const { ipcRenderer, remote } = require("electron");
 
 var asdf = require("asdf-games");
-const { Game, KeyControls, MouseControls } = asdf;
+const { Game, KeyControls, MouseControls, Camera } = asdf;
 
 const window = { w: 640, h: 320 };
 
@@ -16,11 +16,13 @@ var Level = require("./src/levels/level.js");
 const mouseAim = new MouseControls(document.getElementById("board"));
 const keys = new KeyControls();
 
-var player = new Player(keys, window);
+var level = new Level();
-var level = new Level(window, keys, player);
+var player = new Player(keys, window, level);
+const camera = new Camera(player, window, { w: level.w * level.scale.x, h: level.h * level.scale.y });
 
-scene.add(level);
+scene.add(camera);
-scene.add(player);
+camera.add(level);
+camera.add(player);
 
 game.run(() => {
   if (mouseAim.isDown) {

src/levels/level.js

@@ -1,43 +1,41 @@
 var asdf = require("asdf-games");
 const { Texture, TileMap } = asdf;
 
-const texture = new Texture("./res/placeholder.png");
+const texture = new Texture("./res/tilemap.png");
+const tiles = require("../../res/tilemap.min.js");
 
-const levelSize = { w: 640, h: 320 };
+const levelSize = { w: 480, h: 240 };
-var levelData = [];
+var levelData = [
+  0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 5,
+  3, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 6,
+  3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
+  3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
+  3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
+  3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
+  3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
+  3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
+  3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
+  3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
+  3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
+  3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
+  3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
+  3, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 6,
+  13, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 9, 8
+];
 
-for (let index = 0; index < ((levelSize.w / 32) * (levelSize.h / 32)); index++) {
+var levelTiles = levelData.map(function(e) {
-  levelData.push({ x: 0, y: 0 });
+  return { x: (tiles[e].x / 16), y: (tiles[e].y / 16), walkable: tiles[e].walkeable };
-}
+});
+console.log(levelTiles);
 
 class Level extends TileMap {
-  constructor (window, keys, player) {       
+  constructor () {       
-    super(levelData, levelSize.w / 32, levelSize.h / 32, 32, 32, texture);
+    super(levelTiles, levelSize.w / 16, levelSize.h / 16, 16, 16, texture);
-    this.pos.x = (window.w / 2) - (levelSize.w / 2);
+    this.pos = { x: 0, y: 0 };
-    this.pos.y = (window.h / 2) - (levelSize.h / 2);
+    this.w = levelSize.w;
+    this.h = levelSize.h;
+    this.scale = { x: 2, y: 2 };
 
-    this.keys = keys;
-    this.player = player;
-  }
-
-  update(dt) {
-    // Change walking direction
-    if (this.keys.x == -1) {
-      // Left
-      this.pos.x = this.pos.x + dt * (1 / this.player.rate) * 10;
-    }         
-    if (this.keys.x == 1) {
-      // Right
-      this.pos.x = this.pos.x - dt * (1 / this.player.rate) * 10;
-    } 
-    if (this.keys.y == -1) {
-      // Down
-      this.pos.y = this.pos.y + dt * (1 / this.player.rate) * 10;
-    } 
-    if (this.keys.y == 1) {
-      // Up
-      this.pos.y = this.pos.y - dt * (1 / this.player.rate) * 10;
-    }
   }
 }