Phaser 3 Arcade Physics TileMap collision

Phaser 3
1

I’m having some issues with the collisions on the player and tile. It doesn’t seem to register collisions. I have set the debug to highlight the tiles, and they tiles are highlighted. However, the player sprite just passes through and no collision is detected. All in create()

this.ground = this.map.createStaticLayer('ground', tileset, 0, 0);
this.map.setCollisionByProperty({ collision: true }, true, true, this.ground);
this.player = this.physics.add.sprite(this.map.widthInPixels / 2 , this.map.heightInPixels - 150, 'car');
this.player.setSize(160, 125);
this.player.setScale(0.25);
this.player.setCollideWorldBounds(true);
this.physics.add.collider(this.player, this.ground, this);

I have also added some debug text and tried to do a manual check in the update (is always false):

 if(this.physics.collide(this.player, this.ground)) this.hittext.setText('TRUE');
 else this.hittext.setText('FALSE');

Like mentioned the tiles set for collision are highlighted with:

  this.map.renderDebug(this.debugGraphics, {
            tileColor: null, // Non-colliding tiles
            collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // Colliding tiles
            faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Colliding face edges
    });

My config is as follows:

let config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 960,
    height: 640,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: true
        }
    },
    scene: [ SplashScene, CarnivalScene, ShootingGallery ]
};

This is a isometric map, so no gravity. I based everything off of https://www.phaser.io/examples/v3/view/game-objects/tilemap/collision/csv-map-arcade-physics
but of course I’m using a tiled map and not csv.

One thing I do notice when inspecting this.ground during debugging, is the layer.collideIndexes.length = 0

2

Hi,
Here how i use tile collisions:

this.map = this.make.tilemap({ key: 'map1', tileWidth: 16, tileHeight: 16 });
this.tileset = this.map.addTilesetImage('tileground', 'tiles', 16, 16);
this.groundLayer = this.map.createDynamicLayer('collideGround', this.tileset, 0, 0);
this.groundLayer.setCollisionByProperty({ collides: true });
this.physics.add.collider(this.player, this.groundLayer, null, null, this);
1 Like
3

I did try that, but still does not work.
What version of Phaser? I’ve tried with 3.20.1 and 3.21.0

Also I do notice in the download, there is a separate download for Arcade Physics, is this required?
I’ve just been using:

    script src="https://cdn.jsdelivr.net/npm/phaser@3.21.0/dist/phaser-arcade-physics.min.js"
4

Use renderDebug(…).

Default Phaser already has Arcade Physics, no need for a separate script.

5

I’ve enabled debug. As can be seen, the tiles that are set to collide are highlight. But you can also see how the player sprite does not stop at the tiles and just passes through. The false also show no collisions are detected. In the layer properties the collideIndexes size is also zero, but the edge properties are true.

debugtiles
debugtiles877×495 69.7 KB

6

How do you move your sprite? With velocity?

1 Like
7

directly, not with velocity

I did change set with velocity, so it’s working now, thanks. However, I did expect to see true outputfor the following:

 if(this.physics.collide(this.player, this.ground)) this.hittext.setText('TRUE');
 else this.hittext.setText('FALSE');
8

I usually use the collide callback so i can’t say…

this.physics.add.collider(this.player, this.ground, () => this.hittext.setText('TRUE'), null, this);
9

Ok, the callback worked. However, I removed the:

this.physics.add.collider(...

and then the

if(this.physics.collide(...
else ...

worked, so I guess it’s an either or situation.

10

Hi, I came across this discussion trying to solve a similar problem, where my bullets would sometimes pass through walls, which were made from 96x96 tiles.

I couldn’t figure out what was going on, and I was getting pretty frustrated until I discovered this post:

This gave me the idea to add “tileBias” to my game config, such as:

{
    ...

    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 1000 },
            tileBias: 96,
        }
    }
}

According to the Phaser documentation for tileBias: “The optimum value may be similar to the tile size”. The default value is 16, but since my tiles were 96, I changed it to that size. After doing that, my problem seems to be resolved.

I just wanted to pass this information along, in case anyone else looks here for the same issue.

2 Likes