Converting Pixels to Metres Advanced

Question

I am having trouble converting pixels to metres on my game

how many pixels is a meter in Box2D?

Is an example of my problem, but does not solve it.

This is because this solution, while it works, will not go cross browser, that is, if the conversion rate is something constant like 50px to one meter, than on a device with 400x800 resolution, the objects will appear big, whereas on another device with 4000x8000 resolution (exagurated) the objects will be tiny.

I can understand some solutions to this, but the main reason why I am finding this so hard to implement is because one browser or phone might be 16:9 ratio, whereas another might be 14:7, and these differing ratio's are the kicker, since my entire game is held on the screen as it is not a scrolling game, it is just a simple physics game.

Because of this I understand that It is easier to have to world be a smaller size, and convert it back up when rendering, but these problems that I have mentioned have stumped me, and I was wandering if anyone had any feasible solutions.

Answer 1

Since your

entire game is held on the screen

I suggest you the following:

Decide how many "meters" you need your window width to be. Say you've decided:

any window width (W) is always N "meters"

Then k = W/N where k is a scaling multiplier meaning a part of window width within 1 "meter".

So if W = 400px and N = 100m you have k = 400px/100m = 4px/m. And when other screen is W = 4000px you have k = 40px/m.

That way you can translate your "meters" to pixels by multiplying your dimensions in "meters" by k and your objects will be always scaled to the screen size.

In JavaScript it looks like:

var N = 100; // window width in "meters"
var k = window.innerWidth / N; // px in 1m

// let's count something simple
var U = 10; // speed in meters per second
var t = 10; // time in seconds
var S = U * t; // distance in meters
var S_px = S * k; // distance in pixels (scaled to the window width)