Created
November 15, 2012 14:33
-
-
Save shaneriley/4078905 to your computer and use it in GitHub Desktop.
Render Tiled Scene in Canvas
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ "height":15, | |
"layers":[ | |
{ | |
"data":[79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 28, 60, 61, 62, 30, 95, 96, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 28, 76, 77, 78, 30, 79, 80, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 28, 76, 15, 78, 30, 95, 96, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 28, 76, 16, 78, 30, 79, 80, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 28, 76, 31, 78, 30, 95, 96, 95, 96, 79, 80, 95, 156, 157, 158, 95, 96, 79, 80, 95, 28, 76, 32, 78, 112, 13, 13, 79, 80, 95, 96, 79, 172, 173, 144, 158, 80, 95, 96, 79, 28, 76, 47, 48, 61, 61, 62, 95, 96, 79, 80, 156, 143, 138, 160, 190, 96, 12, 13, 13, 111, 76, 16, 15, 16, 31, 78, 13, 13, 14, 96, 172, 138, 173, 174, 79, 80, 44, 45, 45, 127, 92, 93, 93, 93, 93, 94, 109, 110, 30, 80, 188, 189, 189, 190, 95, 96, 79, 80, 95, 44, 45, 45, 45, 45, 45, 45, 141, 142, 30, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 45, 45, 46, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96, 79, 80, 95, 96], | |
"height":15, | |
"name":"Ground", | |
"opacity":1, | |
"type":"tilelayer", | |
"visible":true, | |
"width":20, | |
"x":0, | |
"y":0 | |
}, | |
{ | |
"data":[92, 93, 93, 94, 56, 52, 51, 53, 54, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 51, 52, 52, 73, 66, 175, 176, 69, 70, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 67, 68, 73, 89, 82, 191, 192, 85, 86, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 83, 84, 85, 90, 98, 223, 224, 101, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 104, 99, 101, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 3, 4, 9, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 18, 19, 20, 21, 26, 23, 22, 0, 0], | |
"height":15, | |
"name":"Mountain", | |
"opacity":1, | |
"type":"tilelayer", | |
"visible":true, | |
"width":20, | |
"x":0, | |
"y":0 | |
}, | |
{ | |
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 232, 233, 0, 0, 0, 0, 0, 0, 0, 165, 166, 0, 0, 0, 0, 0, 0, 0, 0, 0, 248, 249, 0, 0, 0, 0, 0, 0, 0, 181, 135, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 181, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 205, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 253, 0, 0, 0, 0, 0, 0, 202, 203, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 218, 219, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 234, 235, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 250, 251, 0, 0, 0, 0, 0, 0, 197, 198, 199, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 206, 0, 0, 0, 0, 213, 214, 215, 0, 149, 150, 151, 0, 0, 149, 151, 0, 0, 0, 205, 222, 0, 0, 0, 0, 229, 230, 231, 0, 181, 182, 107, 151, 149, 119, 120, 151, 0, 0, 0, 0, 0, 0, 0, 0, 245, 246, 247, 0, 0, 0, 181, 107, 119, 136, 135, 120, 151, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], | |
"height":15, | |
"name":"Forest", | |
"opacity":1, | |
"type":"tilelayer", | |
"visible":true, | |
"width":20, | |
"x":0, | |
"y":0 | |
}], | |
"orientation":"orthogonal", | |
"properties": | |
{ | |
}, | |
"tileheight":32, | |
"tilesets":[ | |
{ | |
"firstgid":1, | |
"image":"\/images\/mountain_landscape_23.png", | |
"imageheight":512, | |
"imagewidth":512, | |
"margin":0, | |
"name":"Mountain landscape", | |
"properties": | |
{ | |
}, | |
"spacing":0, | |
"tileheight":32, | |
"tilewidth":32 | |
}], | |
"tilewidth":32, | |
"version":1, | |
"width":20 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="UTF-8"?> | |
<map version="1.0" orientation="orthogonal" width="20" height="15" tilewidth="32" tileheight="32"> | |
<tileset firstgid="1" name="Mountain landscape" tilewidth="32" tileheight="32"> | |
<image source="../../../games/art/bgs/mountain_landscape_23.png" width="512" height="512"/> | |
</tileset> | |
<layer name="Ground" width="20" height="15"> | |
<data encoding="base64"> | |
TwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAABwAAAA8AAAAPQAAAD4AAAAeAAAAXwAAAGAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAHAAAAEwAAABNAAAATgAAAB4AAABPAAAAUAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAAAcAAAATAAAAA8AAABOAAAAHgAAAF8AAABgAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAABwAAABMAAAAEAAAAE4AAAAeAAAATwAAAFAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAHAAAAEwAAAAfAAAATgAAAB4AAABfAAAAYAAAAF8AAABgAAAATwAAAFAAAABfAAAAnAAAAJ0AAACeAAAAXwAAAGAAAABPAAAAUAAAAF8AAAAcAAAATAAAACAAAABOAAAAcAAAAA0AAAANAAAATwAAAFAAAABfAAAAYAAAAE8AAACsAAAArQAAAJAAAACeAAAAUAAAAF8AAABgAAAATwAAABwAAABMAAAALwAAADAAAAA9AAAAPQAAAD4AAABfAAAAYAAAAE8AAABQAAAAnAAAAI8AAACKAAAAoAAAAL4AAABgAAAADAAAAA0AAAANAAAAbwAAAEwAAAAQAAAADwAAABAAAAAfAAAATgAAAA0AAAANAAAADgAAAGAAAACsAAAAigAAAK0AAACuAAAATwAAAFAAAAAsAAAALQAAAC0AAAB/AAAAXAAAAF0AAABdAAAAXQAAAF0AAABeAAAAbQAAAG4AAAAeAAAAUAAAALwAAAC9AAAAvQAAAL4AAABfAAAAYAAAAE8AAABQAAAAXwAAACwAAAAtAAAALQAAAC0AAAAtAAAALQAAAC0AAACNAAAAjgAAAB4AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAC0AAAAtAAAALgAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAATwAAAFAAAABfAAAAYAAAAE8AAABQAAAAXwAAAGAAAABPAAAAUAAAAF8AAABgAAAA | |
</data> | |
</layer> | |
<layer name="Mountain" width="20" height="15"> | |
<data encoding="base64"> | |
XAAAAF0AAABdAAAAXgAAADgAAAA0AAAAMwAAADUAAAA2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzAAAANAAAADQAAABJAAAAQgAAAK8AAACwAAAARQAAAEYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEMAAABEAAAASQAAAFkAAABSAAAAvwAAAMAAAABVAAAAVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUwAAAFQAAABVAAAAWgAAAGIAAADfAAAA4AAAAGUAAABmAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoAAAAYwAAAGUAAABmAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAADAAAABAAAAAkAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARAAAAEgAAABMAAAAUAAAAFQAAABoAAAAXAAAAFgAAAAAAAAAAAAAA | |
</data> | |
</layer> | |
<layer name="Forest" width="20" height="15"> | |
<data encoding="base64"> | |
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6AAAAOkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApQAAAKYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4AAAA+QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC1AAAAhwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC1AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMoAAADLAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA2gAAANsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADqAAAA6wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPoAAAD7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxQAAAMYAAADHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzgAAAAAAAAAAAAAAAAAAAAAAAADVAAAA1gAAANcAAAAAAAAAlQAAAJYAAACXAAAAAAAAAAAAAACVAAAAlwAAAAAAAAAAAAAAAAAAAM0AAADeAAAAAAAAAAAAAAAAAAAAAAAAAOUAAADmAAAA5wAAAAAAAAC1AAAAtgAAAGsAAACXAAAAlQAAAHcAAAB4AAAAlwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9QAAAPYAAAD3AAAAAAAAAAAAAAAAAAAAtQAAAGsAAAB3AAAAiAAAAIcAAAB4AAAAlwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA | |
</data> | |
</layer> | |
</map> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function() { | |
var c = $("canvas")[0].getContext("2d"); | |
var scene = { | |
layers: [], | |
renderLayer: function(layer) { | |
// data: [array of tiles, 1-based, position of sprite from top-left] | |
// height: integer, height in number of sprites | |
// name: "string", internal name of layer | |
// opacity: integer | |
// type: "string", layer type (tile, object) | |
// visible: boolean | |
// width: integer, width in number of sprites | |
// x: integer, starting x position | |
// y: integer, starting y position | |
if (layer.type !== "tilelayer" || !layer.opacity) { return; } | |
var s = c.canvas.cloneNode(), | |
size = scene.data.tilewidth; | |
s = s.getContext("2d"); | |
if (scene.layers.length < scene.data.layers.length) { | |
layer.data.forEach(function(tile_idx, i) { | |
if (!tile_idx) { return; } | |
var img_x, img_y, s_x, s_y, | |
tile = scene.data.tilesets[0]; | |
tile_idx--; | |
img_x = (tile_idx % (tile.imagewidth / size)) * size; | |
img_y = ~~(tile_idx / (tile.imagewidth / size)) * size; | |
s_x = (i % layer.width) * size; | |
s_y = ~~(i / layer.width) * size; | |
s.drawImage(scene.tileset, img_x, img_y, size, size, | |
s_x, s_y, size, size); | |
}); | |
scene.layers.push(s.canvas.toDataURL()); | |
c.drawImage(s.canvas, 0, 0); | |
} | |
else { | |
scene.layers.forEach(function(src) { | |
var i = $("<img />", { src: src })[0]; | |
c.drawImage(i, 0, 0); | |
}); | |
} | |
}, | |
renderLayers: function(layers) { | |
layers = $.isArray(layers) ? layers : this.data.layers; | |
layers.forEach(this.renderLayer); | |
}, | |
loadTileset: function(json) { | |
this.data = json; | |
this.tileset = $("<img />", { src: json.tilesets[0].image })[0] | |
this.tileset.onload = $.proxy(this.renderLayers, this); | |
}, | |
load: function(name) { | |
return $.ajax({ | |
url: "/maps/" + name + ".json", | |
type: "JSON" | |
}).done($.proxy(this.loadTileset, this)); | |
} | |
}; | |
scene.load("mountain"); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment