5
내자습서를 따르는 자습서는 자바 스크립트/캔버스 게임에서 타일 맵 편집기로 만든 json 맵 파일을로드 할 수 있습니다. 내가, console.logs에 넣어 버전의 내 자신의 종류를 구현, 등 콘솔 또는 순 최대한 멀리 볼 수JSON 바둑판 식으로 맵 편집기 파일을 읽고 캔버스에 표시
그리고에 불을 지르고에서 오류를 받고하지 오전 어디에
필자는 지점에 도착 그리고 경고, 스크립트는 절대적으로 잘 실행 중입니다!
문제는 캔버스가 비어있는 것입니다. 언제 타일 맵을 가져야하는지. 여기
튜토리얼의 나의 버전은 내 게임에서 구현됩니다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 ------------------------------------------------------
});
난 당신이 아름다운 생각하지 않습니다 타일 맵이 내 캔버스에 인쇄되지 않는 이유를 사람들이 알아낼 수 있습니까? 톰
좋은 json 데이터를 받으시겠습니까? $ .getJSON에 .done 및 .fail 함수를 추가 한 다음 거기에서 디버깅하여 유효한 데이터를 가져 오도록하십시오. – markE
예, JSON 데이터는 훌륭하다고 생각합니다. 나는 그것이 함수로 가져온 후 콘솔 로그를 완료했고 또한 전달되고 데이터가 괜찮 았을 때 –
누군가 이것에 대한 아이디어가 있습니까 ?? 나는 이유를 알아낼 것 같지 않은 이유는 그 그림! 아가씨. 하하. –