I want to create an html5 game which contains multiple sprites.

For different elements I want to create an fixed fps.

For example:

Walk - 10 fps, so 10 sprites will be shown within 1 second

Run - 15 fps

Attack - 3 fps

How can I create this with requestAnimationFrame and not using set timeout or setinterval.


1 Answer 1


You could simply for every frame you get check the time and only draw a new frame when the right amount of time has passed. Though I don't think there is much point in using requestAnimationFrame when you are updating that slowly.

And for the record 3 fps is very slow. If you are doing so few sprites it might be better to not talk about fps, and instead talk about time between the individual frames, and then also realize that there doesn't have to be an equal amount of time between frames in any given animation. You can adjust the time that every individual frame is shown depending on what looks good, and if there is a visible glitch you can add in an extra frame right at that moment without having to change the rest of the animation.


You must log in to answer this question.

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