Can someone explain to me why this happens?

Phaser 3
1

I don’t know why, but the collision with the tilemap is not working correctly, see the following gif:

Screen recording 2022-02-10 21.32.02

It seems that once it works and the other time it doesn’t.

my code (referring to the part shown in the GIF):

// preload function:

    this.load.image("tiles", "../../assets/maps/halloween/map_tileset.png")
    this.load.tilemapTiledJSON("map_json", "../../assets/maps/halloween/map_tileset.json")

// create function

    var map = this.make.tilemap({key: "map_json", tileWidth: 120, tileHeight: 120})
    var tileset = map.addTilesetImage("map_tileset", "tiles")

    this.collideLayer = map.createLayer("mapTMX", tileset)

    this.collideLayer.setCollisionByProperty({ collides: true })
    this.physics.add.collider(this.collideLayer, this.player.sprite) // player.sprite is the character
2

Is there anything in the player movement logic?

3

There’s not much to movement, nothing more than inverting the sprite side and some animations:
The functions that are being called on Update (to perform the movement) come from the function that creates the player, so I decided to put everything here.

// create function
  this.player = new Player(this, "steve")

  this.cursors = this.input.keyboard.createCursorKeys()

// Update function
 let {left, right, up, space} = this.cursors
  
   if (right.isDown) {
     this.player.moveHorizontal(false)

   } else if (left.isDown) {
     this.player.moveHorizontal(true)
 
   } else {
     this.player.moveStopped()
   }
  
  if (up.isDown && this.player.sprite.body.onFloor()) {
    this.player.moveUp()
  }

// player function 
export default function Player(scene, skin) {
  this.life = 100
  this.skin = skin
  this.velocity = {
    x: 500, 
    y: 1000
  }

  // Create player
  var physicsCache = scene.cache.json.get("steve-physics") 
  this.sprite = scene.physics.add.sprite(500, 900, "player", "Idle1.png")
  this.sprite.setBounce(0.1)
  this.sprite.setCollideWorldBounds(true)
  this.sprite.body.setGravityY(300)

  this.sprite.body.setSize(this.sprite.width*0.3, this.sprite.height*0.75)
  this.sprite.setOffset(80, 25)

  
  // Tool Functions
  this.changeVelocityX = (velocity) => {
    if (this.velocity.x !== velocity)
      this.velocity.x = velocity
  }
  this.changeVelocityY = (velocity) => {
    if (this.velocity.y !== velocity)
      this.velocity.y = velocity
  }

  this.moveHorizontal = (side) => {
    this.sprite.play("run", true)
    this.changeVelocityX(500)

    if (!side) {
      this.fliplayer(false)
      this.sprite.setVelocityX(this.velocity.x)
    } else {
      this.fliplayer(true)
      this.sprite.setVelocityX(-this.velocity.x)
    }
  }

  this.moveStopped = () => {
    this.sprite.play("stopped", true)
    this.sprite.setVelocityX(0)
  }
  this.moveUp = () => {
    this.sprite.setVelocityY(-this.velocity.y)
    this.sprite.play("jump", true)
  }

  this.fliplayer = (pos) => {
    if (this.sprite.flipX !== pos) {
      if (pos)
        this.sprite.setOffset(55, 25)
      else
        this.sprite.setOffset(80, 25)      
    
      this.sprite.flipX = pos
    }
  }

  animations(scene)
}

function animations(scene) {
  scene.anims.create({
    key: "run",
    frameRate: 15,
    frames: scene.anims.generateFrameNames("player", {
      prefix: "Run",
      suffix: ".png",
      start: 1,
      end: 8,
      zeroPad: 1
    }),
    repeat: -1
  })
  scene.anims.create({
    key: "run-shoot",
    frameRate: 6,
    frames: scene.anims.generateFrameNames("player", {
      prefix: "Run-shoot",
      suffix: ".png",
      start: 1,
      end: 5,
      zeroPad: 1
    }),
    repeat: -1
  })
  scene.anims.create({
    key: "stopped",
    frameRate: 15,
    frames: scene.anims.generateFrameNames("player", {
      prefix: "Idle",
      suffix: ".png",
      start: 1,
      end: 10,
      zeroPad: 1
    }),
    repeat: -1
  })
  scene.anims.create({
    key: "stopped-shoot",
    frameRate: 10,
    frames: scene.anims.generateFrameNames("player", {
      prefix: "Idle-shoot",
      suffix: ".png",
      start: 1,
      end: 10,
      zeroPad: 1
    }),
    repeat: -1
  })
  scene.anims.create({
    key: "jump",
    frameRate: 5,
    frames: scene.anims.generateFrameNames("player", {
      prefix: "Jump",
      suffix: ".png",
      start: 4,
      end: 9,
      zeroPad: 1
    }),
    repeat: -1
  })
}

The strangest thing is that when I change the gravity of the player using this.sprite.body.setGravityY(300) in some areas of the tilemap the collision works perfectly while in others the bug I show in the GIF continues. I apologize for my English, I’m using the translator.

4

Try removing all of the setOffset(…) calls.

5

I’ve tried doing this before, but I did it again just to be sure, and the problem persists. :neutral_face:

6

I managed to solve the problem, I found the answer here. Thanks for your attention, @samme .