title: Canvas Engine : draw an isometric map
body: <p>I'm using <a href="http://canvasengine.net/" rel="nofollow noreferrer">http://canvasengine.net/</a> for a webgame.</p>
  
  <p>I'm trying to generate an isometric map from a JSON file that I created with the software <a href="http://www.mapeditor.org/" rel="nofollow noreferrer">http://www.mapeditor.org/</a>.</p>
  
  <p>The engine and software are compatibles.</p>
  
  <p>So, i have a json file like : </p>
  
  <pre><code>  { "height":5,
   "layers":[
          {
           "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
           "height":5,
           "name":"Calque de Tile 1",
           "opacity":1,
           "type":"tilelayer",
           "visible":true,
           "width":5,
           "x":0,
           "y":0
          }],
   "orientation":"isometric",
   "properties":
      {
  
      },
   "tileheight":41,
   "tilesets":[
          {
           "firstgid":1,
           "image":"..\/..\/..\/wamp\/www\/Symfony\/src\/Dontdie\/MapBundle\/Resources\/public\/images\/herbe.png",
           "imageheight":41,
           "imagewidth":82,
           "margin":0,
           "name":"herbe",
           "properties":
              {
  
              },
           "spacing":0,
           "tileheight":41,
           "tilewidth":82
          }],
   "tilewidth":82,
   "version":1,
   "width":5
  }
  </code></pre>
  
  <p>After, i include this file in Js with canvasengine :</p>
  
  <pre><code>var url = "{{ asset('bundles/dontdiemap_temp/images/map.json') }}";
      var canvas = CE.defines("canvas_id").
          extend(Tiled).
          ready(function() {
              canvas.Scene.call("MyScene");
          });
  
      canvas.Scene.new({
          name: "MyScene",
          materials: {
              images: {
                  herbe: "{{ asset('bundles/dontdiemap_temp/images/herbe.png') }}"
              }
          },
          ready: function(stage) {
               var el = this.createElement();
               var tiled = canvas.Tiled.new();
              tiled.load(this, el, url);
              tiled.ready(function() {
                   var tile_w = this.getTileWidth(),
                       tile_h = this.getTileHeight(),
                       layer_object = this.getLayerObject();
                   stage.append(el);
              });
  
          }
      });
  </code></pre>
  
  <p>And now, i have a problem. Lokk as this screen :</p>
  
  <p><img src="https://i.stack.imgur.com/BxStS.png" alt="Screen off my map"></p>
  
  <p>Tiles do not stack as it should, in isometric but just like a 2d normal map.</p>
  
  <p>Have you any ideas ?? Thanks !</p>