Чтение JSON Файл с отображением файла в виде плитки и отображение на холсте

Question

Im после этого this учебник, чтобы иметь возможность загружать файлы json map, созданные с помощью редактора плиточных карт в моей javascript/canvas игре.

ив попал в точку, где я реализовал свой собственный вид версии, и не подвожу никаких ошибок в поджигатель в консоли или сетке и т.д.

И насколько я могу видеть, поставив в console.logs и предупреждения, сценарий работает абсолютно нормально!

Проблема в том, что холст остается пустым! когда на нем теперь должна быть 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 ------------------------------------------------------ 





}); 

Я не думаю, что вы прекрасный люди могли понять, почему карта плитки не печатается на моем холсте?

Спасибо за любую помощь Том

Answer 1

Плиточный + Canvas

Я смотрел на блоге Плиточный + Canvas на http://blog.hashrocket.com/posts/using-tiled-and-canvas-to-render-game-screens Шейн Райли. Интересный пост!

Good News ... Я схватил его код из его демоверсии, и у меня его код работает локально на моем компьютере разработки.

При переходе через этот процесс и глядя на свой код, я думаю, что вы можете получить код для работы позаботившись 2 вопроса:

1) У вас есть небольшая ошибка в вашей функции get_tileset.

2) Вы должны указать все демо-файлов Шейна по отношению к файлам, расположенным на вашем локальном компьютере. Я просто поместил все эти файлы в одну папку (работал для меня). Вам нужно будет трогать эти файлы (подробности ниже):

• mountain.html
• mountain.json
• mountain.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 (если вы загрузили с сутью)

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

В mountain.json:

"image":"mountain_landscape_23.png", 

В горах. tmx:

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

Mountain_landscape_23.png

Важно! В зависимости от того, как вы настроили среду разработки, вы можете получить междоменную ошибку безопасности, и браузер откажется рисовать ваши фрагменты. Если да, возьмите этот файл png в редактор, например, в Photoshop, и сохраните его обратно в свой домен dev, чтобы свести на нет ошибку CORS.