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 0000000..be7b72b Binary files /dev/null and b/res/asdf-logo.png differ