box2d plugin - sprite not following body

[tonky]

I am making a pinball game based on the pinball example.

Code is at pinball.site44.com as something else could be causing the issue and didn't want to post everything here. Pls use the dev console in your fav browser. Appreciate it.

My ball sprite is not following/attached to the physics body even though it should be. You might have to refresh/f5 many times at the beginning before u notice it drop out of screen cos of gravity.

[Tom Atom]

Hi, by default PTM is set to 50. Also when you call:

game.physics.startSystem(Phaser.Physics.BOX2D);

Default debug draw is initialized. It has to convert box2D meters to pixels, so it is using also PTM.

When you then set PTM to different value, it changes it in box2D physics engine, but not in debug draw module. So, your game works correctly, while it may sound surprising. Problem is, that box2D flipper is drawn with old PTM (50) - so debug draw is scaled down. To correct it call it like this:

        game.physics.box2d.ptmRatio = 500;
        game.physics.box2d.debugDraw = new Phaser.Physics.Box2D.DefaultDebugDraw(500);
        game.physics.box2d.world.SetDebugDraw(game.physics.box2d.debugDraw);

It will reinitialize debug draw with new PTM.

While it will solve your problem, I think, you will still not like it, as your pinball table now will be 10x bigger than before, but it is drawn correctly. Using PTM 500 is not good. Circles in your table are crated with size like 2.8 meters. But as it is then converted into pixels with PTM 500 then circle is 2.8 * 500 = 1400 pixels...

Last thing, I noticed is, that you are using some older version of Phaser box2D plugin. Get new one - it has method setPTMRatio(PTM) and this method resets debug draw for you automatically.

 

[tonky]

I have updated that link with the latest version of box2d. Just trying to fix this with your advise now and will report back soon. thx a lot. 

[tonky]

Check the new code at pinball.site44.com

I am using 

Quote

        // Enable Box2D physics
        game.physics.startSystem(Phaser.Physics.BOX2D);
        game.physics.box2d.ptmRatio = 500;
        game.physics.box2d.debugDraw = new Phaser.Physics.Box2D.DefaultDebugDraw(500);
        game.physics.box2d.world.SetDebugDraw(game.physics.box2d.debugDraw);
        game.physics.box2d.gravity.y = 5000; // large gravity to make scene feel smaller
        game.physics.box2d.friction = 0.1;
        game.physics.box2d.setPTMRatio(1);

but now the world is not on screen (likely cos its x10 bigger) but at least the ball body falls with the sprite. What do u suggest the best way is to fix the recalculation of the whole game. Srry for the spoonfeeding request but box2d is really different to p2

[Tom Atom]

Let's say I would do this:

1. calculate how high and wide in pixels my table should be in total,
2. default box2D PTM is 50 => 50 pixels is 1 meter. It is quite a good ratio for lot of games. Means, if my table would be 800 px high, than it means 16 meters in box2D. It is not size of real pinball table, but box2D likes to work with not too heigh and not too low number,
3. design your flipper parts in some pixel/paint editor,
4. if designed part is, let's say 70 pixels wide circle, then box2D representation should be 70 / PTM = 70 / 50 = 1.4 meters.

[tonky]

Ok, I think i get it but I am not there just yet. I do understand what you're saying about real-world scale and the PTM conversion that box2d uses.  So my table is 480x800. The ball size is 20x20 pixels. You can see the new artwork in-game at pinball.site44.com

When PTM is 500 I can actually see the full table physics body. When PTM is 50, the ball sprite follows the ball body like you said it would. But at PTM 50, I can not see the full table vertices.

Now I can adjust the size of the circles with something like 0.35 * PTM but not with say 40/PTM like you advised in point 4 above. My playerBall size is 20x20. 

What I am askng you is this - Is there anyway where I wont have to redesign the whole table vertices again. I had to do it all by hand (I dont think there is a software which can help u with this). All I need to do is to stay at PTM 500 and find a way where the ball sprite follows the ball body, or else I will have to redesign all the table vertices with PTM at 50 so the table can be seen. 

 

[Tom Atom]

Phaser plugin for box2D is great as it does lot of calculations for you based on PTM.

If you were using box2D _without_ Phaser plugin, you would have to recalculate all your pixel metrics into meters like this: meters = pixels / PTM (point 4 was about checking if your meters are meaningful, not about puting it as function argument).

Phaser box2D does this for you. So, if your ball is 20 pixels then you can call: body.setCircle(20); Phaser plugin exactly does pixels / PTM for you before it sends metrics into box2d iteself. With default PTM (50) your 20 pixels wide ball would be treated as ball 0,4 meters inside box2d ... which is ok. Personally, I would leave PTM = 50 if I really do not have reason to change it. Currently I am rewriting one of my legacy (non-web) games that uses box2D into Phaser and there I have PTM 48.

Regarding table - first I would tune it on small sample of table controls, then design whole table. To design table you can create some very simple "drawing app" by yourself or use some editor like R.U.B.E (https://www.iforce2d.net/rube/) - I do not have enough expoerience with it, but it looks promising. In your case changing vertices from PTM 500 to 50 is to divide them all by 10 ... not very hard work.

 Box2D example you probably take as a base for your game (pinball) works, because it is drawing with PTM 50, but working with PTM 500. As it has no sprites then this difference is not visible anywhere. If there were some sprites added, then it would suffer from the same problems as you originally had - body and sprite would move in different speeds, but they are still fixed to each other. In fact, which is fun, it is 2 layer paralax scrolling with debug draw as lower layer and sprites as upper layer (moving 10 times faster). You can set gravity to negative number and you will see your sprite ball will go up 10x faster than on debug draw ... but they are still fixed to each other.

[tonky]

thank you so much Tom for such a succinct reply. Am forever grateful.