Unleash Your 2D Potential with Unreal Motion Design

what up what up wimbush here and today I'm excited to get you guys started with the fundamentals when working with the motion design module inside of unroll engine 5 and as you can see inside this example I built this really quickly here in UNR Gen 5 this would be something that we would build in TV we're working at a TV network for a channel ID that would say like coming up soon or coming up next you will have it go over top of footage with a clean wipe and then it will have the station information in there which before we would do this in After Effects but now we can do it in unroll engine and the cool thing about this which which is going to be the first thing I'm going to show you guys I can actually share this with you guys as a toolkit if you want it to go in and you can manipulate it or just back where engineer it and it's called storm sync so in order to activate it we're going to come up here to edit come down here to plugins and then we're just going to type in storm and you're going to see storm sync so this is going to allow us to actually export this out as a spack file and I can give it to you guys you can reimport it and it's just going to be the same thing that I gave you guys so once you have this activated if you want to share this out you would come down here to your content drawer I'm just going to dock it in here and now where it says wimbush demo I'm just going to right click and then you want to make sure it says storm sync right here you're going to click on export and that's going to ask you everything that you want to export so you want to bring over your fonts you're going to bring over your images just everything inside of the demo here I'm just going to export by clicking next and then it's going to ask me what I want to name it is usually going to come up with your project name and then the date and then some numbers that identified at the end I'm just going to do with the project name which is wimbush demo it's going to tell you everything that's going to be packaged up and then right here where it says file path this is where you want to save it as I'm just going to leave it as default so I'm going to click on finish and once it's done down the lower right hand corner I can click on open folder and once it opens the folder you should see this do spack file now you can see that's only 400 megabytes a little bit under 400 megabytes in there but you can actually zip it up and it's going to be extremely small but now let me show you how we can actually drag and drop this into a new project so you guys could go ahead and work with it so I'm going to start a brand new project file instead of under engine 5.4 so I want to come down here to film video and Live Events I'm going to start with the blank template here down here under project name I'm just going to leave it at my project put on rate tracing and then I'm going to click on create project down here okay so we have a brand new project in here now the first thing we want to do is activate everything that we need in which I'm going to come up here to edit come down here to plugins and then inside the search bar I'm just going to type in motion and down here you should see motion design so I want to make sure I activate this and then I'm just going to click on yes on this message and then before I hit restart I'm actually going to come back up here and I'm going to type in storm now I want to activate both of these plugins here and then I'm going to click Yes again and then I want to activate this one storm sync motion design Bridge click on this one here click Yes again and now I'm free to restart the program now once it's done restarting I'm just going to come up here exit this out and then I'm just going to bring in my windows explore and which I have wimbush demo dosac right here I'm just going to left click drag this into my content browser and then this is going to tell us everything that's it's going to import so I'm just going to click on import here and now you should see all the files come down here in your content browser so right here where you see level and you have your file name I'm going to double click on this and now if I click on play you can see the project was brought right over so this is the project that I built before and then I started a brand new project file just dragged and dropped and I was able to bring that in now the cool thing about it is you could do it with several spack files and so if I had several different projects built out and I wanted to consolidate them all in one project you can just click and drag them all inside there and everything will be where you want it to be and the cool thing about that is whenever I do Project based tutorials moving forward I'm able to just export out the spack file give it to you guys in case you want to backwards engineer or just follow along so from here on out if I do a project based tutorial I'll be giving those to you guys absolutely free up on my gum road so now that we know how to bring projects in from other people let's actually start by building a project from scratch so with a brand new project opened up right now inside of unal engine 5.4 I'm going to come up here again to edit come down here to plugins and then I'm just going to type in motion and then I'm just going to activate motion design so I'm going to click on yes click on restart so now we're going to have a blank scene once again after the restart now the very first thing I'm going to do is come over here to my outliner I'm going to hit the top one here the atmosphere fog hold down shift select at the bottom reflection capture and I'm just going to delete because we're going to start everything from scratch now up here in the top leftand corner where it says selection mode I'm going to left click on this and all the way at the bottom you should see motion design now I'm going to left click on this and that's going to bring up this window right here but that's not all we want to come over here at the top where it says motion design we're going to left click on this and now you can see we have our rollers we have our motion design outliner here and everything is set up how we need it to be now we want to bring in our cameras and our lights and which right here where it says create defaults you want to left click on this and this right here is going to say add everything that we want now this was specifically built out to make it easy for anybody to just jump in and start creating and so that's why I like deleting everything first and then just adding it here so you click on spawn and then right here under default scene you see we have our camera we have a post proc volume we have lighting and then we have directional light as well so we're going to get into these here in a little bit but let's start adding in some of our shapes now on the left hand side you'll notice that we start seeing that we have 2D shapes here just like we have in like after effects arrive then down here we have 3D shapes which you can draw out and then we have our actors here as well in which you have nose text cloners splines and we can actually import Vector files as well but for this tutorial we're going to focus on the 2D stuff right here in which let's start by building out a rectangle so if I left click on this you notice that we get this red Grid in here and this is for if we want to draw on our shapes now if you want to turn off the grid if you come down here in the lower right hand corner where it says toggle's grid on and off you left click on this and that's going to turn that off then if you click again that's going to turn it on so this is for to help you draw your shapes out like if I left click in here and then I just bring it down here now you can see we have a rectangle inside of our scene so that grid really helps us out if we want to draw this out or if I delete this and I click on my rectangle if I click on it again now it's just going to bring in a perfect square into our scene so that's two ways that you can actually bring in these 2D shapes into your viewport and if I click on this box in the top corner so if I select this one right here now you can see we have our axes here in which if I drag this out now you can see we're starting to bring out our shape a little bit so now it's a rectangle if you drag it up now it's going to be up so this is also how way that you can bring out your rectangle here as well now if I come over here inside of my details panel with my rectangle selected let me drag this up a little bit if I come down here where it says shape this is another way that we can actually reshape this rectangle as well so right here where it says mesh size if I left click on this and click on free now if I start moving this over now you can see we're reshaping our rectangle same thing if I do it here now you can see that it's going up and down but if I do it where we have it locked X and Y if I select this now it's working in uniform now another way that we can control the shape if we come down here where we have this upside down triangle it says toggle shape editor overlay now if I left click on this this is going to bring up this box which kind of correlates with this box down here so if you didn't have it inside your details panel you could do it right here inside the viewport as well so if I move this up and down you can see we're moving our shape if you wanted to change the slant on it you just move this over like that you can actually make it diagonal let me zero this out same thing for the right side this as well zero that out and then down here where it says top left this is for actually curving this in so right here where it says size if I move this over now you can see it's running out that edge there if you didn't want to do it that way if you see this little dot when you hover over it if you left click on this we can actually start moving this in and out so that's another way of doing it you could do it over here as well so this is really handy if you want to make like graphic boxes or lower thirds this is exactly what you would do just to kind of bevel this out a little bit on the edges around them out I should say and then you can also do that down here as well so let me actually turn this off come down here where it says top leftt I'm inside of my details panel come down here zero this out there you go so these correlate what we saw over here inside the viewport same thing down here if you move it left and right let's just going to move it you can see it's a little bit Jagged here as well so we can actually subdivide it right here so if I bring it up to 15 you can see that makes it a little bit smoother and so you have all these different attributes down here to really control the shape if you're re angle so I'm just going to straighten this back out in here and let's say that you wanted this to actually be 16 by9 because by default we're working inside of a 16x9 viewport so if I come down here to where it says align actors if I left click on this and I come down here to screen if I come down here to the bottom right and select this now I made the rectangle the entire size of my 16x9 viewport here so if you wanted to start with a background color right off the bat this is exactly how you would do it so let's say I want to change CH this color out right here under material for simple I'm just going to leave it as simple for right now solid color and let's just make this maybe like a purplish color like that so now you see we have a background color and you can start building on top of it now if I come over here to directional light you can see that we can actually start controlling the light there I'm not sure if you can see it with the YouTube compression but we do see the light affecting our area right here now if we wanted our rectangle to not be affected by lights if I come back down hair under material versus use unlp material if I select this now we're going to get the absolute color right here and the only thing about this this will not be affected by lights or Shadows or anything of the sort so if you don't want it to be affected by the light and you want the absolute color there you're going to use unlit material now let's say we have this rectangle in our scene or any shape that you drew in there and you want to actually extrude it out so it is 3D and we could use that bevel let me show you exactly what you need to do to be able to do that so with my rectangle select did I'm going to come over here to where it says operating stack over here in your top left hand side if you select this now over here you should see operator stack in which we have two different selections we have modifiers and we have animators for right now we're going to focus on modifiers because if I come down here to where it says plus add modifier left click now you can come down here and you can see under geometry we can extrude it like so so if I left click on this and then let me come right here to where we can actually jump out of our camera so if I eject myself from my camera and just hold down the right click hit s I'm going to move back inside my viewport here a little bit and you can see that it's starting to be a little bit 3D here if I come right here start moving my Extrusion you can see now we have a 3D Extrusion here so you can do that with any of the shapes up here the 2D shapes you can extrude them out so now that we have that extruded we can also add a 3D bevel on here which again under geometry add modifiers if I left click on this come right here under bevel select this and now this is where we would insert our 3D bevel so if I start moving this up we're not seeing it and that's because we have this as an unlit material so if I come back down here under my materials where it says use unlit material I'm going to select this off and now we can start seeing our bevel in here and which that went up too high so let me come down to maybe about five and you can see that we have our bevel inside of our 3D object here now for iteration if we move this up a little bit it's going to smooth it out a lot so three is going to be the highest right here but let me actually move this up a little bit more but as I put it at 10 you can see how it's starting to Bevel that corner there now you might be asking why not use the bevel that's down here under the shape and that's because this is going to be the global bevel for the actual rectangle overall so if I start moving this over so let's say like up to 200 now you can see that it added a uniform bevel all around the edges so remember before that we did top left and now if you look down here versus size these correlate with each other so top bottom or top right down here 200 bottom left 200 so this will be Global for doing it for all four sides at the same exact time and then also you might realize it's starting to get really congested up here so actually this is what my viewport looks like like I'm using the ultra wide monitor so I'm able to add a lot more in there so I would say if you have an ultra wide monitor or even a second monitor go ahead separate the tabs and really make this your own because a lot of these tabs here you're going to be using them all in conjunction at the same time so it really helps if you have another monitor or if you have a Ultra wide monitor so just for context the way that I like to work like if I bring up my details panel to about here right here this is our main motion design outliner I like having this up at all times but if you notice we have our traditional outliner down here as well and which I like using both of these at the same time so what I'll do is left click and I'll drag this underneath here so around down there so now I can see both outliners at the same time and then for my details panel I'm just going to drag this over to the right so that we have a full screen details panel over here on the right hand side as well cuz I always like having my details panel up here and then also for material Stacks I'll bring that up full screen as well in which let's look into materials right now so what I'm going to do is come over here to motion design outliner where we have rectangle I'm going to delete this and let's start over from scratch so I want to look back into my camera here so I'm I'm going to select my camera come down here and do the Avalanche Center Weare camera right here so now we're look directly ahead and let's add another rectangle in here so I'm just going to double click on this and now I have my rectangle down here so I'm going to drag this over here a little bit like so and then I'm going to come down here I'm just going to make this full screen so down here click on stretch and now we have a full screen rectangle inside of our viewport now one of the coolest things about the motion design mode I personally think is how we can actually go through and build out our materials just how would inside of Photoshop so with my rectangle selected here if I come over let me move this over to the right a little bit so we can see a little bit better but up here at the top we have material designer so if I left click on this now this is going to bring up material designer so I'm just going to left click and drag this over like this just right here in the middle so we can see it in full stack but there's a couple of ways that we can go ahead and create this now if I move over here on the right hand side move this up a little bit right here under material type where it says simple we can actually left click and we can come down here to material designer or with my rectangle selected you can do create material so I'm just going to click on material designer here and now you can see that we have a grid popup here and inside a material designer this looks very familiar it looks just like it would inside of Photoshop so if I left click right here where it says material stage and I pull this up down here at the bottom there's a couple of different ways that we could go about add materials here now under type under texture we can add a solid color in which that's going to be just how we did it before with simple same exact thing we could just make maybe like a blue material here boom just like that so now we have our blue material on a rectangle but the cool thing is right here on the right hand side this is where we can actually start adding mask now you can add black and white mask or you could do it procedurally inside of unreal but let me start by adding like an actual mask from a PNG so down here in my content browser I'm just going to right click I'm going to make a new folder and I'm just going to name this one images and with my Windows Explorer opened up right now I'm actually just going to take this PNG that I built out called lines I'm going to left click drag it into that folder so now I have a black and white image here called lines so with this selected right here I'm just going to left click drag it into this box right here so this is going to be an outfit Channel controlling this material here but if I come down here and I click add new layer and let's just do another solid color so I'm going to do solid color now you can see that our materials are stacking just like Photoshop so again I'm going to select a different color maybe let's do green for this one and I'm actually going to take this bottom layer here I'm going to left click drag this up so it's over top of it and now you can see that I have this over top of this material right here so you can start to see how this is going to get really powerful like let me come down and let me add something else in here so let's just say I have this coin character it's a fortnite character left click drag him into here and now I'm going to select a new layer and I'm going to do this one actually with the texture so I'm going to left click on this and now with this selected I'm just going to take this quing character drag them into here and now you can see that we have our coin character over top of everything here and then I'm going to clamp my texture here and I'm just going to rescale them so if I scale them down just like that somewhere around there now you can see we have a character in here and you can pivot over so you can start to see how this is getting really powerful here inside the material stack and if I didn't clamp this down let me actually turn this off you can just see that's actually repeating so if you don't have a clamp this is just going to repeat your material there if you have it clamped it's only going to have it up solo and then he looks like he's a little bit stretched so I'm going to come down here to free just maybe move them over somewhere like that and now you can see how this is really powerful how this is all being built out by just one material here so with the material stack you can already see how powerful this is going to be for motion designers but let me show you how we can actually do like a transitional Type move using a material stack only so I have a blank scene here again I'm going to double click on my rectangle come down here and just make a full screen as we did before and this one I'm just going to use for our background so over here instead of my details panel where it say solid let's maybe make this one let's just keep going with purple so I'm going to make it purple purple I'm going to come down here make it unlit so it's ultimate purple here and then I'm going to click again on this rectangle and I'm going to use this one for a corn guy here so down here I'm actually just going to make this a little bit bigger so we're going to expand it out right there and this time to make the material I'm going to go to create material and now you can see we have our motion design stack here make sure I have my second rectangle turned on under RGB select this and this is where I'm going to bring the corn guy into so I'm going to come down here left click bring it in here now you can see we have our corn guy in here I'm going to clamp my texture make it a little bit smaller somewhere around there so now we have our corn guy inside of our scene here now let's say we actually want him to transition into here so maybe it's like corn guy coming soon fortnite something like that so over here where we have this opacity channel right here if I left click on this now you can see it's starting to add a gradient inside of our scene here so you can already see where I'm starting to go with this but there are some caveats that we want to switch out so right here if I have this selected I'm going to actually make this a solid color I'm just going to make this one full white like that and then I actually want to control the mask over here to do the wipe so with this selected down here under texture I'm going to come down here under gradient and I'm going to do a linear gradient so now you can see we're starting to get the same effect again where we could do a gradient wipe but this time instead of doing it with a pivot cuz we don't see a pivot down here right we can actually add an effects channel so if I come down here under effect come down here under UV I'm going to come down here under UV Panner left click on this and now if I scroll this down you can see we have UV Panner and this is where we can actually start moving stuff left and right so let's say I move this all the way off and I want this to come in inside of the sequencer to wipe on we can actually come down here to where we have these three dots right here and we can add a key frame so if I come into my sequence now you can see we actually added a key frame now this is where having an ultra wide monitor actually really helps out because we're starting to get crowded down here but as you can see we have our key frame right here on frame zero so let's maybe go up to frame 30 and let's just move this over like so go left click add another key frame now if I play it inside of my sequencer here so let me come down to where I could have the play button now you can see how I just wiped it on so you can already see how we can mix up the material stack with the sequencer to get some really powerful results but let's say we didn't want to use the sequencer to be able to animate some stuff we can actually do that with the animation modifier and everything will just move procedurally so with the same scene opened up right now let's say we want to have like a star kind of moving around on the side here so if I come over here left click let's drag out a star so I'm going to left click and I'm going to hold shift so it's equal all the way around so now we have a star inside of our scene here let's change out the color so I'm going to come back over here under my details panel come right here let's say we want to make it red something like that same thing UNL material and you can starting to see that we're getting some Z fighting in there because this is working in 3D space so in the location if I type inga1 right here it's going to actually pour it ahead a little bit because again if I come out of my camera we're actually working in 3D space here so we're starting to get it with this character too so I would just come through set on my operation stack here select this just move them out just a tad bit and there you go so we are working in true 3D space so if you have everything on zero on your axis it is going to start to fight each other but let's look through our camera again like so it let's have this star so it's always rotating on its own and we're not going to do any key frames so again you want to come under operator stack which is up here in the left hand corner I already have it opened right here I'm going to click on animators and I'm going to go to add animators now if I come down here under time I can just have it rotate over a certain period of time so if I click on rotate here now you can see is rotating at 3D space but we want to control it a little bit better here so I'm going to scroll down my outliner right here where it says length properties left click on this let's move this over so we can see what's happening so we have the pitch yah and the roll we only want to make it moving on a roll so if I turn these off just like that now you can see it's moving at 360° but it's going a little bit crazy right so right here under Global frequency let's type this down to one and now we're starting to get a little bit better move down here and if you come down here where it says time Source you can actually control it manually you control it through the sequencer you have a lot of different options in here and you just want to play with these attributes until you find something that you're happy with now the last thing I'm going to show which I think is one of the biggest updates and that's how we can actually bring in fonts and actually control fonts how we're used to in other programs like Cinema After Effects Photoshop Etc so if you come back over here on the left hand side where we have actors if I left click on this right here under text actor I'm going to select this select it again and once we bring our text in we're not seeing anything and that's because we want to select the font so right here where says motion design fonts if I left click on this and let me just select a random one for right now so where we see bangers select that and now we can actually see we have text inside of our viewport so right here where it says text I'm just going to type in unreal there you go so now you can see we have our text already laid out here and this right here just being able to select our fonts right here is a huge plus you know what kind of pain it was in the past to be able to do this inside of unreal so having this flexibility right here inside of unreal is a major factor but the one caveat is these are system fonts so it does have to be installed on your system there in which one way I like to organize it is use a Nexus font so right here you can see I have a font it's called milker right here it's all set up but if you have different projects set up that you're working on for clients you can actually have them individually set to those different projects and then that way you don't have to have a whole lot of fonts installed at once so right now as you can see I have a project open for unreal right here I have a font called milker and let's look for it inside of unroll engine this is a separate one I'll leave the link down below but it's called Nexus font this is a font organizer and I've been using it for years but let me actually minimize this and inside of motion design font I'm just going to look for or m i l there we go milker so now we have that font right there and the reason that I showed you that is because if you're using Adobe Creative Cloud you know you have a whole bunch of fonts in there as of right now those aren't working I know it's currently being worked on but for right now those won't work but if you do have anything on your system you can use the font management system just like I showed you or if you have it installed on your system then it's going to work there as well but coming back down here you can see you have your alignment tools and and everything of course you have curring you can Cur this out line spacing in which again if I come up here and you actually type in enter you can see that it's not actually doing anything so if you want to make a separate line you hold down the shift key hit enter and now you're on a separate line so now I can type in engine just like that so now we have two lines there so that's another Pro tip you want to hold down shift and hit enter to break out a second line there now if I keep moving down of course we could do line spacing now so if I move this up and down you can see that's moving there as well and then also we can always make this 3D as well so with our extrud let's move this out maybe like five and if I break out of the camera here and just look through here and drag this out a little bit you can see that's actually 3D now so if I move this Extrusion point in there you can see that's 3D you can always make it an outline there as well so if you only want to have it outlined let me look through my camera now you can have it outlined and let me actually bring in my Extrusion to zero somewhere around there you can expand your outline let's bring it up to like five so now you can see all the different flexibility that we have here inside of the fonts here and for doing our colors down here you can actually do a solid color which we have right now you can do it under a gradient which you just move this over a little bit so you can see it a little bit better actually I got to move this all the way over so you can see it so you can see our gradient colors right there right now is black and white you can offset it like so just moving these attributes here make it a little bit smoother there on the gradient you can select the direction if you want custom horizontal things of that nature so you have a whole bunch of flexibility with that as well you can do it from a texture if you want so just how we had our textures down here let me just click and drag the corn guy in there now you can see we have the corn guy that's inside there or if you want to do it lines and then custom material we can actually create with material designer right here so if you drag this out now you can work in the material designer as well and of course everything is animatable here so let me actually just come through make it a solid color again if I come over here inside of my text and come down here to my sequencer if I just left click drag it down here into my sequencer now we can start adding key frames to everything so let me move this over a little bit more I know we're getting squashed up but right here with our text down here you have this plus symbol you click on track and then if you come over here to transform this is how we can actually are transforms so location rotation scale so let's just say I want to move this left to right so bring it over here click on my key frame here or if you drag this out you can do X Y and Z let me move this over a little bit more so let me actually come over here to like 60 move this over a little bit more and now I can make another key frame so now if I click play now you can see that it's actually moving over now of course again like let me actually contrl Z take away those key frames there if I come over here to where it says disable auto keying and auto tracking if I left click on this and do auto key now if I'm on like frame 60 down here and I just move this over you can see it automatically added that key frame so now if I click play now I added it so that's just a few ways you add your key frames down here now I don't want to make this video too long so I think I'm going to stop it right there but from here on out I'm going to try to do Project based stuff with this motion design module because I think the best way of learning is actually putting a project together so moving forward I'm going to do a project and then I'm actually going to give you the back file so you guys can take it download it and play around with it yourselves but hopefully this gave you a good start on understanding the 2D tools inside of motion designer of course there's a whole lot more hair so if you have any questions leave them in the comments down below I'm going to be doing more tutorials as I said and giving you guys the project files so make sure you lock that down hit the Subscribe button and until next time stay fresh keep creating and I catch you in the next video I see you soon take [Music] [Music] care

Channel: WINBUSH

Views: 11,837

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, project avalanche

Id: KGbuKh6t02w

Length: 29min 54sec (1794 seconds)

Published: Tue Apr 02 2024