Phaser.js the opposite of .putTileAtWorldXY - phaser-framework

Question

Im trying to make a terraria/papercraft like game, and i've been using tiled for the map, and i've wanted to edit the world(break, destroy blocks) and i've looked at this tutorial
https://medium.com/#michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-2-dynamic-platformer-3d68e73d494a
at it has the place tile, but has nothing for destroy tile, so how would i destroy tiled tile maps in phaser?
seeing some prev q's, the tile.destroy method with map name sends out bugs every time of the layer name, etc, and nothing seems to work
if anyone has a solution, or could point to a working phaser three tutorial in breaking and destroying tiled maps, please give em, im new to phaser and tiled in general.
what im working on (for context) -> https://glitch.com/edit/#!/paperambi2?path=src%2Fscenes%2FGame.js%3A77%3A21

Answer 1

Depending on your use case you can remove or replace single tiles or groups. check out the documentation (documenation Link replace and documenation Link remove)
Here a demo:
(this demo does not use Tiled, but it should work in the same way, just with less layers)
Demo is based on offical demo
document.body.style = 'margin:0;';
var config = {
type: Phaser.AUTO,
width: 22 * 16,
height: 11 * 16,
scene: { preload, create },
banner: false
};
function preload () {
this.load.image('mario-tiles', 'https://labs.phaser.io/assets/tilemaps/tiles/super-mario.png');
}
function create () {
this.add.text(10, 10, 'Click to remove Tile\n( Use shift to replace Tile)')
.setScale(1.25)
.setColor('black')
.setOrigin(0)
.setStyle({fontStyle: 'bold', fontFamily: 'Arial'})
.setDepth(100);
// Load a map from a 2D array of tile indices
var level = [
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], [ 0, 1, 2, 3, 0, 0, 0, 1, 2, 3, 0, 0, 1, 2, 3, 0, 0, 0, 1, 2, 3, 0, ], [ 0, 5, 6, 7, 0, 0, 0, 5, 6, 7, 0, 0, 5, 6, 7, 0, 0, 0, 5, 6, 7, 0, ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], [ 0, 0, 0, 14, 13, 14, 0, 0, 0, 0, 0, 0, 0, 0, 14, 13, 14, 0, 0, 0, 0, 0, ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ], [ 0, 0, 14, 14, 14, 14, 14, 0, 0, 0, 15, 0, 0, 14, 14, 14, 14, 14, 0, 0, 0, 15, ], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 15, ], [ 35, 36, 37, 0, 0, 0, 0, 0, 15, 15, 15, 35, 36, 37, 0, 0, 0, 0, 0, 15, 15, 15, ], [ 39, 39, 39, 39, 39, 39, 39, 39, 39, 39, 39, 39, 39, 39, 39, 39, 39, 39, 39, 39, 39, 39, ] ]
// When loading from an array, make sure to specify the tileWidth and tileHeight
var map = this.make.tilemap({ data: level, tileWidth: 16, tileHeight: 16 });
var tiles = map.addTilesetImage('mario-tiles');
var layer = map.createLayer(0, tiles, 0, 0);
var shiftKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SHIFT);
// replace tile is blue tile
const NEW_TILE_INDEX_AFTER_REMOVE = 0
this.input.on('pointerdown', function({x,y}){
// replace Tile, when shift key is pressed
if(shiftKey && shiftKey.isDown){
let selectedTile = layer.getTileAtWorldXY(x,y);
// prevent error if tile doesn't exist
if(selectedTile){
layer.replaceByIndex(selectedTile.index, NEW_TILE_INDEX_AFTER_REMOVE, selectedTile.x, selectedTile.y, 1, 1);
}
} else {
// default action remove tile
layer.removeTileAtWorldXY(x,y);
}
});
}
new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
You just have to check, that you don't try to replace or remove non-existent tiles, this could cause a crashes / errors, and is more frequently an issue with multilayered maps.