Search the Community

Hi all! I built a little demo which combines the p2.js 2D physics library with 3D rendering via Babylon.js, to create a 2.5D unicycle game demo: https://tomwhall.github.io/p2BabylonUnicycle/ The code is on GitHub.

hello a need help with p2 if anybody of you, provide me some information about using force I'd appreciate, I'm following the example I'm trying to use this code postStep but what I don't understand where to put that code if is inside animation loop or outside the game loop, I tried different ways but it didn't work for me. I'm using phaser's game loop (update) for my main loop. world.on('postStep', function(event){ // Add horizontal spring force circleBody.force[0] -= 100 * circleBody.position[0]; });

This is version 2 of my game Descensus from several years ago. It's a simple but difficult 2D physics game in which you have to guide the ball to the ground by swiping bars on screen, bouncing it around spinning saws and off moving terrain objects. There's a time limit to reach each 100m stage, and you can use terrain objects to your advantage as well. It was written using the physics library p2.js and the rendering library Pixi.js. I wrote in in TypeScript, bundled with Webpack, developed using Visual Studio Code. The Android version was packaged using the cloud build system Monaca, bundling the Crosswalk webview (hence the relatively large APK size). It doesn't use any PhoneGap APIs - the sound is all HTML5 Audio. I did most of the testing on desktop so I know that it works nicely with both mouse and touch. I have put an online version (with sound disabled) at http://booleanoperations.com/descensus2 Play Store link: https://play.google.com/store/apps/details?id=com.booleanoperations.descensus2 Video: https://www.youtube.com/watch?v=9BWii8aokbQ

I have tried p2.js but I am unable to make it work in PIXI.js. Can anyone point out what is wrong? I just want to make a simple program that if I click on the canvas a ball will be created and fall down.

Hello, how can you change the orientation of the plane in p2.js? As for billiards. I read this article, but the answer did not find. I need plane to set the friction between the balls and the surface. Perhaps there are other variants? Thank you for your response.

All good day from the start I want to apologize for my English. I need to create a pool and now I'm focused on the problem of when to make the play area. How best to do this? What I found - a rectangular area. I also need to know where this should be done in pixi.js or physical framework (like p2.js or physics.js) Thank you for your reply;)

Is there an option to set a pre collision hook? Thanks.

Hi, I started developing a HTML5 game with Box2d (without using editors), after I have developed 16 levels of the game (from total of 40 levels), I found that the performance is slow on many mobile devices, I heard that Phaser physics engines are excellent on mobile, but I am a little confused, should I redo the whole game on phaser framework? or I can just use the P2.js physics engine from Phaser to take advantage of the code structure that I have built? or I can refine my box2d game performance without using any other framework, any advice? Thank You, Salah Jaber

Hey there ! In the last week I tested the Phaser and it was a wonderful experience. The project I made was a volley game ! You can see what the output became : http://volley.mohebifar.ir/ And this is the project on github : https://github.com/mohebifar/volley

https://play.google.com/store/apps/details?id=nz.co.booleanoperations.descensus Descensus is a simple 2D physics game which I've described as somewhere between a marble roll, tennis, and Tetris. Teris in the sense that gravity increases over time and you have to guide your object as it falls. It's built with my P2Pixi JavaScript framework: https://github.com/TomWHall/p2Pixi which is itself built around the excellent libraries p2.js (for physics) and PIXI (for WebGL rendering). It's packaged for Android using CocoonJS, which I have found to be by far the best of its bunch. I hope to also release it for iOS. It also works perfectly as an online game (though using a mouse rather than touch isn't as fun), although I haven't made it available online yet and I'm undecided if I will. Enjoy!

I'm a total newb to both p2.js and phaser, but I can't seem to find any tutorials whatsoever for using p2.js for physics and phaser for rendereing. All I've found are threads here where they bring it up, and then someone replies that Phaser will integrate it soon, and the first guy either figures it out or does something else. Could someone please give an example of using the two, or even better a tutorial? Thanks in advance!

