Updated README and XML related classes

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/)

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;

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);
 	}
 }