Search the Community

Showing results for tags 'p2'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 316 results

  1. I'm making a game using Phaser, P2 physics and webpack. When it comes to P2 I can not use custom physic shapes because they won't collide with world bounds. I'm using Phaser webpack example template ( Templates/Webpack) and an example from the website ( The point is that when using custom colision shapes, entities won't collide. But they do if I use the default squared shapes or the circle ones that Phaser provide. The game code is simple and you can check it here: /** * Import Phaser dependencies using `expose-loader`. * This makes then available globally and it's something required by Phaser. * The order matters since Phaser needs them available before it is imported. */ import PIXI from 'expose-loader?PIXI!phaser-ce/build/custom/pixi.js'; import p2 from 'expose-loader?p2!phaser-ce/build/custom/p2.js'; import Phaser from 'expose-loader?Phaser!phaser-ce/build/custom/phaser-split.js'; var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image('tetrisblock1', 'assets/sprites/tetrisblock1.png'); game.load.image('tetrisblock2', 'assets/sprites/tetrisblock2.png'); game.load.image('tetrisblock3', 'assets/sprites/tetrisblock3.png'); game.load.physics('physicsData', 'assets/physics/sprites.json'); } var tetris1; var tetris2; var tetris3; var mouseBody; var mouseConstraint; function create() { // Enable p2 physics game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.gravity.y = 1000; tetris1 = game.add.sprite(300, 100, 'tetrisblock1'); tetris2 = game.add.sprite(375, 200, 'tetrisblock2'); tetris3 = game.add.sprite(450, 300, 'tetrisblock3'); // Create collision group for the blocks var blockCollisionGroup = game.physics.p2.createCollisionGroup(); // This part is vital if you want the objects with their own collision groups to still collide with the world bounds // (which we do) - what this does is adjust the bounds to use its own collision group. game.physics.p2.updateBoundsCollisionGroup(); // Enable the physics bodies on all the sprites game.physics.p2.enable([ tetris1, tetris2, tetris3 ], false); tetris1.body.clearShapes(); tetris1.body.loadPolygon('physicsData', 'tetrisblock1'); tetris1.body.setCollisionGroup(blockCollisionGroup); tetris1.body.collides([blockCollisionGroup]); tetris2.body.clearShapes(); tetris2.body.loadPolygon('physicsData', 'tetrisblock2'); tetris2.body.setCollisionGroup(blockCollisionGroup); tetris2.body.collides([blockCollisionGroup]); tetris3.body.clearShapes(); tetris3.body.loadPolygon('physicsData', 'tetrisblock3'); tetris3.body.setCollisionGroup(blockCollisionGroup); tetris3.body.collides([blockCollisionGroup]); // create physics body for mouse which we will use for dragging clicked bodies mouseBody = new p2.Body();; // attach pointer events game.input.onDown.add(click, this); game.input.onUp.add(release, this); game.input.addMoveCallback(move, this); } function click(pointer) { var bodies = game.physics.p2.hitTest(pointer.position, [ tetris1.body, tetris2.body, tetris3.body ]); // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system var physicsPos = [game.physics.p2.pxmi(pointer.position.x), game.physics.p2.pxmi(pointer.position.y)]; if (bodies.length) { var clickedBody = bodies[0]; var localPointInBody = [0, 0]; // this function takes physicsPos and coverts it to the body's local coordinate system clickedBody.toLocalFrame(localPointInBody, physicsPos); // use a revoluteContraint to attach mouseBody to the clicked body mouseConstraint =, [0, 0], clickedBody, [game.physics.p2.mpxi(localPointInBody[0]), game.physics.p2.mpxi(localPointInBody[1]) ]); } } function release() { // remove constraint from object's body game.physics.p2.removeConstraint(mouseConstraint); } function move(pointer) { // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system mouseBody.position[0] = game.physics.p2.pxmi(pointer.position.x); mouseBody.position[1] = game.physics.p2.pxmi(pointer.position.y); } function update() { } function render() { // game.debug.text(result, 32, 32); } If you need to have a look at the project, you can check it here: Any toughts about why the collisions are not working when using custom collision shapes? Thanks in advance, Alex
  2. Hi there, I'm working on some P2 physic and getting the attached result, which is weird because the two objects collides without overlapping on one another. I'm I missing something? The code is as follow: game.physics.enable(car, Phaser.Physics.P2JS); car.body.debug = true car.body.angle = car.angle car.body.rotation = car.rotation car.body.addCapsule(70,20) car.body.setCollisionGroup(this.carCollisionGroup); var v =100; var angle = car.body.angle; var vx = v * Math.cos(angle * (Math.PI/180)) var vy = v * Math.sin(angle * (Math.PI/180)) car.body.velocity.x = vx; car.body.velocity.y = vy; Thanks
  3. Polygon collision does not work

    Hi Everyone! Hopefully someone can help with the issue I have faced. I am building a simple racing game and want to implement collision between car and other objects. I am using p2 physics. When I create primitive body objects (e.g. body.setRectangle) collision works fine, but when i use polygon (body.loadPolygon) i have created in PhysicsEditor the car just rides throw these objects without any collisions. I have tried building very simple objects to exclude "holes" in collide, creating collision groups but unfortunately any of these things helped. Attaching my code and a screenshot Car class: export default class extends Phaser.Sprite { constructor ({ game, x, y, asset }) { super(game, x, y, asset) game.physics.p2.enable(this, true) this.anchor.setTo(0.5) this.body.clearShapes() this.body.loadPolygon('physicsData', 'car') this.body.angle = -90 this.cursors = game.input.keyboard.createCursorKeys() this.velocity = 0 } Obstacle code: create () { = 0.8 =, 0, 2880, 1620, 'map'), 0, 8640, 4860), 3) this.mapAbove =, 0, 'race'), true) this.mapAbove.body.clearShapes() this.mapAbove.body.loadPolygon('physicsData', 'race') = new Car({ game:, x: 3800, y: 3750, asset: 'car' }) } Also i am using this stuff as skeleton - Could troubles be in incorrect packages? Looking forward for Your reply, Thanks!
  4. Online Body Editor Hi guys. during the development in Phaser i found out, that there is no simple online editor for Making Physics bodies for P2 physics in Phaser. So i came up with an simple idea. To do a simple online body editor to make json files for Phaser. I know its super simple and it could do much more things as other desktop body editors can do, but when you want just simple body in two minutes, i think its a good way. I took me less than two hour to do it, so dont judge it for bad appearance and not efficient solutions for the algorithm. Maybe ill do things like more bodies in one json file, or auto edge-tracer adn stuff like that, but fell free to comment and come up with your ideas to improve it for the future. So please, if have have anything to say to this, comment below, i would be pleased.
  5. Part 7 is here, concluding our series: Check out the demo: Thanks for the support throughout the series! Let me know if you want to see more tutorials like these ones.
  6. Phaser P2 Physics fixedX/fixedY?

    When using p2.js bodies have fixedX and fixedY properties which prevents movement on the given axis. It seems to me that when using p2 physics in Phaser-CE I'm unable to access these properties on a sprite body although fixedX and fixedY exist inside the source (here). Am I doing something wrong? I've noticed DOES contain these properties although setting them to true has no effect.
  7. Physics P2 Collision equation

    Hi, i've 2 characters physics p2 enabled, they both can collide with each other, they are also static=False.Which mean that when one run toward another, the second get back and get some velocity. Which properties i've to set to get more control on this effect ? I tried editing masse/inertia but got had not good results. Any tips ? I'm also looking for an equation that show how the effect works depending on theses parameters. Thx
  8. onbegincontact not work

    Hi all, I want to use p2 onbegincontact to detect 2 p2 body overlap and want to do some actions, I tried to write like this body1.onBeginContact.add(func, this); but it seems when it overlap another body, the callback func did not run. is there any tips for using this event, thanks.
  9. Part 5 of our series has arrived: Also check out the demo for this part: In this part you will learn how to add those awesome eyes to your snakes!
  10. Part 4 of making with Phaser is here: Check out the demo for this part: In this part you will learn how to recreate the unique collisions seen in
  11. This is a work in progress. It's a sandbox physics pinball (etc.) game in which the player can draw the walls, bumpers, flippers, plungers, and other assorted parts, play with the board she's made, and share it with her friends. I'm making it with phaser using the p2 physics engine. Here's a link to an example board: If you go to, you'll start with a blank board. You'll need to login with your google account (minimum credentials) to save/fork boards. Be sure to click 'help' and read the directions (screenshot below). Lots of stuff doesn't work yet. Thanks for your thoughts. Here's a gameplay demo:
  12. Hi All, I have just released my new game Tap-Jet on Play Store. Tap-Jet is a simple addictive game with easy gameplay. I used Phaser Game Framework with p2 physics engine and wrapped into Android game using Cocoon. Google Play Link: I hope you will like Tap-Jet!
  13. Hi Everyone, I need guidance on how can I approach this problem: Would like to apply a tiled texture to complex polygons. I'm using P2 for the physics and tiled for the level editor. I would like to get something similar to worms where the terrain has a tiled texture, the top has grass and the bottom is darker. These are some examples of what I would like to achieve: I don't care at all about destructible terrain. This is how my level looks now with polygons from tiled:
  14. Hi, I'm using a tileset for my maps. Not all tiles fill their whole square though, like the top and bottom blocks there, for example. The player character is a simple square guy. Here's my problem : for example in this part of one of the map, as long as there's one tiny bit of rock in a tile, Arcade will consider the whole tile should detect collisions. Meaning the player will effectively bounce back against thin air. To have more precise collisions, I'd like to have the character using Arcade physics as it's a simple square and I don't need anything fancy for its physics, and I'd like to use P2 to add detailed physics for collision with the "not entirely filled" map tiles. Is that even possible ? How would you go about doing it ? For now, I've made a json file with physics applied to the whole tileset (using PhysicsEditor) and imported it in the preload method of the Preload state like that : //Preload.js InteractiveResume.Preload.prototype = { preload: function() { //... //load Tiled map this.load.tilemap('grottoMap', 'assets/tilemaps/testGrotto.json', null, Phaser.Tilemap.TILED_JSON); //the terrain tileset and its physics this.load.image('mainTileset', 'assets/png/mainTileset.png');"mainTileset-physics", "assets/json/mainTileset-physics.json"); } } I setup my game maps with an external method located in a "global namespace", the method looks like this : //gameFunctions.js var funcs = { mapSetup: function(map) { =; //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset'mainTileset', 'mainTileset', 16, 16); //create layers config.currentState.firstBackgroundLayer ='firstBackgroundLayer'); config.currentState.secondBackgroundLayer ='secondBackgroundLayer'); config.currentState.blockedLayer ='blockedLayer'); //resizes the game world to match the layer dimensions config.currentState.firstBackgroundLayer.resizeWorld(); config.currentState.secondBackgroundLayer.resizeWorld(); config.currentState.blockedLayer.resizeWorld(); //collision on blockedLayer, 100000, true, 'blockedLayer');, config.currentState.blockedLayer); } } (I had to define a global variable 'config.currentState' to access the 'this' keyword representing the current state outside of it, if anyone knows a better solution I'd be very thankful as its quite heavy to use) And then in my Grotto state : // Grotto.js InteractiveResume.Grotto.prototype = { create: function() { //Creating the map, player sprite and everything... //setup Arcade physics for the player character; }, update: function() { //collisions, this.blockedLayer); //... } } Could anyone point me to the correct direction here ? I must admit I'm totally lost
  15. Collide problem in P2 Physics

    Hello, I am making a simple haxball clone and I have a problem. I have a player and a ball on the field, and there are field lines on top, left, right and bottom. When player hits the ball, the ball sometimes goes out of the lines (it goes the other side when it should hit the line and come back). It generally happens when the ball goes fast. I thought it is a bug but I probably miss something because I am newbie on Phaser. This is how I implemented a line: this.topLine = this.add.sprite(400, 40, 'line'); this.topLine.scale.setTo(760, 2); this.physics.p2.enable(this.topLine); this.topLine.body.static = true; And here is the ball implementation: this.ball = this.add.sprite(400, 250, 'ball'); this.physics.p2.enable(this.ball, true); this.ball.body.setCircle(10); this.ball.body.damping = 0.7; I also added the images. Thanks in advance.
  16. Parts 2 & 3 of my new series, How to make with Phaser, are here! Part 2 - Creating your first snake: Part 3 - Extending snakes to be players or bots: Enjoy!
  17. Check out the first part in our tutorial series on how to make Also, take a look at the demo of what you will be making: Enjoy!
  18. Hello all and thanks ahead of time for any help. This example has a block you move around with the arrow keys and it bumps into other objects: I am trying to make the block draggable by a mouse (or touch). I added this code to create() to create a transparent copy of the box (for visualization/testing purposes, this sprite would eventually be invisible) input_body = game.add.sprite(500, 200, 'block'); game.physics.p2.enable(input_body, false); input_body.body.setCollisionGroup( game.physics.p2.createCollisionGroup() ); input_body.alpha = 0.5; And then I added this code to update() to make my transparent box follow the mouse point, or last touch point input_body.body.x = game.input.x; input_body.body.y = game.input.y; And then I added this code to update() to make the block follow my mouse on drag. if (game.input.activePointer.isDown) { if (constraint_count == 0) { input_constraint = game.physics.p2.createLockConstraint(input_body, block.body); constraint_count = 1; } else if (constraint_count == 1) { game.physics.p2.removeConstraint(input_constraint); constraint_count = 0; } } else { if (constraint_count == 1) { game.physics.p2.removeConstraint(input_constraint); } constraint_count = 0; } And it works!!...but what happens is my mouse pointer and my transparent block (input_body) get out of sync. And the input_body ends up sort of halfway between the block and the mouse pointer. Letting go of the mouse (which removes the constraint) leaves the input_body at the same offset from the mouse pointer. Once I click, it never lines up again. I'm guessing I'm missing something with the LockConstraint, and the block is acting like an achor weighing down my drag. But I'm not sure how to fix it. Thanks for any and all help!
  19. I have this code: map ='ground'); //map.addTilesetImage('main-tileset', 'tiles'); map.addTilesetImage('base_out_atlas', 'tiles1'); map.addTilesetImage('build_atlas', 'tiles2'); map.addTilesetImage('obj_misk_atlas', 'tiles3'); map.addTilesetImage('terrain_atlas', 'tiles4'); baseLayer1 = map.createLayer('Sub1'); baseLayer1.resizeWorld(); baseLayer2 = map.createLayer('Sub2'); baseLayer2.resizeWorld(); baseLayer3 = map.createLayer('Sub3'); baseLayer3.resizeWorld(); initPlayer(); baseLayer4 = map.createLayer('Super1'); baseLayer4.resizeWorld(); baseLayer5 = map.createLayer('Super2'); baseLayer5.resizeWorld(); baseLayer6 = map.createLayer('Super3'); baseLayer6.resizeWorld(); collisionBodies =, 'Collisions'); I'm sure you can see what it's doing, but basically, I create a few layers, initialize my player, create a few more layers, and then convert my Tiled object layer into collision objects. My question is, what do I do with `collisionBodies`? Will `convertCollisionObjects` put the objects onto the map? It should by default, right? Does `convertCollisionObjects` give my objects bodies? I think they do, but my player is not stopping when he touches them. Am I supposed to write a function to handle what actually happens when they collide? Sorry for all the questions, I can't find an example of this in use in the documentation.
  20. Body Overlap Detection

    Hi everyone, I am new to Phaser framework and it's great! I have made a lot of progress on this Street Fighter game I am doing. A little background of my problem: I have my code set up that when I press W (Medium Punch), I increase the width of the sprite by via setRectangle playerKen.body.setRectangle(70, 80, -18); once I expanded the hitbox , I play the sprite, then set the width back to its original size once the animation has finished playing: kenAnimation ='standingMediumPunch', 10, false).onComplete.add(function () { //reset the graphics back playerKen.body.setRectangle(35, 80, -18); playerKen.body.setCollisionGroup(kenCollisionGroup); playerKen.body.collides(mBisonCollisionGroup, hitEnemy, this); kenAttacking = false; playerKen.body.velocity.x = 0;'standing', 7, true); playerKen.body.static = false; //console.log('punching'); }, this); I have also programmed the AI too, won't get into that. But my issue is the overlapping hitboxes. See the attached photo... When a situation like this occurs when I am punching and the AI is punching as well, the health of the player and the AI does not decrease. I looked into but the getBounds() method only gets the width of the sprite, not the hitbox. How can I see whether the two hitboxes have intersected? By the way, I am using p2 physics. Thanks a bunch!
  21. Hello! I am the P2 physics. I have a sprite scaled. My problem is that the polygon loaded to the sprite does not scale with it. It is possible to scale the polygon?
  22. Phaser P2 Collision Problem

    Hi all, I'm working on a little racing game and using this map: I'm using p2 physics. Whenever the car touches the gras it should become slower. In order to achieve that I cut out the inner gras and created a polygon shape for it. /*Adding car*/ car = game.add.sprite(1100,300,'car');"car"; car.width=100; car.height=175; game.physics.p2.enable(car); car.body.angle = 90;; inner_gras = game.add.sprite(1320, 940, 'gras'); game.physics.p2.enable(inner_gras); inner_gras.body.kinematic = true; inner_gras.body.clearShapes(); inner_gras.body.loadPolygon('collision', 'inner_gras');"inner_gras"; For the collision detection I use game.physics.p2.setPostBroadphaseCallback(): game.physics.p2.setPostBroadphaseCallback(hitGras, this); function hitGras(body1,body2){ if(( === "inner_gras" && === "car") ||( === "car" && === "inner_gras")){ console.log(body1);//console.log(body2.sprite); return true; } else{ return false; } } The collision detection works fine, but whenever I try to do something else than returning true, for example changing the speed or something else, a contact between the car and the inner_gras sprite is detected, where they shouldn't have any contact. It seems like the inner_gras sprite does still have the rectangular shape, although applying clearShapes(). Any ideas or suggestions on how to solve this problem, or what to use instead? Thanks in advance!
  23. Hello, everybody! As usually, I'm a newbie in Phaser and JS (and English, as well) :-) Now I'm trying to achieve this approach in Phaser-CE 2.7.8. Slow spinning wheel (actually N-gon, with 12 sides for now) shuffling bunch of balls (30-50) inside of it. When the hole on the wheel's edge reaches some bottom point one ball must fall out (random bal, with random number on it, got from the server. I don't know yet how much sides the wheel will be, and to apply same polygon to p2.body.polygon I put all the points into array (lines).Next I rearrange lines and it's directions to form "seamless polygon": end point of one line is start point of next line. And here I faced first problem: last line not drawn (top left green line). This poly drawn at line 85. But in the console log i can see that line coords! Second problem: adding sprite converted from graphics (via generateTexture()) and putting at specified coords work well, but if I uncomment sprite.body.addPoligon at line 93, sprite moved across X and Y axis, looks little thicker, and body(.addPolygon) not collinear with a sprite! May be I'm completely wrong and that wheel can be made much easier? Here is my code:
  24. /** * Takes the collision data defined in the collision editor of Tiled and applies it to * and exisiting tilemap for use with P2 physics bodies. * * Tilemap json data MUST be loaded in the Preload state/function using game.load.json() before this function is called * map must only have ONE tileset * each tile can only have ONE polyline set for it's collision * the polyline MUST be a complete shape (the last point is indentical to the first) * * @param {Phaser.Tilemap} map - this is the map which you want polylines added to * @param {string} key - this is the key for the raw json tilemap data loaded in the preload state * @param {bool} [roundValues=true] - Will round the x,y coordinates for the polylines to nearest integer */ addPolylineCollision: function (map, key, roundValues) { if (roundValues === undefined) { roundValues = true; } // json with the collision data that was omitted by phaser let data =; //console.log(data); let collisionData = data.tilesets[0].tiles; // array of the collision polygons that will get added to the tilemap var polygons = []; // tiles in the Collision Layer that will help define the polygons let mapData = map.layers[map.getLayer('Collision Layer')].data; for (let row in mapData) { for (let col in mapData[row]) { var wall = collisionData[mapData[row][col].index - 1]; if (wall !== undefined) { for (let i in wall.objectgroup.objects) { let poly = { height: 0, name: "", polyline: [], properties: undefined, type: "", visible: true, width: 0, x: mapData[row][col].x * map.tileWidth, y: mapData[row][col].y * map.tileHeight }; for (let j in wall.objectgroup.objects[i].polyline) { var coords = [wall.objectgroup.objects[i].polyline[j].x, wall.objectgroup.objects[i].polyline[j].y]; if (roundValues) { coords[0] = Math.round(coords[0]); coords[1] = Math.round(coords[1]); } poly.polyline.push(coords); } polygons.push(poly); } } } } console.log(polygons); map.collision['Collision Layer'] = polygons; } I'm writing a function to support Tiled's Collision editor and P2 physics. Everything seems fine but the values for all the polygons I defined get mangled to the same values. I thought it was a scope issue but nothing seems to work: pic: (Links to an external site.)Links to an external site. paste: (Links to an external site.)Links to an external site. By the time execution reaches line 57, the console.log call, all the values in the polyline arrays are totally messed up, they're set to values between -1 and 1, and are always set to the same values every time. At every other previous point in this functions lifetime everything works exactly as expected.