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 306 results

  1. 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
  2. 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:
  3. 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
  4. 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.
  5. 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!
  6. 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!
  7. 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!
  8. 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.
  9. Greetings! In the P2 Physics Engine outside of Phaser (server-side P2), is there a direct way of specifying world bounds? (To get same results as this example) Or do I have to manually specify each side? (Like this example) Thanks.
  10. Check out my new tutorial on creating vehicles and terrain at! You can see the demo of this tutorial here: Don't forget to let me know when you have created the next hit 2D driving game!
  11. 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!
  12. 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!
  13. 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?
  14. 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:
  15. /** * 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.
  16. Hi, I loaded my tiles with game.physics.p2.convertTilemap() and it works. However, each tile is a square block and my "player" is floating on slanted tiles (similer to problem mentioned in here). Using Tiled editor's "Tile Collision Editor", i defined the polygon I want but Phaser does not seem to pick it up. Part of the exported JSON looks like this (tells me that the polyline was created): "tilesets":[ { "firstgid":1, "image":"tiles.png", "imageheight":374, "imagewidth":374, "margin":0, "name":"tiles", "properties": { }, "spacing":2, "tileheight":32, "tiles": { "57": { "objectgroup": { "draworder":"index", "height":0, "name":"", "objects":[ { "height":0, "name":"", "polyline":[ { "x":0, "y":0 }, { "x":32, "y":-32 }], "properties": { }, "rotation":0, "type":"", "visible":true, "width":0, "x":0, "y":32 }], "opacity":1, "type":"objectgroup", "visible":true, "width":0, "x":0, "y":0 } } }, "tilewidth":32 }, { "firstgid":122, "image":"items.png", "imageheight":270, "imagewidth":270, "margin":0, "name":"items", "properties": { }, "spacing":2, "tileheight":32, "tilewidth":32 }, { "firstgid":186, "image":"sprites.png", "imageheight":100, "imagewidth":238, "margin":0, "name":"sprites", "properties": { }, "spacing":2, "tileheight":32, "tilewidth":32 }]How do I load the tile's collision polyline/polygon in Phaser when loading the tiled layer?
  17. I have a "bouncy" ball that will hit a fixed world surface and act as you would expect. However, when the world moves upward to the ball, the bouncing slows and if the world is moving fast enough, the bouncing stops completely and the ball "hugs" the world surface. What I'd like to happen is to transfer the upward velocity of the world to the ball. So if the ball is falling and the world is moving up, I want the ball to act as if it has been hit by a swinging baseball bat. Right now, the ball acts as if it has been contacted by a magnet. I just can't seem to find the right properties to make this type of collision happen. Thanks! And thank you to all who have asked and answered the many questions I had while I was building my game. Such a great resource!
  18. Hi, I want to make a pinball game with phaser and p2 js physics. I have a probleme with flips. To make the rotation movement, i must to change anchor to 0,0 with : this.flipGauche.anchor.set(0); but with this the sprite the anchor'sprite change but no the body
  19. overlap

    How can I check if two sprite are overlapping or not at a given moment if both of them has special shape with loadpolygon? (eg. crosshairs rectangle vs. enemy on a click) Do I need to use P2? Maybe the solution is obvious, but I am absolutely beginner in Phaser.
  20. Is there a way to get collisions to work with p2, or to go through the list of active bullets and get thier x and y location, Or what do I loose if I switch from p2 to arcade. Thanks
  21. Hi All, I have just uploaded my new game Quick Pinball. It is classic pinball game. I used Phaser P2 Physics and Cocoon for wrapper. Here is the link: I hope you like the game
  22. How to use P2 Physics with each layer object? Code this.saws =; this.saws.enableBody = true;'saws', 4, 'saw', 0, true, false, this.saws); this.saws.forEach(function(saw) { saw.body.clearShapes(); saw.body.loadPolygon('physicsData', 'saw'); });
  23. Check out our new tutorial, Phaser Cars & Trucks with P2: We will cover constraining wheels to the truck body, increasing wheel grip, and creating a bouncy chassis effect that is seen in many popular games today. See what you will learn to create:
  24. Our new tool, Loon Physics, has just been released to open beta for free! Try it now to export P2 Physics body polygons for Phaser. Use a URL to test live without exporting files. Use Loon Physics here: Learn how to make a game with P2 Physics using this brand new tutorial:
  25. Hello, In the tiled map editor is a tilecollision editor i was just wondering if there is any way to get the stuff u do in there to work in phaser, or any other way to set a specific collision polygon to a tile.