我正在关注这个 this能够在我的 javascript/canvas 游戏中加载由平铺 map 编辑器创建的 json map 文件的教程。

我已经实现了我自己的版本，并且在控制台或网络等中的 firebug 中没有出现任何错误。

据我所知，通过放入 console.logs 和警报，脚本运行得非常好!

问题是 Canvas 保持空白!当它现在应该有一个 tilemap 时。

这是我在游戏中实现的教程版本:

function Level() {
var c;
var data;
var layers = [];

this.get_map = function(name,ctx){
    c = ctx;
    $.getJSON('maps/'+ name + '.json', function(json){
    get_tileset(json);
    });
};

function get_tileset(json) {
    data = json;
    this.tileset = $("<img />", { src: json.tilesets[0].image })[0];
    this.tileset.onload = renderLayers(this);
}

function renderLayers(layers){
    layers = $.isArray(layers) ? layers : data.layers;
    layers.forEach(renderLayer);
}

function renderLayer (layer){
    if (layer.type !== "tilelayer" || !layer.opacity) {
        alert("Not a tileLayer");
    }
    var s = c.canvas.cloneNode(),
            size = data.tileWidth;
    s = s.getContext("2d");

    if (layers.length < data.layers.length) {
        layer.data.forEach(function(tile_idx, i) {
            if (!tile_idx) { return; }
            var img_x, img_y, s_x, s_y,
                tile = 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(this.tileset, img_x, img_y, size, size,
                s_x, s_y, size, size);
        });

        layers.push(s.canvas.toDataURL());
        c.drawImage(s.canvas, 0, 0);
    }
    else {
        layers.forEach(function(src) {
            var i = $("<img />", { src: src })[0];
            c.drawImage(i, 0, 0);
        });
    }

}

}

它是从我的主 javascript 文件中调用的:

$(document).ready(function(){

var canvas = document.getElementById("TBG");
var ctx = canvas.getContext("2d");

var ui = new Gui();
var level = new Level();

//----------Login/Register Gui --------------
$('#TBG').hide();
$('#load-new').hide();
$('#reg').hide();
$('#login').hide();

//if login_but is clicked do ui.login function
$('#login_but').click(ui.login);
//if reg_but is clicked do ui.register function
$('#reg_but').click(ui.register);

$('#new_but').click(function(){
    game_settings("new");
});

$('#load_but').click(function(){
    game_settings("load");
});

//if login_sumbit button is clicked do ui.login_ajax function
$("#login_submit").click(ui.login_ajax);

$("#reg_submit").click(ui.register_ajax);

$("#welcome").on("click", "#logout_but", ui.logout);

//________________________

//Initialisation of game

function game_settings(state){
    if(state == "load"){
        ui.load_game();
        //do ajax call to load user last save
        level.get_map("level_01",ctx);
    }
    else{
        //set beginning params


        //Change screens
        ui.new_game();
        alert("new game");
    }
}

// End Loop ------------------------------------------------------





});

我不认为你们这些可爱的人能发现为什么瓦片 map 没有打印到我的 Canvas 上？

感谢汤姆的帮助

最佳答案

平铺 + Canvas

我查看了 http://blog.hashrocket.com/posts/using-tiled-and-canvas-to-render-game-screens 上的 Tiled+Canvas 博客文章谢恩·赖利 (Shane Riley) 着。一个有趣的帖子!

好消息……我从他的演示中获取了他的代码，并且他的代码可以在我的开发计算机上本地运行。

在完成整个过程和查看您的代码时，我认为您可以通过处理 2 个问题来使您的代码正常工作:

1) 你的 get_tileset 函数中有一个小错误。

2) 您需要将 Shane 的所有 演示文件指向位于您 本地计算机上的文件。我只是将所有这些文件放在一个文件夹中(为我工作)。您将需要接触这些文件(详情如下):

• mountain.html
• 山.json
• 山.tmx
• mountain_landscape_23.png
• render_scene.js

这里是详细信息。这些对我有用，它们也应该对你有用。但如果没有，请告诉我，我可以发布我的完整代码。

一个错误——在您的 get_tileset() 中，tileset.onload 需要一个命名函数或内联函数，而不是函数调用。

// not this.tileset.onload=renderLayers(this)
this.tileset.onload=renderLayers;    

// change the signature of renderLayers 
// (you have “layers” in scope for visibility in this function so this s/b ok)
// So: not function renderLayers(layers)
function renderLayers()    

请在您的 $.getJSON 中包含一个错误捕捉器，以便您可以看到失败的请求!

$.getJSON('maps/'+ name + '.json', function(json){
        get_tileset(json);
}).fail( alert(“I think you should know that something has gone horribly wrong!”);  );

以下是本地化文件所需的更改。

在 mountain.html 中:

    <script src="render_scene.js" type="text/javascript"></script>

在 render_scene.js 中(如果你从 Gist 下载)

load: function(name) {
  return $.ajax({
    url: "mountain.json",
    dataType: "text json"
  }).done($.proxy(this.loadTileset, this));
}

在 mountain.json 中:

"image":"mountain_landscape_23.png",

在 mountain.tmx 中:

<image source="mountain_landscape_23.png" width="512" height="512"/>

Mountain_landscape_23.png

重要!根据您设置开发环境的方式，您可能会遇到跨域安全错误，并且浏览器将拒绝绘制您的图 block 。如果是这样，请将此 png 文件放入 photoshop 等编辑器中，并将其保存回您的开发域以消除 CORS 错误。

关于javascript - 读取 JSON Tiled map 编辑器文件并显示到 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15667588/