2
Je suis un jeu de programmation avec javascript et HTML5 toile et j'ai une erreur lors de la carte de dessin.en utilisant le moteur de toile et éditeur de carte carrelée obtenir "Uncaught TypeError: Impossible de lire la propriété 'firstgid' de undefined"
J'utilise la classe carrelée fournir par le cadre canvasEngine et je reçois cette erreur:
Uncaught TypeError: Cannot read property 'firstgid' of undefined
dans Tiled.js ligne 1.
Il est mon map.json fichier:
{ "height":400,
"layers":[
{
"compression":"zlib",
"data":"eJzt3U1u20YYBmAZaLY+gFctklP0B2m3\/blA7VzAdtfOXZJF7W17g\/Yctm\/Q5BalkApVJA45M\/woUuLzAIOBGIh2vJgXesUhP9ytVl+8XeYAoN7umvpiBuu6DAGYv+219GPHZ5Hv7\/pH7Rpecq7Uv9f+bgDU2ayj\/yTW2JzcOKYhPwBilH42uDrC0ZUhANQpyY83zfjzYrX64+K45kv5ARAuNz9+aMa7Zi1+f3F88zpHXssPgFBLyI938gMgXEl+TN1DDZlfJzosAOqU5MdfzTr898VxzvIDINYS+yv5ATBc7rVX+isAtpXkxxx6KP0VwDzorwCo4forAGpEXX91fbZ\/\/L45dttyvGYeen75ARArqr9ar+W7x9fH2o7XzEPPn8oPOQJQJ6q\/Wq\/ju8c363tE\/zT0\/PIDIFZUf3Wf6JfajtfMQ8+fkx9yBCBfZH\/VNh4C+6sh50\/d\/8rnEIA6Uf3VY2J9fw7qr4aev+\/zh\/wAKBPVX819lh8AsZa+f1B+ANRZ6v7BVIYAkKcrO74asb8ae7+h\/gpgXKl19MXbz9fb6P5q7P2G+iuAceV0V2P0V2PvN8zpr+QIQL2Szx+RfdLY+w37+iv5ATBMzmePsfqrMfcb9vVX8gNgmPVa+aFZRz\/e9edHZJ809n5D\/RXAuLb7qlR2nOL+QfcyARhmvU5+mfn9+SH3+03dX8kQgG5TXX81h\/2DOfkhQwDaleTHHHqo6P7KZxCAOiX5MYceKrq\/kiEAdaL6q\/X9SG7O9o\/fBl1Pdd1ynpuz\/PPLD4BYUf3V7\/9df7t7\/GGmzx+UHwDDRPVXm\/zYPh65H\/Cp5TzrY23HS\/sr2QFQLic7cvqrTX7s3s\/qIai\/Su1Xz71flvwAiFWSHzn9Vdv9SKL6q6eW8z8N7K9cvwtQpyQ\/uvqhx7P\/+6Tt8RzUXw09v\/3nALGi+qu5zpsMqemvAEiL6q\/mOm+ypCQ\/AOgX1V\/Ndd5kSd\/1u7sDgG76KxkCUCNq\/+Bc55z+Sn4AlIvaPzjXOae\/aiNXALqV5Mcc+qja+bL5\/a8So4QMAfjk1Purzfz1+Wr1TTO+bcZ35\/uvAShz6v3VZv6xyYifmvFzM345338NQJml9Fe\/Nhlx2YyrZrw5338NQJml9FfXTUbcNOO2Gb+d778GoEzfvQNPpb\/y\/QdArJL8qOmNrhPPfep6bmDXe2r7K99\/AMQqyY+a3ui+5f64fc8N7HpPbX\/l+w+AWGP3V23Pd9pkQep9Xe+p7a98\/wEQ6xD50fb5oi8\/Uu8p+fkvm9\/5VeYAoMzY1++mnjnb9VzbrveU\/PySe14BUGbs63cfE1nw3PH9R9d7Sn6+\/AAYzyk\/\/yM3PwAod8rP\/5AfAOMpyY+a\/mrKWX4AjEd\/JUMAauiv5AdADf2V\/ACoob\/6NDb\/783fBIBu+qvP\/9\/bfxMA0vRX6b8BAGlL76\/67v8FQLul91fyA6DOkvurvuyQHwBpS+6v5AdAvaX2VznZIUMA0pbYX5Vkh\/wAaLfE\/kp+AAy3xP5KfgAMp7+SHQA1lthflWQIAO2W2F\/JD4DhcrLj1Por+z8AhivJj6n7qMj+Sn4ADFOSH1P3UdH3v+rKDPkB0E1\/JT8Aaiz1+iv9FcAwS73+Sn4ADFOSH1P3UYe+\/gqAtCX3V6kMAaDfkvsr+QFQb8n9lfwAqKe\/kh8ANU41P15mZIf8AKjXdf3R7lr76ohGTnbID4B6JflxasN1uwD1cvbQTb3OHzI75AdAnpz82M2SU8gX+QEwTGl+RI7Sdb0mr3LyT3YAlJsyPw6RTaXvAyDP1Ov83AYA5aZeu+UGwHGbei2XHQCnY+o1XnYAHK+p13rZAcChyAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACj3L9pFmH4=",
"encoding":"base64",
"height":400,
"name":"sol",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":400,
"x":0,
"y":0
},
{
"compression":"zlib",
"data":"eJzt2kFOFUEUQNG\/jr9jFJxjonMIOpeocxSYE4W1WERYgHfSVe05SaWnL3\/wKrf7Hw4AAAAAAAAAwL86OR4Ob8Z5+3JOJ36ejfPuuPUvBsDz3XG52D52hwBs73zs4feL7eIPY96Pi80MsDcXC\/bHpzHv58VmBtibL2MPXy+2i7+Neb8vNjPA3tyMPfxjsV2sPwC2t+L7K\/0BsL0V31\/pD4Dt6Q8ACv0BQKE\/ACj0BwCF\/gCg0B8AFPoDgEJ\/AFDoDwAK\/QFAoT8AKPQHAIX+AKDQHwAU+gOAQn8AUOgPAAr9AUChPwAo9AcAhf4AoNAfABT6A4BCfwBQ6A8ACv0BQKE\/ACj0BwCF\/gCg0B8AFPoDgEJ\/AFDoDwAK\/QFAoT8AKPQHAIX+AKDQHwAU+gOAQn8AUOgPAIrV+uN2zHo3zv1CMwPs0Ur98XpvPI7ztMjMAHu1Sn88f\/M4c28ATGOV\/vDNA2AuK\/WH\/1wBzEN\/AFDoDwAK\/QFAoT8AKPQHAIX+AKDQHwAU+gOAQn8AUOgPAAr9AUChPwAo9AcAhf4AoNAfABT6A4BCfwBQ6A8ACv0BQKE\/ACj0BwCF\/gCg0B8AFPoDgEJ\/AFDoDwAK\/QFAoT8AKGbvj6uX2fQHwFxm74+vx793x9049xPPCfC\/uRk7+ec4txM\/X++OJ\/cHwDQexk7+Nc7viZ+P7g4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAICl\/AGj9H5s",
"encoding":"base64",
"height":400,
"name":"relief",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":400,
"x":0,
"y":0
},
{
"compression":"zlib",
"data":"eJzt3cePVXUcxuHDnVHc2AuIvdH+Ad24soC9Cyptp4m9S+\/FrrTEpb1LrwPYlba3d+l1ALuCL0sXJsfJMcO98zzJZ3fzy1193wXMTFEAAAAAAAAAAAAAAAAAAAAAAABAfRpdK4oxaWwal8bXqn3\/1rx3W7o93ZHurPh9ANrHgtzzhWlRWpyWVHzfn817z6Xn0wvpRfsB0BC25J5vTdvS9rSj4vv+Sd77NH2WPk9f2A+AhnBaU1Gcns5IZ6azmqp9\/9C8d1g6PB2Rjqz4fQDaR7\/c8\/7phnRjuqni+35e3js\/XZAuTH3sB0BDeDz3\/In0ZHoqPV3xfR+a94al4WlEGmk\/ABrC+7nnH6QP00fp44rv+6y8NzvNSXPTPPsB0BB+yz3\/Pf2R\/kx\/VXzf1+W99WlD2pg22Q8AAKCkCbWimJgmpclpiv+PC0AJS7MXLWlZWp5W2A8AStiZvWhNu9LutMd+AFBC96ai6JF6pl6pt38PB6CEAdmLgWlQGpyG2A8ASpiavZiWpqcZaab9AKCEldmLVWl1WpPW2g8AStibvdi3fzOai6JTqjW39zcCAAAAAAD4p\/trRfFAejA9lIZW\/POAd+W9u9M96d50n583BGgIr+eev5HeTG+lWRXf95fy3svplfRqes1+ADSE73LPv08\/pB\/Tuorv+5d576v0dfomfWs\/ABpCl6ai6JqOT93SCRX\/PMdRee\/odEw6Nh3n50UAGsJlueeXpyvSlemqiu9737x3Ubo4XZIutR8ADWF87vmENDFNSpMrvu+j8t7oNCaNTePsB0BDWJJ7vjS1pGVpecX3fX7eW5AWpkVpsf0AaAg7cs93pta0K+2u+L5vzntb0ta0LW23HwAAAAAAwAHqmYPa+xsAAAAdTeeD2\/sbAFCPzrUfABwgOncrikO6tfe3AKDedMl2dLUfAPxHPbIdPe0HQF0aViuK4WlEGplGlfi7HRPymYlpUpqcprTxb32cne04x34A1KXZuf1z0tw0L80vsQVL85mWtCwtTyvauB99sh197QdAXVqf278hbUyb0uYSW7Azn2lNu9LutMd+AHQ4JzYVxUnp5HRKOrXE783tns\/0SD1Tr9S7jb9rt1+2o7\/9AKhLV+f2X5OuTdel60tswYB8ZmAalAanIW3cj5uzHbfYD4C6NCW3\/+H0SHo0PVZiC6bmM9PS9DQjzfS3PgA6nBW5\/W+nd9K76b0SW7Ayn1mVVqc1aa39AOhw9uT2\/5R+Tr+kX0tswd58Zt\/+zzUXRadUa\/7fvyYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD8q78BhFapnA==",
"encoding":"base64",
"height":400,
"name":"batiments",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":400,
"x":0,
"y":0
},
{
"compression":"zlib",
"data":"eJzt3UFOwkAUBuC6gCMoKNxIQeGieim9gyuHGBJSLS3TKe0M37cxIbS4en\/eTDuvqgAAAAAAAAAAAODX8m7s\/wCAHG3lB0AWVqFer9VsAC60C9mxlx8AjKBLD\/MtowCo0cMAAACpNa1BWZsCAAAAAABy8D6rqo9ZvvcHYByfobZ\/DVjfh74\/AONYzatqPf\/7eapnrZruD0DedqG27wes70PfH4D89O1RvE8CAAAAAABcgzlTAMRoO6O97X3A+p64PALIV8oafsn7gIcsMTMEIF8pa7j3AQGI4X1AAACgK7MFAZgS+QPAf+QDAAAAAFNm\/Qrg9pyr\/eafAxCj6TyS+5A5Dwl6DvPPAcrUdB7Jc8iOlwT54bwTgDKZfw7AtaVa4wLgtvRd4\/JMF0A+1GwAUumSKYfvyB4Ark32AORtEer4sqWWn6v1XXLgMXznSV4AFGUT6vp24Nr+Gu7\/Jj8AipIqP\/qsR1nLAgAAhqTnAAAAAKAra0kAdDF2Xoz9+wBcT8zcwLZrFnIEoHgxcwPbrtnID4DixcwNNGsQoDyX7kHEzA00axCgXPayAQCAodT7DWerAxDD2eoADEnfAkAK5\/qW06w5nZMucwDo4pgbx7\/WygDK0\/Yc76XP+Z72HTHXAzBN9XreNz+65IMMAShPvV8AgBh9ssQ+OQAx7JMDkJo1MgAAuE16AQAAYKpi+xV9DgAAAAAAMAZ7FABMmbNNAIjhbBMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgOn5Abr7YNM=",
"encoding":"base64",
"height":400,
"name":"decors",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":400,
"x":0,
"y":0
}],
"nextobjectid":1,
"orientation":"orthogonal",
"properties":
{
},
"renderorder":"right-down",
"tileheight":16,
"tilesets":[
{
"firstgid":1,
"image":"..\/tilesets\/tileset1.png",
"imageheight":705,
"imagewidth":864,
"margin":0,
"name":"tileset1",
"properties":
{
},
"spacing":0,
"tilecount":2376,
"tileheight":16,
"tilewidth":16
},
{
"firstgid":2377,
"image":"..\/tilesets\/tileset2.png",
"imageheight":28000,
"imagewidth":256,
"margin":0,
"name":"tileset2",
"properties":
{
},
"spacing":0,
"tilecount":28000,
"tileheight":16,
"tilewidth":16
},
{
"firstgid":30377,
"image":"..\/tilesets\/tileset3.png",
"imageheight":800,
"imagewidth":477,
"margin":1,
"name":"tileset3",
"properties":
{
},
"spacing":1,
"tilecount":1316,
"tileheight":16,
"tilewidth":16
}],
"tilewidth":16,
"version":1,
"width":400
}
Voici mon app.js où j'appelle la scène:
canvas.Scene.New({
name: "map", // Obligatory
materials: {
images: {
tileset1: "tilesets/tileset1.png",
tileset2: "tilesets/tileset2.png",
tileset3: "tilesets/tileset3.png"
}
},
called: function(stage) {
},
preload: function(stage, pourcent, material) {
},
ready: function(stage, params) {
var tiled = canvas.Tiled.new();
tiled.load(this, stage, "maps/map.json");
tiled.ready(function() {
//sol = this.getLayer('sol');
});
},
render: function(stage) {
stage.refresh();
},
exit: function(stage) {
}
});
Thx pour l'aide et désolé pour mon probablement mauvais anglais.
EDIT: voici le fichier Tiled.js:
/*
Copyright (C) 2012 by Samuel Ronce
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
if (typeof exports != "undefined") {
var CE = require("canvasengine").listen(),
CanvasEngine = false,
Class = CE.Class;
}
Class.create("Tiled", {
el: null,
url: "",
tile_w: 0,
tile_h: 0,
tile_image_h:0,
tile_image_w:0,
tilesets: [],
width: 0,
height: 0,
layers: [],
objects: {},
scene: null,
_ready: null,
initialize: function() {
},
/**
@doc tiled/
@method ready Calls the function when the layers are drawn
@param {Function} callback
*/
ready: function(callback) {
this._ready = callback;
},
/**
@doc tiled/
@method load Load JSON file and draw layers in the element of the scene. View Tiled class description for more informations (http://canvasengine.net/doc/?p=editor.tiled)
@param {CanvasEngine.Scene} scene
@param {CanvasEngine.Element} el The element containing layers of Tiled
@param {String} url Path to JSON file of Tiled Map Editor
@example
Example with Node.js :
Server :
var CE = require("canvasengine").listen(8333),
Tiled = CE.Core.requireExtend("Tiled").Class,
Class = CE.Class;
CE.Model.init("Main", {
initialize: function(socket) {
var tiled = Class.New("Tiled");
tiled.ready(function(map) {
socket.emit("Scene_Map.load", map);
});
tiled.load("Map/map.json");
}
});
Client :
canvas.Scene.New({
name: "Scene_Map",
events: ["load"],
materials: {
images: {
tileset: "my_tileset.png"
}
},
load: function(data) {
var tiled = canvas.Tiled.New();
tiled.ready(function() {
var tile_w = this.getTileWidth(),
tile_h = this.getTileHeight(),
layer_object = this.getLayerObject();
});
tiled.load(this, this.getStage(), data);
}
});
*/
load: function(scene, el, url) {
var self = this;
if (typeof scene == "string") {
this.url = url = scene;
}
else {
this.el = el;
this.url = url;
this.scene = scene;
}
function ready(data) {
var clone_data = CE.Core.extend({}, data);
self.tile_h = data.tileheight;
self.tile_w = data.tilewidth;
self.width = data.width;
self.height = data.height;
self.tilesets = data.tilesets;
self.layers = data.layers;
self.tilesetsIndexed = [];
for (var i=0 ; i < self.tilesets.length ; i++) {
var props = self.tilesets[i].tileproperties,
new_props = {};
if (props) {
for (var key in props) {
new_props[+key+1] = props[key];
}
self.tilesets[i].tileproperties = new_props;
}
self.tilesetsIndexed[self.tilesets[i].firstgid] = self.tilesets[i];
}
//
// Check to see if the tileset uses a different height/width to the layer
// For example, pseudo-3d tiles such as PlanetCute are 101x171 sprites
// on a Tiled layer grid of 101x80
//
if (self.tilesets[0].tileheight && self.tilesets[0].tilewidth) {
self.tile_image_h = self.tilesets[0].tileheight;
self.tile_image_w = self.tilesets[0].tilewidth;
} else {
self.tile_image_h = self.tile_h;
self.tile_image_w = self.tile_w;
}
var _id, length = self.tilesetsIndexed.length + (Math.round(self.tilesets[self.tilesets.length-1].imageheight/self.tile_h) * (Math.round(self.tilesets[self.tilesets.length-1].imagewidth/self.tile_w)));
for (var m=0; m < length; m++) {
_id = self.tilesetsIndexed[m] ? m : _id;
self.tilesetsIndexed[m] = self.tilesetsIndexed[_id];
}
if (typeof exports == "undefined") {
self._draw();
}
else {
if (self._ready) self._ready.call(self, clone_data);
}
}
if (typeof url === 'string') {
(CanvasEngine || CE.Core).getJSON(this.url, ready);
}
else {
ready(url);
}
},
_drawTile: function(_id, layer_name, data) {
var _tile = this.scene.createElement(),
tileset, tileoffset, nb_tile = {};
if (data.position != "absolute") {
data.x *= this.tile_w;
data.y *= this.tile_h;
}
var flippedHorizontally = false, flippedVertically = false, flippedAntiDiagonally = false;
if (_id & Tiled.FlippedHorizontallyFlag) {
flippedHorizontally = true;
}
if (_id & Tiled.FlippedVerticallyFlag) {
flippedVertically = true;
}
if (_id & Tiled.FlippedAntiDiagonallyFlag) {
flippedAntiDiagonally = true;
}
_id &= ~(Tiled.FlippedHorizontallyFlag | Tiled.FlippedVerticallyFlag | Tiled.FlippedAntiDiagonallyFlag);
tileset = this.tilesetsIndexed[_id];
_id -= tileset.firstgid;
nb_tile = {
width: tileset.imagewidth/this.tile_image_w,
height: tileset.imageheight/this.tile_image_h
};
tileoffset = tileset.tileoffset || {x: 0, y: 0};
y = this.tile_image_h * Math.floor(_id/(nb_tile.width - (nb_tile.width/2 * tileset.margin)));
x = this.tile_w * (_id % Math.round((tileset.imagewidth - nb_tile.height/2 * tileset.margin)/this.tile_w));
_tile.drawImage(tileset.name, x + tileset.spacing * x/this.tile_w + tileset.margin, y + tileset.spacing * y/this.tile_h + tileset.margin, this.tile_w, this.tile_h, data.x + tileoffset.x, data.y + tileoffset.y, this.tile_w, this.tile_h);
this.el_layers[layer_name].append(_tile);
var scaleX = (flippedHorizontally) ? -1 : 1,
scaleY = (flippedVertically) ? -1 : 1,
rotation = 0;
if (flippedAntiDiagonally) {
rotation = 90;
scaleX *= -1;
halfDiff = nb_tile.height/2 - nb_tile.width/2
y += halfDiff
}
_tile.drawImage(tileset.name, x + tileset.spacing * x/this.tile_image_w + tileset.margin, y + tileset.spacing * y/this.tile_image_h + tileset.margin, this.tile_image_w, this.tile_image_h, 0, 0, this.tile_image_w, this.tile_image_h);
_tile.x = data.x + tileoffset.x
_tile.y = data.y + tileoffset.y
_tile.width = this.tile_w
_tile.height = this.tile_h
_tile.setOriginPoint("middle");
_tile.scaleX = scaleX
_tile.scaleY = scaleY
_tile.rotation = rotation
if (data.visible === false) {
_tile.hide();
}
this.el_layers[layer_name].append(_tile);
return _tile;
},
_draw: function() {
this.map = this.scene.createElement();
this.el_layers = {};
var x, y, tileset, layer, self = this;
var id, _id, obj, layer_type, el_objs = {};
for (var i=0 ; i < this.layers.length ; i++) {
id = 0;
layer = this.layers[i];
this.el_layers[layer.name] = this.scene.createElement();
if (layer.type == "tilelayer") {
for (var k=0 ; k < layer.height ; k++) {
for (var j=0 ; j < layer.width ; j++) {
_id = layer.data[id];
if (_id != 0) {
this._drawTile(_id, layer.name, {
x: j,
y: k
});
}
id++;
}
}
}
else if (layer.type == "objectgroup") {
for (var j=0 ; j < layer.objects.length ; j++) {
obj = layer.objects[j];
if (!el_objs[obj.name]) el_objs[obj.name] = [];
if (obj.gid) {
el_objs[obj.name].push(this._drawTile(obj.gid, layer.name, CE.extend(obj, {
y: obj.y - this.tile_h,
position: "absolute"
})));
}
}
this.objects[layer.name] = {
layer: this.el_layers[layer.name],
objects: el_objs
};
}
this.map.append(this.el_layers[layer.name]);
}
this.el.append(this.map);
if (this._ready) this._ready.call(this);
},
/**
@doc tiled/
@method getLayerObject Retrieves the object layer.
@param {Integer} name Returns the layer by name
@return {CanvasEngine.Element}
*/
getLayerObject: function(name) {
if (!name) {
for (var id in this.objects) {
name = id;
break;
}
}
if (!this.objects[name]) {
return false;
}
return this.objects[name].layer;
},
// TODO
getObject: function(layer_name, obj_name, pos) {
if (!pos) pos = 0;
return this.objects[layer_name].objects[obj_name][pos];
},
/**
@doc tiled/
@method getLayer Retrieves the layer by its identifier.
@param {String} id Layer name in Tiled Map Editor
@return {CanvasEngine.Element}
*/
getLayer: function(id) {
return this.el_layers[id];
},
/**
@doc tiled/
@method getMap Returns the element containing all the layers
@return {CanvasEngine.Element}
*/
getMap: function() {
return this.map;
},
/**
@doc tiled/
@method getTileWidth Returns the width of the map in tiles
@return {Integer}
*/
getTileWidth: function() {
return this.tile_w;
},
/**
@doc tiled/
@method getTileHeight Returns the height of the map in tiles
@return {Integer}
*/
getTileHeight: function() {
return this.tile_h;
},
/**
@doc tiled/
@method getWidthPixel Returns the width of the map in pixels
@return {Integer}
*/
getWidthPixel: function() {
return this.width * this.getTileWidth();
},
/**
@doc tiled/
@method getHeightPixel Returns the height of the map in pixels
@return {Integer}
*/
getHeightPixel: function() {
return this.height * this.getTileHeight();
},
/**
@doc tiled/
@method getDataLayers Returns the data for each map
@return {Array}
*/
getDataLayers: function() {
var layer = [];
for (var i=0 ; i < this.layers.length ; i++) {
if (this.layers[i].data) layer.push(this.layers[i].data);
}
return layer;
},
/**
@doc tiled/
@method getTileInMap Retrieves the position of a tile to the Tileset according positions X and Y
@params {Integer} x Position X
@params {Integer} y Position Y
@return {Array}
*/
getTileInMap: function(x, y) {
return this.width * y + x;
},
/**
@doc tiled/
@method getTileProperties Gets the properties of a tile depending on its identifier
@params {Integer} tile Id of tile
@params {String} (optional) layer Layer name
@return {Object}
*/
/**
@doc tiled/
@method getTileProperties Gets the properties of a tile depending on its positions
@params {Integer} tile Id of tile. Put "null"
@params {Integer} x Positon X
@params {Integer} y Positon Y
@return {Object}
*/
getTileProperties: function(tile, layerOrX, y) {
var self = this;
var tileset = this.tilesets[0];
function _getTileLayers(tile) {
var _layers = [];
for (var i=0 ; i < self.layers.length ; i++) {
if (self.layers[i].data) _layers.push(tileset.tileproperties[self.layers[i].data[tile]]);
}
return _layers;
}
if (layerOrX === undefined) {
return _getTileLayers(tile);
}
else if (y !== undefined) {
var new_tile = this.getTileInMap(layerOrX, y);
return _getTileLayers(new_tile);
}
return tileset.tileproperties[this.layers[layerOrX].data[tile]];
},
tileToProperty: function(prop_name) {
var layers = this.getDataLayers(), val;
var new_layers = [];
for (var i=0 ; i < layers.length ; i++) {
new_layers[i] = [];
for (var j=0 ; j < layers[i].length ; j++) {
val = this.tilesets[0].tileproperties[layers[i][j]]; // Hack Tiled Bug
new_layers[i][j] = val ? +val[prop_name] : 0;
}
}
return new_layers;
}
});
/**
@doc tiled
@class Tiled Tiled is a general purpose tile map editor. It's built to be easy to use, yet flexible enough to work with varying game engines, whether your game is an RPG, platformer or Breakout clone. Tiled is free software and written in C++, using the Qt application framework.
http://www.mapeditor.org
Consider adding inserting Tiled.js
<script src="extends/Tiled.js"></script>
<script>
var canvas = CE.defines("canvas_id").
extend(Tiled).
ready(function() {
});
</script>
@param {CanvasEngine.Scene} scene
@param {CanvasEngine.Element} el The layers are displayed on this element
@param {String} url Path to the JSON file of Tiled Map Editor
@example
var canvas = CE.defines("canvas_id").
extend(Tiled).
ready(function() {
canvas.Scene.call("MyScene");
});
canvas.Scene.new({
name: "MyScene",
materials: {
images: {
mytileset: "path/to/tileset.png"
}
},
ready: function(stage) {
var el = this.createElement();
var tiled = canvas.Tiled.new();
tiled.ready(function() {
var tile_w = this.getTileWidth(),
tile_h = this.getTileHeight(),
layer_object = this.getLayerObject();
stage.append(el);
});
tiled.load(this, el, "map/map.json");
}
});
1. `mytileset` in material object is the name of tileset in Tiled Map Editor
2. `getLayer()` retrieves a layer. The name is the same as in Tiled Map Editor
*/
var Tiled = {
Tiled: {
FlippedHorizontallyFlag: 0x80000000,
FlippedVerticallyFlag: 0x40000000,
FlippedAntiDiagonallyFlag: 0x20000000,
New: function() { return this["new"].apply(this, arguments); },
"new": function(scene, el, url) {
return Class["new"]("Tiled", [scene, el, url]);
}
}
};
if (typeof exports != "undefined") {
exports.Class = Tiled.Tiled;
}
Edit 2: J'ai résolu que par modifing le codage de la carte dans l'éditeur XML.
Vous n'avez pas inclus le code où se trouve l'erreur. La propriété 'firstgid 'de undefined' ne peut pas lire la propriété signifie que quelque chose essaie de trouver la propriété' firstgid' sur un objet non défini. Utilisez DevTools (appuyez sur f12) pour localiser le code qui lance l'erreur. – Blindman67
J'ai modifié pour ajouter le fichier. Merci pour votre réponse! –
Soit 'self.tilesets [i] .firstgid' où i est hors de portée ou pointe vers un jeu de pièces non défini, soit' _id - = tileset.firstgid; 'où' tileset' est 'undefined'. – Blindman67