0

I'm working on my HTML5 game with Intel XDK. I'm stuck on making all devices display the same number of frames per second.

The first generation iPad has a screen resolution of 1024 pixels horizontally, while the Motorola Moto G Android phone has ~2657 pixels horizontally. With my game running at 30 FPS and sprites moving at 1 pixel per frame on the Motorola, this can take up to 5 mins to get from one side to the other.

Changing the FPS to 300 makes it work normally on the Motorola but too fast on the iPad.

Is there a work-around for this?

Anko
  • 13,393
  • 10
  • 54
  • 82
nats0128
  • 121
  • 4
  • Think of your view as a window into the world. Just because this window may be small or large, the people/animals/cars in our world still move at the same speed. Consequently, your game needs to standardize the units that you're moving at. Look around the web for some tutorials with the Intel XDK, I'm sure some of them will cover this topic. –  Feb 21 '14 at 21:31
  • just found a comment on stack overflow about the canvas - With a Canvas it's possible to set the physical/viewable size and the virtual size independently, eg. draw onto a 500x500 canvas that's been set to fill a 1280x768 screen, but the actual canvas still remains at 500x500. - exactly what i'm after – nats0128 Feb 21 '14 at 21:43
  • Perfect, that's very similar to what I use :) –  Feb 21 '14 at 21:44
  • could you add a link to that stack overflow answer? – Green_qaue Feb 22 '14 at 03:18

2 Answers2

1

There is a deeper problem revealed in your question. You are experiencing this difficulty because you are conceiving of the movement in your game as being pixels/frame, when you should be thinking of units/second. This is sometimes called "frame independent movement" and you can see a good stackexchange q&a on it at Frame Independent Movement.

The basic idea of units/second is this: "Units" can be arbitrarily defined by you to whatever is convenient. 1.0 unit could be the width of the player-controlled character, and your canvas would be determined by you to be w x h of those units, perhaps chosen to match actual resolution against an ideal number of pixels wide for your stage. Once that calculation is made, it's all units, all the time.

  • How fast does your character move at full speed? 3 units / second.
  • How tall is this barrer? 2.25 units.
  • How fast do enemy projectiles move? 0.5 units / second.

Embrace this thinking and your programming tasks will be immensely simplified, in Intel XDK and anywhere else.

Community
  • 1
Brad Werth
  • 141
  • 2
0

Answer from stack overflow comments - https://stackoverflow.com/questions/3193277/how-do-i-make-a-canvas-drawing-to-completely-fill-the-browser

With a Canvas it's possible to set the physical/viewable size and the virtual size independently, eg. draw onto a 500x500 canvas that's been set to fill a 1280x768 screen, but the actual canvas still remains at 500x500. I think this is what Micah is trying to do, hence why this solution wouldn't really work.

Community
  • 1
nats0128
  • 121
  • 4