Polygon Collision Sporadic

[Robotic Soldier Grungram]

I'm trying to use Phaser's setPolygon() function for collision detection. The debug renderer shows the polygon shape where it should be (left of the "building" sprite, which is just a green box in the screenshot), but it's acting sporadic when colliding with another object (player sprite) — most of the time the player passes right through the polygon. Only rarely does it abide to the polygon shape. Any idea why this is happening? Is there a better way I should be doing this?

Here's a screenshot of the issue:

Isolated polygon shape:

And here's my code:

 

var MyGame = (function () {    var MyGame = function (width, height) {        this.game = new Phaser.Game(width, height, Phaser.CANVAS, '', {            preload: this.preload.bind(this),            create: this.create.bind(this),            update: this.update.bind(this),            render: this.render.bind(this)        })        this.settings = {            tileSize: 32,            buildingWidth: 256,            buildingHeight: 512,            buildingOffsetY: 73,            buildingSpread: 11,            playerVelocity: 90        }        this.keys = {}    }    MyGame.prototype = {        preload: function () {            // Load assets            this.game.load.image('building', 'assets/building.png')            this.game.load.spritesheet('player', 'assets/player.png', 27, 40)                },        create: function () {            // Set up keyboard controls            this.keys.left = this.game.input.keyboard.addKey(Phaser.Keyboard.A);            this.keys.right = this.game.input.keyboard.addKey(Phaser.Keyboard.D);            this.keys.up = this.game.input.keyboard.addKey(Phaser.Keyboard.W);            this.keys.down = this.game.input.keyboard.addKey(Phaser.Keyboard.S);            this.keys.space = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);            // Create sprites            this.createBuildings()            this.createPlayer()                },        update: function () {            this.updatePlayer()                },        render: function () {            this.game.debug.renderPhysicsBody(this.player.body)            this.buildings.forEach(function (building) {                this.game.debug.renderPhysicsBody(building.body)            }, this)                },        createBuildings: function () {            this.buildings = this.game.add.group()            for (var y = -this.settings.buildingHeight; y < this.game.world.height; y += this.settings.buildingOffsetY) {                for (var x = -this.settings.buildingWidth; x < this.game.world.width; x += this.settings.buildingWidth + this.settings.buildingSpread) {                    var building = this.buildings.create(x, y, 'building')                    building.body.setPolygon(                        -(this.settings.buildingSpread + 64), this.settings.buildingOffsetY,                        -(this.settings.buildingSpread + 64), 32,                        -this.settings.buildingSpread, 0,                        64, 0,                        0, 32,                        0, this.settings.buildingOffsetY)                    building.body.immovable = true                }            }        },        createPlayer: function () {                        this.player = this.game.add.sprite(this.game.world.centerX - 128, this.game.world.height - (this.settings.tileSize * 3), 'player')            this.player.body.setRectangle(15, 8, 6, 32)                },        updatePlayer: function () {                    // buildings collision            this.game.physics.collide(this.player, this.buildings)            // reset velocity            this.player.body.velocity.x = 0            this.player.body.velocity.y = 0            // movement            if (this.keys.left.isDown) {                this.player.body.velocity.x = -this.settings.playerVelocity            } else if (this.keys.right.isDown) {                this.player.body.velocity.x = this.settings.playerVelocity            }            if (this.keys.up.isDown) {                this.player.body.velocity.y = -this.settings.playerVelocity            } else if (this.keys.down.isDown) {                this.player.body.velocity.y = this.settings.playerVelocity            }                }    }    return MyGame}())var myGame = new MyGame(512, 448)window.addEventListener('load', myGame)

[Robotic Soldier Grungram]

Alternatively, is there a way to set my polygon to the shape of the building sprite but have collision detection work in the opposite direction (i.e., player sprite can exist inside the polygon but cannot exit it)?

Also, what do the different colors of body debug outline points mean (red vs. orange)?

[Robotic Soldier Grungram]

After some more testing, I found a strange oddity in simple rectangular collision (which is also affecting the polygonal collision, too). The player sprite gets stuck in spaces that it should perfectly fit into because body touching property is set to true (no idea why, this seems like a bug?). The weird thing is that if you hold down the up arrow key (to increase player velocity), the touching property gets set to false. In other words, you have to be moving up to be able to move left/right in the space. You can see the 2 states in the screenshots below:

  

 

player.body.setRectangle(16, 12, 8, 56)building.body.setRectangle(192, 32, 0, 0)

It is also possible for the player sprite to get stuck on an edge. In this screenshot, I am unable to move down:

[Robotic Soldier Grungram]

I think I figured out one of the problems with my polygonal collision in the first post. When using negative values for the setPolygon() coordinates, the actual collision area seems to be different than what the debug renderer shows.

Still curious about the body.touching issue, though.

[Zef]

I think i am having this exact issue too. Started a topic here http://www.html5gamedevs.com/topic/4599-collision-detection-issues/?hl=collision

 

Did you find a solution? 

 

I think you are right about using negative values for set polygon, in my example the collisions on the bottom rocks seem to work, but on the top rocks, I am using sprite.scale.x -1 and that is when the issue seems to occur!!