Phaser

Library:	Phaser
Language:	JavaScript or TypeScript
Links:	repo, documentation

Summary

Phaser is a 2D game framework for making HTML5 games for desktop and mobile web browsers. It is very actively developed, as it's one of the most popular HTML5 game framework. It doesn't support reading from a TMX file, but it can load tilemaps that are exported to JSON or CSV. It supports a lot of tile manipulation functions, such as swapping tiles, replacing them, and also updating the map in realtime.

It uses a custom build of Pixi.js for WebGL and Canvas rendering.

Examples

The project alone has lots of examples in their website, there is also a section focusing on tilemaps.

Important Notes

• While loading a Tiled map, you should have exported the map into a json or csv file format. The tileset that is used should be embed in the map itself, it only supports the "Based on Tileset Image" type, therefore use the tileset image file as is.
• It doesn't support animated textures, the feature can be added using a plugin.
• Preparing the map (json or csv) and the tileset (as an image) to be used is done in the preload function, the name of the tileset has to be the same with the one embed in the map, should look like this:

  this.load.tilemap('world', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);
  this.load.image('tileset', 'assets/tileset.png');

• To actually load the map and put it in the world, first you need to add the map, add its tileset, then create the specified layer according to the layer name in the map, as shown below:

  this.map = this.game.add.tilemap('world');
  this.map.addTilesetImage('tileset');

  this.layer = this.map.createLayer('World1');

• The size of the loaded map will be the same size in pixels as in the tiled editor, if the map needs resizing to fit the screen, the map scale can be set using the setScale method.
• When specifying which tiles to collide with, the tile ID starts from 1, so it doesn't really match with the Tiled editor.

Building From Source

Phaser is provided ready compiled in the build folder of the repository. There are both plain and minified versions. The plain version is for use during development, and the minified version for production.

To build Phaser, you'll need Grunt and Node.js set up, complete instructions can be found on their repo page.

Projects Using This Library

Games built using Phaser are added weekly on their site.