From 9da6f3990fa1ca1336d75afc43346d5a3f1badf5 Mon Sep 17 00:00:00 2001 From: Arne van Iterson Date: Sun, 19 Apr 2020 19:44:52 +0200 Subject: [PATCH] Updated README and XML related classes --- README.md | 47 ++++++++++++++++++++++++++++++++++++------ lib/TileMapXML.js | 48 +++++++++++++++++++++++++++++++++++++++++++ lib/TileSpriteXML.js | 16 ++++++++++++++- res/asdf-logo.png | Bin 0 -> 2896 bytes 4 files changed, 104 insertions(+), 7 deletions(-) create mode 100644 res/asdf-logo.png diff --git a/README.md b/README.md index eb024ef..81f876e 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,47 @@ +![asdf-games logo](https://gitea.arnweb.nl/arne/asdf-games/src/branch/master/res/asdf-logo.png "asdf-games logo") # asdf-games -Me making games using HTML5 Games: Novice to Ninja by Sitepoint. +My attempt at making the framework featured in the book HTML5 Games: Novice to Ninja. [You can find the book here.](https://www.sitepoint.com/premium/books/html5-games-novice-to-ninja) -The projects here are very similar to those featured in the book, and it will take some time before I get to make my own game. +I turned the framework featured in the book into an npm package for use with browserify or Electron. +If you are on Github or Gitea now, you can find the npm package [here](https://www.npmjs.com/package/asdf-games). + +## Installation +To use asdf framework for your projects, you need to: +* Install npm on your device (if you don't have it already) +* Run ````npm install asdf-games``` +* Use the snippet below to start off or check out one of the examples, keep in mind that the examples are not comepletely up to date. +* Thanks to my friend [Job](https://jobbel.nl/), this project supports TypeScript typings. Make sure your editor supports them to make your life easier. + + +## Example usage +```javascript +// Require asdf +const asdf = require("asdf-games"); + +// Add whatever classes you need here +const [ Game, Sprite, Texture, KeyControls ] = asdf; + +// Game(width, height, disable pixel smoothening) +var game = new Game(720, 480, true); + +// Any picture URL used in new Texture() must be relative to the location of the HTML file +const playerTexture = new Texture('player.png'); + +var player = new Sprite(texture); +player.pos = { + x: (game.w / 2) - (player.w / 2), + y: (game.h / 2) - (player.h / 2) +} + +// Add your entities to the game's scene +game.scene.add(player); + +game.run(() => { + // Game loop +}); + +``` -To try out asdf library and the projects for yourself, you need to: -* TODO -Releases will be featured on -[ARNweb Games](https://arnweb.nl/games/) \ No newline at end of file diff --git a/lib/TileMapXML.js b/lib/TileMapXML.js index ad287fa..a8be4e9 100644 --- a/lib/TileMapXML.js +++ b/lib/TileMapXML.js @@ -20,6 +20,54 @@ class TileMapXML extends Container { return s; }); } + + pixelToMapPos(pos) { + const { tileW, tileH } = this; + return { + x: Math.floor(pos.x / tileW), + y: Math.floor(pos.y / tileH) + }; + } + + mapToPixelPos(mapPos) { + const { tileW, tileH } = this; + return { + x: mapPos.x * tileW, + y: mapPos.y * tileH + }; + } + + tileAtMapPos(mapPos) { + return this.children[mapPos.y * this.mapW + mapPos.x]; + } + + tileAtPixelPos(pos) { + return this.tileAtMapPos(this.pixelToMapPos(pos)); + } + + setFrameAtMapPos(mapPos, frame) { + const tile = this.tileAtMapPos(mapPos); + tile.frame = frame; + return tile; + } + + setFrameAtPixelPos(pos, frame) { + return this.setFrameAtMapPos(this.pixelToMapPos(pos), frame); + } + + tilesAtCorners(bounds, xo = 0, yo = 0) { + return [ + [bounds.x, bounds.y], // Top-left + [bounds.x + bounds.w, bounds.y], // Top-right + [bounds.x, bounds.y + bounds.h], // Bottom-left + [bounds.x + bounds.w, bounds.y + bounds.h] // Bottom-right + ].map(([x, y]) => + this.tileAtPixelPos({ + x: x + xo, + y: y + yo + }) + ); + } } module.exports = TileMapXML; \ No newline at end of file diff --git a/lib/TileSpriteXML.js b/lib/TileSpriteXML.js index 5918171..b2b0543 100644 --- a/lib/TileSpriteXML.js +++ b/lib/TileSpriteXML.js @@ -1,4 +1,5 @@ -var Sprite = require("./Sprite"); +var Sprite = require("./Sprite"), + AnimManager = require("./AnimManager"); class TileSpriteXML extends Sprite { constructor(texture, xml, index) { @@ -7,6 +8,19 @@ class TileSpriteXML extends Sprite { this.imgPos = { x: src["x"], y: src["y"] }; this.width = src["width"]; this.height = src["height"]; + this.anims = new AnimManager(this); + } + + update(dt) { + this.anims.update(dt); + } + + get w() { + return this.width * Math.abs(this.scale.x); + } + + get h() { + return this.height * Math.abs(this.scale.y); } } diff --git a/res/asdf-logo.png b/res/asdf-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..be7b72be498b2e407733f3bc7f25c5a5fa310a36 GIT binary patch literal 2896 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