Search the Community

Showing results for tags 'p2js'.

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 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 40 results

  1. Issue with physics

    Hello everyone, I have the same problem like in this topic I don't understand how to set P2 Physic mode or solve this problem in other way. Please help.
  2. p2js prismatic springs

    Hi. Prismatic and Spring joints in p2js seem pretty straightforward. I was wondering why using constant rest length, stiffness and damping for a spring would change its behavior when a body's local anchor is changed. Fiddle: (phaser/p2js template from inkfood) From the fiddle, all the springs use share the same parameters except the local anchor of body A. Why do the springs behave differently? :/
  3. custom world limits

    Hello guys, When I use p2js by default the borders are the limits of any body inside. I can use planes to reduce this area but it's still a rectangle. My question is the following: How to make an area with curves? Can physicseditor help in a way? Thanks
  4. P2JS Not collide with group

    Hi, I was wondering how can I do with P2JS to not collide with a given group ( I don't want the player to collide with others players ).
  5. p2 physics advanced tile collision

    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.
  6. [ASK] Trying to create a 2D physics blob

    Hi, Guys. I am trying to create a blob ball using p2js. What I am trying to achieve is something like the "Sushi Cat" game. I created a blob using the structure in the picture A (attached). The gray orbits are allowed to penetrate each other, and the red lines are distantConstraint. But the problem is when the blob fell from a high place (or hitting corner), it becomes like in picture B. I tried to use spring, different constraint force, smaller orbits, but they are not working properly. My questions are; 1. What is the solution for this? 2. Is there any other js physics engine that has a specific feature to do this task? Any help is greatly appreciated. Thanks.
  7. How to move to the point of clicks at p2js

    Hi all! How to move to the point of clicks at p2js?, this); In the event handler I have "pointer.position". What's next? I did not find a single example. I found a similar question here, but there is no answer to it.
  8. How to make p2js deterministic

    Hi, I'm using p2js for physics for my game. The issue is p2js is having different behaviors in the same situations. I'm adding 4 units with the following shape to the scene to the same x and y in a loop each time I click on the page. "shape": [ 10,0, -10,0, 0,-20 ] As you can see in the screenshot, the first and second group of 4 units have different alignments while they are being added with the same function with no difference. It seems that p2js is using a random function in some cases to determine how to move the objects. Is there any way to make p2js deterministic? Since I'm making a multiplayer online game, it is a critical factor for me. Thanks
  9. P2 Space Shooter Dogfight AI Rotation

    I'm trying to make a 2d space game involving a sort of space dogfight between the player and some ai bots. I need help with the enemy ship automatically rotating towards the player, but not being exactly pointed towards the ship 24/7. I want the enemy ship to have some "lag" in its response to the player's movement so it's more realistic. Right now I have a model which is not realistic and would probably be too hard for the player to win: update: function(){ //blah blah var tempAngle = Math.atan2(fightSprites.player.y-fightSprites.enemy[i].y, fightSprites.player.x - fightSprites.enemy[i].x); //gets angle between player and enemy fightSprites.enemy[i].body.rotation = tempAngle + (3.141/2); //too precise }
  10. var game = new Phaser.Game(1024, 600,, 'phaser-example', { preload: preload, create: create, update: update, render: render }); var result = 'Press a key'; function preload() { //load assets game.load.image("single_turret","./img/single_turret_64x64.png"); game.load.image("mouse","./img/mouse.png"); } function create() { //start physics game.physics.startSystem(Phaser.Physics.P2JS); single_turret = game.add.sprite(400,300,'single_turret'); mousep = game.add.sprite(50,50,'mouse'); //enable psysics on all items and enable debugged game.physics.p2.enable([single_turret,mousep], true); mousep.body.setCircle(4); mousep.body.kinematic = true; single_turret.body.setCircle(4); single_turret.body.kinematic = true; } function update() { } function render(){ game.debug.text(result, 32, 32); mousep.body.x = game.input.x; mousep.body.y = game.input.y; lookAtObject(single_turret, mousep, 0.005); } function lookAtObject(obj, target, rotspeed){ var angle = Math.atan2(target.body.y - obj.body.y, target.body.x - obj.body.x); result = obj.body.rotation + '**'+ (angle + game.math.degToRad(90))+ '**'+obj.body.angle; obj.body.rotation = angle + game.math.degToRad(90); } The code above rotates the "turret" to always be pointed towards the mouse so that it can fire at the mouse position. The code works, but I want to add a rotation speed to it, however I can't figure out how to code that in. The lookAtObject() function is where I have the problem. function lookAtObject(obj, target, rotspeed){ var angle = Math.atan2(target.body.y - obj.body.y, target.body.x - obj.body.x); result = obj.body.rotation + '**'+ (angle + game.math.degToRad(90))+ '**'+obj.body.angle; if (obj.body.rotation <= angle + game.math.degToRad(90)){ obj.body.rotation += rotspeed; }else{ obj.body.rotation -= rotspeed; } } This statement does not work as intended because of how p2js works, so when It gets at ( -x , 0) the radians go from -1.5 to 4.7 and the rotation will reverse. I am really stumped atm, so any ideas on how to approach this?
  11. Hi, dear game developers. I had seen that link on examples load-polygon-1 or var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('contra2', 'assets/pics/contra2.png'); // Load our physics data exported from PhysicsEditor game.load.physics('physicsData', 'assets/physics/sprites.json'); } var contra; var start = false; function create() { // Enable p2 physics game.physics.startSystem(Phaser.Physics.P2JS); contra = game.add.sprite(400, 300, 'contra2'); // Enable the physics body on this sprite and turn on the visual debugger game.physics.p2.enable(contra, false); // Clear the shapes and load the 'contra2' polygon from the physicsData JSON file in the cache contra.body.clearShapes(); contra.body.loadPolygon('physicsData', 'contra2'); // Just starts it rotating game.input.onDown.add(function() { start = true; }, this); } function update() { if (start) { contra.body.rotateLeft(250); } } function render() { } , and i'm trying create json like that, since i saw that example. I saw some suggestions about physics editor or mapeditor tiled. i installed it, but i have no idea about creating json like that despite researching how its doing on internet. Probably i need some help
  12. P2JS Overlap

    I am currently using P2JS to handle collisions within a platform game I am making. There are objects within the objects layer in my level that I want to be able to interact with (Standing over it, press button, do action). How can I create a collision overlap function like in Arcade physics?
  13. Hello everyone, i am trying to make it so the bodies of the objects dont overlap ( like they do in the picture), they already collide with each other and push eachother around but when i approach and hit it from the corner they overlap like this for a while then let go again. They both have collision groups, i am moving them by applying force. I have fixedRotation set to to true on the bodies. The outline you see on the picture is the debug.
  14. I have a bouncing ball and I want to detect that the ball has "hit the floor" in my game. Is there any predefined method for detecting this?
  15. Why thrust is not working?

    create: function () {, 0, 1920, 120);; = 0.8; this.player =, 100, 'player_spr');;; this.cursors =; }, update: function () { if (this.cursors.right.isDown) { this.player.body.thrust(400); } else if (this.cursors.left.isDown) { this.player.body.reverse(400); } }This code is based on tutorial code, so it should be right. But it is not working at all.
  16. The best example I've found of what I'm trying to achieve is this - However, instead of a car I have a tank, so the movement should be more... tankish, without this front-wheels-turning effect. But this is not a problem. The problem is that my tank's movement looks more like a boat on a water movement. I press UP for acceleration and when I press LEFT or RIGHT it still moves in the same direction for a while, like drifting. And if I release UP button and press LEFT or RIGHT again it drifts as well, without taking into account, that he has turned 90 degrees already. Looks awful in terms of a tank behaviour. In other words, I want my tank to stay "on track" while turning, without such huge drift (or asteroid in space) effect. I suppose this is something I should do in update section. Here is what I have there for now: if (cursors.left.isDown) {tank.body.angularVelocity = -0.75;} else if (cursors.right.isDown) {tank.body.angularVelocity = 0.75;} else {tank.body.setZeroRotation();} if (cursors.up.isDown) {tank.body.thrust(120);} else if (cursors.down.isDown) {tank.body.reverse(70);} else {tank.body.damping = 0.8;}cursors = game.input.keyboard.createCursorKeys(); And a few more, not related to main topic, questions: What kind of P2 library Phaser is using? Is it the same as in the example I've provided in the beginning? Is it technically possible in Phaser to calculate collision angle between shell and an object, e.g. another tank? Thank you.
  17. Debug p2 constraints

    Hello, I would like to know if it is possible to visually debug constraints when using P2JS (springs, revoluteconstraints, distanceconstraints, etc.) I found this image of box2d debug to illustrate what I mean Thanks in advance for any advice!
  18. Hello people, I have a problem with collision in my demo game. (800x800 pixels) It won't allow me to walk around. also there is no worldbounds because it doesn't work too. I have checked the console in different browser, but theres no error. EDIT: Yes, I have been checking out the examples etc, but got no clue what am doing wrong. window.RPG.Game.Main = function () { this.cursors = null;};window.RPG.Game.Main.prototype.preload = function() { // World map this.load.tilemap('demo-map', 'assets/tilemaps/demo-map.json', null, Phaser.Tilemap.TILED_JSON); // Sprites // {1} = Width frame // {2} = Height frame // {3} = how many frames - leave blank if frames fill up the entire PNG. this.load.spritesheet('player', '/assets/sprites/chara0.gif', 32, 32); // Images // {1} = Image name (in the map.json) // {2} = Image path (on the server) this.load.image('items', '/assets/sprites/items.png'); this.load.image('font0', '/assets/sprites/font0.png'); this.load.image('icon0', '/assets/sprites/icon0.png'); this.load.image('tiles', 'assets/sprites/map1.gif'); this.load.image('npcs', '/assets/sprites/npcs.png'); this.load.image('pad', '/assets/sprites/pad.png'); this.load.image('x', 'assets/sprites/x.png');};window.RPG.Game.Main.prototype.create = function () { //1 Physics; // Camera controls this.cursors = this.input.keyboard.createCursorKeys();, -800, 1600, 1600); // Scaling the Camera to better zoom = Phaser.ScaleManager.SHOW_ALL; // Define map variables var map, backgroundLayer, blockedLayer; // Load the map and objects map = this.add.tilemap('demo-map'); map.addTilesetImage('map1', 'tiles'); map.addTilesetImage('x', 'x'); map.createFromObjects('objectLayer'); // Render the background layer backgroundLayer = map.createLayer('backgroundLayer'); backgroundLayer.resizeWorld(); // Render the blocked layer blockedLayer = map.createLayer('blockedLayer'); blockedLayer.resizeWorld(); // Render the object layer map.createFromObjects('objectLayer'); blockedLayer.resizeWorld(); // Create player this.player =,, 'player'); // 0 = down // 1 = up // 2 = left // 3 = right this.player.direction = 0 // Animate player // 0, 1, 2, = which frames // 5 = frequency of change this.player.animations.add('walkD', [1, 0, 2], 5, true); this.player.animations.add('walkL', [9, 10, 11], 5, true); this.player.animations.add('walkR', [18, 19, 20], 5, true); this.player.animations.add('walkU', [27, 28, 29], 5, true); // Camera follows player position; //1 physics enable on player //+ set body //+ collide with world bounds; this.player.body.setCircle(28); this.player.body.collideWorldBounds = true; };window.RPG.Game.Main.prototype.update = function () { //1 Stop moving on collision this.player.body.setZeroVelocity(); // Movement code here};
  19. Edit: Problem fixed. My mistake. Never mind.
  20. Updating the world according to time with p2.js

    Hello everyone, It's my first topic in that forum and I'm here today because I've an (logicial ?) issue with the physics librairy p2.js. I'll try to explain my problem in the simplest way possible. I'm working on a game based on my own framework coupled with p2.js. In that game, the physical world needs to be updated at a constant time. For now, I'm using a requestAnimationFrame to call the world.step function but that means if the player have a slower PC, the game will be slower and the opposite is also true. I've made an animation in Photoshop (not perfect but whatever) to show you what I exactly want: So, I've two objects that are supposed to move at the same speed. Let's assume that the red line is the timeline. With the first object, we see when we have a little freeze, he stop then continue with the same speed where he stopped. But when you look at the second one, after the freeze occurred the object goes to the correct position following the timeline. My question is, can we do that with p2.js ? Or it's not about p2.js and I'm missing something ? I did some tests based on the documentation with the others arguments for the function world.step() but doesn't seems to work at all. Hope you can help me with this problem and thanks for your answers ! Have a great day
  21. Hi there, I'm using the method autoScroll on my sprite to make it the ground of my game, see This work great for the displayed sprite but not for its body. Its body is not moving and so the body doesn't match the displayed sprite, as this one is scrolling. Look here the result, I display the body of each sprite to see the problem. Is there a way, I mean something already existing, to make the same behavior I got on the sprite but on the body on the sprite? I might guess that there is no solution other to do it myself but I ask anyway, just in case.
  22. Hello, today, they released the BOX2D commercial Plugin for Phaser: or at least came up with examples, so that somebody could start working with it. Anyways, I have been using P2JS on my ongoing development and have been pretty satisfied except that it is sometimes hard to work around issues with friction which applies on a body top but also side, so that a character will not slide on top but in return hangs on the side due to that friction, sure I found some workarounds but I was wondering if BOX2D would solve such issues better. Does someone have experience with both of the physics systems and if yes, what are the pros and cons of each? Thaks a lot!
  23. at first my code working alright then I tried to add collisionGroup to all the sprites there is. Because I usually declare classes outside the create function I must move them inside because collisionGroup can only be created after the physics has been initiated which must be initiated inside the create function. After I finish all that an error occur onBeginContact is giving a null on it's first parameter which is strange because it should be giving a body under all circumstances. The second and third parameter is given as usual but I don't know if it's out of the ordinary because i never use those parameters. What cause this ?
  24. Physics Body Radius Tween (p2js)

    I'm having a bit of trouble trying to scale the body of my circle sprite using[0] which I found in this thread The sprite starts moving in a weird pattern across the screen. Here is a gif showing the movement: I'm sorry if it's something obvious, I'm new to Phaser. class SimpleGame { constructor() { = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create, update: this.update , render: this.render }); } game: Phaser.Game; circleSprite: Phaser.Sprite; graphics: Phaser.Graphics; circle: PIXI.Graphics; create() { this.circleSprite =,300);; =, 0);, 0xFF0000, 0.5); =, 0, 50);; this.circleSprite.addChild(;, Phaser.Physics.P2JS,true); this.circleSprite.body.setCircle(20);[0]).to({ radius: 90 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true); update() { } render(), 50)}window.onload = () => { var game = new SimpleGame();}
  25. p2js just for collision detection

    Hello everyone! I am making a game and i have some objects with triangular shape. I use p2js just for collision detection with onBeginContact (everything else is handled manually, like movement etc.). So i am wondering if there is a less expensive way to detect polygon collision. Thanks