Cocos2dx + Box2d: Position of object in different screen resolution and aspect ratio

Cocos2dx + Box2d: Position of object in different screen resolution and aspect ratio
0.0 0


I’m writing a pool game, so i need the same aspect ratio for every devices. In the play scene, i spend an area for playground on the top (physics happens in this area). The bottom area is for displaying HUD.

The result is for each device aspect ratio, i’ll have different object coordinates.

How can i solve this with box2d? Like applying physics to the specific node with specific size? I see the b2World can only apply for whole layer?

Or i have to translate object coordinates on each devices?


Treat the Box2d world completely independently to the display - so model your table and balls in Box2d using whatever units of measure you choose (it’s designed to use meters from memory, so probably stick to that).

So, you have a B2 model working - but displaying nothing (because Box2d is physics engine - and the only display available is the debug display - which is fine for its purpose (debugging!)

Now you decide how you are going to display the pretty graphics for your users on all the different devices.

Assuming you’re talking a top-down 2d implementation, then your factor is relatively simple.

say your table is 2 meters long.
say your screen is 1024 pixels wide
then the ratio is 512 - i.e. each meter is 512 pixels.

So if your ball Box2d object is 5cm it should be drawn as 25.6 pixel diameter.

If your sprite was created as 32 pixels, you need to scale everything by 25.6 / 32 = 0.8.

Assuming you create all of your sprites at the same scale, then you can just scale your screen at 0.8 and all will be well.


Thank Maxxx for your reply.

I know about PTM_RATIO in box2D. But i wanna ask about screen aspect ratio.
For example, i wanna use aspect ratio 2/3 on every devices (640x960)

But on the device has other ratio like 680x1136, what should i do to maintain object position after each shoot?
My solution is:

  • Recalculate the screen size with 2/3 ratio and draw the boundaries = 640x960 on the screen and let the physics happens inside like this:

demo screenshot:

  • But after each shoot, i have to translate the position of object from device to device:
    object A has position = 0,0 on 640x960 should be 20x0 on 680x1136?

Or any better way to do it?