phaser-frameworktiletiled

Phaser.js the opposite of .putTileAtWorldXY


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


Solution

  • 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.