Crafting Dynamic FUI Animations in Unreal Engine Without a Single Keyframe

what up what up wbys here and today I'm excited to show everybody how we can make this futuristic HUD design all inside of unroll engine 5.4 with the motion design tools and there's no key frames in here at all so what you're seeing we're actually using the animator stack to just animate all of our Hood designs right here inside the viewport and the cool thing is I went through and I created all these from scratch so I can share this with you guys absolutely free so if we looking in Adobe bridge right now you can see I have all these little techy images they weren't hard to build I built these out in illustrator but I'm going to give you the spack file so that you guys could go through download them yourselves and actually play around with it and then these right here these are the Illustrator files because I did build these out in Adobe Illustrator everything is Vector so if you want to go through and manipulate these anywhere that you want it I'll also include all these files there as well so you have the spack files you have the image textures and you also have the vector files just to play around with it and then if you're not familiar with how to use back fils make sure you go to this tutorial I'll also have it linked down below but this is going to show you step by step exactly how you can use the spack fils to import this into your scene as well and before I move forward I want to take this opportunity to give a big shout out to Andy blondon he's an inspiration for this tutorial without him I don't even know if I would have came up with this so big shout out to Andy over there at epic games so getting started we're going to start with a completely blank slate here so now we have a blank scene here instead of unroll engine and the first thing you want to do is come up here to edit come down here to plugins and inside of search you're just going to type in design now I already already have it activated but you want to have motion design activated this is going to bring in the motion design tools and then also if you want to use the spack file type in storm and you want to activate these as well and that's if you want to take my project file and import it to follow with this tutorial so I'm going to exit this out now I'm going to come up here to selection Mode come down here to motion design and then I'm going to come up here at the top where it says motion design left click on this as well and now this is going to bring us into our motion design window and which you can see right here we have the motion design outliner I have my regular outliner this one is just hanging so I'm going to put on my second monitor there and we have our operator stack you want to make sure you have this open because we're going to be messing with the animators right here and if you don't see this if you come over here to your left hand side where it says operator stack select this and this is going to pop this over here and then one last thing right here where it says material designer you want to left click on this and that's going to bring up our material designer as well which is going to be really important for this tutorial now before we get started with anything else we're going to start off with a blank slate so I'm going to come over here to my motion design outliner which I just move that over right there and what I'm going to do is Select everything in here and I'm just going to delete it now if I come over here to where it says create defaults left click on this this is going to bring up this window that tells us that it's going to create something new for each one of these items here so we're just going to click spawn and now everything is going to be lined up as we need it to be if you come right here to where it says default scene you can see it made a camera a post PR volume it made a skylight and it made a directional light for us so everything is built by default even our sequencer down here which is going to be at 5994 frames per second which is default for broadcast and television and then also we still have our content browser down here as well in which I'm going to save all cuz that's always a good idea and then down here if you want to follow with the exact images I'm using I'm using the ones called dot I'm using the one called wimbush teore 02 and then wimbush teore 04 but feel free to use any of the items that I supplied for you now to get started we're going to come up here in the top leftand corner and you should see under 2D we have this button here call it rectangle so if I click on this twice now you'll see we have a rectangle inside of our viewport and if I come down here to the bottom left where we have this align actors if I left click on this and then I'm going to click on screen and then all the way at the bottom in the right this is actually going to stretch out a rectangle to be 16 by9 so if I select this now it's going to Compass our entire scene which is what we want now let's build out the first background which is going to be our grid background and so in order to do that if you look over here on the right hand side under material designer we could create a new material or if you come over here to rectangle and come down here under your details panel where it says material type if I select this you can see we have material designer so that's two ways that we can get to material designer so I'm just going to do it right here and now you can see that we have this UV grid right here and on the right hand side you'll notice that we have material designer with this layer in here now if you haven't seen my previous tutorial on motion designer material designer is very powerful and the easy way that we can actually do texture stacking inside of unal engine 5.4 similar how we do it inside of Photoshop so the first thing I'm going to do is click on this grid right here and then down here where it says texture actually where it says type we come over to texture select this and I'm just going to do a solid color now you can see that it correlated with a viewport right there and it just made it gray but I'm just going to make it maybe like orange I like that color a lot click okay and then now what we want to do is actually add this dot pattern onto this now the way that we would do that is come over here and this is going to be our mask so if you select this white texture right here this is where we're going to be able to put any of our mask items into and which is just going to be a black and white file or anything of gray scale descent so I'm going to come right here to where it has dots I'm going to left click drag this into here and now you can see that we have our DOT pattern and that's being driven by this orange color right here but if you look closely you can see that it's kind of squished out and that's because if we come over here inside of our details panel right here where it says material UV I'm going to left click on this and where it says mode instead of uniform I'm going to do stretched now this is going to make it absolute to what it has here inside of our DOT pattern so that's the easy way that we could go through and just make sure everything's lined up now the next thing I want to do is actually have like a gradient file kind of swimming through this just to add add a little bit of life to it so I'm going to come back over here to my material designer and if you notice right beside RGB we have this other panel caught opacity so I'm going to left click on this and the first thing you're going to notice is inside of our opacity it came up with this gradient pattern right here and which you see correlates with this over here so this is going to be your opacity stack and your RGB stack you're going to use these both together to come up with some really powerful designs so I don't want to have this be a gradient like this and so what I'm going to do is come right here where we have our gradient left click on this and under texture I'm just going to do solid color and I'm just going to actually make this one full white so now you can see right now everything is opaque again and now if we come over here to the right side where it says material stage this is where the Magic's going to happen so we're going to drive everything with another mask down here under texture so right here where it says white square texture I'm going to left click on this and you can see that there's a bunch of default textures that come with underwat engine already so I'm going to type in tore default and there's this one texture I like to use which is down here at the bottom so tore default texture 2D select this one and you can already see that we're starting to get some of that transparency in there everything isn't fully opaque we're getting some gradient in there and that's going to correlate with this image right here now we can actually make this animate and we're going to do this one with the effects layers so if you look right here and this looks very familiar to photoshop right like we have this effect layer you can toggle it down and this is where we're going to see all of our effects so the first first one we're going to do is come right here to where it says add layer effect left click on this and let's actually crunch this sound a little bit so right here where it says Alpha we're going to come down here to Alpha level so I'm going to left click on this and now you can see underneath here now we have Alpha level in which if I click on this you can see now we have some attributes that popped up here that we can manipulate so I like to mess around with these numbers a little bit so let's move this maybe up to somewhere around there and you can see this is almost working like how level will work inside of Photoshop or after effects right so what we're doing is you can see it correlating with this right here as we're messing with it it's actually crunching it down there a little bit you can see it happening real time inside your viewport here so this really helps out just to help out with our design now let's get this moving again we're going to come over here to we say add effect layer I'm going to left click on this I'm going to come down here to distort and we're going to click on Wave War now if I select this now you can see that it's starting to move inside of our viewport here so if I select this this is going to bring up these attributes here and this is where you can really have fun with it and this is just adding a little bit of life to our background so it's just not a static. image so I want to slow this down a little bit so inside of amplitude for X and Y I'm just going to bring these both down to one just because I want to have some subtle movements in there but just go through and play around with as you see fit for these this is going to be totally up to how you want your design to look and then the last one I'm going to add here again come over here to add effects layer come down here to UV and I'm going to click on pixelate now we have these attributes down here which we could really mess around with so you can already see it's starting to put it into like these grid type patterns which I thought look really neat so I'm just going to leave the texture size alone but I'm just going to play with this so maybe let's say around like 65 looks a little bit cool so now we have like this pixelated texture back there it's not uniform we have some life moving within these dots and it's just starting to really look like a futuristic Hood but I don't like how dull these dots are so let's add a little bit of glow to these so right over here under your material designer I'm going to come right here RGB select this I'm going to come down here to add L effect left click on this and we're going to look for glow which is right here under color so if I select glow and then I select this again I'm going to pull this down and I'm going to select on glow and now we can just add our glow amount in here so I'm just going to scroll this up a little bit there you go that might be too much we just want to add a little bit of glow in there maybe around eight and now we're starting to have a glow effect on our dots maybe that might be too much maybe somewhere around six but just play around until you find something suffice so that right there you can see how the material designer is really powerful especially when you don't want to have a static background and you just want to add a little bit of life to it but now the real fun happens let's get into the operator stack so we're going to start off by creating a new rectangle again so again we're going to come up here into our top left click on rectangle twice that's just going to bring a rectangle into our scene I'm not going to make this one full screen what I'm going to do is actually create a material that's going to be part of our Hood so right here under material designer create material and then I'm going to make this one orange again so come down here under type texture I'm going to make a solid color make this one orange once again something like that and then I'm going to click on our mask area right here and I'm just going to take this wimbush teore 02 I'm going to left click select bring it over here and it was easy as that so if we want to make this a little bit larger I'm just going to make sure I have it selected here inside of my outliner let's move this over down here under panels or details I'm going to put this on like so and let's maybe make this three somewhere around there and then inside of my location we want to make sure that we bring It Forward a little bit so we're going to go maybe around like -6 here so if you're looking inside of our location I'm just bringing it forward a little bit because everything here is working in 3D space so if we would have kept it at zero at some point it's going to start colliding and you're going to get like these really glitchy effects let me actually pull out of my camera like that and then I'm just going to scroll around here so you can actually see what's happening so like I was saying this is actually all working in 3D space so I'm going to look through my camera again click on camera click on my Center actor like so and now let's get the animating this and so we want to use our operator stack we're going to come over here and under operator stack we have two sets of parameters we have modifiers and we have animators we want to go on animators and then right here where it says add animator I'm going to left click on this and then I'm going to come down here under time and I'm going to come down here under rotation so you can already see it's starting to go crazy there no key frames or anything and that's because if we come over here under length properties let me actually scroll down my details panel you can see that we have it for the pitch ya and roll but we only want to have it animating on the roll so I'm going to come and just delete these and only have roll in here and it's going a little bit crazy right so let's actually work with these parameters to get something that's a little bit more nice so up here under Global frequency I'm going to put this at 0.1 and now you can see we're already starting to get a nice rotation there but also it's starting to glitch like if you see right here we're getting to jump in the frames there there we go just right there so let's work to make sure we don't see that happen so down here under amplitude Min I'm going to put this on zero and then under Max let's put this up to 360 now this is going to guarantee that we get a full 360° rotation out of it no glitches or anything and it's as simple as that I went through and did that for a lot of these different techie type grids down here and I just kept repeating it but let me actually come back over here come to FX layer come down here to color just add some glow to this one as well so select this bring up the glow amount something like that and actually if I come back over here to our outliner I'm going to right click and I'm going to come down here under duplicate or you could have did controll D and I just duplicated that and then down here under my details panel let's put this one up to -5 so we move up more and now keep watching this because we're not even having anything turned off everything is just working real time inside of rev viw Port but with this rectangle selected right here if I come over here and says like this then I come right here and I drag this over into our mask now you can see we added that really easy so if I come down here make the scale up to five now you can see how easy we can start adding shapes in here and to make it even more fun if I hold down the o key on my keyboard left click and just drag this over now you can see that we're just adding multiple shapes in here and you just go through maybe make this one two make this one three something like that and you can see how quick and easy easy you can go through here and just do some really cool Hood designs inside of your scene so you can already see how quick and easy you can come up with some cool designs using the animator stack inside the operator stack but that's not all we can also use it on the camera just to add a little bit of Wiggle to it to make it really feel like it's coming to life so in order to do that under my motion design outliner let's scroll this down a little bit until we can see our camera and you can see right now our camera is actually locked so we're going to select this so we unlock our camera and now we can freely move around our scene here so let's find a cool position maybe somewhere around this somewhere around there that looks pretty cool and now let's add some camera wiggle just to add some extra effect to our scene so in order to do that what I'm going to do first is come over here on my left- hand side under actors I'm going to select this and then I want to select the null actor so if I select this twice now we should see it instead of our motion design outliner up here at the top and instead of no actor I'm just going to name it no camera which you don't have to do you can name it anything that you want let me move this over here like so and then I'm going to take my camera and actually put it under this but before I do that let me take my camera move it outside of this null right here so I can come down here to my transform tools and we're just going to take a look at our location I'm going to right click copy and then where it says no camera I'm going to select this I'm going to right click and I'm going to paste it and that way we make sure our null is in the same exact position as a camera so if I'm selecting between the two you can see the location is exactly the same so now what I'm going to do is take my camera bring it underneath my null and we're going to add our operation animators under this null so with this selected I'm going to select my operator stack let me scroll this down a little bit I'm going to come over here to add animators and then I'm going to come down here to where it says wiggle and I'm just going to do wiggle location so left click on this and now you can see see our camera is going crazy and this is moving that null that's actually holding our camera so same thing as before if you come over here to where it says link properties I'm going to left click on this I'm going to turn off the Y and I'm going to turn off the Z and we're just going to do it along the X for right now so if I come up here to magnitude make this 04 just to make it a little bit less hectic and then I'm going to come over here to relative location select this and then for my minimum let's make this like5 for my maximum let's make this five so we're just getting a little bit of movement in there we can maybe even do 10 just to add it a little bit more so we're getting some camera wiggle along the x-axis here that's looking really nice but let's add some rotation in here as well so I can actually click on this plus symbol come down here to rotation and now you can see our viewports going nuts there but let's turn these off and just go with roll so I'm going to move these down and for minimum let's go with -5 same thing for maximum let's go with five well maybe we could do 10 but you can already see how we're starting to add some camera wiggle to our camera here and this is adding a little bit more life to it but if you wanted more control over the wiggle we can actually come through and let's turn these off so I'm going to delete some of these here turn off that exit that so for this right here I'm just going to leave this for the X and then if I come back over here under add animators com come down here under wiggle I'm going to do it on rotation and then this way if you come down here we have more control over our magnitude so again make this one point4 down here under pitch and y'all turn that off then we're just going to make this -10 bring this up to 10 something like that in this way we have two separate animators in which you can go through and have even more flexibility on a global magnitude so that's going to be it like I said before I'm going to give you as my project file so you can go in there back where engineer the one that I did and then you'll also have the complete texture files as well if you want to create something from scratch you compl completely do so just make sure you go to my gum R to make sure you download everything so once again my name is Jonathan wimbush make sure you hit that subscribe button if you're new and until next time stay fresh keep creating and I catch you in the next video I see you soon take care [Music]

Channel: WINBUSH

Views: 11,707

Keywords: motion graphics, winbush, tutorial, immersive, school of motion, mograph, unreal engine, ue4, ue5, cinema 4d, c4d, motion, adobe, artist, megagrant recipient, unreal engine 5 in 5 days, Unreal Engine 5, UE5, gameplay, real-time, PlayStation 5, Nanite, Lumen, 3d, UEFN, Unreal Editor for Fortnite, Fortnite Creative 2.0, Fortnite Creative Tutorial, UEFN Tutorial, Fortnite Creative Map, UEFN Map, Winbush, Winbush Creative, Fortnite, Unreal Motion Design, FUI, HUD

Id: JXQ2ICg6wG0

Length: 19min 16sec (1156 seconds)

Published: Wed Apr 10 2024