Player Sprite Not Colliding With Platform from Tiled Map (No Console Errors)

I’m working on a platformer demo to expand my understanding of Phaser. I’ve done a couple other similar projects prior to this one, and those work as expected. In this project, as far as I can tell, the code I’ve written ought to work. And yet, the player sprite falls through the platforms no matter what solution I try.

EDITING for clarity, since I forgot to mention this to begin with: this is where the sprite ought to be standing. It spawns at this point, but then it drops through the platform, and collides with the world bounds at the bottom of the map.

Here are the most relevant code snippets, but to save space in this post I’m uploading the source files to Google docs so the files can be viewed in their entirety.

Here are the source files.

The custom method to build the game map:
buildMap() {

        this.map = this.make.tilemap({key: 'stage1'});

        //get array of tilesets

        this.allTiles = this.map.tilesets;

        

        for (let i = 0; i < this.allTiles.length; i++) {

            //for each tileset in array, fill in an addTilesetImage statement: needs key from preload and tileset name from Tiled, or just key if both parameters match

            this.tiles = this.map.addTilesetImage(this.allTiles[i].name); 

            

        }

        //get array of layers

        this.allLayers = this.map.layers;

        this.layers = [];

        for (let i = 0; i < this.allLayers.length; i++) {

            

            //for each layer in the array, fill in a createStaticLayer statement: needs layer name from Tiled and tileset image added in addTilesetImage

            this.mapLayer = this.map.createStaticLayer(this.allLayers[i].name, this.allTiles[i].name);

            this.layers.push(this.mapLayer);

            //console.log(this.layers);

        }

    }

The custom method for setting colliders:

addCollisions() {

    //set world bounds to follow camera bounds

    this.physics.world.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels);

    //establish camera

    this.cameras.main.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels);

    //establish camera follow

    this.cameras.main.startFollow(this.hero);

    this.hero.setCollideWorldBounds(true);

    this.layers.forEach(layer => {

        if (layer.layer.name.includes('collides')) {

            console.log(layer);

            console.log(this.hero);

            layer.setCollisionByExclusion(-1);

            this.physics.add.collider(this.hero, layer, this.collideCheck, null, this);

        }

    });

}

collideCheck() {

    console.log("collisions set");

}

Solutions I’ve tried:

  1. Comparing code line-by-line to previous projects which worked as expected to see if I had missed anything.
  2. Hard-coding a single platform layer manually instead of looping over map data and setting collision between the sprite and that single layer
  3. Removing the extended sprite class and instead just using a this.physics.add.sprite() statement inside the Game scene itself, in addition to 2).

What am I missing here that’s causing this problem? Let me know if there’s any other information I can provide which might be relevant.

I tried the source with a few edits and the sprite was colliding.

The sprite is colliding with the world bounds in that screenshot, not with the platform. My apologies, I probably should’ve included a screenshot of where the sprite ought to be. The sprite spawns from a starting point here:

It spawns at that point, and then drops below the platform and collides with the world bounds. It ought to be colliding with the platform and standing on top of the platform at that spawn point. (I have tried moving the spawn point to different locations on the map and I still get the same result.) This is the code to create the sprite from the Hero class:
addHero() {

        this.map.findObject('objects', (obj)=>{

            if (obj.name === "entry") {

                this.hero = new Hero(this, obj.x, obj.y);

            }

        });

    }

He was colliding on the right edge. He can stand on the tiles too.

Add renderDebug() for each layer and see what it shows.

I figured it out from your screenshot, there were transparent tiles in the way due to the method I used to build the maps. I set collides: true on the platform tiles and switched to setCollisionByProperty and it works. Thanks!

1 Like