Kevin Powell - Community•2w ago

Meaning of FPS and how to slow down game animation

Hello guys, sorry to disturb you... I need to build a game for a uni project in JavaScript but I don't really know the game physics/mathematics.... I just came across the word "FPS"... I heard that a lot of time but never bother about what it is but now I need to know 😭 ... it stands for frame per second, what does that mean please, can someone explain, why is it important in game development... is there a way to slow down any animation using FPS? (please bip me) On stackoverflow, there was a piece of code used to create an animation delay but I didn't really understand it, may be because of my poor concept of frames... can someone clarify that please

var counter=0;
function RandomPosition() {
    if(++counter % 10){
        window.requestAnimationFrame(RandomPosition);
        return false;
    }

var counter=0;
function RandomPosition() {
    if(++counter % 10){
        window.requestAnimationFrame(RandomPosition);
        return false;
    }

27 Replies

Chris Bolson•2w ago

FPS = Frames Per Second (as you have stated). This means that for every second of animation you will have X number of "steps" (frames). The more "steps" you have per second, the more fluid the animation will be. The FPS standard for hand-drawn animations is 12FPS however Disney, for example, uses 24. More frames not only means more fluidity but also allows more flexibility when, as you mentioned, slowing things down. If you repeat frames (ie with no change between) them, the action will appear to slow down so, with more frames per second, there is more possibility to slow things down. The slow-motion option on an iPhone can either shoot at 120 or 240fps. Again, the more frames, the more control and ability you have to manipulate the speed. High speed cameras, used for slow-motion in films can go from 500 to 1000s of frames per second. For web the general FPS is 60 but this may depend on your monitor refresh rate. I will admit that I am not 100% sure how this aspect works.

glutonium•2w ago

since Chris has explained to you the general idea behind what FPS is I'll try to give the idea behind it from game development perspective now in game development u have some called a game loop. this is a loop that runs continuously until program crashes or game window is closed. generally this an infinite loop. now inside the game loop , you manage everything that is of the game. from drawing objects to updating them. Each time the loop runs , mainly what happens is as follows - clear the window - update game objects (this includes from object position to appearance.) - draw the nescessary objects and repeat. now in game development perspective, a full loop is a frame. on each frame u r first clearing the exiting drawing, then updating the game objects by doing necessary calculations and then redrawing the objects. now if one loop is a frame , that means ths amount of loops that occurs in a second would be the Frames Per Second (i.e total amount of frames in a sec) of your game. now one thing to note is u canno control the loop itself, like how many times the loop shall run per second (i mean if u r in python or cpp u can prolly add a sleep command to wait for some milliseconds before next loop runs but m pretty sure this is not a very liable option). but what u CAN control is how the objects update per frame. say u want to make an object move in slow motion. instead of having more fps, u can just make the object move slow. normall if it moves 5px per frame, u can update it too move 2px per frame , this slows it down by roughly 50%. or make it move 10px per frame which increases the speed by 50%. and since u have full control over every game objects, u can make one move fast and one move slow.

Mannix•2w ago

I can recommend Franks laboratory on youtube he has great videos on making games in javascript

glutonium•2w ago

He is AMAZING He got me into html canvas Chris Course also has some full fledged game development videos on his channel which are also great and beginner friendly

glutonium•2w ago

i started looking into OOP after watching one of Chris Courses video

Chris Courses

YouTube

Vertical Platformer Game Tutorial with JavaScript and HTML Canvas

This course was made possible thanks to Hostinger (a really great hosting service). Save up to 91% of by using the discount code CHRISCOURSES on checkout at https://www.hostinger.com/chriscourses Demo: https://chriscourses.xyz/ Game assets: https://drive.google.com/drive/folders/1hqYFTOvtzxQQuFZPJjzUOOGjzAfEFEio?usp=share_link GitHub source co...

Faker•2w ago

💯 Yep I see, thanks ! yeah I'm following chris courses and frank laboratory

Doksuri•2w ago

i might be wrong, but FPS != rAF ... => if a script blocs the event loop, the rAF might trigger later, no ?

glutonium•2w ago

what's rAF?

Doksuri•2w ago

requestAnimationFrame()

glutonium•2w ago

ooh FPS doesn't have anything to do with rAF tho i mean they r separate concept and rAF does halt the loop when window is not open

Doksuri•2w ago

i know, but since the original post seems to mix both...

glutonium•2w ago

unlike if u just have a while(true) or a recursive loop rAF is better

ἔρως•2w ago

instead of aiming for fps, aim for lower time between frames the lower, the better however, more consistent is better than lower frame times a game that has a frame time of 16.666... to 5ms will feel like absolute shit however, a game that is consistently within 18-18.5ms will feel a lot better that is a HUUUUUUGE ... depends raf is a lot better because it waits for the next frame, which is better than a busy-loop, specially for devices with batteries (phones, tablets, laptops and other) a busy-loop is the classic while(true) loop, which does the waiting by running the cpu as hard as it can, and check if it can start taking care of a new task instead of clearing the window, you use double-buffering, where you draw everything into a canvas and then copy it all to another canvas weirdly enough, that operation is faster than it seems but still, it is a bit slow compared to using a single canvas

glutonium•2w ago

i see.. wait whaa.. why do u need 2 canvas?

ἔρως•2w ago

one to draw everything, one to display imagine you take 2-3 frames to render a whole canvas instead of showing something half-done, you stick to the existing frame when it's done, you copy everything to the other canvas, at the end of the raf

glutonium•2w ago

i see i see so is it the canvas buffer that u would transfer?

ἔρως•2w ago

just draw the canvas with drawImage it's slightly faster than setting the pixel data or trying to send stuff from a buffer to the other buffer

glutonium•2w ago

i see ok makes sense

ἔρως•2w ago

if both are in the gpu already, copying from one to the other is child's play and if not, well, c++ is what's running the copy and not js, making it faster and even if it is faster by 0.1ms, that is MASSIVE!

glutonium•2w ago

true

ἔρως•2w ago

besides, it's a lot easier to use drawImage

glutonium•2w ago

idk about that, never really used it too much xD

ἔρως•2w ago

ive used it on a project i can even implement frame skip and update skipping with this technique you dont need 60fps to run tictactoe

glutonium•2w ago

fair enough lol

Joao•2w ago

I suggest looking at this video, it's great to understand why rather than how:

Joao•2w ago

https://www.youtube.com/watch?v=yGhfUcPjXuE

Jonas Tyroller

YouTube

Dear Game Developers, Stop Messing This Up!

DeltaTime. This video is all about that mysterious variable that oh so many game developers seem to struggle with. How to use DeltaTime correclty? I got the answers and hope this video will help to deepen your understanding about how to make frame rate independent video games. 0:00 - Intro 0:34 - Creating The Illusion of Motion 1:11 - Simple Li...

ἔρως•2w ago

oh, that guy makes good videos about this type of stuff

Gaming

Programming

Meaning of FPS and how to slow down game animation