A Tiled map (http://mapeditor.org) importer for Crafty.js ( http://craftyjs.com)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


TiledMapBuilder v0.9.5

A Tiled map (http://mapeditor.org) importer for Crafty.js (http://craftyjs.com)

###The main features:



  • Lazy loading for player entity.
  • Trasfer Tiled Map editor objects to Crafty.polygon, Crafty.circle.


Attach two script files. There are two files because builder uses background thread for lazy rendering. It is suitable for rendering views of large tiled map in the background.

<script src="modules/create_mocks_module.js"></script>
<script src="tiledmapbuilder.js"></script>   

Set data source

Crafty.e("2D, DOM, TiledMapBuilder").setMapDataSource( SOURCE_FROM_TILED_MAP_EDITOR );    

Create world

TiledMapBuilder.createWorld( function( map ){

Create a view. For large tiled map or lazy loading.

TiledMapBuilder.createView( startRow, startColumn, viewWidth, viewHeight, function( map ){

Get all entities from layer

var entities = TiledMapBuilder.getEntitiesInLayer( layerName );

Get all layers

var layers = TiledMapBuilder.getLayers();

Get the tile

var tile = TiledMapBuilder.getTile( row, column, layerName );

Get render method: DOM or Canvas

var renderMethod = TiledMapBuilder.getRenderMethod();

Get source object

var source = TiledMapBuilder.getSource();

Get orientation: orthogonal. isometric, staggered

var source = TiledMapBuilder.getOrientation();

Determine isometric

if (TiledMapBuilder.isIsometric() ){
	//do something

Get Crafty.isometric object

var iso = TiledMapBuilder.getIsometric();

###Work procedure:

  1. Create tiled map in Tiled map editor

Tiled Map Editor

  1. Export your tiled map as JSON

Tiled Map Editor

  1. Use Crafty.js for building your amazing HTML5 game.

Crafty HTML5 game Crafty HTML5 game Crafty HTML5 game Crafty HTML5 game


###Reflections of large tiled map

  • Use views instead of generating the whole world.
  • Use background processing ( USE_WEB_WORKERS:true ) for partial work in the background.
  • Use a small number of layers: it must pass through each layer.
  • Divided your map to ground map and obstackes map. For ground map use views and lazy loading. Obstacles map load as all world map in boot of game and set collision.
  • Use big tile: Large tiles equals fewer entities. Every tile is Crafty entity.
  • Canvas or DOM (on march 2013).

###It may interest you to know

###Contact me

I will be grateful for constructive comments.