Robotic Soldier Grungram Posted March 3, 2014 Share Posted March 3, 2014 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) Link to comment Share on other sites More sharing options...
Robotic Soldier Grungram Posted March 3, 2014 Author Share Posted March 3, 2014 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)? Link to comment Share on other sites More sharing options...
Robotic Soldier Grungram Posted March 3, 2014 Author Share Posted March 3, 2014 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: Link to comment Share on other sites More sharing options...
Robotic Soldier Grungram Posted March 4, 2014 Author Share Posted March 4, 2014 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. Link to comment Share on other sites More sharing options...
Zef Posted March 9, 2014 Share Posted March 9, 2014 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 More sharing options...
Recommended Posts