Small arcade sprite and tilemap collision bug?

[STuFF]

Hi everyone,

I'm running into a weird bug. I'm working on a very tiny display game (128*100) with a tiny 4x4 tilemap (with 8x8 tiles in it, I don't know if it could be the problem) and a small 16x16 sprite with some tiny bounds on it , and this is the heart of my problem. Also, I'm on a retina mac, maybe the resolution is a problem here.

here is my full code:

var config = {
  type: Phaser.CANVAS,
  width: 128,
  height: 100,
  zoom: 5,
  backgroundColor: '#2d2d2d',
  parent: 'phaser-example',
  pixelArt: true,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 250 },
      debug: true
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

new Phaser.Game(config);

let map;
let cursors;
let player;
let floorLayer;

function preload () {
  this.load.spritesheet('rick-stand', 'gfx/rick_Stand.png', { frameWidth: 16, frameHeight: 16 });

  this.load.image('lev1_8x8', 'levels/one/8x8.png');
  this.load.tilemapTiledJSON('level1-1', 'levels/one/level1-1.json');
}

function create () {
  cursors = this.input.keyboard.createCursorKeys();

  map = this.add.tilemap('level1-1');

  const smallTiles = map.addTilesetImage('lev1_8x8');
  floorLayer = map.createStaticLayer('floor', smallTiles);
  floorLayer.setCollisionByExclusion([ -1 ]);

  player = this.physics.add.sprite(15, 41, 'rick-stand');

  this.physics.add.collider(player, floorLayer);

  this.cameras.main.startFollow(player);

  player.setSize(8, 12, false);
  player.setOffset(5, 4);
}

function update (time, delta) {
  player.body.setVelocityX(0);

  if (cursors.left.isDown) {
    player.body.setVelocityX(-22);
  } else if (cursors.right.isDown) {
    player.body.setVelocityX(22);
  }

  if ((cursors.space.isDown || cursors.up.isDown) && player.body.onFloor())
  {
    player.body.setVelocityY(-100);
  }
}

nothing fancy I guess, not the setSize command, which causes a bug. Here, the width of the body of my sprite is 8 (because I want my 16x16 sprite to 'fall' into small 8px width hole)

Here is the bug, the sprite "jump" backward randomly

you can test that here https://s3-eu-west-1.amazonaws.com/stuff-games/rick/bug/index.html (the game is zoomed 5x, but with no zoom, the bug is the same)

If I change to player.setSize(9, 12, false); (9 instead of 8) there's no more bug (see that here https://s3-eu-west-1.amazonaws.com/stuff-games/rick/nobug/index.html) Using values below 8 causes bug too...

Is that a known bug?

I'm not afraid to look at it closely, but I even don't know what to check first... Is that a physics problem? a tilemap problem? a Sprite problem?

 

 

[samme]

In Phaser 2 you could increase tile padding or TILE_BIAS, probably there is a similar property here.

[samme]

Or decrease, I can never remember. Try

this.physics.world.TILE_BIAS = 8; // or 4 or 2

 

[STuFF]

Thank you, I will try that. I've checked the problem deeply in Phaser code last night, and the problem is tied to some math calculations with very small numbers. Some values looks like 23.9999999999999 I don't know if TILE_BIAS will solve that, but it worth trying, thank you

[STuFF]

thank you very much, that was exactly that

With Phaser 3 you can set "tileBias" via the configuration object. The default is 16, changing to 8 resolved my problem.

var config = {
  type: Phaser.WEBGL,
  width: 128,
  height: 100,
  zoom: 5,
  backgroundColor: '#2d2d2d',
  parent: 'phaser-example',
  pixelArt: true,
  physics: {
    default: 'arcade',
    arcade: {
      tileBias: 8,
      gravity: { y: 250 },
      debug: true
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};