Phaser.js the opposite of .putTileAtWorldXY

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

What exactly do you mean with destroy tiles? do you want to remove them from the layer or...? — winner_joiner, Jan 15 '23 at 07:33
Sorry I don't understand what you mean with 'MC'? But in the Answer below you can see how one can "remove"/"replace" Tiles, with this I think the most use cases should be covered. — winner_joiner, Jan 15 '23 at 15:28
I just wanted to know is the problem solved? or did my answer miss some points? — winner_joiner, Jan 20 '23 at 16:32

winner_joiner · Accepted Answer · 2023-01-15T10:10:33.403

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.

Phaser.js the opposite of .putTileAtWorldXY

1 Answers1