Okuma JSON Harita düzenleyicisi dosyası görüntüleniyor ve tuvalete gösteriliyor

Question

Bunu takip eden this öğretici, javascript/canvas oyunundaki kiremitli harita editörü tarafından oluşturulan json harita dosyalarını yükleyebilmekteyim. i console.logs koyarak versiyonunun Türüme uygulamış, vb konsola veya net kadarıyla ı görebileceğiniz gibi

Ve de kundakçı hiçbir hata alıyorum nerede

ive noktaya var ve uyarılar, senaryo kesinlikle iyi çalışıyor!

Sorun, tuvalin boş kalmasıdır! Şimdi üzerinde bir tilemap olması gerektiğinde. İşte

öğretici benim sürümü benim oyun uygulanmaktadır:

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

} 

} 

ve bunun ne tür bir javascript dosyası benim ana çağrılır:

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





}); 

Sana güzel sanmam insanlar kiremit haritasının neden tuvalime basılmadığını fark edebilir? Tom

Answer 1

Çinili + Tuval

Shane Riley http://blog.hashrocket.com/posts/using-tiled-and-canvas-to-render-game-screens üzerine Çinili + Tuval blog yayınında baktı herhangi bir yardım için

teşekkürler. İlginç bir yazı!

İyi Haberler… Kodunu kendi demosundan aldım ve kodunun geliştirme bilgisayarımda yerel olarak çalıştığım var. süreç boyunca ve kodu baktığımızda gidiş olarak

, ben size kod 2 sorunlarına özen ile işe düşünüyorum:

1) Eğer get_tileset işlevinde küçük bir hatayı var.

2) sizin yerel bilgisayarda bulunan dosyaların doğru Shane demo tüm dosyalarıişaret etmek gerekir. Tüm bu dosyaları tek bir klasöre koydum (benim için çalıştı).

render_scene.js

mountain_landscape_23.png

• mountain.html
• mountain.json
• mountain.tmx
• : Bu dosyaları (ayrıntılar aşağıdadır) dokunmak gerekir

  İşte detaylar. Bunlar benim için çalıştı ve senin için çalışmalılar. Ama değilse, bana bildirin ve tam kodumu gönderebilirim.

  A Bug - senin get_tileset olarak(), tileset.onload bir fonksiyon adında veya satır içi işlevi değil, bir işlev çağrısı bekliyor.

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

  incelediğimizde $ bir hata yakalayıcı eklemeyi unutmayın.getJSON böylece başarısız isteklerde görünürlük elde edersiniz!

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

  Dosyalarınızı yerelleştirmek için gereken değişiklikler aşağıda verilmiştir. mountain.json olarak (eğer Gist'e indirilen varsa) render_scene.js ise

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

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

  : mountain.html olarak

  Dağda

  "image":"mountain_landscape_23.png", 
  

  . tmx:

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

  Mountain_landscape_23.png

  Önemli! Geliştirme ortamınızın nasıl oluşturulduğuna bağlı olarak, etki alanları arası güvenlik hatası alabilirsiniz ve tarayıcı karolarınızı çizmeyi reddeder. Öyleyse, bu png dosyasını Photoshop gibi bir editöre alın ve CORS hatasını iptal etmek için dev etki alanınıza geri kaydedin.