How to organise a map's tiles into groups?

[piotr]

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

 

 

[casey]

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. 

 

[piotr]

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;
		}
	}

},