Destructible 2d map?

[PhasedEvolution]

Hello. I am trying to make a 2d platform desctructible map. I am using matter.js for the physics ( I am working with soft bodies) and phaser for the rest of the game components. I have no idea on how desctructible 2d worlds are made... If you have a ground that is a rect how can you remove part of it due to user interaction?

Thanks

EDIT: I found this link: http://phaser.io/tutorials/coding-tips-002

Well, my dought now is if it is possible to collide a matter.js physics body with a map created with phaser

[piotr]

I usually use tilemaps to do destructible worlds. I assign a "health" custom property to each tile, apply damage to it and then, when health = 0, I destroy it by removing it from the map while playing a particle effect. I can post code if the solution is what are you looking for.

[PhasedEvolution]

4 minutes ago, piobug said:

I usually use tilemaps to do destructible worlds. I assign a "health" custom property to each tile, apply damage to it and then, when health = 0, I destroy it by removing it from the map while playing a particle effect. I can post code if the solution is what are you looking for.

Well I would like to try that if you don't mind

But won't that limit destruction to "squared destruction"  only?

[rgk]

The way most games handle it, like worms, is via bitmapdata like you see in the example you posted. I do this in my game AerialDrop and collision detection is another pain when working with bitmapdata. Doing this with tilemaps to make it look nice enough, aka really small tiles, is a performance nightmare. If you were to do it with big enough tiles I guess it wouldn't be that bad though but like you said it would cause obvious static destruction, with art you might be able to blend the lines though.

[PhasedEvolution]

5 minutes ago, rgk said:

The way most games handle it, like worms, is via bitmapdata like you see in the example you posted. I do this in my game AerialDrop and collision detection is another pain when working with bitmapdata. Doing this with tilemaps to make it look nice enough, aka really small tiles, is a performance nightmare. If you were to do it with big enough tiles I guess it wouldn't be that bad though but like you said it would cause obvious static destruction, with art you might be able to blend the lines though.

Oh, if I might ask, why is it difficult to work with bitmapdata collision. I am asking this because I never tried that out

[rgk]

2 minutes ago, PhasedEvolution said:

Oh, if I might ask, why is it difficult to work with bitmapdata collision. I am asking this because I never tried that out

Because phaser arcade physics doesn't just work with it (with collide for example). You might have better luck with p2.

[piotr]

Yes, it will be only squared destruction. It works for games that look and feel like classic platformers. Is not well suited for "organic" destruction.

I use Tiled Map Editor to draw all the tile maps. In the editor I assign a custom property, e.g. "health" that stores the hit points for each tile. To draw the world/tiles I use a sritesheet like the one attached: the first square is the normal undamaged tile and the following four square represent increasing degrees of damage. 

So every time a tile is hit, I show the next square in the sprite sheet, until there are no more squares. I then remove the tile from the map and play a particle effect to simulate the tile explosion.

This code is really boilerplate, and I'm working on a better function to do it, but it's clear to understand:

destroyTerrain: function(bullet, tile) {
		
	if(tile != null) {

		if(tile.properties.destructable != null && tile.properties.destructable == 'true') {
			//move the emitter at the bullet's point of contact with the tile
			this.dirtParticles.x = bullet.x;
			this.dirtParticles.y = bullet.y;
			
			//start emitting
			this.dirtParticles.start(true, 2000, null, 15); //explode, lifespan, frequency, quantity, forceQuantity

			//start damaging the tile
			tile.properties.tileHealth -= this.BULLET_DAMAGE;
			tile.index +=1;
			//check if property is set in Tiled/jason file	
			if(tile.properties.tileHealth !=null) {
				
				//this code needs to be improved!
				if(tile.properties.tileHealth < 40 && tile.properties.tileHealth >= 30) {
					
					this.map.putTile(2, tile.x, tile.y, this.layerDirt);

				} else if(tile.properties.tileHealth < 30 && tile.properties.tileHealth >= 20) {
					
					this.map.putTile(3, tile.x, tile.y, this.layerDirt);
				
				} else if(tile.properties.tileHealth < 20 && tile.properties.tileHealth >= 10) {
					
					this.map.putTile(4, tile.x, tile.y, this.layerDirt);
				
				} else if(tile.properties.tileHealth < 10  && tile.properties.tileHealth > 0) {
					
					this.map.putTile(5, tile.x, tile.y, this.layerDirt);
				
				} else if(tile.properties.tileHealth <= 0){
					//put emitter at center of the tile
					this.dirtBreakParticles.x = tile.worldX + this.tileSize * 0.5;
					this.dirtBreakParticles.y = tile.worldY + this.tileSize * 0.5;
					//start emitter
					this.dirtBreakParticles.start(true, 5000, null, 10); //start(explode, lifespan, frequency, quantity)
					//remove tile
					this.map.removeTile(tile.x, tile.y, this.layerDirt);
					//play sound effect
					this.dirtBreak.play('', 0,0.3,false,false); //marker, position, volume, loop, forceRestart
				}
			//destroy the bullet	
			bullet.kill();

			} else {
				console.log('No health property set for this tile');
			}
		
		//if a not destructable tile is hit, then do not thing and destroy the bullet
		 } else if(tile.properties.destructable == 'false') {
			
		 	this.destroyBullet(bullet);

 		}

 	}
	//console.log('id: ' + tile.index + ', destructable: ' + tile.properties.destructable + ', health: ' + tile.properties.tileHealth);

},

 

 

 

[PhasedEvolution]

2 minutes ago, rgk said:

Because phaser arcade physics doesn't just work with it (with collide for example). You might have better luck with p2.

Oh I see... I am actually thinking of using matter.js to handle my game physics but I am quite blank on how you can conciliate the phaser game components with the matter.js physics features. Is that possible?

[PhasedEvolution]

@piobug yep  I was able to understand it preety well. I see what you meant. However I need that type of "organic" desctruction as you said.