Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Polygon Collision Sporadic


Robotic Soldier Grungram
 Share

Recommended Posts

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:

LZ0zXJy.png

Isolated polygon shape:

4ucCjHJ.png

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)
Link to comment
Share on other sites

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:

WGeVALU.png   kdGtnUH.png

 

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:

KLlxXJ0.png

Link to comment
Share on other sites

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!!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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