1
\$\begingroup\$

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.

So basically:

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

This devicePixelRatio is higher as screen DPI's goes higher and should solve my problem according to the docs, right? https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

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?

\$\endgroup\$
  • \$\begingroup\$ Related stackoverflow.com/a/23606369/4934560 \$\endgroup\$ – Bálint Jul 29 at 9:03
  • \$\begingroup\$ Are you sure this is a density problem and not something that could be solved with deltaTime ? I'm asking because I've encountered a similar issue in the past using javascript and Pixi. \$\endgroup\$ – TomTsagk Jul 29 at 13:28
1
\$\begingroup\$

Are you sure you need to go as deep as to device pixel ratio?

If it's a browser-based game, then you

  1. have access to the viewport-percentage units like vmin, vmax, vw, vh. Why not use them?
  2. If you are using canvas to render output, why not stylize it to fit entire viewport while maintaining the same pixel dimension?
  3. Why not use meta tag to adjust the size of your page in logical pixels for mobile devices?
\$\endgroup\$
  • \$\begingroup\$ Yes, this is a browser-based game, but all I can use is the canvas. So any features that canvas supports are ok. I cannot create/modify anything else outside given canvas object. \$\endgroup\$ – igobivo Aug 2 at 9:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.