Skip to content

Instantly share code, notes, and snippets.

@shaneriley

shaneriley/mountain.json

Created November 15, 2012 14:33
Show Gist options
  • Save shaneriley/4078905 to your computer and use it in GitHub Desktop.
Save shaneriley/4078905 to your computer and use it in GitHub Desktop.
Download ZIP
Render Tiled Scene in Canvas
Raw
mountain.json
{ "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
}
Raw
mountain.tmx
<?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>
Raw
render_scene.js
$(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