Search the Community

Hi, I am trying to modify the 'Pick Up Object' phaser example: https://phaser.io/examples/v2/p2-physics/pick-up-object How it should work is that when a user clicks on one of the shapes at the bottom of the screen it should generate a new shape inside the yellow containing block. I want the shapes to restricted inside the yellow box so that they cannot pass outside. Here is my demo version: http://towerofconfidence.stage.pixeledeggs.com/test/index4.html I have tried the following code - but I am not sure what is going wrong with the boundaries - any help/suggestions would be much appreciated! var game = new Phaser.Game(640, 1139, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); // set the world bounds to match the yellow container game.world.setBounds(167, 0, 306, 500); // center camera game.camera.bounds.setTo(0, 0, 640, 1139); // load the background - this is larger than the screen var mainBG = game.add.sprite(0, -3622, 'mainBG'); // add shapes/buttons to the shapeMenu button1 = game.add.button(80, 760, 'button1', actionOnClickButton, this, 2, 1, 0); button2 = game.add.button(254, 800, 'button2', actionOnClickButton, this, 2, 1, 0); button3 = game.add.button(486, 770, 'button3', actionOnClickButton, this, 2, 1, 0); Then the logic for placing the shapes follows the 'Pick Up Object' example - using PS physics ands boundsCollisionGroup... Thanks!

Okay so I have a rectangle boundary and I have 4 circles. Each of which I want to collide within this boundary. Is there a way to collide each sprite within this boundary without using p2? var rectangleBoundary = new Phaser.Rectangle(0, 120, 900, 1800); var c1 = game.add.sprite(200, 350, 'qcircle'); var c2 = game.add.sprite(500, 190, 'qcircle'); var c3 = game.add.sprite(120, 30, 'qcircle'); var c4 = game.add.sprite(590, 120, 'qcircle');

Is there a way to suggest new examples? I've created collision groups using P2 physics such that the Tilemap and the player's ship collide, the player's ship and the panda collide, and the Tilemap and the panda do not collide. However, I had trouble getting either the player's ship or the panda to collide with the world boundary. My understanding was that: Since I called "layer.resizeWorld()", I must call "game.physics.p2.setBoundsToWorld(true, true, true, true, ???)" to reset the P2 physics' world bounds. [reason: example lines 48-54] Since I called "this.physics.p2.createCollisionGroup()", I must call "game.physics.p2.setBoundsToWorld(true, true, true, true, true)" to reset the P2 physics' world bounds *with/as a collision group*, -or- call "game.physics.p2.updateBoundsCollisionGroup()" to update the world bounds to be their own collision group, so that other collision groups can collide with the world bounds. [reason: example lines 30-32]. Setting the 5th parameter to setBoundsToWorld() to "true", for "If true the Bounds will be set to use its own Collision Group." (source in documentation) makes calling "updateBoundsCollisionGroup()" extraneous. It seemed like I should be able to call "ship.body.collideWorldBounds = true" somewhere and have it work (or maybe not? ...), but it didn't, and leaving it out entirely didn't work either. Finally I found [this comment] which clarified the order which functions had to be called in. I now have the below example working with: tilemap and ship collide tilemap and panda do not collide world boundary and ship do not collide world boundary and panda collide ship and panda collide CODE: 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'); game.load.image('panda', 'assets/sprites/spinObj_01.png'); } var ship; var map; var layer; var cursors; var panda; var tilesCollisionGroup; var shipCollisionGroup; var pandaCollisionGroup; function create() { game.stage.backgroundColor = '#2d2d2d'; game.physics.startSystem(Phaser.Physics.P2JS); 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); // 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 controls if the boundary should use its own collision group or not. In this case we do require // that because custom collision groups have been set up for the ship and panda. game.physics.p2.setBoundsToWorld(true, true, true, true, true); // collision groups must be created after world boundaries have been finalized/fixed for the groups to collide with the boundaries tilesCollisionGroup = this.physics.p2.createCollisionGroup(); shipCollisionGroup = this.physics.p2.createCollisionGroup(); pandaCollisionGroup = this.physics.p2.createCollisionGroup(); for (var bodyIndex = 0; bodyIndex < map.layer.bodies.length; bodyIndex++) { var tileBody = map.layer.bodies[bodyIndex]; tileBody.setCollisionGroup(tilesCollisionGroup); tileBody.collides([shipCollisionGroup]); } ship = game.add.sprite(400, 200, 'ship'); game.physics.p2.enable(ship); ship.body.setCollisionGroup(shipCollisionGroup); ship.body.collides([tilesCollisionGroup, pandaCollisionGroup]); // Even after the world boundary is set-up you can still toggle if the ship collides or not with this: ship.body.collideWorldBounds = false; panda = game.add.sprite(200, 200, 'panda'); game.physics.p2.enable(panda); panda.body.setRectangle(40, 40); panda.body.setCollisionGroup(pandaCollisionGroup); panda.body.collides([pandaCollisionGroup, shipCollisionGroup]); game.camera.follow(ship); 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() { } Lesson: These functions MUST be called in order: map.createLayer() layer.resizeWorld() game.physics.p2.setBoundsToWorld() game.physics.p2.createCollisionGroup()

