Search code examples
javascriptgame-physicscollisionphaser-framework

Phaser v3 TileSprite not colliding properly

I'm making a Phaser game and I have the floor as a tile sprite since the texture needs to repeat. But when the player reaches a certain distance to the floor, it collides and can't move down any further.

This is my code:

let config = {
    type: Phaser.AUTO,
    width: 800,
    height: 500,
    physics: {
      default: 'arcade',
      arcade: {
        debug: false
      }
    },
    scene: {
        preload: preload,
      create: create,
      update: update
    }
};

const game = new Phaser.Game(config);

function preload()
{
  this.load.spritesheet('players', 'https://spice-escape.luisafk.repl.co/players.png', {
    frameWidth: 16,
    frameHeight: 16
  });
  this.load.spritesheet('terrain', 'https://spice-escape.luisafk.repl.co/terrain.png', {
    frameWidth: 16,
    frameHeight: 16
  });
}

function create()
{
  this.anims.create({
    key: 'blue_idle',
    frames: this.anims.generateFrameNumbers('players', { frames: [ 0, 1, 2, 3 ] }),
    frameRate: 8,
    repeat: -1
  });

  this.anims.create({
    key: 'blue_walk',
    frames: this.anims.generateFrameNumbers('players', { frames: [ 32, 33, 34, 35, 36, 37, 38, 39 ] }),
    frameRate: 8,
    repeat: -1
  });

  this.key_W = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);
  this.key_A = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
  this.key_S = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);
  this.key_D = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);

  this.platforms = this.physics.add.staticGroup();
  const downPlat = this.add.tileSprite(512, 450, 1024, 16, 'terrain', 177);
  this.platforms.add(downPlat);
  
  this.spawnPlayer = ()=> {
    this.player = this.physics.add.sprite(400, 250);
    this.physics.add.collider(this.player, this.platforms);
    this.player.setScale(2);
    this.player.play('blue_idle');
  }
  this.spawnPlayer();
}

function update()
{
  if (this.key_W.isDown)
  {
    this.player.setVelocityY(-50);
  }
  else if (this.key_S.isDown)
  {
    this.player.setVelocityY(50);
  }
  else
  {
    this.player.setVelocityY(0);
  }

  if (this.key_A.isDown)
  {
    this.player.setVelocityX(-150);
    this.player.play('blue_walk', true);
    this.player.flipX = true;
  }
  else if (this.key_D.isDown)
  {
    this.player.setVelocityX(150);
    this.player.play('blue_walk', true);
    this.player.flipX = false;
  }
  else
  {
    this.player.setVelocityX(0);
    this.player.play('blue_idle', true);
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>
  
</body>
</html>

Run the example and hold S to go down. Eventually, the player collides and can't go down anymore even though it's not actually touching the floor...

Solution

  • Fixed! I changed the line where I created the player from:

    this.player = this.physics.add.sprite(400, 250);

    To

    this.player = this.physics.add.sprite(400, 250, 'players');