I am creating a simple game in JS, something like the flappy bird :) For pipe scroll, I am using a linear tween.
I noticed that the speed of the pipes are different across different smartphone screens, so the game has different difficulty.
I observed that this has to do with different screen sizes and different pixels densities.
What I did is I defined a duration per pixel, which is multiplied by the number of pixels the screen has.
The duration per pixel,
pixel_duration is constant.
tween_duration = number_of_horizontal_pixels * pixel_duration
But this gives same speed in different sized browser windows on the (same) computer screen.
If I use this approach on some device that has higher pixel density, the pipes will move slower,
because there are more pixels, so this
tween_duration value gets larger, so tween gets slower.
Then I learned of the
devicePixel ratio value which can be used. So I try to factor this in the equation:
tween_duration = number_of_horizontal_pixels * pixel_duration / devicePixelRatio
devicePixelRatio is higher as screen DPI's goes higher and should solve my problem according to the docs, right?
However, this only helps a bit. There is still a noticable speed difference.
Why is this not working, and how can I get the same scroll speed across devices in JS (in browser window) - perhaps some other approach would do?