Hello, im trying to do something like this (link). So, I started just with the hook, but i can't get the distanceConstraint work when i clicked on the box. This is my code: game.module( 'game.main' ) .require( 'engine.core', 'plugins.p2' ) .body(function() { game.addAsset('media/box.png', 'box'); game.addAsset('media/panda.png', 'panda'); Box = game.Class.extend({ init: function(x, y,body) { var pbody = body; var joint = null; var cbody = null; // Add body and shape var shape = new game.Rectangle(1,.5); var cbody = new game.Body({ mass: 1, //Static. position: [ x / game.scene.world.ratio, y / game.scene.world.ratio ], angularVelocity: 1 }); this.body = cbody; this.body.addShape(shape); // Add sprite this.sprite = new game.Sprite('box'); this.sprite.anchor.set(0.5, 0.5); this.sprite.interactive=true; this.sprite.buttonMode=true; this.sprite.click = function(){ joint = new game.DistanceConstraint( cbody, pbody, 5, 10 ); game.scene.world.addConstraint(this.joint); }; this.update(); game.scene.world.addBody(this.body); game.scene.container.addChild(this.sprite); //game.scene.addTimer(5000, this.remove.bind(this)); }, update: function() { this.sprite.position.x = this.body.position[0] * game.scene.world.ratio; this.sprite.position.y = this.body.position[1] * game.scene.world.ratio; this.sprite.rotation = this.body.angle; } }); Panda = game.Class.extend({ init: function(x, y) { // Add body and shape var shape = new game.Circle(63 / 2 / game.scene.world.ratio); this.body = new game.Body({ mass: 1, position: [ x / game.scene.world.ratio, y / game.scene.world.ratio ], angularVelocity: 1 }); this.body.addShape(shape); // Add sprite this.sprite = new game.Sprite('panda'); this.sprite.anchor.set(0.5, 0.5); var force = 500; var angle = Math.random() * Math.PI * 2; this.body.applyForce([ Math.sin(angle) * force, Math.cos(angle) * force ], this.body.position); this.update(); game.scene.world.addBody(this.body); game.scene.container.addChild(this.sprite); }, update: function() { this.sprite.position.x = this.body.position[0] * game.scene.world.ratio; this.sprite.position.y = this.body.position[1] * game.scene.world.ratio; this.sprite.rotation = this.body.angle; } }); SceneGame = game.Scene.extend({ backgroundColor: 0x808080, init: function() { // Init world this.world = new game.World(); this.world.ratio = 100; // Add container this.container = new game.Container(); this.container.position.x = 0; this.container.position.y = game.system.height; this.container.scale.y = -1; // Flip container. this.stage.addChild(this.container); // Add plane var planeShape = new game.Plane(); var planeBody = new game.Body({ position: [0, 0] }); planeBody.addShape(planeShape); this.world.addBody(planeBody); // Add walls var wallShape = new game.Rectangle(2, game.system.height * 2 / this.world.ratio); var wallBody = new game.Body({ position: [-1, game.system.height / 2 / this.world.ratio] }); wallBody.addShape(wallShape); this.world.addBody(wallBody); wallShape = new game.Rectangle(2, game.system.height * 2 / this.world.ratio); wallBody = new game.Body({ position: [game.system.width / this.world.ratio + 1, game.system.height / 2 / this.world.ratio] }); wallBody.addShape(wallShape); this.world.addBody(wallBody); var panda = new Panda(game.system.width / 2, game.system.height / 2); this.addObject(panda); var box = new Box(game.system.width / 2, game.system.height / 2, panda.body); this.addObject(box); }, }); game.System.width = window.innerWidth * game.device.pixelRatio; game.System.height = window.innerHeight * game.device.pixelRatio; game.DebugDraw.enabled = true; game.start(); }); When i was clicking the box, (it appers) i get this: "Uncaught TypeError: undefined is not a function"... in 39 line where i'm creating the constraint: joint = new game.DistanceConstraint( cbody, pbody, 5, 10 ); how can i do created the constraint? Also, i have some questions: What means the ratio value in 99 line? where is it, in the p2.js plugin or in the engine itself? i can't find it in the source code. why the container is fliped? i can't figure out why i should fliped. How it works? I set debugDraw to true and it's show me this: Thank you. P.D: I love the engine

https://github.com/TomWHall/p2Pixi I started this recently as an attempt to bring together two very cool libraries - p2 for 2D physics and Pixi for rendering - in a way where I (and hopefully others now) could quickly put something cool together. Here is my first live demo: http://booleanoperations.co.nz/experiments/p2/buggy/ The PixiAdapter class draws heavily on the rendering logic from the p2 demos, but those demos use randomized flat fill colours for the shapes. I've added a means of customizing the p2 bodies which make up each of my GameObjects with their own Pixi styles, including a simple implementation of bitmap-textured shapes, by way of the mask property on sprites. I'm hoping to build some simple PhoneGap games with this. Tom

Please tell me, how I can use P2.js physics in phaser framework? Whether there is an example of this? I have seen what p2 files included in sources framework? but I don't know how to call P2 physics in phaser. I would be very grateful for the help)