Detect collision direction in Phaser3

Question

I'm trying to create a 'Bomber-man' like game using Phaser3 library. For this purpose I'd like to define a collision relationship between the player and the bricks, and more importantly - detect the collision direction relative the the player.

I've noticed body properties like touching or blocked but they are always set to false. (please see below)

//scene.js

// bricks static group
this.scene.physics.add.staticGroup({ immovable: true });

// player defined in external file (as sprite)
this.player = new Player(this, 90, 90)

// player.js

// ... 

this.physics.add.collider(
  this, 
  scene.bricks,
  function(player, brick) {
  
    if(player.body.touching.left) { //ALWAYS FALSE!!!
        this.isBlockedFromLeft = true;
    }, else if(player.body.touching.right) {
        this.isBlockedFromRight = true; // ALWAYS FALSE!!!
    }
  },
  null,
  this
);

I'd appreciate any help. This is driving me crazy. Maybe there is a better way to do it and i'm missing something...

Thanks in advance.

Not sure, if it is related but you have a typo here: else if(player.body.touching.rigt). It should be else if(player.body.touching.right). Do you have a link to a repo or an online code playground? I'll take a look at it. — Manuel Abascal
Typo indeed. Post has been edited. Appreciate your willingness to help Manuel! You can find the git repo here: github.com/tamir-nakar/bomber_man . as you run it, you'll notice that it's hard to move. Knowing the collide direction will help me fix it, but maybe there is a native way of doing so ( instead of inventing the wheel). Any kind of help will be much appreciated. Thanks! — Tamir Nakar
May be you could get more help by posting your question in gamedev.stackexchange.com — derloopkat
@TamirNakar is your repo outdated? I have tried to find the player.js file & I can't find it! — Manuel Abascal

Tamir Nakar Tamir Nakar · Accepted Answer · 2020-03-06T16:31:09

So I finally figured it out.

The major issue was the way I defined the player movement. It should be

  if (this.keyboard.right.isDown) {
    this.body.setVelocityX(this.speed);
  }

rather than

  if (this.keyboard.right.isDown) {
    this.x += this.speed;
  }

The second way prevent collision detection and the body.touching and body.blocked properties to be updated.

Furthermore, I've found out that when it comes to top-down tiled games, it's really easier to build up the game using the tile-map feature. official examples can be found here: https://phaser.io/examples/v3/search?search=map and here is a tutorial of how to make a tiled-map using a light-weight software called 'Tiled' https://www.youtube.com/watch?v=2_x1dOvgF1E

Thank you all!

Detect collision direction in Phaser3

1 Answers