MatterJS: How to keep consistent bodies speed on different screen resolutions?

[ProgrammingLife]

I try to keep consistent speed of bodies on different screen resolutions. Now I test two resolutions:

• 844x390
• 1920x1080

I precalculate ScreenHeight and create an object with a mass: screenHeight / 130.0. So the mass is depends on screen height. Then I apply some horizontal force in a 60-fps loop with applyForce(), calculated with: const forceX = screenHeight / 60000.
And I get absolutely different speed on different resolutions. Objects on screen: 844x390 moves 20-30x faster than they move on 1920x1080.

Gravity of the world I set as: screenHeight / 1080.
Both cases I test on the same device, the same browser, so there's no any problem with different FPS or a performance value.

Why does it happen? How to keep consistent speed? For example, I wanna move my object by distance: screenHeight * 2.0, spending exactly 1.0 second on different screen resolutions. So I don't know what's the value of a force should I apply to get such behavior.

As for the scale config I use:

scale: {
	width: "100%",
	height: "100%",
	zoom: 1.0,
	mode: Phaser.Scale.ScaleModes.NONE,
	autoCenter: Phaser.Scale.CENTER_BOTH,
},

What should I check? Is that problem related to Phaser or to MatterJS?

UPD:
Looks it works absolutely random when you want to change the scale of physics proportionally. You change all the sizes proportionally to current screen resolution but it works absolutely different.
How do you deal with scaling physics for a current screen resolution?

[KhalilFH]

hello there, I can suggest an approach to scaling physics in Phaser. If you are using pixel density, you can use the viewport dimensions to scale the physics engine. You can get the viewport dimensions using the window.innerWidth and window.innerHeight properties.

Then, you can use these values to set the mass and force of your physics bodies. For example, you can calculate the mass of your objects as mass = (window.innerHeight / 130), and then use this value to set the mass of your physics bodies.

Similarly, you can calculate the force as force = (window.innerHeight / 60000), and then use this value to apply a horizontal force to your physics bodies. This approach should help you maintain consistent physics behavior across different screen resolutions.

Hope this can help you !

[ProgrammingLife]

Oh my... that's genius, man! Thanks, a lot! You definitely saved my life. I don't know why I didn't come to this simple great idea. It definitely should work much better than my solution with manually remapping coordinates of all objects. Wow... Thanks a ton!