Jump to content

Destructible 2d map?


PhasedEvolution
 Share

Recommended Posts

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

Link to comment
Share on other sites

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 :P

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

},

 

 

 

worldDirt-copy.png

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...