STuFF

Small arcade sprite and tilemap collision bug?

Recommended Posts

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

game.gif.cabca0b72d1c5168b9522ec1baac0937.gif

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?

 

 

Share this post


Link to post
Share on other sites

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 :P

Share this post


Link to post
Share on other sites

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
  }
};

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.