Timeline Tutorial | Easy Animations In Unreal Engine 5

timelines are an incredibly useful tool inside of Unreal Engine they give you the ability to quickly and easily add animated Behavior to a variety of things while they're primarily meant to be used for simple animations they are useful for a lot of tasks some of the common uses of timelines are creating recoil patterns automating lights and material colors controlling day night cycles and most commonly animating static meshes such as buttons levers and doors so without further Ado let's Jump Right In and look at some of these examples so here we are in a first person template and I have a few things set up here using timelines as you can see we have this moving platform we have a very simple door that if I walk up to it it's going to open and play a sound and then when I leave its proximity it's going to close and play a different sound so and then we have this light that is just switching between red and blue and we're going to cover how to make each of these in this video but before we do let's just make a basic actor and we're going to call it timeline example and we're just going to have a look at the Timeline node itself so I'm going to open this and we're going to go to the event graph Now to create a timeline what you do is you right click if you type in timeline you'll see you get this option to add timeline and it's a little different than other nodes so let's add it and you're going to see we get prompted to change its name so I'm just going to call this example timeline and I want you to notice that it creates a component variable over here that I can drag out and the first difference between the timeline node and other nodes is that this is actually treated as a component inside of an actor it doesn't show up in our components panel but we do have a component variable that stores all the values related to this timeline and we can use this to do a whole bunch of things during runtime which we'll look at that a little bit later let's just look at the Timeline node for now it may look intimidating it's got a lot of different pins but it's actually really straightforward to use so to get started using this timeline what we're going to do is we're going to double click and you're going to see that it opens a new tab inside of our blueprint which again is different than most other nodes but in here is where we're going to have all of our track settings and this is where we're going to add curves and other things for the timeline to use so if I click new track you're going to see we have a few different options here let's just start with a flow track and once I create that flow track you're going to see we now have this curve that we can edit right inside of blueprint and it's prompting us to give it a name so I'm just going to call this float track as a matter of fact to make it clear I'm going to call it my float track and before I do anything I'm going to go back to the event graph and I want you to notice that it creates a pin for that float track so if I go in here and I add another float track you're going to see it now outputs two floats let's click on this and delete this for now and what we're going to do is we're going to add some keyframes to this flow track so I'm going to right click right here we're going to click add key to curve flow underscore zero and then you'll see we get these values up here we can set the time so I'm going to set it to 0 0 for this first keyframe and then I'm going to right click and add another keyframe and I'm going to set the time to 1 and the value to 1. and that didn't work for some reason there we go and you're going to see it goes off screen here so we can scroll to zoom in and out and we can right click hold and drag to pan around now if we want to fit this perfectly to the screen we have these two buttons here we have zoom to fit horizontal and zoom to fit vertical and now the curve is fit perfectly on the screen so this will do pretty much what you probably expected to do it's going to play over a duration of one second and output values ranging from zero to one over that second now at the moment the length of our timeline is actually set to five so this would actually play for five seconds it would get to one and then it would just sit there until it gets to five seconds let's change the length of our timeline down to one okay so to demonstrate this what we're going to do is we're going to print string and we're just going to print out that float now the updated pin as you could probably guess is going to run every time this ticks now as this currently stands nothing's going to happen because we're not telling it to run and you can see there's a lot of different ways to tell this to run but there's actually an even simpler way in this case so up here we have a few different options and one of them is autoplay if I click this and go back to the event graph you're going to see it now has this little icon here and each one of these will add a new icon to the top of the node so if I click Loop for example you'll see we now have two new icons up here and those are just useful so you know what's going on with the timeline node so I'm going to turn off Loop I'm going to keep autoplay on which means that this is going to run as soon as the game starts now obviously we have to drag this timeline example into our world and if I hit play you're gonna see over the course of one second it prints out a float that smoothly transitions from zero to one now you might also notice that we have this finished pin here and I'm sure you can guess what this does it's going to run when the timeline finishes so if I go in here and I do a print string and type timeline finished and then we compile and hit play you see at the end it says timeline finished and we also get this direction you know which we can use to switch and determine if the timeline is going forward or backwards we'll have a deeper look at this later when we get to the door and then we have all these pins here now let's just start with the playpen let's go in and let's turn off auto play and if I do that you're going to see it no longer prints out because nothing's telling this timeline to run and what I'm going to do is on beginplay I'm just going to call play and you're gonna see it plays just like before and there are a lot of scenarios where doing this as opposed to autoplay is much more useful although we're using beginplay here you may not want your timeline to just run at the beginning you may want to trigger it at some point down the line in your game so that's why these pins are super useful and you might be wondering what is play from start and what's the difference between it and play well again we'll demonstrate this further on when we get to our door but in a nutshell you'll see we have play reverse and then play from start and reverse from end so say the timeline's playing forward and it's at a value of 0.5 and then we call reverse it's going to start wherever it is and go backwards whereas if we were to call reverse from end it's going to jump to the end of the timeline and then go backwards so we're going to take a look at that in just a second but before we move on to creating all the examples in the level I just want to show you a few more of these settings up here so we saw autoplay and we also have a loop which again will do exactly what you expect it's just going to Loop over and over and over again and this is incredibly useful in a lot of scenarios we also have a replicated button if we're dealing with multiplayer ignore time dilation which we'll ignore I believe changes to the tick rate in the level we have our tick Group which we're not going to get too deep into which each of these mean it's a little bit outside of the scope of this tutorial I suggest you look into what the different tick groups are normally I leave this on pre-physics and then we have this use last keyframe button now I'm gonna be honest I never really notice any difference when I use this so in this case for example I'm turning off Loop and if I turn it on and hit play you're gonna see it ends on one if I turn it off now and hit play it still ends on one I'm not sure what the deal with that is um if anyone knows let me know in the comments down below I've never really noticed a difference when turning that on or off okay and yeah and as you saw we can also add a variety of other tracks we can add a vector track and they're all pretty self-explanatory I'm going here and call this my vector and in here we can add key and values to all curves because with a vector track we get three curves one for the X one for the Y one for the Z and this will do exactly which what you would think we have a vector output here now and if I were to print this out you'll see that it Loops over those values I honestly don't find myself using the vector track that much if at all um the other ones I've used pretty heavily but not really the vector track I can usually achieve most of what I'm trying to do with the flow track so that's not to say don't use it or that there's anything wrong with using it I just personally don't find myself using it a lot and then aside from Vector tracks we have color tracks which we can create a sort of gradient to lurp over so if I set this to blue and then click here and set this to orange I accidentally added another keyframe to add and delete these you just select one you can click delete and to add a new one if you click in this area right here it'll add a new one although I've used this one before I don't use it that commonly but it does have some good uses like automating lights and material parameters which we'll have a look at the light examples shortly and then finally we have an event track now this one I do use a lot and if we add a keyframe in here we'll call this my event track if I go back to the event graph you're going to see that this shows up as an execution pin and this can be incredibly useful in a lot of cases now as far as I know the actual value of this keyframe doesn't matter that is where it is on the y-axis it really only pays attention to the time as far as I know and yeah you can now see an output for each of those tracks that we added we have our float our Vector our color and then that event track and we can add more than one of each of these I could go in and add another event track and you'll see we get another event track now it's getting kind of messy in here I'm just going to delete everything and finally there's one other option in here and that's add selected curve asset now I don't typically add custom curves this way I do use custom curves with timelines but I'll show you if I go into our content browser and we go to I believe miscellaneous and then we have a curve we'll create a float curve and we'll just call it my custom float curve with it selected I'm supposed to be able to go in here you can see it's not grayed out anymore but you'll see nothing happens and I've noticed it's kind of buggy like this I'm not really sure why if I delete this and then I try doing that again now it's added but yeah it sometimes behaves weird the better way in my opinion is to just add a float track and then go in and select the curve you want to use and when you do so so let's let's real quick go into the content browser I'm just going to add some keyframes here like that and my custom float curve you're gonna see we have those keys in here but we can't actually edit them directly in here in order to edit them we have to go to the curve asset that we created and you'll see that it updates so as I mentioned before we have a component reference to this timeline and we can do a bunch of useful things with this during runtime so if I drag off of here if we go down to components and then timeline you can see we have all kinds of different functions and whatnot that we can call for this timeline I'm not going to go through all of them but basically all of these pins um we can set custom curves on the Fly we can set the play rate pretty much add any track that we want change whether or not it's looping check if it's reversing all kinds of different stuff that's really useful in a lot of different scenarios for example adding being able to add a custom curve on the Fly is extremely useful especially if you were to be making something like a weapon system and you're using this to for a recoil pattern what you could do is you could have a base gun class and then you could have a timeline that does all the logic of changing the player's yaw and pitch and all that stuff and then on that parent class you could have a custom curve that gets set on a function that you could call from each child and add in based on how you want their recoil to behave we're not going to look at that in this video that's a tutorial for another day it's a bit out of the scope of just basic timeline Behavior but it is a very useful aspect of timelines to know about nonetheless so we're gonna hop out of here now and we're gonna go and create each of the examples that I've showed you at the beginning of the video from scratch all right so I've cleared everything out of my project let's start with the simplest one which is going to be the lamp so we're going to create an actor and we're going to call it BP underscore lamp and maybe we're making a siren or something like that but in here we'll add a static mesh and we'll just use the default lamp static mesh that comes with the starter content and we'll add in a point light okay I'll just drag this point light up a little bit I'll set its intensity a little lower to like 1000 and then we'll go in here we will create a new timeline and we will call this light color timeline all right and then we'll just click on it we'll add a color track we'll call this light color and then what I'll do is I'll select this first keyframe here double click and I'll just set the blue let's set the red value to one then we'll click this last keyframe we will also set this to a red value of one that way it starts and stops on the same value we'll set it to looping and then in the middle here we'll add another keyframe and we'll turn the blue all the way up and the red all the way down and one thing that's kind of annoying is I don't have the boxes that let me set the time directly so I kind of just have to eyeball it here as far as I know but that should do for this anyways now we're going to grab our Point light component and we're going to do set light color we'll go here we'll set it on update and we'll plug in that light color pin so if I compile drag this into the world I'm just going to mount it up right here and I hit play nothing's happening and that is because I accidentally set this to Loop but didn't set autoplay so now if I hit play you'll see that it's changing color and it's stopping on red because again I didn't change the timeline time so let's set this down to one and now I don't know where this came from let's delete that it'll go from red to blue back to red and then Loop over the course of one second so if I hit play there it is okay great and that's our Point light done so now let's make the door and this is a very common thing to do with timelines the way I'm going to be doing it in this video is super simplified so I'm going to be just using a collision and triggering it that way I would never make an actual door that way I would make some kind of interaction system as I've done in other videos like my interface video but I'm not going to do that in this video for the sake of simplicity so what we're gonna do is we're gonna add a static mesh call this one door frame and then we're gonna set it to the we're going to use the door meshes that come with the starter content so there's the frame we're going to add another static mesh and this one is going to be the door so I'll go in here type door okay and we'll just eyeball it for now and put it into place and then I'm going to add a box collision and I don't want this parented to the door we can parent it to the door frame like so and I'm just going to position it change its box extent here like so okay great now in the event graph we'll just delete all this we're going to select the box in the components panel and we're going to add an event we're going to add on component begin overlap and then we're going to add and on component end overlap and we're going to cast to the first person character so that we know that it's the first person character that's overlapping and leaving the collision and not just some random object in the world and then we will create our timeline and we'll call this door timeline now there's a few different ways that you can go about doing this again I'm going to do it the simplest way I'm going to go in here I'm going to add a float track I'm going to call this uh Alpha I'm going to set the length to one and then we're going to add a key and we're going to set it to 0 0 and add another key set it to one one will fit the view to screen I'll select this keyframe and then shift click this keyframe and then we will right click and we'll click Auto and that's the key interpolation so you can see it Smooths out there you can just like with any curve you can go in you can edit these tangent handles and change how the curve interpolates but we're just going to set it to Auto so it's nice and smooth we'll compile go back into the event graph you see we get that Alpha output so what we'll do is we'll grab our door and we're going to set relative rotation we'll split this strut pin and on update what we want to do is we want to multiply this by whatever we want the max rotation to be so in practice what you would probably do is create a variable here that would be Max offset and set it to some value on a case-by-case basis in this case I'm just going to set it to 90. and we're going to plug that into the Z and if you think about it when this value is zero it's going to multiply 0 by 90 so the door's rotation on the Z is going to be zero which is closed then you know it's going to make its way up to one let's say it's at 0.5 0.5 times 90 is going to be 45 so it's going to be halfway between closed and open and when it gets to 1 1 times 90 is 90. it's going to be rotated at a 90 degree angle and if we reverse it the logic applies the exact same in Reverse going back to zero so when we overlap with the Box we are going to play and when we end overlap we're going to reverse you might be wondering why we did play and not play from start and reverse from end we'll have a look at that in a minute but real quick let's bring our door in let's hit play and I accidentally did that to the door frame which we don't want we want to do it to the door so now we walk up the door opens we walk away the door closes now why don't we want to play from start and reverse from end well let's do that real quick and let's see what happens so at first glance it doesn't seem like there's any difference but if I walk up and then walk away notice how it snaps to the end and then closes whereas if I just do reverse and play you're gonna see that if I leave Midway through the animation it starts reversing from where it was already at so hopefully that's clear with the difference between those pins are now as you saw in the beginning of this video I had sounds on the store and I think now would be a good time to demonstrate one of the many uses of the event track so we're going to add an event track and we're going to call it play door sound and I'm just going to add a key I'm going to add it a little after the very beginning like so I find that doing so usually uh looks and feels a bit better and it also depends on your sound some sounds for doors like it's like a creaking and then a shut so you might want to set it appropriately so that the actual slamming shutdown lines up properly in this case I'm going to be using some assets I got from the marketplace you can use any sounds you want it's not a big deal but what we're going to do is we're gonna come off this direction enum and we're gonna do a switch and we're gonna plug this play door sound on because we have this right here at the very beginning so when we hit this coming from one direction we want to play an open Sound and when we hit it coming from the other direction we want to play a closed sound so what we're going to do is we're going to play sound at location we'll get our door and we'll get the world location plug that in like so and I'm just gonna come in here search for one of those assets so when we're moving forward we want to play an open sound so we'll I'll choose this door comment open and then when we're moving backwards we're going to want to play a closed sound we'll do that one and now if I hit play s an open Sound and it plays a close sound and yeah that's really all there is to the door in this case again this is a very very simple setup for a door there's so much more that you can do with this you can make the door always open away from the player you could have different rotation amount you could Implement an entire interaction interface but again that's outside of the scope of this tutorial I just want to focus on timelines alright so finally I'm going to create the platform and I'm going to use the platform to demonstrate more of the functionality of the timeline so let's go in create a new actor and we're going to call it BP underscore platform all right we'll add a cube and let's just size this down on the Z great now let's come in here and let's create a new timeline and we will call this our platform timeline and we're going to open this up we're going to add a new float track I'm going to call this offset Alpha and we're going to set this to a value of 2.5 I want it to last five seconds in total but you're gonna see why we're doing this so I'm gonna add this keyframe in at 0 0 I'm going to add another keyframe and it's going to be at 2.5 and 1. and we'll fit this to screen select both keyframes and select auto so what we're going to do is we're going to go back to event graph and we're going to start this node on begin play we'll grab our Cube and we will set its relative location split the struck pin and we will plug this into the y or no I'm sorry what we're going to do is pretty much the same thing for the door we're going to multiply it by some offset in this case it's not a rotation it's a linear offset we'll set it to 300. we'll plug it into the Y and then we'll plug this into update and if I compile and I hit play well I better add it to the world first you'll see that it moves over 300 units I should probably move it over a bit because it Clips at the door but it stops at the end now we don't want that we want it to move over that 300 units and then move back so how can we achieve this well first let me move this over here so that it stops clipping with the door move the door over too so what we're going to want to do is unfinished we're going to want to call a custom event but before we can even do that we have to determine which direction we're moving in so we're going to switch on the timeline Direction and on finished if we're moving forward we're going to create a custom event and we're going to call it reverse platform and we will plug this into reverse now instead of doing this on beginplay what we're going to do is create a custom event move platform forward and let's rename this so that it's consistent to move a platform back plug that into play and then on beginplay we'll call move platform forward like so and now when we're moving forward and the timeline finishes we'll call move platform back and move platform forward compile if I hit play you'll see it gets to the end and it just basically Loops back and forth and this is just another way to make looping behavior that can be extremely useful in a lot of different cases now one more thing I want to demonstrate this new time variable here so the timeline's total time is 2.5 seconds and then it reverses let's just say we wanted it to start halfway between that so as a matter of fact to make the math a little bit easier we're going to set the total time to 2. and we're going to bring this value to a time of two so now it's just going to last four seconds in total now if I go in here and I do something like set this to one and I compile and I hit play nothing's going to happen because any time we want to use this new time variable we have to call this so what we're going to do is on begin play we're gonna add a sequence node and we're going to call this and then we're going to set that new time and now you should notice it's not going to start right here it's going to snap to about the middle and there's that new time now a specific instance where this is incredibly useful is when making day night cycles you can do some math and you can set this up in a way that you have the ability to set the start time of your day night cycle for your game and it's incredibly powerful and Incredibly useful to do in a future tutorial when I make a day night cycle I'll be demonstrating how to do that but yeah that's pretty much all for this video guys I hope you enjoyed if you have any questions comments or concerns leave them in the comments down below if you like this video please consider slapping a like on it and for more content from me consider subscribing I wish you all the best of luck in your projects

Channel: Tyler Serino

Views: 3,916

Keywords: unreal engine, unreal engine 5, unreal engine tutorial, ue5 animation, game dev, ue5 tutorial, how to make a game, unreal engine blueprint, unreal engine timelines, timeslines, timelines node, easy animation, open a door, open a door unreal engine, ue5 door tutorial, ue5 animated light, ue5 moving platform, moving platform tutorial, unreal engine curves, unreal engine beginner, epic games, game development, unreal engine 4, ue5

Id: UlcK7MSP75w

Length: 28min 14sec (1694 seconds)

Published: Mon Sep 25 2023