Jump to content

Rotated Sprite -> Tilemap Overlap Error

Joe Kopena

Recommended Posts

I've been experimenting with Phaser a bit the past few days. I've encountered a problem with sprites not overlapping with tilemaps. Two captures follow with slightly different settings in play.


1) post-9227-0-12831000-1403043279.gif


2) post-9227-0-94127900-1403043279.gif


The robot near the center is a sprite, shooting other sprites.  It has moved hard up into the corner of a couple walls defined by a tilemap, such that when the bullets appear they are already inside colliding tilemap tiles. I would expect the bullets to overlap and be killed by my handler. Note that they do collide otherwise, so there's no basic problem here of improper collision flags or such. The green boxes are the body debug draw, showing that they're in the right places.


This is using arcade physics, Phaser 2.0.5.  I can't find any "reasonable" setting of TILE_BIAS, tilePadding on the bullets, velocities, etc., that prevents this problem in all cases.  At first I thought the bullets were simply moving too fast, hence their velocity is much slowed down in the second capture. In both cases though they're clearly squarely in the middle of the colliding tiles for several cycles, but still no overlap. Note in the first example that the angles work out such that the left shot is probably starting right on the edge of a tile and is properly detected after it first enters the tile (hence the slight flickering).


Currently I have TILE_BIAS set to 40 and the following creation code on the bullets:

        this.pBullets.createMultiple(40, "player-shot");        this.pBullets.setAll('anchor.x', 0.9);        this.pBullets.setAll('anchor.y', 0.5);        this.pBullets.setAll('pivot.x', -30);        this.pBullets.setAll('body.width', 4);        this.pBullets.setAll('body.height', 4);        this.pBullets.setAll('body.tilePadding.x', 16);        this.pBullets.setAll('body.tilePadding.y', 16);

The tilemap is created as such:

        this.map = this.game.add.tilemap("map", 32, 32);        this.map.addTilesetImage("tiles");        this.map.setCollisionBetween(0, 10);        this.map.setCollisionBetween(28, 38);        this.map.setCollisionBetween(56, 67);        this.ground = this.map.createLayer(0);

The collision is called as such:

        this.physics.arcade.overlap(this.pBullets, this.ground,                                    this.bulletHitWall,                                    null, this);

And the overlap callback is:

    bulletHitWall: function(bullet, wall) {        bullet.kill();    },

Any thoughts?



Link to comment
Share on other sites

I haven't fully deciphered this, but for now at least seem to have worked around the problem.  It seems like it's something about using a pivot setting to place the bullets out on the arms. They show up for a cycle or two near the center of the shooter, then pivot out (hence the brief flicker at the center of the robot). That allows them to penetrate the walls without being checked, and once inside the collisions fail for possibly a variety of reasons, including the faces not being interesting because there is an adjacent colliding block, etc. I switched to doing the trigonometry manually to place the bullets initially and I no longer have either the flicker or the collision problem.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...