La lecture JSON de cartes tuilées de fichier de l'éditeur et de l'affichage sur la toile
Im suivant ce cette tutoriel pour être en mesure de charger json carte fichiers créés par carrelé éditeur de carte dans mon javascript/toile jeu.
ive a obtenu au point où j'ai mis en œuvre mon propre genre de version, et j'obtiens pas d'erreur dans la console de firebug ou net etc.
Et aussi loin que je peux voir, en mettant dans la console.journaux et alertes, le script est en cours d'exécution tout à fait bien!
Le problème est que la toile reste blanc! quand il doit avoir une tilemap maintenant sur elle.
Voici ma version du tutoriel mis en œuvre dans mon jeu:
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);
});
}
}
}
et il est appelé de mon principal fichier javascript qui est-ce:
$(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 ------------------------------------------------------
});
Je ne suppose pas que vous, des gens adorables pouvait voir pourquoi les carreaux de la carte n'est pas en cours d'impression de ma toile?
Merci pour toute aide Tom
- Êtes-vous sûr que vous avez de bonnes données json à venir dans? Essayez d'ajouter .fait et .l'échec des fonctions à votre $.getJSON et ensuite faire le débogage là pour être sûr que vous obtenez des données valides.
- ouais les données JSON est très bien je crois. j'ai fait un journal de la console après il a été introduit dans la fonction, et aussi lorsqu'il a été transmis et les données d'amende
- Quelqu'un aurait-il une idée à ce propos?? je ne peux pas l'air de trouver la raison de son pas de dessin! argghhhh haha
Vous devez vous connecter pour publier un commentaire.
Carrelée + Toile
J'ai regardé le Carrelage+Toile blog sur http://blog.hashrocket.com/posts/using-tiled-and-canvas-to-render-game-screens par Shane Riley. Un post intéressant!
Bonne nouvelle...j'ai saisi son code à partir de sa démo et j'ai son code de travail en local sur mon ordinateur de développement.
En passer par le processus et en regardant ton code, je pense que vous pouvez obtenir votre code de travail en prenant soin de 2 questions:
1) Vous avez un petit bug dans votre get_tileset fonction.
2) Vous avez besoin de point de tous de Shane de la démonstration de fichiers vers fichiers situés sur votre ordinateur local. Je viens de mettre tous ces fichiers dans un seul dossier (qui a travaillé pour moi). Vous aurez besoin de toucher à ces fichiers (détails ci-dessous):
Voici les détails. Ces fonctionné pour moi et ils devraient travailler pour vous. Mais si non, laissez-moi savoir et je peux poster mon code complet.
Un Bug -- Dans votre get_tileset(), le tileset.onload s'attend à une fonction nommée ou fonction inline, pas un appel de fonction.
Veuillez comprennent une erreur catcher dans votre $.getJSON de sorte que vous obtenez de la visibilité sur les demandes ayant échoué!
Voici les changements nécessaires à la localisation de vos fichiers.
Dans mountain.html:
Dans render_scene.js (si vous avez téléchargé à partir de la Gist)
Dans la montagne.json:
Dans la montagne.tmx:
Mountain_landscape_23.png
Important! Selon la façon dont vous avez obtenu votre environnement de développement mis en place, vous pourriez obtenir un cross-domain-sécurité-erreur et le navigateur va refuser de tirer vos tuiles. Si oui, prenez ce fichier png dans un éditeur de texte comme photoshop et enregistrez-le à votre dev domaine à l'annulation de la SCRO erreur.