gbachik Posted April 11, 2014 Share Posted April 11, 2014 So I'm trying to setup a ragdoll, and right now I'm just doing some basic stuff where: -I create a head and body.-Connect them via a joint-add them to figure group-load the figure group But for some reason they won't collide with world bounds. I'm including some of my code: Group:'use strict';var Head = require('./head');var Body = require('./body');var Figure = function(game, parent) { Phaser.Group.call(this, game, parent); this.head = new Head(this.game,0,0,0); this.add(this.head); this.topBody = new Body(this.game, 34,34,0); this.add(this.topBody); var hbConstraint = game.physics.p2.createDistanceConstraint(this.head, this.topBody, 34); };Figure.prototype = Object.create(Phaser.Group.prototype);Figure.prototype.constructor = Figure;Figure.prototype.update = function() { // write your prefab's specific update code here };module.exports = Figure;Head piece:'use strict';var Head = function(game, x, y, frame) { Phaser.Sprite.call(this, game, x, y, 'Head', frame); this.anchor.setTo(0.5,0.5); this.game.physics.p2.enableBody(this); this.body.clearShapes(); this.body.loadPolygon('headPhysics', 'Head'); this.body.collideWorldBounds = true; this.game.physics.p2.updateBoundsCollisionGroup(); };Head.prototype = Object.create(Phaser.Sprite.prototype);Head.prototype.constructor = Head;Head.prototype.update = function() { // write your prefab's specific update code here };module.exports = Head;Any idea what I'm doing wrong? Link to comment Share on other sites More sharing options...
Saffii Posted April 30, 2014 Share Posted April 30, 2014 Also having a problem with collideWorldBounds working in the p2 physics engine. It worked perfectly with ARCADE, but as I am creating more of a top-down than a platform, I changed to p2, and cannot seem to find an equivalent. The sprite now just walks off the screen. Here is my code;function create() { game.physics.startSystem(Phaser.Physics.P2JS); map = game.add.tilemap('equi'); map.addTilesetImage('image', 'tiles'); layer1 = map.createLayer('background'); layer2 = map.createLayer('foreground'); layer1.resizeWorld(); map.setCollision(27); game.physics.p2.convertTilemap(map, layer2); player = game.add.sprite(20, 20, 'charc'); game.physics.p2.enable(player); player.body.setZeroDamping(); player.body.fixedRotation = true; player.body.collideWorldBounds = true; game.camera.follow(player); player.animations.add('down', [0, 1, 2], 10); player.animations.add('left', [12, 13, 14], 10); player.animations.add('right', [24, 25, 26], 10); player.animations.add('up', [36, 37, 38], 10); cursors = game.input.keyboard.createCursorKeys(); }All the examples I have looked at have a boundary or barrier to prevent the sprite from disappearing off screen, so I am starting to becoming a bit stumped with this too. Obviously missing something somewhere, can anyone spot what it is? Using 2.0.4. Sorry I can't help with the original post, but thought I'd best post here rather than make another thread on the same subject. Thanks. Link to comment Share on other sites More sharing options...
rich Posted April 30, 2014 Share Posted April 30, 2014 Lots of the P2 examples use world boundary collision (I don't think any have barriers in fact!) Here's one such example: http://examples.phaser.io/_site/view_full.html?d=p2%20physics&f=world+move.js&t=world%20move This is all you need for world boundary collision in P2: game.world.setBounds(0, 0, 1600, 1200); game.physics.startSystem(Phaser.Physics.P2JS);setBounds called before startSystem. And that's it basically. Saffii 1 Link to comment Share on other sites More sharing options...
Saffii Posted April 30, 2014 Share Posted April 30, 2014 The Tilemap and Tilemap gravity examples both use a boundary and they were the two I was concentrating on as using a tilemap. Although I have been through so many examples and code today >.< I did go through the other P2 examples and spotted; game.world.setBounds(0, 0, 1600, 1200);in a number of scripts, so I added it in to try. It didn't fix the boundary collision so figured it was not that.Have just added it in again to the very top of my code above and sure enough it's still not working. I can post a link so you can see exactly what I mean if that if more helpful? Got collision working with the tilemaps, its just the boundary :/ Cheers. Link to comment Share on other sites More sharing options...
Saffii Posted April 30, 2014 Share Posted April 30, 2014 This is the code I am using:function create() { game.world.setBounds(0, 0, 1600, 1600); game.physics.startSystem(Phaser.Physics.P2JS); map = game.add.tilemap('equi'); map.addTilesetImage('image', 'tiles'); layer1 = map.createLayer('background'); layer2 = map.createLayer('foreground'); layer1.resizeWorld(); map.setCollision(27); game.physics.p2.convertTilemap(map, layer2); player = game.add.sprite(20, 20, 'charc'); game.physics.p2.enable(player); player.body.setZeroDamping(); player.body.fixedRotation = true; player.body.collideWorldBounds = true; game.camera.follow(player); player.animations.add('down', [0, 1, 2], 10); player.animations.add('left', [12, 13, 14], 10); player.animations.add('right', [24, 25, 26], 10); player.animations.add('up', [36, 37, 38], 10); cursors = game.input.keyboard.createCursorKeys(); }This is the result: The sprite is able to walk through the boundary, but collides correctly with the cacti. http://eponaweb.com/test.html Link to comment Share on other sites More sharing options...
rich Posted May 1, 2014 Share Posted May 1, 2014 Remove this line:player.body.collideWorldBounds = true;It's enabled by default, and explicitly setting it is causing an error somewhere. Link to comment Share on other sites More sharing options...
Saffii Posted May 1, 2014 Share Posted May 1, 2014 Removed the following line;player.body.collideWorldBounds = true;but has not fixed issue. Sprite still able to walk off screen. Thanks for your help and suggestions so far rich. I will have another delve into the examples and see if I can spot anything else. Cheers. Link to comment Share on other sites More sharing options...
Saffii Posted May 1, 2014 Share Posted May 1, 2014 Not sure if it is related, but when the screen loads, only half the sprite appears. player = game.add.sprite(0, 0, 'charc');To make the sprite appear inside the screen onload, I have to change the above parameters to 20, 20. Could this be linked? http://eponaweb.com/test.html Going through examples trying out different scenarios atm so will report back if I find anything. Link to comment Share on other sites More sharing options...
Saffii Posted May 1, 2014 Share Posted May 1, 2014 Ok both the 2 issues; 1) Sprite appearing half off screen when loading2) No world boundary seem to be linked to the tilemaps. I have stripped down my code to just a very basic walking sprite on a screen, no tiles/maps, just background colour.var game = new Phaser.Game(512, 384, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.spritesheet('charc', 'assets/char01.png', 32, 48); } var charc;var cusrors; function create() { game.world.setBounds(0, 0, 1600, 1600); game.physics.startSystem(Phaser.Physics.P2JS); game.stage.backgroundColor = '#006500'; player = game.add.sprite(0, 0, 'charc'); game.physics.p2.enable(player); game.camera.follow(player); player.animations.add('down', [0, 1, 2], 10); player.animations.add('left', [12, 13, 14], 10);player.animations.add('right', [24, 25, 26], 10);player.animations.add('up', [36, 37, 38], 10); cursors = game.input.keyboard.createCursorKeys(); } function update() { player.body.setZeroVelocity(); if (cursors.left.isDown) { player.body.moveLeft(200); player.animations.play('left'); } else if (cursors.right.isDown) { player.body.moveRight(200); player.animations.play('right'); }else if (cursors.up.isDown) { player.body.moveUp(200); player.animations.play('up'); }else if (cursors.down.isDown) { player.body.moveDown(200); player.animations.play('down'); } else { player.animations.stop(); } }Although stripping tilemaps out has located where the problem lies, another one has sprung up. The sprite now appears to randomly stop on the screen asthough there are invisible boundries http://eponaweb.com/test2.html I've obviously broke it or not using it correctly. Anyone spot my mistake? Am I correct to stick to P2 for this style of game? Link to comment Share on other sites More sharing options...
rich Posted May 1, 2014 Share Posted May 1, 2014 Here is the world boundary test I was using. One sprite, one background (just so you can see it moving around the world). This works fine for me, how about you? Note that I spawn the sprite within the world boundary to avoid it popping outside of the bounds. You can drop this example into the examples repo, it uses assets readily found in there.var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });function preload() { game.load.image('stars', 'assets/misc/starfield.jpg'); game.load.spritesheet('ship', 'assets/sprites/humstar.png', 32, 32);}var ship;var starfield;var cursors;function create() { // Our world size is 1600 x 1200 pixels game.world.setBounds(0, 0, 1600, 1200); // Enable P2 and it will use the updated world size game.physics.startSystem(Phaser.Physics.P2JS); starfield = game.add.tileSprite(0, 0, 800, 600, 'stars'); starfield.fixedToCamera = true; ship = game.add.sprite(200, 200, 'ship'); ship.scale.set(2); ship.smoothed = false; ship.animations.add('fly', [0,1,2,3,4,5], 10, true); ship.play('fly'); // Create our physics body. The 'true' parameter enables visual debugging. game.physics.p2.enable(ship, true); // Alternatively create a circle for the ship instead (which more accurately matches its size) // ship.body.setCircle(28); game.camera.follow(ship); cursors = game.input.keyboard.createCursorKeys();}function update() { ship.body.setZeroVelocity(); if (cursors.left.isDown) { ship.body.moveLeft(200); } else if (cursors.right.isDown) { ship.body.moveRight(200); } if (cursors.up.isDown) { ship.body.moveUp(200); } else if (cursors.down.isDown) { ship.body.moveDown(200); } if (!game.camera.atLimit.x) { starfield.tilePosition.x += (ship.body.velocity.x * 16) * game.time.physicsElapsed; } if (!game.camera.atLimit.y) { starfield.tilePosition.y += (ship.body.velocity.y * 16) * game.time.physicsElapsed; }} Saffii 1 Link to comment Share on other sites More sharing options...
Saffii Posted May 1, 2014 Share Posted May 1, 2014 Thanks for the reply. Re: spawning sprite, that works, I wasn't sure if it should work at a default of 0,0 or not, but set it 30,30 and spawns fine. Cheers. Re: world boundary collision. Yep the above code works fine for me too, but it uses an image as the background. As soon as I replace the image with a tilemap, the boundary collision no longer works. See ship going off on the left-side of screen below. I have also replicated this issue in the Tilemap Gravity and Tilemap example scripts in the P2 section. There is a gap in the left side of the tiled boundary. If you jump the sprite into the gap, it just disappears as shown below; I would guess there is something missing for world boundary collision when using a tilemap in P2, but I just can't seem to find it. I have tried all of the P2 example scripts, chopped and changed things, but still no joy Any further ideas? BTW, have only been using Phaser for a week and I love it already. Massive kudos to everyone working on and contributing to it Link to comment Share on other sites More sharing options...
rich Posted May 1, 2014 Share Posted May 1, 2014 Sure but that's a different issue You said you couldn't get the boundary working at all. So I was trying to figure out if at least just that part worked for you or not. Link to comment Share on other sites More sharing options...
Saffii Posted May 1, 2014 Share Posted May 1, 2014 Sorry my mistake, must have worded it incorrectly. Boundary works fine with images and background colour, as I did try this and posted code above, so the boundary collision problem I have is just with tilemaps Link to comment Share on other sites More sharing options...
rich Posted May 1, 2014 Share Posted May 1, 2014 Ok cool, the smaller I can bisect the issue, the faster I can fix it. This gives me a much better place to start from now Link to comment Share on other sites More sharing options...
Saffii Posted May 1, 2014 Share Posted May 1, 2014 Cheers rich. Any other info you need just yell Link to comment Share on other sites More sharing options...
Saffii Posted May 15, 2014 Share Posted May 15, 2014 Any news/updates on this issue please? Cheers. ricricucit 1 Link to comment Share on other sites More sharing options...
ricricucit Posted May 22, 2014 Share Posted May 22, 2014 Experiencing the same issue. Any solution? Link to comment Share on other sites More sharing options...
rich Posted May 22, 2014 Share Posted May 22, 2014 Yeah I put together this test for it the other day which shows how to get it working as expected:var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });function preload() { game.load.tilemap('map', 'assets/tilemaps/maps/collision_test.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('ground_1x1', 'assets/tilemaps/tiles/ground_1x1.png'); game.load.image('walls_1x2', 'assets/tilemaps/tiles/walls_1x2.png'); game.load.image('tiles2', 'assets/tilemaps/tiles/tiles2.png'); game.load.image('ship', 'assets/sprites/thrust_ship2.png');}var ship;var map;var layer;var cursors;function create() { game.physics.startSystem(Phaser.Physics.P2JS); game.stage.backgroundColor = '#2d2d2d'; map = game.add.tilemap('map'); map.addTilesetImage('ground_1x1'); map.addTilesetImage('walls_1x2'); map.addTilesetImage('tiles2'); layer = map.createLayer('Tile Layer 1'); layer.resizeWorld(); // Set the tiles for collision. // Do this BEFORE generating the p2 bodies below. map.setCollisionBetween(1, 12); // Convert the tilemap layer into bodies. Only tiles that collide (see above) are created. // This call returns an array of body objects which you can perform addition actions on if // required. There is also a parameter to control optimising the map build. game.physics.p2.convertTilemap(map, layer); ship = game.add.sprite(200, 200, 'ship'); game.physics.p2.enable(ship); game.camera.follow(ship); // By default the ship will collide with the World bounds, // however because you have changed the size of the world (via layer.resizeWorld) to match the tilemap // you need to rebuild the physics world boundary as well. The following // line does that. The first 4 parameters control if you need a boundary on the left, right, top and bottom of your world. // The final parameter (false) controls if the boundary should use its own collision group or not. In this case we don't require // that, so it's set to false. But if you had custom collision groups set-up then you would need this set to true. game.physics.p2.setBoundsToWorld(true, true, true, true, false); // Even after the world boundary is set-up you can still toggle if the ship collides or not with this: // ship.body.collideWorldBounds = false; cursors = game.input.keyboard.createCursorKeys();}function update() { if (cursors.left.isDown) { ship.body.rotateLeft(100); } else if (cursors.right.isDown) { ship.body.rotateRight(100); } else { ship.body.setZeroRotation(); } if (cursors.up.isDown) { ship.body.thrust(400); } else if (cursors.down.isDown) { ship.body.reverse(400); }}function render() {} Saffii 1 Link to comment Share on other sites More sharing options...
valueerror Posted May 23, 2014 Share Posted May 23, 2014 hey rich.. thx for that example.. this works as expected.. BUT if i want to use collisionGroups there seems to be something missing..just setting the 5th parameter of setBoundsToWorld to true changes nothing.. my objects are not colliding with any bounds.. what am i missing? i just added collisiongroups to the example and defined two objects to be in this collision groups.. they collide with eachother but not with the bounds... Link to comment Share on other sites More sharing options...
rich Posted May 23, 2014 Share Posted May 23, 2014 You need to add the world bounds to their groups too. Link to comment Share on other sites More sharing options...
valueerror Posted May 24, 2014 Share Posted May 24, 2014 puhh.... sorry to bother you again.. but i can't find out how this is done.. a short line of code would be really helpful... thank you! Link to comment Share on other sites More sharing options...
valueerror Posted May 25, 2014 Share Posted May 25, 2014 ok rich.. i figured it out after reading the examples again (which didn't help at all) and half an hour trial and error method.. what i came up with confuses me a LOT.. i do NOT need to set bounds to world.. (as long as i'm ok with the fact that my world has all 4 bounds..) or update the bounds collision group (as it's done in the examples)//game.physics.p2.setBoundsToWorld(true, true, true, true, true);//game.physics.p2.updateBoundsCollisionGroup();i just had to define my collisiongroups (for players and enemies) AFTER i call somelayer.resizeWorld();(also setBoundsToWorld() needs to be placed after the line above if i want it to work..) Link to comment Share on other sites More sharing options...
valueerror Posted August 5, 2014 Share Posted August 5, 2014 hmm.. my post above is still accurate.. i definitely need to be careful where in my code i set the collision groups.. otherwise the bounds will NOT work.. i need to write the following lines in this order:layerforeground = map.createLayer('foreground'); layerforeground.resizeWorld(); game.physics.p2.setBoundsToWorld();playerCG = game.physics.p2.createCollisionGroup();if i create the playerGC before the line setBoundsToWorld .. nothing.. no bounds are set... does this make sense? Link to comment Share on other sites More sharing options...
Ousaf Posted November 9, 2014 Share Posted November 9, 2014 Hi..!I have worldBoundCollision Problem it tried to exactly copy paste code of example of wolrdBoundCollision (http://examples.phaser.io/_site/view_full.html?d=p2%20physics&f=world+move.js&t=world%20move) But it's not working please help me out Here is my source code <!doctype html><html><head> <script src="phaser.min.js"></script> </head> <body> <script type="text/javascript">var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('stars', 'assets/misc/starfield.jpg'); game.load.spritesheet('ship', 'assets/sprites/humstar.png', 32, 32); game.load.image('ball', 'assets/sprites/shinyball.png'); } var ship;var starfield;var cursors; function create() { game.world.setBounds(0, 0, 1600, 1200); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.defaultRestitution = 0.9; starfield = game.add.tileSprite(0, 0, 800, 600, 'stars'); starfield.fixedToCamera = true; balls = game.add.group(); balls.enableBody = true; balls.physicsBodyType = Phaser.Physics.P2JS; for (var i = 0; i < 50; i++) { var ball = balls.create(game.world.randomX, game.world.randomY, 'ball'); ball.body.setCircle(16); } ship = game.add.sprite(200, 200, 'ship'); ship.scale.set(2); ship.smoothed = false; ship.animations.add('fly', [0,1,2,3,4,5], 10, true); ship.play('fly'); // Create our physics body - a 28px radius circle. Set the 'false' parameter below to 'true' to enable debugginggame.physics.p2.enable(ship, false); ship.body.setCircle(28); game.camera.follow(ship); cursors = game.input.keyboard.createCursorKeys(); } function update() { ship.body.setZeroVelocity(); if (cursors.left.isDown) {ship.body.moveLeft(200); } else if (cursors.right.isDown) {ship.body.moveRight(200); } if (cursors.up.isDown) { ship.body.moveUp(200); } else if (cursors.down.isDown) { ship.body.moveDown(200); } if (!game.camera.atLimit.x) { starfield.tilePosition.x += (ship.body.velocity.x * 16) * game.time.physicsElapsed; } if (!game.camera.atLimit.y) { starfield.tilePosition.y += (ship.body.velocity.y * 16) * game.time.physicsElapsed; } } function render() { }</script> </body></html> Link to comment Share on other sites More sharing options...
Ousaf Posted November 9, 2014 Share Posted November 9, 2014 HAVING problem with world bounds i exactly copy paste code AS rich Mentaioned but the collision not works please help me out here is complete code <!doctype html><html><head> <script src="phaser.min.js"></script> </head> <body> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }); function preload() { game.load.image('stars', 'assets/misc/starfield.jpg'); game.load.spritesheet('ship', 'assets/sprites/humstar.png', 32, 32); } var ship;var starfield;var cursors; function create() { // Our world size is 1600 x 1200 pixels game.world.setBounds(0, 0, 1600, 1200); // Enable P2 and it will use the updated world size game.physics.startSystem(Phaser.Physics.P2JS); starfield = game.add.tileSprite(0, 0, 800, 600, 'stars'); starfield.fixedToCamera = true; ship = game.add.sprite(200, 200, 'ship'); ship.scale.set(2); ship.smoothed = false; ship.animations.add('fly', [0,1,2,3,4,5], 10, true); ship.play('fly'); // Create our physics body. The 'true' parameter enables visual debugging.game.physics.p2.enable(ship, true); // Alternatively create a circle for the ship instead (which more accurately matches its size) // ship.body.setCircle(28); game.camera.follow(ship); cursors = game.input.keyboard.createCursorKeys(); } function update() { ship.body.setZeroVelocity(); if (cursors.left.isDown) {ship.body.moveLeft(200); } else if (cursors.right.isDown) {ship.body.moveRight(200); } if (cursors.up.isDown) { ship.body.moveUp(200); } else if (cursors.down.isDown) { ship.body.moveDown(200); } if (!game.camera.atLimit.x) { starfield.tilePosition.x += (ship.body.velocity.x * 16) * game.time.physicsElapsed; } if (!game.camera.atLimit.y) { starfield.tilePosition.y += (ship.body.velocity.y * 16) * game.time.physicsElapsed; } } </script> </body></html> Link to comment Share on other sites More sharing options...
Recommended Posts