Search the Community

Showing results for tags 'P2'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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 319 results

  1. When adding a rectangle to a p2 body you have the option to specify a rotation in radians for the shape which it appears is just passed directly on to the p2 shape constructor (hence the need for it to be in radians instead of degrees as are used elsewhere in Phaser). I find that if I use any value other than 0 for a rotation, the shape is properly rotated however drawing of the body via the debug parameter ignores the rotation. Here is a quick codepen illustrating the bug. The character should have a long protrusion coming out the bottom achieved with a rotated rectangle. The physics collision seems to indicate that the rotation has occurred correctly, however the debug shape is not drawn rotated. Notice that he appears to sit a little ways off the ground due to the un-rotated debug visualization of the shape. It seems to me this must be a bug (or maybe a limitation of the debugbody drawing system) but I thought I would post here first for thoughts. I will likely dig in and see if I can find a fix / workaround for this. Phaser P2 DebugBody rotation bug (codepen)
  2. P2 sprite collision group pain

    Hi all, Been banging my head against the wall for ages with this. Default P2 collision works, I clearShapes() on each sprite to get rid of these boundary boxes and loadPolygon() to get my custom boundaries (defined in sprite_physics.json). However the collision groups appear not to be working as my player sprite goes straight through/under the enemy. Can anyone see where I'm going wrong? // in index.html (function() { var game = new Phaser.Game(1024, 768, Phaser.AUTO, null) game.state.add('Game', Game); game.state.start('Game'); })(); // in game.js var Game = function (game) { }; Game.prototype = { preload: function () { this.game.load.image('player', 'assets/player.png'); this.game.load.image('enemy', 'assets/enemy.png'); this.game.load.physics('sprite_physics', 'assets/sprite_physics.json'); }, create: function () { this.game.physics.startSystem(Phaser.Physics.P2JS); this.playerCollisionGroup = this.game.physics.p2.createCollisionGroup(); this.enemyCollisionGroup = this.game.physics.p2.createCollisionGroup(); this.createPlayer(); this.createEnemy(); }, update: function () { // <snip> do some steering stuff </snip> }, createPlayer: function () { this.player = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY + 300, 'player'); this.game.physics.p2.enable(this.player, true); // so I can see the polygon's boundaries // Gets rid of current bounding box this.player.body.clearShapes(); // BUT THEN need to add collision cos default p2 collision is wiped with clearShapes() // Add boundary shape from PhysicsEditor this.player.body.loadPolygon('sprite_physics', 'player'); // Seems to do nothing :( this.player.body.setCollisionGroup(this.playerCollisionGroup); this.player.body.collides([ this.enemyCollisionGroup ]); }, createEnemy: function () { this.enemy = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'enemy'); this.game.physics.p2.enable(this.enemy, true); this.enemy.body.clearShapes(); this.enemy.body.loadPolygon('sprite_physics', 'enemy'); this.enemy.body.setCollisionGroup(this.enemyCollisionGroup); this.enemy.body.collides([ this.playerCollisionGroup ]); } }
  3. Hello, I read this simple tutorial for beginners: Adventures in Phaser with TypeScript Physics using the P2 physics engine When two objects are in contact, the event "onBeginContact" must occur. But this does not happen. I moved the code to codepen:
  4. 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 (https://github.com/photonstorm/phaser-ce/tree/master/resources/Project Templates/Webpack) and an example from the website (https://phaser.io/examples/v2/p2-physics/pick-up-object). 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(); game.physics.p2.world.addBody(mouseBody); // 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 = this.game.physics.p2.createRevoluteConstraint(mouseBody, [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: https://github.com/alexZalachenko/Phaser-Webpack Any toughts about why the collisions are not working when using custom collision shapes? Thanks in advance, Alex
  5. 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 () { this.game.physics.startSystem(Phaser.Physics.P2JS) this.game.physics.p2.defaultRestitution = 0.8 this.map = this.game.add.tileSprite(0, 0, 2880, 1620, 'map') this.game.world.setBounds(0, 0, 8640, 4860) this.map.scale.setTo(3, 3) this.mapAbove = this.game.add.sprite(0, 0, 'race') this.game.physics.p2.enable(this.mapAbove, true) this.mapAbove.body.clearShapes() this.mapAbove.body.loadPolygon('physicsData', 'race') this.car = new Car({ game: this.game, x: 3800, y: 3750, asset: 'car' }) this.game.add.existing(this.car) this.game.camera.follow(this.car) } Also i am using this stuff as skeleton - https://github.com/lean/phaser-es6-webpack Could troubles be in incorrect packages? Looking forward for Your reply, Thanks!
  6. 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
  7. Online Body Editor

    http://danecekpilar.borec.cz/ 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. http://danecekpilar.borec.cz
  8. Part 7 is here, concluding our series: https://loonride.com/learn/phaser/slither-io-part-7 Check out the demo: https://loonride.com/examples/slither-io/slither-io/ Thanks for the support throughout the series! Let me know if you want to see more tutorials like these ones.
  9. 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 body.data DOES contain these properties although setting them to true has no effect.
  10. 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
  11. 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.
  12. Part 5 of our series has arrived: https://loonride.com/learn/phaser/slither-io-part-5 Also check out the demo for this part: https://loonride.com/examples/slither-io/part-5/ In this part you will learn how to add those awesome eyes to your snakes!
  13. 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: https://pinball.cool/?board=basicPinball If you go to pinball.cool, 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:
  14. 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: https://play.google.com/store/apps/details?id=com.mussky.tapjet I hope you will like Tap-Jet!
  15. Part 4 of making Slither.io with Phaser is here: https://loonride.com/learn/phaser/slither-io-part-4. Check out the demo for this part: https://loonride.com/examples/slither-io/part-4/. In this part you will learn how to recreate the unique collisions seen in Slither.io.
  16. 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.
  17. 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'); this.game.load.physics("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) { config.currentState.map = config.currentState.game.add.tilemap(map); //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset config.currentState.map.addTilesetImage('mainTileset', 'mainTileset', 16, 16); //create layers config.currentState.firstBackgroundLayer = config.currentState.map.createLayer('firstBackgroundLayer'); config.currentState.secondBackgroundLayer = config.currentState.map.createLayer('secondBackgroundLayer'); config.currentState.blockedLayer = config.currentState.map.createLayer('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 config.currentState.map.setCollisionBetween(1, 100000, true, 'blockedLayer'); config.currentState.game.physics.p2.convertTilemap(config.currentState.map, 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 this.game.physics.arcade.enable(this.player); }, update: function() { //collisions this.game.physics.arcade.collide(this.player, this.blockedLayer); //... } } Could anyone point me to the correct direction here ? I must admit I'm totally lost
  18. 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: http://puu.sh/wMwsg/28b1609d74.jpg
  19. Parts 2 & 3 of my new series, How to make Slither.io with Phaser, are here! Part 2 - Creating your first snake: https://loonride.com/learn/phaser/slither-io-part-2 Part 3 - Extending snakes to be players or bots: https://loonride.com/learn/phaser/slither-io-part-3 Enjoy!
  20. Check out the first part in our tutorial series on how to make Slither.io: https://loonride.com/learn/phaser/slither-io-part-1 Also, take a look at the demo of what you will be making: https://loonride.com/examples/slither-io/slither-io/ Enjoy!
  21. 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: https://phaser.io/examples/v2/p2-physics/contact-events 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!
  22. I have this code: map = GameService.game.add.tilemap('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 = GameService.game.physics.p2.convertCollisionObjects(map, '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.
  23. 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 = playerKen.animations.play('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; playerKen.animations.play('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 https://phaser.io/examples/v2/sprites/overlap-without-physics 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!
  24. 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.name="car"; car.width=100; car.height=175; game.physics.p2.enable(car); car.body.angle = 90; game.camera.follow(car); 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.name="inner_gras"; For the collision detection I use game.physics.p2.setPostBroadphaseCallback(): game.physics.p2.setPostBroadphaseCallback(hitGras, this); function hitGras(body1,body2){ if((body1.sprite.name === "inner_gras" && body2.sprite.name === "car") ||(body1.sprite.name === "car" && body2.sprite.name === "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!