Tween player/wall tile collisions don't work

Phaser 3
1

When using tweens to animate players, colliders - sprite to wall tile, e.g. - don’t seem to work. I see a couple of mentions of this issue from others. Is there a typical way to handle this problem?
Anyone using a mouse or touch input is likely to encounter this issue
Overlap does trigger when the two touch, so I guess a brute force solution is to just terminate the tween and wait for another input. R there any better solutions?

2

:wave:

Arcade Physics uses velocities for collision separation. So you either have to tween/set velocities instead of positions or do your own sprite–tile separation.

3

An approach to solving this problem is to use setTileIndexCallback([ list of tiles to collide with], collisionCallback) on the layer that has the wall tiles
For example, in the Create function, put something like

this.groundLayer.setTileIndexCallback([39,57, 58, 59, 96, 115,1,78, 79, 80,3,4,22], this.hitWall, this);

and use this callback to to stop the tween and backup slightly to avoid retriggering the collision

  hitWall (sprite, tile)
  // callback on sprite/layer collision
  // stop the tween movement at the wall
  // backup slightly to break collision
  {
    const pX = this.groundLayer.worldToTileX(this.player.sprite.x);
    const pY = this.groundLayer.worldToTileY(this.player.sprite.y);

    tween.stop(); // player tween - there is only one tween in the game

    if(pX >= tile.x){
      this.player.sprite.x += 2;
    } else{this.player.sprite.x -= 2;}

    if(pY >= tile.y){
      this.player.sprite.y += 2;
    } else{this.player.sprite.y -= 2;}
    
  }

I’m new to both Phaser and Javascript, so there is likely a more elegant solution but this works for me