画布引擎:绘制等距地图

时间:2013-05-06 15:17:19

标签: javascript canvas

我正在使用http://canvasengine.net/进行网络游戏。

我正在尝试使用我使用软件http://www.mapeditor.org/创建的JSON文件生成等轴测图。

引擎和软件兼容。

所以,我有一个json文件,如:

  { "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
}

之后,我将这个文件包含在带有canvasengine的Js中:

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);
            });

        }
    });

现在,我有一个问题。 Lokk就像这个屏幕:

Screen off my map

Tiles不会按照应有的方式堆叠,在等轴测图中,但就像2d法线贴图一样。

你有什么想法吗?谢谢!

1 个答案:

答案 0 :(得分:0)

以下是您的回答:https://github.com/RSamaium/CanvasEngine/issues/14 Tiled.js扩展不支持等距映射。你必须从头开始翻译:(