# How to organise a map's tiles into groups?

## Recommended Posts

Hi all,

I need advice on which approach is best for my problem:

Setup:

1. I'm using Tiled and tiles sets to create platforms for the player to jump on

2. Each platform is made of 32x32 tiles and can have any shape, like in tetris. (line-shaped, "L"-shaped, 2x2 block, and so on)

3. A level can have up to 50 platforms

Desired outcome:

I want is to know when the player has touched every tile of a platform. E.g. a platform has 5 tiles and after the player collided with all of them I want to call a function.

What would be the best way of doing this?

Solutions considered:

1. Have one layer per platform and get all tiles in each layer once the player touches the first tile. Then have a boolean on each tile, and substract the total touched tiles from the total tiles in the layer. When zero, call the function

2. Have some function that looks for adjacent tiles to the one touched by the player.

Are there any better solutions?

Thanks

##### Share on other sites

I think the first option makes more sense. You could store the bools in an array so when tile is touched, the index of that tile is switched from 0 to 1. When all items in array are 1, run the function.

##### Share on other sites

Thanks Casey. I've tried the first options, and it works.

1. Tiled setup

Put each platform on a separate Tiled layer. The layer should have a custom boolean property called "complete"

Every tile should have a boolean custom property called "touched"

2. The code

``````create: function() {
//create and save all Tiled layers
this.allLayers = [];
for(var i = 0; i < this.map.layers.length; i++) {
//crate all layers
var layer = this.map.createLayer(''+ this.map.layers[i].name +'');
//save all created layers
this.allLayers.push(layer);
}

//set collision for the layers created
for(var i = 0; i < this.allLayers.length; i++) {
this.map.setCollisionBetween(0,1000, true, this.allLayers[i]);
}
},

update: function() {
for(var i = 0; i < this.allLayers.length; i++) {
//pass the actual layer as an extra argument, because the first accourance is a tile
game.physics.arcade.collide(this.player, this.allLayers[i], function(player, tile){  this.touchTile(player, tile, this.allLayers[i]);}, null, this);
}
},

touchTile: function(player,tile,layer)  {
if(tile.properties.touched == false) {
tile.properties.touched == true;
}
this.checkPlatform(player,tile,layer);
},

checkPlatform: function (player,tile,layer) {

//if not all tiles have been touched
if(tile.layer.properties.complete == false) {

//get all tiles in the layer
var platformTiles = layer.getTiles(layer.x,layer.y,layer.width, layer.height,true,true);
var touchedTiles = [];

//look for touched tiles in the layers and save them in an array
for(var i = 0; i < platformTiles.length; i++) {

if(platformTiles[i].properties.touched == true) {
touchedTiles.push(platformTiles[i]);
}
}

//check if the all tiles have been touched
if(touchedTiles.length === platformTiles.length) {
for(var i = 0; i < platformTiles.length; i++) {
platformTiles[i].index++;
}
//all tiles have been touched
tile.layer.properties.complete = true;
}
}

},

``````