Hi, I actually posted this question on StackOverflow but it got really just few views (only 6 since yesterday) so I'm posting it here in hope I would get help. Here's my question: In Phaser framework I can set the world bounds by using: this.game.physics.p2.setBounds(90, 90, 400, 400, true, true, true, true, false); This will make world bounds in a rectangle shape. What I need, however, is to make a circle shaped world bounds (I have a drum in which I want the balls to "jump"). One idea I have (if more elegant solution won't be found) is to make a bunch of static objects around the image of the drum (similar to this example) but I would like to avoid that if possible, so if someone knows how to solve this help would be appreciated. Also, I did see this pinball example but I couldn't find a way to get this in p2 physics. So, a nudge in the right direction would be great!

Hi guys. Object does not collide with the boundaries of the world in my mobile project. Please tell me what could be the case, for example, I wrote a short code, but the sprite passes through the boundaries of the world without collide with them. /** * Created by Buggy on 14.08.14. */var hero;var cursors;BasicGame.GameTest = function (game) { // When a State is added to Phaser it automatically has the following properties set on it, even if they already exist: this.game; // a reference to the currently running game this.add; // used to add sprites, text, groups, etc this.camera; // a reference to the game camera this.cache; // the game cache this.input; // the global input manager (you can access this.input.keyboard, this.input.mouse, as well from it) this.load; // for preloading assets this.math; // lots of useful common math operations this.sound; // the sound manager - add a sound, play one, set-up markers, etc this.stage; // the game stage this.time; // the clock this.tweens; // the tween manager this.state; // the state manager this.world; // the game world this.particles; // the particle manager this.physics; // the physics manager this.rnd; // the repeatable random number generator};BasicGame.GameTest.prototype = { create: function () { var back = this.add.sprite(0, 0, 'game', 'back.png'); this.physics.startSystem(Phaser.Physics.P2JS); this.physics.p2.restitution = 0.8; hero = this.add.sprite(200, 200, 'game'); hero.anchor.setTo(0.5, 0.5); hero.pivot.y = 10; hero.animations.add('idle', Phaser.Animation.generateFrameNames('tomato_idle/', 0, 11, '', 4), 15, true); hero.animations.play('idle'); // Create our physics body. A circle assigned the playerCollisionGroup game.physics.p2.enable(hero); // This boolean controls if the player should collide with the world bounds or not hero.body.collideWorldBounds = true; cursors = game.input.keyboard.createCursorKeys(); }, update: function () { hero.body.setZeroVelocity(); if (cursors.left.isDown) { hero.body.moveLeft(200); } else if (cursors.right.isDown) { hero.body.moveRight(200); } if (cursors.up.isDown) { hero.body.moveUp(200); } else if (cursors.down.isDown) { hero.body.moveDown(200); } }};