Tileset hitboxes missaligned

Phaser 3
1

I’ve been trying to do a climbing action for my game via tilesets, where you can move wherever you want inside the tiles. My issue is that the player drops out whenever it touches another tile while overlaping the desired tile. Is there anyway to make it so it checks if the player is overlapping the tile no matter if it is overlaping another tile at the same time? (For example, the player overlaping tiles 9 and -1)

this.physics.add.overlap(this.player, this.ladderLayer, (body, tile)=>{

            if(tile.index === 9){
                this.player.onLadder = true
                console.log("vine")
            }
            else if (tile.index !== 9){
                this.player.onLadder = false
            }
})

Image example, at this position, the player should be able to climb the vines, but it doesn’t at all

imagen
imagen237×275 1.41 KB

2

Ok updates on this, it seems that the hitboxes are weirdly missaligned in some way? Not sure what causes this. In the image gou can see that the player is some pixels at the vines when he grabs them form the left, but it does not happen the same if you try doing the same to the right.

imagen
imagen173×242 761 Bytes

3

You can use this.player.setSize(width, height) to change the size of the hitbox to match the sprite image. There is also this.player.setOffset() if necessary.

4

In the image you shared here, when the player does not climb, do you see your callback function for the ladder layer being called? It sounds like you have another physics collider setup between your player and maybe the bricks shown there, guessing that is another layer?

For the issue you described, of dropping when you touch another tile, that sounds like another collider is taking precedence. By chance, would you be able to share the rest of your physics code?

One option you might be able to use is the processCallback. This allows you to run custom code before your collider processing occurs, and in here you could check if you are on a ladder, and ignore the collision logic that is occurring.

5

I think there are two ways you could do this.

create()

// 'preupdate' is before colliders are run.
this.events.on('preupdate', () => {
    this.player.onLadder = false;
});

this.physics.add.overlap(this.player, this.ladderLayer, (_player, tile) => {
    if (tile.index === 9) {
        this.player.onLadder = true;
        console.log('vine');
    }
});

(I actually wish Arcade Physics colliders had preUpdate() and postUpdate() for this purpose.)

update()

const { left, top, width, height } = this.player.body;

this.player.onLadder = this.ladderLayer
    .getTilesWithinWorldXY(left, top, width, height)
    .some((tile) => tile.index === 9);
6

Sorry for the late response! It did call the ladder function but it did not do anything if the player is overlaping a second tile to the right (for some reason) from the same layer.

Is there any example to the processCallback so I can understand how it works?

Edit: samme solution worked at my end buut I would like to still know about the processCallback

7

This worked! Thanks!

But just in case, what does each thing mean in the update function, specifically after the this.ladderLayer

8
9

There is an example here:

In this example, the code skips the collision callback, and uses the process callback to indicate if the floating objects are “colliding” with the main game object. When the collision happens, the objects turn “red”, and this is being controlled by the update method. To see a difference, if you comment out the return atariRect.contains(x, y); line and just do return false, now when the objects overlap they will no longer turn “red”.

If you play with the code, you can see how it would interact with the collision callback. For example:

        this.physics.add.overlap(
            atari,
            chunks,
            function collision(_atari, chunk) {
                chunk.destroy();
            },
            function process (_atari, chunk)
            {
                const { x, y } = _atari.getLocalPoint(chunk.body.center.x, chunk.body.center.y);
                return true;
            }
        );

This would remove those floating objects once they collide, and if you update the process callback to return false, then the collision callback should never get called.