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
27 Replies
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.
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.
I can recommend Franks laboratory on youtube he has great videos on making games in javascript
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
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...
💯 Yep I see, thanks !
yeah I'm following chris courses and frank laboratory
i might be wrong, but FPS != rAF ...
=> if a script blocs the event loop, the rAF might trigger later, no ?
what's rAF?
requestAnimationFrame()
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
i know, but since the original post seems to mix both...
unlike if u just have a while(true) or a recursive loop
rAF is better
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 canvasi see..
wait whaa.. why do u need 2 canvas?
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
i see i see
so is it the canvas buffer that u would transfer?
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 bufferi see ok makes sense
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!
true
besides, it's a lot easier to use
drawImageidk about that, never really used it too much xD
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
fair enough lol
I suggest looking at this video, it's great to understand why rather than how:
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...
oh, that guy makes good videos about this type of stuff