A Tiled map (http://mapeditor.org) importer for Crafty.js ( http://craftyjs.com)
JavaScript
Latest commit 12eaa32 Dec 8, 2014 @Kibo Merge pull request #4 from musha68k/master
Added patch version to package.json to prevent npm issues
Permalink
Failed to load latest commit information.
WebContent Updates for tests. Sep 21, 2014
README.md fix readme Mar 12, 2013
package.json Added patch version to package.json to prevent npm issues Dec 8, 2014

README.md

TiledMapBuilder v0.9.5

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

The main features:

Advantage:

Todo:

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

Usage:

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 ){
    console.log("done");
    });    

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

TiledMapBuilder.createView( startRow, startColumn, viewWidth, viewHeight, function( map ){
    console.log("done");
    });    

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

2) Export your tiled map as JSON

Tiled Map Editor

3) Use Crafty.js for building your amazing HTML5 game.

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

Examples

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.