读取JSON Tiled地图编辑器文件并显示在画布上 [英] Reading JSON Tiled map editor file and displaying to canvas
问题描述
我正在关注此能够在我的javascript/画布游戏中加载平铺地图编辑器创建的json地图文件的教程.
Im following this this tutorial to be able to load json map files created by tiled map editor in my javascript/canvas game.
ive到了我已经实现了自己的版本的地步，并且在控制台或网络等系统中的萤火虫中也没有出现错误.
ive got to the point where i have implemented my own kind of version, and am getting no errors in firebug in console or net etc.
据我所知，通过输入console.logs和警报，脚本运行得非常好！
And as far as i can see, by putting in console.logs and alerts, the script is running absolutely fine!
问题是画布保持空白！什么时候应该在上面有一个tilemap.
The problem is the canvas stays blank! when it should have a tilemap now on it.
这是我在游戏中实现的教程版本:
Here is my version of the tutorial implemented in my game:
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文件中调用的，这是这样的:
and it is called from my main javascript file which is this:
$(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 ------------------------------------------------------
});
我不认为你们可爱的人会发现为什么未将图块图打印到我的画布上吗?
I don't suppose you lovely people could spot why the tile-map isn't being printed to my canvas?
感谢汤姆的任何帮助
推荐答案
平铺+画布
我在好消息…我从他的演示中获取了他的代码，并且我的代码在我的开发计算机上本地工作.
Good News…I grabbed his code from his demo and I have his code working locally on my development computer.
在整个过程中，以及在查看代码时，我认为您可以通过处理以下两个问题来使代码正常工作:
In going through the process and in looking at your code, I think you can get your code to work by taking care of 2 issues:
1)您的get_tileset函数中有一个小错误.
1) You have a small bug in your get_tileset function.
2)您需要将Shane的演示文件的全部指向位于您的本地计算机上的文件.我只是将所有这些文件放到一个文件夹中(为我工作).您将需要触摸这些文件(以下详细信息):
2) You need to point all of Shane’s demo files towards files located on your local computer. I just put all these files together in a single folder (worked for me). You will need to touch these files (details below):
- mountain.html
- mountain.json
- mountain.tmx
- mountain_landscape_23.png
- render_scene.js
这是详细信息.这些为我工作，他们应该为您工作.但是，如果没有，请告诉我，我可以发布完整的代码.
Here are the details. These worked for me and they should work for you. But if not, let me know and I can post my complete code.
错误-在您的get_tileset()中，tileet.onload期望使用命名函数或内联函数，而不是函数调用.
A Bug -- In your get_tileset(), the tileset.onload is expecting a named function or inline function, not a function call.
// 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中包含一个错误捕获器，这样您就可以看到失败的请求！
Please include an error catcher in your $.getJSON so you get visibility on failed requests!
$.getJSON('maps/'+ name + '.json', function(json){
get_tileset(json);
}).fail( alert("I think you should know that something has gone horribly wrong!"); );
这是本地化文件所需的更改.
Here are the changes required to localize your files.
在mountain.html中:
In mountain.html:
<script src="render_scene.js" type="text/javascript"></script>
在render_scene.js中(如果您是从Gist下载的)
In render_scene.js (if you downloaded from the Gist)
load: function(name) {
return $.ajax({
url: "mountain.json",
dataType: "text json"
}).done($.proxy(this.loadTileset, this));
}
在mountain.json中:
In mountain.json:
"image":"mountain_landscape_23.png",
在mountain.tmx中:
In mountain.tmx:
<image source="mountain_landscape_23.png" width="512" height="512"/>
Mountain_landscape_23.png
Mountain_landscape_23.png
重要！根据开发环境的设置，您可能会遇到跨域安全错误，浏览器将拒绝绘制图块.如果是这样，请将这个png文件带到photoshop之类的编辑器中，然后将其保存回您的开发域中，以消除CORS错误.
Important! Depending on how you’ve got your development environment set up, you might get a cross-domain-security-error and the browser will refuse to draw your tiles. If so, take this png file into an editor like photoshop and save it back out to your dev domain to nullify the CORS error.
这篇关于读取JSON Tiled地图编辑器文件并显示在画布上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
