Skip to content

Commit 80a1606

Browse files
mikewesthadmikewesthad
committed
Update to allow multiple tileset sizes within one map
Tileset is source of truth for tile size, so this update makes sure that layers are sync'd with the tileset
1 parent 184cfd1 commit 80a1606

4 files changed

Lines changed: 55 additions & 26 deletions

File tree

‎v3/src/gameobjects/tilemap/Tilemap.js‎

Lines changed: 48 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,6 @@ var Tilemap = new Class({
4444
{
4545
if (tilesetName === undefined) { return null; }
4646
if (key === undefined || key === null) { key = tilesetName; }
47-
if (tileWidth === undefined) { tileWidth = this.tileWidth; }
48-
if (tileHeight === undefined) { tileHeight = this.tileHeight; }
4947

5048
if (!this.scene.sys.textures.exists(key))
5149
{
@@ -71,6 +69,8 @@ var Tilemap = new Class({
7169
return this.tilesets[index];
7270
}
7371

72+
if (tileWidth === undefined) { tileWidth = this.tileWidth; }
73+
if (tileHeight === undefined) { tileHeight = this.tileHeight; }
7474
if (tileMargin === undefined) { tileMargin = 0; }
7575
if (tileSpacing === undefined) { tileSpacing = 0; }
7676
if (gid === undefined) { gid = 0; }
@@ -84,8 +84,8 @@ var Tilemap = new Class({
8484
// Creates & selects
8585
createBlankDynamicLayer: function (name, tileset, x, y, width, height, tileWidth, tileHeight)
8686
{
87-
if (tileWidth === undefined) { tileWidth = this.tileWidth; }
88-
if (tileHeight === undefined) { tileHeight = this.tileHeight; }
87+
if (tileWidth === undefined) { tileWidth = tileset.tileWidth; }
88+
if (tileHeight === undefined) { tileHeight = tileset.tileHeight; }
8989
if (width === undefined) { width = this.width; }
9090
if (height === undefined) { height = this.height; }
9191
if (x === undefined) { x = 0; }
@@ -124,6 +124,8 @@ var Tilemap = new Class({
124124
var dynamicLayer = new DynamicTilemapLayer(this.scene, this, this.currentLayerIndex, tileset, x, y);
125125
this.scene.sys.displayList.add(dynamicLayer);
126126

127+
this.setTileSize(layerData);
128+
127129
return dynamicLayer;
128130
},
129131

@@ -223,21 +225,32 @@ var Tilemap = new Class({
223225
return null;
224226
}
225227

228+
var layerData = this.layers[index];
229+
226230
// Check for an associated static or dynamic tilemap layer
227-
if (this.layers[index].tilemapLayer)
231+
if (layerData.tilemapLayer)
228232
{
229233
console.warn('Cannot create static tilemap layer since a static or dynamic tilemap layer exists for layer ID:' + layerID);
230234
return null;
231235
}
232236

233237
this.currentLayerIndex = index;
234238

239+
// Make sure that all the LayerData & the tiles have the correct tile size. They usually
240+
// are, but wouldn't match if you try to load a 2x or 4x res tileset when the map was made
241+
// with a 1x res tileset.
242+
if (layerData.tileWidth !== tileset.tileWidth || layerData.tileHeight !== tileset.tileHeight)
243+
{
244+
this.setLayerTileSize(tileset.tileWidth, tileset.tileHeight, index);
245+
}
246+
235247
// Default the x/y position to match Tiled layer offset, if it exists.
236248
if (x === undefined && this.layers[index].x) { x = this.layers[index].x; }
237249
if (y === undefined && this.layers[index].y) { y = this.layers[index].y; }
238250

239251
var layer = new StaticTilemapLayer(this.scene, this, index, tileset, x, y);
240252
this.scene.sys.displayList.add(layer);
253+
241254
return layer;
242255
},
243256

@@ -252,21 +265,32 @@ var Tilemap = new Class({
252265
return null;
253266
}
254267

268+
var layerData = this.layers[index];
269+
255270
// Check for an associated static or dynamic tilemap layer
256-
if (this.layers[index].tilemapLayer)
271+
if (layerData.tilemapLayer)
257272
{
258273
console.warn('Cannot create dynamic tilemap layer since a static or dynamic tilemap layer exists for layer ID:' + layerID);
259274
return null;
260275
}
261276

262277
this.currentLayerIndex = index;
263278

279+
// Make sure that all the LayerData & the tiles have the correct tile size. They usually
280+
// are, but wouldn't match if you try to load a 2x or 4x res tileset when the map was made
281+
// with a 1x res tileset.
282+
if (layerData.tileWidth !== tileset.tileWidth || layerData.tileHeight !== tileset.tileHeight)
283+
{
284+
this.setLayerTileSize(tileset.tileWidth, tileset.tileHeight, index);
285+
}
286+
264287
// Default the x/y position to match Tiled layer offset, if it exists.
265288
if (x === undefined && this.layers[index].x) { x = this.layers[index].x; }
266289
if (y === undefined && this.layers[index].y) { y = this.layers[index].y; }
267290

268291
var layer = new DynamicTilemapLayer(this.scene, this, index, tileset, x, y);
269292
this.scene.sys.displayList.add(layer);
293+
270294
return layer;
271295
},
272296

@@ -598,30 +622,33 @@ var Tilemap = new Class({
598622
return this;
599623
},
600624

601-
setTileSize: function (tileWidth, tileHeight)
625+
setBaseTileSize: function (tileWidth, tileHeight)
602626
{
603627
this.tileWidth = tileWidth;
604628
this.tileHeight = tileHeight;
605629
this.widthInPixels = this.width * tileWidth;
606630
this.heightInPixels = this.height * tileHeight;
631+
},
607632

608-
// Update all the layers & tiles
609-
for (var i = 0; i < this.layers.length; i++)
610-
{
611-
this.layers[i].tileWidth = tileWidth;
612-
this.layers[i].tileHeight = tileHeight;
633+
// Sets the tile size for a given layer
634+
setLayerTileSize: function (tileWidth, tileHeight, layer)
635+
{
636+
layer = this.getLayer(layer);
637+
if (layer === null) { return this; }
638+
639+
layer.tileWidth = tileWidth;
640+
layer.tileHeight = tileHeight;
613641

614-
var mapData = this.layers[i].data;
615-
var mapWidth = this.layers[i].width;
616-
var mapHeight = this.layers[i].height;
642+
var mapData = layer.data;
643+
var mapWidth = layer.width;
644+
var mapHeight = layer.height;
617645

618-
for (var row = 0; row < mapHeight; ++row)
646+
for (var row = 0; row < mapHeight; ++row)
647+
{
648+
for (var col = 0; col < mapWidth; ++col)
619649
{
620-
for (var col = 0; col < mapWidth; ++col)
621-
{
622-
var tile = mapData[row][col];
623-
if (tile !== null) { tile.setSize(tileWidth, tileHeight); }
624-
}
650+
var tile = mapData[row][col];
651+
if (tile !== null) { tile.setSize(tileWidth, tileHeight); }
625652
}
626653
}
627654

‎v3/src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ var DynamicTilemapLayer = new Class({
4444
this.setPosition(x, y);
4545
this.setSizeToFrame();
4646
this.setOrigin();
47-
this.setSize(this.map.tileWidth * this.layer.width, this.map.tileheight * this.layer.height);
47+
this.setSize(this.layer.tileWidth * this.layer.width, this.layer.tileHeight * this.layer.height);
4848

4949
this.skipIndexZero = false;
5050
},

‎v3/src/gameobjects/tilemap/parsers/parsetiledjson/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,9 +327,11 @@ var ParseJSONTiled = function (key, json, insertNull)
327327
sid = mapData.tiles[tile.index][2];
328328
set = mapData.tilesets[sid];
329329

330+
// Ensure that a tile's size matches its tileset
331+
tile.width = set.tileWidth;
332+
tile.height = set.tileHeight;
330333

331334
// if that tile type has any properties, add them to the tile object
332-
333335
if (set.tileProperties && set.tileProperties[tile.index - set.firstgid])
334336
{
335337
tile.properties = Extend(tile.properties, set.tileProperties[tile.index - set.firstgid]);

‎v3/src/gameobjects/tilemap/staticlayer/StaticTilemapLayer.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ var StaticTilemapLayer = new Class({
5353
this.setPosition(x, y);
5454
this.setSizeToFrame();
5555
this.setOrigin();
56-
this.setSize(this.map.tileWidth * this.layer.width, this.map.tileHeight * this.layer.height);
56+
this.setSize(this.layer.tileWidth * this.layer.width, this.layer.tileHeight * this.layer.height);
5757

5858
this.skipIndexZero = false;
5959

@@ -74,8 +74,8 @@ var StaticTilemapLayer = new Class({
7474
var tileset = this.tileset;
7575
var mapWidth = this.layer.width;
7676
var mapHeight = this.layer.height;
77-
var tileWidth = this.map.tileWidth;
78-
var tileHeight = this.map.tileHeight;
77+
var tileWidth = this.layer.tileWidth;
78+
var tileHeight = this.layer.tileHeight;
7979
var width = this.texture.source[0].width;
8080
var height = this.texture.source[0].height;
8181
var mapData = this.layer.data;

0 commit comments

Comments
 (0)