Gamedev In-depth Topics: Time-based vs. Frame-based Movement

Key Takeaways

welcome back to another video on in depth topics in game dev this is a series where we talk about certain subjects that students may find a little bit confusing the first time around or haven't quite found the right explanation for this time we're gonna be talking about time based versus frame based movement which is how you ensure that the animation that's happening in your game happens at a consistent speed even if you start to experience lag as always these videos will be coded in Python but this is a totally language-independent topic and whatever whatever language you're coding in or whatever game framework you're using this this lesson will apply just as well so in this video I want to talk a little bit about timing especially how it relates to movement so I've made a little program here where we have a sprite and the sprites gonna spawn on the left-hand edge of the screen and now I want to make this sprite move I want this sprite to just move to the right across the screen and I want it to take exactly 5 seconds to make that trip so how would I do that well if we look at a quick calculation here the screen is 600 pixels wide and I want the sprite to take 5 seconds so that means I wanted to move a hundred and 20 pixels every second but we don't just move 120 pixels wait a second and then move on to another hundred and twenty right we're moving we want to smooth animation so we want to move every frame and if we're running at 60 frames per second and we want to move 120 pixels every second that means we're gonna move two pixels every frame and if we move it exactly that speed it will take 5 seconds to cross the screen so that's easy enough to do we will give our sprite a velocity of two and we will just update it by moving the X by that velocity and that will make our sprite move so now our sprite is moving and it's taking five seconds to cross the screen and that's great although real quick I think for the purposes of our testing I'm gonna go ahead and make it wrap around the screen so that we can see it keep going so if the rectangle is right actually let's let it move all the way off let's say if the left is greater than width then right equals zero okay so so we have our sprite moving and it's moving at the speed we want because it's moving a certain amount every frame but the problem is what happens if our frame rate changes imagine we have a really busy game with lots of sprites on the screen lots of activity going on and we start to get some lag in fact let's imagine we got a lot of leg and our frame our frame rate dropped to 30 frames per second so that means we're still gonna be moving to pixels every frame but we're only moving 30 times per second and not 60 and now all of a sudden our speed is half of what it was we're taking ten seconds to cross the screen so if this was a bullet or it was a you know a rocket flying across the screen now suddenly it's traveling slower and it's taking longer to travel the same distance and this is not very good we want our objects in the world to travel at the speed we want and not be tied to the frame rate we want them to be independent of the frame rate and we can accomplish this by looking at how long the frame is taking now most game frameworks provide you some way of finding this out in the case of tie game when we do RFPs when we tick the clock to keep our timing of our loop to the FPS we wanted it returns us back a value and that value which we're gonna call DT or delta T which is what most game frameworks will call it is how much time the previous frame took all right if we're running at 60 frames per second that will be one sixtieth but if we start to get lag this number will change and in PI game this number is given to you in milliseconds so I'm gonna go ahead and just divide by a thousand so that we have it in seconds instead so now we have a delta time for how long the previous frame took and if we look back at our calculation that we did a minute ago we know that we wanted to travel at 120 pixels per second that's the speed we actually want our sprite to move at and notice this has nothing to do with frame it's just how many pixels to travel in one real second of time so that's what we want to set our speed to so when we update our sprite we're gonna pass it the DT from the game so it receives the DEET the delta time okay and Delta just stands for change if you haven't heard that term before Delta is the Greek symbol that looks like a little triangle and you just ants further change so this is the change in time since the last frame so we're gonna change our VX here and we're gonna make our VX be 120 right since that's what we want our speed to be and then we're gonna move at 120 times whatever the change in time was so again if this was if we're right now if we're going in at 60 frames per second then we're gonna see the same calculation we're gonna take that 120 and it's gonna be multiplied our mean sorry divided by or x 160th right it's gonna be multiplied by one sixtieth and get s2 so if we're running at 60 frames-per-second will still be moving to pixels every frame but as soon as this number changes then the number of pixels per frame is going to change and we won't have to recalculate it the computer is going to do it for us so right now if we set this back to 60 you'll see that we're taking five seconds to cross the screen same as we were before but now if we start experiencing lag and we drop to 30 frames per second our sprite still takes five seconds to cross the screen and in fact if something really horrible happened and we dropped to ten frames per second still we're gonna take five seconds to cross now obviously the animation isn't as smooth anymore but that's okay if you're running a tenth frame ten frames per second this is what's going to happen but at least our sprite isn't now taking what six times five is thirty seconds across the screen right which would be a ridiculously slow bullet if this was a bullet so now we've made our movement of our sprite independent of the framerate so that's all there is to time-based vs. frame based movement you just keep track of how long it's been since the last frame happened and again most game frame works in one way or another we'll give you that amount of time and you use that to figure out how many pixels you should move for that particular frame and then everything will stay consistent you just set your speeds in pixels per second and everything will remain consistent so I hope this video was helpful and that if you were struggling to understand time based versus frame based movement sometimes the documentation out there can be a little hard to get the first time through but you should in most cases you want to use this in your games that you making if you liked this video please press the like button below and help others find it and if you haven't already think about going over to our patreon page and contributing a few dollars a month that would really help in producing the videos and keeping this channel going the videos will always be free and it's not required but it would of course be greatly appreciated thanks and I'll see you in the next video you