Magic Trails Tutorial UE4 VFX

hey guys this is travis in um technical art for and today i'm gonna do my first tutorial video on how to make magic trails in unreal um we're gonna go all the way from the first parts of it which is creating the actual trail texture to implementing it into unreal so i guess let's get started so go ahead and open up photoshop this is going to be sort of a photoshop and unreal tutorial those will be all the things you will need we're going to go ahead and create new i like to do 2k textures for all of my visual effects you can go higher or lower as you see fit we're just going to go ahead and call this t underscore magic beam cool 24 20 48 by 2048 awesome create very cool so you should have a black background now i'm going to go ahead and create another layer on top of that background and if you have a wacom tablet you can use that or you can just use your mouse i just use my mouse on most of these things um just because it's a lot easier for me i don't have to break out the old wacom tablet but if you are more used to using that uh feel free to plug that in now but next up i kind of break this beam up into three segments one of them is going to be our super big low frequency stuff then next up will be we'll shrink down the size of the brush and we'll do some sort of medium frequency things going on in here um and then lastly we'll break it into some smaller stuff some high frequency noise coming through here just in random places as you see fit um notice how i'm not going to the edge of the screen we're going to move the texture uh we're going to offset it a little bit the other way here in a second so i don't want to go all the way to the other side let me buff this back up and 70 here close these off so it's not just out there cool makes us thicker awesome and then once you have sort of a base set up for a high frequency low frequency and medium frequency stuff what we're going to do is we're just going to grab that layer i'm going to go to filter other offset and then in the vertical we're going to set it to 0 we don't need it to go in the vertical at all and then in the horizontal you'll want to put half of whatever value you used at the of the size of the image minus 2048 so half of that is 1024. so now i will have a thailand texture here so what i want to do is go ahead and go back up to i think it was around 150 and now 120 ish 1 30 looks pretty good yeah so now what you're going to do is you're going to take this and you start naturally taking it to where it's supposed to end up and just connect these two and kind of unique ways you can do some sort of fun stuff you can bring stuff out to an end and then branch it off into another direction have two meet up in a certain way down here um you know the world is your oyster when it comes to actually painting this texture and it's don't worry about it looking super nice or having all the correct features we'll do some blurs at the end so any sort of slip-ups that you have uh lord knows i have some of the shakiest hands here and i'm using my mouse so you don't get a ton of the most perfect angles or sharp corners but we will fix that up uh as we come into the end here and then i will add again some high frequency stuff and uh the brush i'm using sorry is just the hard round brush i'm sizing at 30 for high frequency 70 pixels for medium and then around 130 for the low frequency stuff i'm going to make these smaller let me do a couple of these little kind of ones together and branch through yeah you can do some cool stuff just think of this all in terms of energy coming across that looks kind of fun cut through [Music] give this guy a friend you know you want to connect them all kind of together so you don't have too many just random branches hanging out you want it to feel feel filled but not too noisy because once we start doing some of the blurs in here it's going to start filling in pretty nicely and then we'll start doing some weird off high frequency things to kind of push out the profile a little bit and then we have a nice looking start for our texture so then you'll notice if we do another offset this is now a titling texture all the way across so if you think about a beam kind of coming across here it'll slowly start to come together here so i'm going to cancel that um so now for my net the next step i'm gonna do is uh i'm gonna go ahead and throw in a little bit of super high frequency stuff going on here so let's see i'm gonna go down let's do kyle splatter brushes i like these a lot what we're gonna do is we're just gonna go ahead and increase the size of this pretty large here now a little bit higher see around yeah that looks okay um what we're gonna do is we're gonna just sort of spread out some high frequency noise here in the middle and then filter and just run the offset the same function again that one a little too low this might be a bit too big you know lower that's just a hair here cool there we go there's some nice noise in there awesome so now we have a little bit of energy splatter kind of coming throughout then um let's see next up i'm going to go ahead and give it a little bit of a blur so if i go to make sure my layer is selected go to filter get a blur and give it a gaussian blur here and then it pulls up this little window for you you can add as much blur as you want i'm going to keep mine kind of minimal right now just to get a little bit less hard edges in there like some of the mistakes i have less noticeable then let's see probably going to go and let's go ahead and add maybe just see it kind of needs some background here a little bit of noise going on behind it uh so let's go ahead and add another layer and we'll drop that layer underneath pull out the brush go back to our brushes we want the soft one this time and i'm gonna go ahead and tone that down a little bit i don't want the opacity to be that high so let's do about 49 and had just a little bit of background here something going on behind it make sure not to go all the way to the edges once again because when we go to do the tiling stuff we're going to need to um offset it and then add in that center so now we got a nice core here coming through it um next i'm gonna go ahead and do a layers levels adjustment and let's see oh yeah all those highs are way up we need to do a little bit let's try an auto layer on it oh confidence i'm looking for yeah let's get that for now um i like it now let's start to mix it up a bit with oh that's right i need to combine these two now that we got that looking good uh let's go ahead and combine them so merge layers awesome now adjustments levels and we should have more i'm not getting this right cancel well let's go ahead and skip that for now we'll worry about it later so we get some darker values in here but what we need is the smudge tool so the smudge tools cool what it does is it pushes the texture into any direction that we see fit which leads to some super cool um super cool results here so as you can see i wanted to sort of get thinned out a bit and i also want to get sort of a wave in it um so i'm going to actually go so the smudge tool is really cool for doing little movements like this to kind of push values in different directions and make some more strange shapes in here uh make it feel a lot more energy or a lot more like energy but what i'm going to do actually is i'm going to get a really large size here not that high there we go and take the center and i'm just going to pull that center up see if it takes a minute here sorry i'm moving a lot of pixels at one time so now it might be better to use the liquify tool here i'm going to give it a second and then i'll be right back all right i went ahead and canceled that so what i'm going to do now is we're going to go ahead and click the layer and we're going to go filter i'm going to do liquify so what liquify is going to do is it gives us this little menu here that allows us to do basically the same thing the smudge is doing but it is a dedicated platform for it so what i'm going to do is i'm going to push upwards a good chunk of the beam to make it have some cooler shape to it and then i'm going to press okay let's see our result here okay cool we got a nice little push up there and then i'm gonna go ahead and take that layer once again we're gonna offset so now you'll see it looks kind of weird without doing the same thing here in the center and you're starting to see a little bit of that warping going up so we're going to do is do the same we're going to go to filter liquify and then i'm going to shrink the size of this one i don't want to be quite as much but i'm going to pull it down in these areas kind of bring it all together here perfect there we go get a nice bend in it so now you're starting to see uh this hard edge show up just from my way too large a brush let's see if we can't fix that go ahead and go back to the smudge tool just sort of show come on let me shrink the size of this thing and i'm going to pause one more time while it loads all right let's see oh no we still got nothing all right i think we're recording again cool so we are back i'm gonna go ahead and go back to that smudge tool let's go ahead and make sure this time that we decrease the size of that brush let's bring it down only like 200 pixels here we can start pushing these around you can see that we're getting rid of those hard edge lines this little high frequency bit is pushing out just a bit too far let me go ahead get that sticking back in push all this kind of inside a little bit more more you do this the cooler kind of effects you get on the edge you get some little shapes here um depending on how much you want to move it you can change the strength here i like to keep mine around 38. you do it pretty high up it starts to get sort of shredded like this and i'm not a big fan i'm just like slowly shoving it across the texture it makes for some more unique shapes and designs especially when it comes to energy like this okay so let's go ahead and take a look at uh what it looks like when we shift it make sure we don't have hard edges here yeah we do a little bit let's go ahead and smooth those over push this up cool all right so now i'm going to do just a bit of cleanup i'm going to switch to black here and i'm going to do just a little bit of darkening on the edges here get rid of some of that noise that just got a little unruly calm it down just a hair cool right off the time make sure we look good over here i'm not really a big fan of this little chunk i'm gonna go ahead and cut that out and just have a little bit hanging off nice little parts there we go cool all right we got a nice looking trail here so let's see it in action and move this over to the side you can see it slowly kind of move we're going to be panning this texture across but you can see it's going to have some more unique and interesting shapes here as it comes across this one's going to be stretched out but you got a nice looking energy here um don't worry if your texture doesn't look like mine and if your texture looks better than mine awesome good on you uh i'm glad to see someone else do a better job here because i kind of just with when it comes to energy it's that's you know you get it as close as you can get but um not a big deal if it looks a little weird uh overall it'll look nice once we actually get it in engine so next up what we're gonna do is um you could texture pack here but for now uh just for the sake of time i'm gonna go ahead and merge uh these two so now we all have it all in one layer and when we get into the engine we're just gonna use it on a grayscale so let me go ahead and export this you can save it to whatever you want i'm going to save it here in my downloads just because it's empty right now to magic bean and i'm gonna go ahead and press save cool and then let me make sure i have it here yeah perfect all right we have magic beam all right now before we close down photoshop just one more thing we got to do we're going to go ahead and press file new we're going to do another 2048 and we're going to create a new one that's going to open up a new untitled one and what we're going to do is we're going to go to filter render and then we want clouds so we just want to purlin noise here nothing too special and let's just make sure yeah it's a seamless texture cool so yeah that's a fun little way that you can use photoshop to get a noise texture really fast just do uh filter and then go to render and clouds uh you can do some cooler stuff too like the fibers is a fun uh a fun little effect to do as well but let's go ahead and export this we'll need it for our effect downloads i'll go ahead and call this t for texture underscore purlin noise cool save awesome all right so now you can go ahead and close photoshop and we're going to go ahead and open up the unreal engine if you want to just create a blank project i already have one open here just ready to go but if you want to create a blank uh just a blank project here it'll start out you'll get these little chairs and you'll get the brown copper here all i did was increase the size of the copper so you could see a actual playground of what we're going to be doing so to get started let's create a folder we're going to call it magic trails all right then we're going to open that up and what we're going to do is we're going to take our two textures that we have we're going to drag them in here perfect you'll see magic beam and purlin noise the two we need um next what we're going to need is a material we're going to call it m underscore m for material underscore magic trails and then we're going to do a particle system we're going to call it p for particle system underscore magic trails capital t here gotta stay consistent here cool all right go ahead and open up your material pull this over here and then you can attach it up here to the top if you'd like i like to keep mine separated because i like to be able to move it around a little bit more if you have a dual monitor setup which is ideal here you can push that on your other screen so okay for starters we have our material um what we're going to do is we're going to set this up to be a transparent material because the trail itself is going to be semi-transparent so what we're going to do is we're going to click on the material output node here we go down the blend mode or switch of the translucent default lit is fine you can make it on lid if you want i like them lit and then i'm going to do two-sided and i'm going to go ahead and press apply so now we'll have a fully black transparent material ready to go and what you just need is the opacity and the emissive color so let's go ahead for starters we're going to worry about the color so what we want to do is have this this trail start at a certain color and then as it goes over its lifetime end at a certain color when it comes to color colors and visual effects you want to be able to have a sort of a range of color rather than keep it all monochromatic so let's go ahead and get that started what we're going to need is a color node if you hold down three and click you'll get a vector three on the screen you want two of those for the colors then you're gonna need to right click them press convert to parameter we're gonna call this first one color one no space second one same thing convert to color two cool um let's see i'm gonna do some fun let's do uh let's do the opening color let's go with red and then we'll go to black give it a nice university of utah spin um then next you're going to need a linear interpolate node or a alert as it's called we're going to take is color one into the a color 2 into the b um and then we're going to drag into the alpha what we want to do is have it sort of fade from left to right left is always going to be the start of the trail the right side is going to be the end of the trail so to get that what we're going to do is we're going to take a texture coordinate and then we're going to do a component mask on it and we want just the u space which if we go ahead and preview that in 2d you're going to notice it's going to go it's going to go from black to white exactly what we want to do here so a is equal to zero and b is equal to one so black is zero white is one black to white we're going to get a cool black to white gradient here or a red black gradient here perfect that's exactly what we want to stop previewing that and we're going to go ahead and put that into the emissive color for now um another fun thing to do is if you add in another multiply here you can go ahead and multiply it all by a particle color so if you want to edit this color at any time live in the particle system you can do it that way too and we'll toss that into a miss of color ultimately we're going to multiply it with something else i'm going to just set this up for glory here and put that into a missive cool we're going to take this and we're going to push it up here and press c and we're going to go ahead and type this is the color all right um see next up what we're going to do is we're going to do a erosion of the trail itself so as the trail starts it's going to be strong and powerful and as it comes to the end of its life it's going to start eroding and fading away um so let's get started on that what we're going to need is a texture coordinate and then we're going to component mask it because we're going to do this erosion based off the same thing we did with the color we're going to set it to just the u space or mask it into the r um next up we're going to go down here we're going to 1 minus it one minus is going to invert the actual texture itself so instead of it being black to white it will be white to black now then we're going to toss that into what's called a constant bias node or a constant by scale and i know these values i already tested them out but it's going to be negative point 55 and 2 into those values and we're going to put that into an add node then we're going to shift that into the bottom one here just for the sake of keeping it look nice and if you ever see your nodes kind of misaligned press q and it'll line them up all straight for you it looks uh a lot nicer so next we're going to need that purlin door as we created earlier and drag that in and we're going to need a panner node with a panner we're going to do negative 1 in the x and then point three in the y and then here plug it into the add perfect so let's go ahead and start previewing that there we go we got a nice little erosion going on here already um but while it looks cool i want to add just a few little things to it we're going to pull this off add it to multiply and i also want to put this into a clamp node uh so the reason i'm using the clamp i want to go ahead and make these values a little bit different i want it to be at its lowest at point 25 and at its highest at 0.75 cool because we are going to take this and add it or to take this and subtract it from the original mask that we had i'm gonna take a subtraction node put this in the b and put this into a cool take a look start previewing we'll get a nice erosion here i want it to be let's do just point eight instead that'll make it just a little bit longer surviving and then lastly i don't want to mess with the opacity too much so what we're gonna do is just put a clamp to be safe in case we're going to negative so i want to make sure that it comes out to always be um a whole number or a um a normalized number oop delete i'm going to press q there we go looks nice all right cool so we got a nice erosion going on that we can see so next up we're going to add in the trail itself and start doing some distortion on it must be compiling after yeah there we go so now we've got some nice erosion happening here we're going to take this later and multiply it by a distorted version of the trail so we'll have a distorted trail running through this and eroding at the same time so let's go ahead and stop previewing this one and what we're going to do is we're going to take our purlin noise yet again actually let's go ahead take this comment it and we'll call this erosion just for the sake of if anyone comes in looks at our material they know what's going on all right so down here we're going to have our berlin noise we're going to take a panner node plug it into the uvs here we're going to do the same setup we're just going to do it in the y rather or in the x rather than the y on this one you can add it to y it's just going to be feel uh you know whatever looks nice in your opinion then we're going to take this we're going to mask or we're going to do a component mask of it we just want the rng it doesn't do a whole lot but what matters is the next value we push in is a vector 2 which uh the constant bias only takes vector 2s so that's why we are doing this here and once again we're going to do negative point five this time and two i'm going to toss this into a multiply cool uh next up we'll need to make a scalar parameter if you hold s and then click you'll get your scalable scalar parameter um you can call it whatever you want i'm going to call it flow strength um so this is going to determine how much um distortion is going to go into the uh trail texture that we made take this and toss them into a multiply i'm also going to multiply it with a texture coordinate we want just the uv space so we're going to do a component mask just in the r or the red q and make it look nice but listen to a multiply and then this two will multiply so cool we're taking this vector two we're multiplying it by this vector two down here or i guess just the new area and then we're going to take a add i want this to be in the bottom part not that it really matters in terms of math but then i'm going to go ahead and do texture uh texture report toss it in here no mask on this one just straight up uv space and we're going to add this now to i'm going to use a panner for our next texture but then we're going to bring in our magic bean the texture that you made in photoshop you're going to go ahead and plug it into the uvs here panner let's go ahead and give it a negative one in the x and then let's take a look at what it looks like start previewing up so we just have our standard um trail right now and the reasons for that is because we didn't put anything into our flow strength so if we go ahead and up our flow strength you'll start to see a little bit of distortion there at the end you can add as much distortion as you like the more distortion you get though the crazier the texture becomes if you go too high you'll start to get the tiling of the texture up top here which you shouldn't see too much of because of the erosion that we have we're going to be multiplying it but i'd like to keep it around 0.4 i think 0.4 is a nice spot if you want to up it you can feel free to mess with that and then next now that we have let's go ahead and make this comment energy oh sorry wrong energy beam cool so now we have the beam itself let's increase size there so now let's bring them let's bring them home so we take the erosion we're going to multiply it by the actual energy beam and start previewing cool we got a nice little trail here with some distortion coming off the end and i'll show you some tricks to get it to be a little bit longer have less distortion or whatever you see fit but notice how we have that little bit of wave that we had on the texture that we originally made that makes for a really nice look um lastly we're going to add a mask so we don't have such a hard edge here kind of make it a little bit softer so let's go ahead and create that mask this one's a little bit more complicated but when you think about it it's really not too much it's just a bunch of different values multiplying together so we're going to take the texture coordinate we only need one note of these and we're going to need a mask for the u space and i'm going to just copy and paste it and then do a mask of the v space plug it in then i'm going to take both of them and bring them down here again plug this in and plug this in but for these ones i want the one minus version of them so i want the opposite or the inverse amount for them it's one minus one minus cool and then what we're going to do is we're just going to multiply them all together it's going to make us a nice little box multiply there times this one times this one and then ultimately you should have a nice little square box here well i guess it's more of a soft rectangle but yeah it's a nice way to make the trails not really hit any of the edges so you don't get any hard edges when you're playing with the particle system i like to add one more multiply to it and just kind of buff it up a bit let's do it like 500. let's go ahead and preview it so it's super bright here so you just get those corners uh let's bring it down actually a little bit do 100 yeah you got the soft little corners here but uh none of that hard edge that any of the trail could reach and then we'll take this we'll stop previewing it and this is where you get kind of tricky with the cues go ahead and line up each one of these to look nice cool and then we'll go ahead and take all this comment we'll call it the mask and then we're going to take another multiply here plug it in here and we're going to multiply it by mask cool so now that we have the mask in there start previewing so now any bits that go to the edge of the screen will be just erased and you won't see any of those hard edges no matter how hard out you push the trail let's go ahead and stop previewing and what we're going to do is we're going to take this and we're going to go ahead and put another multiply this one is just for having controls to mess with it we're going to call it um opacity mult uh let's go ahead and just set it equal to 1. um sometimes in unreal the transparency is just a little weak i like to put the multiplier in here so you can get some more um darker colors and have it not be quite as transparent a little bit more opaque and then plug it into an opacity here so now we should see our trail with the colors oh so now we got the red going looking nice but i kind of want to have a little bit more black in it so what i'm going to do is i'm going to take this i'm going to do a power node i'm going to plug this into alpha start previewing here let's see is it smaller value or higher yeah we want less red so let's do 0.5 here perfect previewing okay i'm liking this let's see how it looks it's still too much uh yes because it's emissive so what we're gonna do is instead of doing emissive we're gonna go into base color sorry so black isn't emissive so it won't show up um there we go so now we have some red to black i'm going to toss this in here too maybe we'll get a little bit more interesting of a look here hmm not quite let's get a little crazy point to it it might actually look better let's go ahead and flip these colors yeah still it's that emissive color if we get rid of it probably looks cool again maybe red wasn't the way to go it's pushing the light there we go it's a little bit more interesting got some nice whites to red i'm going to actually do an inverse it's kind of like fire back to the way it was oh yeah that's way cool so we go from that nice deep red to the white here and then we'll go ahead and add uh one more scalar parameter holding s clicking to get it we'll call it emissive um emissive mult so if we want to have more and misses at emissives attitude we can just go ahead and edit that volume set it to one and then we should have ourselves a nice looking trail yeah it looks nice um okay just a couple more controls i want to throw in let's do another scalar parameter and call it erosion length uh we're going to toss it here into this multiply set it default to 0.8 and then we'll do one more and we'll call it mask strength i'd set it equal to 100 test in here oh we're going to go ahead and save that and we should have ourselves a material now all we have left is the particle system oh yeah that looks nice so what i'm going to do is just close this after we save it then what you're going to want to do is we're going to make a material instance so that way we can have those values exposed so we can mess with them live so if we open up the material instance you'll see we have the trail itself spinning around here and then we can live change any of the parameters here so if we want it more opaque or more transparent a little bit more detail in it uh we can all we can adjust all that here if we want it more emissive we can add it here uh if we want different colors let's say we want to go with green instead we can choose green blue yellow whatever we want i don't know cancel keep it back at red and then the erosion length you can see it goes either longer here or it comes up shorter let's go ahead and keep it around here yeah i like the 0.6 that looks nice and then yeah we have the flow strength too so if you don't want it quite as noisy flow-wise you can mess with it here let's add just a little bit 0.3 yeah that looks nice and then bring back the opacity all right cool so let's go ahead and toss this on a particle system we'll save you can adjust this to any way you see fit if you want some different um you want some different looks to your trail or a little bit of adjustments those are some nice controls to have for it i'll go ahead and save and then i'm going to open up the magical trails particle system bring it over here cool so for this one we don't really need to be in the scene as much anymore since we won't be pulling in any textures so it's going to start you out with your default particle emitter what we're going to do is we're going to go ahead and we're going to make a second particle emitter one of these is going to be our source and the other one's going to be our trails so we're going to rename this one to source then this one we're going to rename to trails so for our source let's go ahead and have our initial velocity you know the directions sides up give it a little bit of speed here give it a min max of 500 250 and then let's give it a location of a cylinder cool so we'll get them spawning out in a circle around here let me increase the size of the radius of that cylinder also they're on the spawn in a flat circle on the ground if you want to take a look at what it looks like it looks kind of like this i'm actually going to make the height uh zero so it's just a flat circle on the ground cool so all of our trails are going to come up out of a tube um and then so the source you can make whatever you want we could turn them into a sort of a spark or a orb for right now i'm just going to get rid of them and just worry about the trails i'm just going to take the initial size of them and set it to zero so they're still spawning you can see but they are invisible because they are so small and then next up what we're going to want to do is uh we're going to make this a trail system so we're going to go to right click out there and press type data new ribbon data it's going to set this to a ribbon system you can see it starts to make this sort of distortion effect on the texture then what we're going to do is i'm actually going to pull this off real quick just to jump the gun on that i guess i could just look it up but anyways i'm going to take the material instance of the measure trails i'm going to drop it on here it's going to take a second to compile cool so now you can see our trails are spawning they don't look great right now but that's okay what we're going to do next is we're going to go to trail source and we're going to set it to particle and type in the name of our source emitter which is called source um and then what we're going to do is we're going to spawn and we're going to set it to zero so we're not going to have any spawn there but we want to do now is go to spawn and here i'm going to spawn per unit drag it up here to the top we're going to go ahead and set this to 1. oh there we go we got something okay we got some trails firing up let's go ahead and set this to 5. all right a little bit more interesting but we're only getting really one trail at a time so let's go ahead and go to the ribbon data let's set our max trail count to 50. oh yeah now we're starting to see our trails going they're still kind of looking weird uh because we still have initial velocity so each one of our particles that are spawning on the trail have some weird velocity so we're going to turn that off let's actually delete that oh yeah now we don't have quite as much weirdness going on with it still doesn't look incredible but let's go ahead on to our source we're going to add an acceleration we're just going to do a uniform line and we'll send it off in various directions to a thousand in each and then negative one thousand in the min so now we'll get some weird directions that goes yeah that's cool get them looking a little bit more interesting just little trails flying up and around cool then let's make the lifetime a little bit shorter a little shorter trails here there we go that's nice and then let's maybe buff this up to 20 and get them spawning a little bit faster yeah that looks nicer so cool we got some unique trails going on so let's go ahead and pull them into the scene um let's take magic trails we're going to toss it out here and there you have it we got our trails flying around here uh i'm gonna we're actually spawning too many here for what we have let's set this to five only get a few spawning at once set the lifetime to two here and then what we want is to set this let's say a thousand beautiful so cool you'll see the trails firing out of the ground here right now there's sort of red trails coming up but let's imagine like we have a necromancer going in here let's go ahead and change those trails let's make them a little bit darker here and get that black sort of look here and then let's do like a deep purple yeah that looks pretty cool and then we can come back in now we have some sort of like black soles coming out of the ground and you can do all sorts of stuff with these trails but i really like how they look in the end let me just go ahead and preview it one last time this is just a plane just to showcase them real quick so you can see them and there we have it we have our own magical trails now we can edit in any which way we see fit to serve whatever we need here but yeah um that concludes the tutorial for now if you have any questions or if you want to reach out to me feel free to on my youtube channel um but yeah this is uh travis and technical art for have a good night guys

Channel: Travis Treadway

Views: 5,254

Keywords: VFX, Tutorial, UE4, Magic, Trails

Id: 8m8tYZVLZq0

Length: 46min 44sec (2804 seconds)

Published: Thu Jan 28 2021