tilemap
Render isometric (simcity 2000-style) tile maps in the browser.
example
var tilemap = ;var grid = ;grid;for var x = -10; x < 10; x++for var y = -10; y < 10; y++var tile = grid;tile;tile;tile;window;grid;grid;grid;
Here is the example in action.
methods
var tilemap =
var grid = tilemap(width, height)
Create a tilemap grid with width
and height
dimensions.
If you don't call grid.tie()
by the nextTick, grid.tie(window)
will be
called automatically.
grid.tie(element)
Bind key and mouse listeners to element
to control navigation and mouse
selection of individual tiles.
grid.appendTo(target)
Append the grid html element to the target
html element.
grid.resize(width, height)
Resize the raphael svg screen and container html element.
grid.move(x, y)
Move by the relative grid coordinates (x,y)
.
grid.moveTo(x, y)
Move to the absolute grid coordinates (x,y)
.
grid.pan(x, y)
Move by the relative screen coordinates (x,y)
.
grid.zoom(level)
Zoom to level
. The default zoom level is 1
.
grid.createTile(x, y)
Return a raphael element
for a new tile at grid coordinates (x,y)
.
grid.tileAt(x, y)
Return the tile at grid coordinates (x,y)
or undefined
if there is no such
tile.
grid.createItem(src, x, y, cb)
Create a new sprite item at the grid coordinates (x,y)
with the image from
src
.
Optionally get the
raphael element
for the sprite item in cb(err, item)
.
grid.itemAt(x, y)
Return the item at the grid coordinates (x,y)
or undefined
if there isn't an
item at (x,y)
.
grid.removeItem(x, y)
Remove the item at the grid coordinates (x,y)
.
grid.createWall(src, pt0, pt1, cb)
Like grid.createItem()
except that walls will be inserted between points pt0
and pt1
. Points should have 'x'
and 'y'
fields.
This function only draws straight walls. Either the 'x'
or the 'y'
must be
equal between pt0
and pt1
for the wall to be created. Otherwise nothing
happens.
events
grid.on('mouseover', function (tile, x, y) { ... })
Emitted when the mouse begins to hover over a tile.
x
and y
are in grid coordinates.
grid.on('mouseout', function (tile) { ... })
Emitted when the mouse is no longer hovering over a tile.
grid.on('mousedown', function (tile, x, y) { ... })
Emitted when the mouse button goes down over a tile.
x
and y
are in grid coordinates.
grid.on('mouseup', function (tile, x, y) { ... })
Emitted when the mouse button goes up over a tile.
x
and y
are in grid coordinates.
grid.on('click', function (tile, x, y) { ... })
Emitted when the mouse clicks on a tile.
x
and y
are in grid coordinates.
install
With npm do:
npm install tilemap
then just require('tilemap')
in your main.js
and then compile it with
browserify:
$ browserify main.js -o bundle.js
license
MIT