3
\$\begingroup\$

I am not quite sure how frame per second works on a web page. I have a Canvas game that involves in moving an image from point A to B, and measuring the time elapsed. The code can be as simple as:

var timeStamp = Date.now();    
function update(){
  obj.y += obj.speed;
  text = "Time: "+ (Date.now() - timeStamp) + "ms";
}

The function update() is called every frame. The problem is that the time elapsed is different from device to device. It is pretty short on my PC, but get longer on my iPad, and is much longer on my cell phone. I thought it is because the FPS is smaller on mobile devices, so instead of calling update() every frame, I call it every 1ms by using a setInterval. But this does not solve the problem.

In my understanding, the function for setInterval is invoked based on the increment in system time, other than frame rate, so it should fix the problem. Am I missing anything here? If the setInterval function is called based on FPS, is there any way to get around with the FPS difference across devices?

On a side note, I have sort of a "water simulator" on the same canvas. It involves in redrawing about 60 objects which can be 600x600 pixels for every frame, so it could be a frame rate killer. I am using Phaser.js but not really using much of its functionalities, if that helps.

Improve this question
\$\endgroup\$
1
  • \$\begingroup\$ 1000 updates per second is way too much. There is no reason why your update rate should be any higher than the highest FPS you aim for. More than 100FPS is unnecessary for everything, but depending on the game you can sometimes get away with much less. \$\endgroup\$
    – Philipp
    Aug 25, 2014 at 9:27

1 Answer 1

Reset to default
3
\$\begingroup\$

As far as I know, is 60 frames per second only, and you don't have access to the delta time. If you want to simulate 30fps for example, you could skip the update() every second frame. Read more here: http://www.html5gamedevs.com/topic/2959-how-to-set-fps-to-30/

It is therefore up to you to make sure that every frame runs within 16ms (1000 / 60) so that things appear smooth, across all devices, otherwise the engine begins to lag. If you want to have better control over such things, it's probably better to try a different framework or maybe a faster language than javascript.

By the way, there's no need to calculate frame rate yourself; phaser has the Time class which (when advancedTiming is enabled) has fields like fps, frames, and elapsedSince() for you to monitor the performance of your game.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ Thanks for the answer! I was following the javascript from this link: tysonross.com/temp/waves/index.html to create water effect, only to rewrite with phaser instead of raw javascript, and added an event to drop a box into the water onclick. The original page runs okay on mobile devices, so I guess phaser could be a factor affecting the performance. By the way, I use phaser bitmapData class to draw then add an image using the bitmapData on each frame. I am not sure if this is the optimal way to draw. \$\endgroup\$
    – Fenwick
    Aug 26, 2014 at 15:16
  • 1
    \$\begingroup\$ game.time.physicsElapsed will tell you how long it has been (in seconds) since the last frame. \$\endgroup\$
    – J F
    Jul 4, 2017 at 10:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .