我遵循这个this教程,以便能够在我的JavaScript/canvas游戏中加载由平铺Map编辑器创建的jsonMap文件。
我已经实现了我自己的版本,并且在控制台或网络等中没有出现Firebug错误。
据我所知,通过放入console.logs和alerts,脚本运行得非常好!
问题是画布保持空白!当它应该有一个tilemap现在它。
以下是我在游戏中实现的教程版本:
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文件中调用的,它是这样的:
$(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 ------------------------------------------------------
});
型
我不认为你们这些可爱的人能看出为什么瓷砖Map没有印在我的画布上?
谢谢你的帮助汤姆
2条答案
按热度按时间wnrlj8wa1#
平铺+画布
我看了Shane Riley在http://blog.hashrocket.com/posts/using-tiled-and-canvas-to-render-game-screens上的Tiled+Canvas博客文章。一个有趣的帖子!
好消息.我从他的演示中抓取了他的代码,我在我的开发计算机上本地运行了他的代码。
在经历这个过程并查看代码时,我认为您可以通过处理两个问题来使代码工作:
1)在get_tiltdown函数中有一个小bug。
2)您需要将所有Shane的演示文件指向位于您的本地计算机上的文件。我只是将所有这些文件放在一个文件夹中(为我工作)。您将需要触摸这些文件(详细信息如下):
这里是细节。这些工作为我,他们应该为你工作。但如果没有,让我知道,我可以张贴我的完整代码。
一个Bug --在get_tiltdown()中,tiltdown.onload需要一个 named function 或 inline function,而不是一个函数调用。
字符串
型
以下是本地化文件所需的更改。
在mountain.html中:
型
在render_scene.js中(如果从Gist下载)
型
在mountain.json中:
型
在mountain.tmx:
型
Mountain_landscape_23.png
很重要!根据你的开发环境设置,你可能会得到一个跨域安全错误,浏览器将拒绝绘制你的瓷砖。如果是这样,把这个png文件带到一个编辑器,如photoshop,并保存它回到你的开发域,以取消CORS错误。
rqenqsqc2#
嘿,大约10年后,但如果你改变
字符串
到
型
效果很好。