diff --git a/package-lock.json b/package-lock.json index d572d77..9d4aef9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -151,9 +151,9 @@ } }, "asdf-games": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/asdf-games/-/asdf-games-1.0.1.tgz", - "integrity": "sha512-+7b+Na5rcAJg/zhLK+VuQ5WWtMxwGvYNdGSLLRbcNZai1Hdf2GDiXYV0xHi64WCxV4YdeRI0ymBOtyPME0OimA==" + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/asdf-games/-/asdf-games-1.0.5.tgz", + "integrity": "sha512-dRjnLUvjd7umMShBOmitgJhyo9LA2pKgDa1if5Zshd9y6Exj0LcfY0f8WJpA8cxXYlMq3duiT3lE1bFrgtifow==" }, "astral-regex": { "version": "1.0.0", diff --git a/package.json b/package.json index b12baed..bd789f4 100644 --- a/package.json +++ b/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", diff --git a/res/dungeon_tiles.png b/res/dungeon_tiles.png deleted file mode 100644 index 91b4570..0000000 Binary files a/res/dungeon_tiles.png and /dev/null differ diff --git a/res/placeholder.png b/res/placeholder.png deleted file mode 100644 index 506387a..0000000 Binary files a/res/placeholder.png and /dev/null differ diff --git a/res/tilemap.min.js b/res/tilemap.min.js new file mode 100644 index 0000000..0805a74 --- /dev/null +++ b/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}]; \ No newline at end of file diff --git a/res/tilemap.png b/res/tilemap.png new file mode 100644 index 0000000..f3d0fc4 Binary files /dev/null and b/res/tilemap.png differ diff --git a/src/entities/player.js b/src/entities/player.js index 026ba95..c0ebce9 100644 --- a/src/entities/player.js +++ b/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 - // Rate running = 0.08 + this.rate = { + walking: 0.2, + running: 0.08 + }; - this.rate = 1; - this.direction = 1; - this.frames = [ - { x: 0, y: 1 }, - { x: 1, y: 1 }, - { x: 2, y: 1 }, - { x: 3, y: 1 } - ]; - this.curTime = 0; - this.curFrame = 0; - this.frame = this.frames[this.curFrame]; + this.anims = new AnimManager(this); + // North + this.anims.add("walk_n", [0, 1, 2, 3].map(x => ({ x, y: 0 })), this.rate.walking); + this.anims.add("run_n", [0, 1, 2, 3].map(x => ({ x, y: 0 })), this.rate.running); + // East + this.anims.add("walk_e", [0, 1, 2, 3].map(x => ({ x, y: 2 })), this.rate.walking); + this.anims.add("run_e", [0, 1, 2, 3].map(x => ({ x, y: 2 })), this.rate.running); + // South + this.anims.add("walk_s", [0, 1, 2, 3].map(x => ({ x, y: 1 })), this.rate.walking); + this.anims.add("run_s", [0, 1, 2, 3].map(x => ({ x, y: 1 })), this.rate.running); + // 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.anims.play("walk_s"); - this.pos.x = (this.window.w / 2) - (24 * this.scale.x / 2); - 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; - this.curTime += dt; - - // Change speed - 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; - } - if (this.keys.x == 1) { - // Right - this.direction = 2; - } - if (this.keys.y == -1) { - // Down - this.direction = 0; - } - if (this.keys.y == 1) { - // Up - this.direction = 1; - } - - this.frames.forEach(element => { - element.y = this.direction; - }); + super.update(dt); // Animate - if (this.curTime > rate) { - this.frame = frames[this.curFrame++ % frames.length]; - this.curTime -= rate; + if (this.keys.x == -1) { + // Left + (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.pos.x += this.keys.x * dt * (600 * (1 - (this.keys.action) ? + this.rate.running : this.rate.walking )); + } + if (this.keys.y == -1) { + // Up + this.pos.y += this.keys.y * dt * (600 * (1 - (this.keys.action) ? + this.rate.running : this.rate.walking )); + } + if (this.keys.y == 1) { + // Down + this.pos.y += this.keys.y * dt * (600 * (1 - (this.keys.action) ? + this.rate.running : this.rate.walking )); } } } diff --git a/src/game.js b/src/game.js index 157adf4..ce2c0b9 100644 --- a/src/game.js +++ b/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(window, keys, player); +var level = new Level(); +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(player); +scene.add(camera); +camera.add(level); +camera.add(player); game.run(() => { if (mouseAim.isDown) { diff --git a/src/levels/level.js b/src/levels/level.js index dc0de0d..db799d4 100644 --- a/src/levels/level.js +++ b/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 }; -var levelData = []; +const levelSize = { w: 480, h: 240 }; +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++) { - levelData.push({ x: 0, y: 0 }); -} +var levelTiles = levelData.map(function(e) { + 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) { - super(levelData, levelSize.w / 32, levelSize.h / 32, 32, 32, texture); - this.pos.x = (window.w / 2) - (levelSize.w / 2); - this.pos.y = (window.h / 2) - (levelSize.h / 2); + constructor () { + super(levelTiles, levelSize.w / 16, levelSize.h / 16, 16, 16, texture); + this.pos = { x: 0, y: 0 }; + 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; - } } }