Odczytywanie pliku edytora map JSON i wyświetlanie na płótnie

Question

Po zapoznaniu się z tym tutorialem this mogę załadować pliki mapy json utworzone przez kafelkowy edytor map w mojej grze javascript/canvas.

ive dostał się do punktu, w którym ja wdrożyły własne rodzaj wersji, i otrzymuję żadnych błędów w Firebug w konsoli lub net itp

I o ile widzę, poprzez umieszczenie w console.logs i alarmy, skrypt działa absolutnie dobrze!

Problem polega na tym, że płótno pozostaje puste! kiedy powinien już mieć na sobie tilemap.

Oto moja wersja tutoriala wdrożone w mojej grze:

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

} 

} 

i nazywa się to z moim głównym pliku JavaScript, który jest taki:

$(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 ------------------------------------------------------ 





}); 

Nie sądzę, jesteś piękny ludzie mogliby zorientować się, dlaczego mapa nie jest drukowana na moim płótnie?

Dzięki za wszelką pomoc Tom

Answer 1

marmurowa + Płótno

Spojrzałem na blogu marmurowa + płótno na http://blog.hashrocket.com/posts/using-tiled-and-canvas-to-render-game-screens przez Shane Riley. Ciekawy post!

Dobra wiadomość ... Złapałem jego kod z jego wersji demonstracyjnej, a jego kod działa lokalnie na moim komputerze programistycznym.

W przejściu przez proces i patrząc na kodzie, myślę, że można dostać kod do pracy dbanie o 2 kwestie:

1) Masz mały błąd w funkcji get_tileset.

2) Trzeba podkreślić wszystkie plików demo Shane wobec plików znajdujących się na swojej lokalnym komputerze. Po prostu umieściłem wszystkie te pliki w jednym folderze (pracował dla mnie). Będziesz musiał dotknąć tych plików (szczegóły poniżej):

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

Oto szczegóły. Te zadziałały dla mnie i powinny ci się udać. Ale jeśli nie, daj mi znać i mogę opublikować mój kompletny kod.

Bug - W swojej get_tileset(), przy czym tileset.onload spodziewa się funkcja o nazwie lub inline funkcję, a nie wywołanie funkcji.

// 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()  

Proszę obejmować łapacza błąd w $.getJSON, aby uzyskać widoczność w przypadku nieudanych próśb!

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

Oto zmiany wymagane do zlokalizowania plików.

W mountain.html:

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

W render_scene.js (jeśli pobrane z Gist)

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

W mountain.json:

"image":"mountain_landscape_23.png", 

w górach. tmx:

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

Mountain_landscape_23.png

Ważne! W zależności od konfiguracji środowiska programistycznego może pojawić się błąd związany z zabezpieczeniami międzydomenowymi i przeglądarka odmówi narysowania kafelków. Jeśli tak, weź ten plik PNG do edytora takiego jak Photoshop i zapisz go z powrotem do swojej domeny dev, aby anulować błąd CORS.