HUD - Intro Animation

Eyes in this video we are going to be creating an intro animation for our Hudd. So let's jump right to it. So here in the concept browser go ahead and double click on your HUD widget blueprint to open it up and well we're going to be aiming to do here is make our score box right here in our lives box animate in from the sides of the screen while that camera introduction is going on kind of while the camera or the gameplay cameras panning back and up into position. We're going to have these hot elements slide into view. So the first thing we're going to do here is in the bottom portion of our widget blueprint we are going to add an animation by clicking on this green plus animation button right over here and we're going to call this HUD intro. And once you select that you will see if I click off of my compiler results right here you will see that in your timeline tab right here you have a timeline to work with. And what we can do here is set something called keyframes to define the position of where we want this particular score box and eventually the lives box to be at particular moments in time. OK before we create our animation what I want to do is I want to actually set our score box off the side of the screen by default OK. So what I'm going to do is select our score in a vertical box right here. That encompasses our score text and our score value and over the details panel. I'm going to give it a new position and the new position I'm going to give it is a position X of negative 350. So that's going to do is it's going to jump it off the side of the screen so we can actually see this if we were to jump in and play right now we would not see our score box appear on our Huhn OK. The next thing we are going to do is actually add some positional info for our score box to our Hudd intro timeline below. So what we can do here is over in the details panel wherever you see these little squares with the little plus Simelane you can add these particular parameters to your timeline below. So what I'm going to do is click on this position X right here and you can see the tooltip says as a keyframe for this property to the current animation. And when you do you will see that we have our score in full box now. And it's the time line. And if I like and if I click this little drop down triangle right here you can see that I have positional information right here as well. Now notice that I had my Hudd intro animation selected and my score in full box over here selected as well before I clicked on my details panel over here to add this to the time line. So that's kind of the flow you should work with. Select your animation select your widget then select what property you want to animate over time. Now if you look carefully at the labeling for this is a little unintuitive right here in our details panel we have position x position why size X size y that does correspond to left top bottom right. Because if you look at the values for these four guys they're the exact same as these four values up here. I don't know why they label them differently but such is the case. OK. So you can see that when we clicked on our position X right here it added a keyframe this red dot here at our zero point of our timeline which is what we want we want to say at 0 seconds into this animation. This is where we want our score in full box to be. Now the next thing we want to do is define where we want this score box to be at some point down the road. And what I'm going to do here is slide over our timeline right here and you can just left click and drag it to point to five seconds. Now if you want to zoom in and out of your timeline here which I like to do you can hold down the control key and use your mouse wheel to kind of zoom in and out you can see how it's stretching and squishing. And then you can use the right mouse button to kind of drag it left and right. So I'm going to hold down the control key and mouse in and now with my timeline slider here set at point to five seconds I'm going to click right here to add a new keyframe. At this current times the click right here only at this point of time. I do not want the score box to be off the screen. I actually wanted to be present on screen. So what I'm going to do is select right here this value and set this to be 30. So I could have changed that particular value in one of two ways one with my timeline slider right there at that point in time I can change it over here on the left hand side. Alternatively what you can do is you can right click on these keys and come under properties and change the value as well. So now if I am to scrub this tanlines slider back and forth here you can see where it is going to do. It's going to slide off and slide on and you can even click the play button to see how fast this is going to happen. Just like that. OK. Next thing we are going to do we're taking care of our score box over here let's move our timeline slider back to the zero position real quick. You'll notice that this green bar on the left hand side shows the starting point of the animation and this red bar on the right hand side shows the ending point of the animation. That's just good to know. OK next thing we're going to do is move this timeline slider on back to the 0 second mark because now we want to deal with our lives in full box so go ahead and select your lives in full box. And the first thing we want to do is by default set this off to the side of our screen. OK so I have some values in here that I have in mind. So with this guy selected come into the details panel and under position X. let's set that position X to be a value of 50. So it is also going to be off to the side by default and next what I'm going to do is click this button right here. This tiny little tiny little I kind of all know what you call that. And when we click this we are going to see that we have now added the lives in full vertical box to our timeline and you can see we have a keyframe set right here at the zero second mark as well. So here too. I want to click on this little drop down triangle to expose my parameters here and so this is where we do want this info box to be at the zero second mark. So I'm going to come take my slider all the way over to the point to five second mark and then I'm going to add a another keyframe right here by clicking this plus button and this time I'll use this method to change the value. I can simply right click on it come under properties and for the value I want to change just to negative 1 80 like so and so now if I scrub this timeline sledder back and forth you can see how both elements are going to slide into view just like that. Next thing we need to do is jump on over to our graph tab here and we are currently in our Get lives function. I want to jump over to the event graph tab and we're going to build off of this little bit of script that we have in here but we're going to do is we're going to add a delay node after we construct this widget. So drag off of your add a delay node and we're going to add a delay of about four seconds. And as soon as this widget is constructed after four seconds what I want to do is I want to then play this animation that we've just created. So if you come over into your my blueprint section here on the graph tab you can see under the variable section a category for animations has now been added. This Hudd intro right here is what we had just created back here in our desire tab Hutte inch or so back over here on the graph tab. And sure enough you don't see that. Make sure you click this little triangle to expose it. So let's let click and drag in our HUD intro so we can talk to it. We're going to get it and then we're going to drag a wire off of this and simply type in the Word Play. Play animation is what we're looking for here. And we're going to hook this in like so there are some parameters that you can adjust your such as playback speed number of loops etc.. Anyways I'm going to left click drag out a marquee selection tab the C key. Call this HUD intro animation. We're going to color this green. Let's compile and save. And now the moment of truth. So what should happen here is when I click play about four seconds into our camera kind of panning up into view you should see our HUD's slide into view. Here we go. And it did do just that. You know I actually didn't like the timing of that. I think I'm going to wait a little bit longer than four seconds. I think I'm going to wait as much as let's try six point five seconds try one more time compile and save. Yeah I like that a lot better. Now I know I noticed that I've also got my fruit spawning in way too early as well. That's total side issue we'll do a Polish pass Polish pass in a little bit but that's going to do it all for this one guys. We have created a HUD enjoy animation. Great job. Let's keep it going we'll see you in the next one.