जेएसओएन टाइल किए गए मानचित्र संपादक फ़ाइल को पढ़ना और कैनवास

Question

पर प्रदर्शित करना इस this ट्यूटोरियल के बाद मैं अपने जावास्क्रिप्ट/कैनवास गेम में टाइल किए गए मानचित्र संपादक द्वारा जेएसन मैप फाइलों को लोड करने में सक्षम होने के लिए ट्यूटोरियल का उपयोग कर रहा हूं।

Ive बात करने के लिए मिल गया है जहां मैं संस्करण के अपने ही तरह लागू कर दिया है, और कंसोल या नेट आदि

और जहाँ तक मैं देख सकता हूँ में फ़ायरबग में कोई त्रुटि हो रही है, console.logs में रखकर और अलर्ट, लिपि बिल्कुल ठीक चल रहा है!

समस्या यह है कि कैनवास खाली रहता है! जब इसे अब एक टाइलमैप होना चाहिए।

यहाँ ट्यूटोरियल के अपने संस्करण मेरी खेल में कार्यान्वित किया जाता है:

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

} 

} 

और यह जावास्क्रिप्ट फ़ाइल है जो इस मेरी मुख्य से कहा जाता है:

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

टाइल + कैनवास

मैं शेन रिले द्वारा http://blog.hashrocket.com/posts/using-tiled-and-canvas-to-render-game-screens पर टाइल + कैनवास ब्लॉग पोस्ट को देखा के लिए धन्यवाद। एक दिलचस्प पोस्ट!

अच्छी खबर ... मैंने अपने कोड को अपने डेमो से पकड़ लिया और मेरा कोड मेरे विकास कंप्यूटर पर स्थानीय रूप से काम कर रहा है।

प्रक्रिया के माध्यम से और अपने कोड को देख में जा रहा है, मुझे लगता है कि आप अपने कोड 2 मुद्दों की देखभाल करने से काम करने के लिए प्राप्त कर सकते हैं:

1) आप अपने get_tileset समारोह में एक छोटे से बग है।

2) आप अपने स्थानीय कंप्यूटर पर स्थित फ़ाइलों की ओर शेन की डेमो फ़ाइलों के सभीबात करने के लिए की जरूरत है। मैंने बस इन सभी फ़ाइलों को एक ही फ़ोल्डर में रखा (मेरे लिए काम किया)।

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

mountain_landscape_23.png: आप इन फ़ाइलों (विवरण नीचे) को छूने के लिए की आवश्यकता होगी

यहां विवरण हैं। ये मेरे लिए काम करते थे और उन्हें आपके लिए काम करना चाहिए। लेकिन अगर नहीं, तो मुझे बताएं और मैं अपना पूरा कोड पोस्ट कर सकता हूं।

एक बग - अपने 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", 

पहाड़ में। टीएमएक्स:

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

Mountain_landscape_23.png

महत्वपूर्ण! आपके विकास पर्यावरण को कैसे स्थापित किया गया है, इस पर निर्भर करते हुए, आपको एक क्रॉस-डोमेन-सुरक्षा-त्रुटि मिल सकती है और ब्राउज़र आपकी टाईल्स खींचने से इंकार कर देगा। यदि ऐसा है, तो इस पीएनजी फ़ाइल को फ़ोटोशॉप जैसे संपादक में ले जाएं और इसे CORS त्रुटि को रद्द करने के लिए इसे अपने dev डोमेन पर वापस सहेजें।