Unity VFX Graph - Portal Effect Tutorial

so portals are an awesome thing to do and I have previously done one with shadowgraph and it went very well actually but I never did one with VFX graph so that's exactly what we are going to see today and we are in fact going to combine both tutorials at the end and as you can see I made a few portals already some are more complex than others but this is the one I'm going to show you how to create the other portals are exclusively available at patreon page and I left a link in the description in case you are interested to have taxes so without being said let's see how we can do this so first things first let's not forget to go to package manager and down here install visual effects graph and share a graph as well once that is done you can go ahead and with right click in creates you can go to visual effects and then create a visual effect graph I'm going to drag and drop this to the scene and push this little bit up so it's centered with my portal now we can press in edit this button and VFX Raph opens up and I'm going to drag it right here to the right okay so the first thing we are going to create some stretch at particles and for that we don't need this set velocity random what we actually want is the particles to start in a circle position and in here we can control the radius so it fits the portal in my case it's going to be 0.85 what we can also do is change the main text down here and we can search for the default particle that comes with unity already we can also change the blend mode to additive in case you don't want this dark around the particles now for the particles to be stretched we need to align them to the velocity with this model but that is mom there is no velocity right so we don't see any particle so to create this to no effect with the stretchered particles we want to tell the particles to conform to a sphere to take the shape of a sphere as you can see the sphere also adds a radius which is set to one but we want to set it to a very low value like 0.05 now what's happening at the moment is that the attraction speed is too high we want to decrease it to one okay that's better don't hear what we also want to change is the set size of a lifetime we want this curve and they are a little bit too big so let's control that with the set size but we want to add some randomness and we can do that up here set the random to uniform I'm gonna set some very low values but as you can see that doesn't make any difference at all and that's because the set size of a lifetime it's set to overwrite so it's my to overwrite any previous value related to the size we want instead to multiply the previous value just like these as you can see we have some very tiny particles now for the stretchy part we want to go ahead and set scale and we want this to be random as well and we want to stretch the particle only in the wire as you can see if I increase the Y value we start seeing some stretch at particles which is great and the X is going to make them thin or thicker so this value seems okay for now but once you start moving around you will not set the particles are working in a 2d space only and we want to add depth to this the way we do it is by setting the conform to sphere Center to be something like minus 2 into Z and that's it as you can see the particles now acquire a cone shape which is great we only need now to increase the rate but first the capacity to a good value and then we can increase the rate 750 seems ok all right so that's starting to look like something now to add color to these as you can see we already have the set color of a lifetime but that only ends the fading and the fade-out so let's use a set collar but as you can see if we change the collar nothing really happens that's because the set color of a lifetime once again it's set to overwrite and we don't want that we want to multiply any previously given value of the color we can also create a new parameter call it particles caller caller 0-1 and choose any color I'm gonna start with the green for this tutorial and then we can connect it down here and then we can create a group selection select everything and with right click and this is our the particle stretches right now for the next part you can either use Google and search for a circle or you can go to photoshop or to or Krita create a new file and with the ellipse tool I'll shift and out to create a professional circle increase a little bit stroke which you have to make sure it's white align this to the center and finally if you double-click on the lips you can choose an outer glow you can play with these values as you wish what really matters then is that you save this Photoshop file directly to unity to your project without the black background you can add it and back to unity now we can go ahead and create a simple particle system this one which is not going to use a spawn rate because we want to only spawn this particle one time so let's instead use a single burst with count set to 1 and delayed to zero and we don't need velocity we don't want is to move lifetime is not going to be random it's going to be 0.9 and down here the main text we can select the circle that we have created change the blend mode to additive and for now let's turn off set size of a lifetime and let's create a set size module with a value of 2 now what matters is that we said to call of a lifetime to be like these so it basically starts glowing stronger and stronger and then if you want you can create another caller call it 0-2 and we need to set color we need to set color first you can also remove the set size of a lifetime we also need to change the call of lifetime so it's in multiply mode just like this I'm gonna shoot the greenish collar and it's starting to look like something we just need to make a few more adjustments you can also group this by the way which is useful because now you can copy and paste this particle system and rename it to beam flash this is going to be a flash a quick flash and it's going to have a delay of one second basically we will see the circle glowing and then we will see this bright light really quick as soon as the circle stops glowing since it's a flash we want a lifetime of 0.2 and we can also assign the default particle the size is going to be ridiculous something like 10 and the color of a lifetime it's going to be the opposite it's going to be really bright in the beginning and it will fade out what we can also do is add a set size of a lifetime which is going to be set to multiply don't forget that and then we want to use a curve similar to this one which goes from one to zero right so if I disable and enable these VFX graph this is what we got right so the circle works as an anticipation and then we have this flash of light really quick which means something like the portal is open now let's improve this by copying the particle stretcheth copy and paste them I'm gonna push it up here and then also copy and paste the constant bursts from the beam flash to the new particle stretcheth erase this pound rate and we can set the count of the single burst to something like 750 that should be enough these stretchered particles are going to leave less so let's decrease the lifetime something like this and down here to confirm to sphere the radius it's going to be much bigger than the circle something like 4 so the particles goes outwards then we want to set a random value for the attraction speed something between 1 and 5 so the particles are scattered all around just like these okay great impact that's looking nice now let's add a shock wave and for that we can copy the the circle warm-up particle system let's drag it up here and for the shockwave if you want you can create another circle with the same method we used previously I create this circle with a much bigger size like then or simply drag it while holding control it will duplicate it but this curve should be the opposite something like this for the shockwave to expand finally we just need to switch the color of lifetime it should be the opposite just like these maybe actually we don't want the shockwave to start all the way from zero so let's push this first kill bit up that looks nicer the shockwave it's going to leave less like 0.6 and we also want to add a delay of one second and this is what we got so far a good-looking impact with a nice shockwave now let's add the breeding circle all around the flower part on and it's very simple we only need to copy and paste the circle world map we don't want a single burst we want to concentrate of only one and a lifetime it's going to be two seconds basically a breeding circle but as you can see if we rotate this the circle follows the camera it faces the camera luckily we only need to change the orient mode to advance it and make sure the axis Z it's 1 and Z and the axe is why it's 1 in Y just like this and as you can see now it faces correctly the portal just gonna push this a little bit back okay looking good we also need to set the circle warm-up durians mode to advance it with the same values now let's work a little bit the anticipation and we can reuse the circle warmup copy and paste it and we can also copy the single burst with ctrl-c and ctrl-v three times just like this when delayed 0.3 seconds and the other 0.6 seconds the lifetime of each circle is going to be 0.4 and then we can add the size of a lifetime change the composition to multiply and now if we use one of these curves we only need to adjust it like this and then push the skill bit back and add another one and this will add a different motion to the circles as you can see you can play a lot with this and make different motions but for the sake of this tutorial I'm going to leave it as it is now what if we wanted the particle stretches in the center to only start appearing once the portal is open well we can delay the particle stretcher and way we do it is by using a total time all the time that it has pass it and compare this to a certain value that value will be the delay we just need to set the condition to greater or equal basically once it has passed the one second we want to use the branch and if it's true we want to set the spawn rate to 750 and that's it we have delayed the part construction and I think it looks better this way it's a simple nice touch looking great we can improve the anticipation by copying the beam flash move it down here remove the delay set it to zero and a lifetime it's going to be 0.9 almost one second which is along our anticipation takes and the set size can be 3.5 then we only need to change the size over time so it uses this curve and the color of a lifetime it's going to be the opposite it gets brighter and brighter until it explodes right and it adds a nice touch for the anticipation once the portal opens it has a really nice impact now for one of the coolest tricks how do we integrate the cella graph in this VFX graph well first we'd to create a shader more specifically a VFX shader graph it must be a VFX shader graph once you create that shader you will need to follow this tutorial that I made a while back about portals and you need to recreate that shader inside these VFX graph shader and you will end up with something similar to DS and one of the most important parts is that you rename the reference of your properties as you can see my reference I'll share the same name as the properties they only have an underscore in front and you understand in a moment why this is important once you have recreated the portal shader we can go back to our portal VFX graph we want to copy the circle breathing we want to set the capacity to one and a lifetime can be as much as you want now the cool thing is that down here in the output particle quad we can feed a shader graph and there's only one type of shader that functions here which is the VFX graph shader that we have created and as you can see you have all the parameters here and these parameters have the name of the reference that's why it's important to rename the reference of the properties for example now you can assign the default particle to the main texture and here we go we are starting to see something very cool you can play with these values with the scale you can assign the colors or to for example maybe increase dissolve as well and the 12 strenght I mean the possibilities with these are so huge they are really awesome and that's how you integrate shadow graph in a VFX graph so that's it guys I hope you have enjoyed this video if you want to study these up close or use these portals in your game I love this is a Velma patreon page you will find plenty of effects there and a big thank you goes to all my patrons as usual I am able to keep on doing these thanks to you and to finalize a special shout out goes to the super mega patrons which our Adriana bodega Alejandro Angel our dev show James corner marble Goblin plug Heroes syndrome the game Himura is PC invention games Josh Mac karmic RAM Angela Kenley mikaze marco rossi nicholas loves psycho tech studios robin boudreau Steven Melton TK czar and Gary Kazarian so that's it guys I hope you have enjoyed very much this video thank you for watching and I hope to see you in the next one [Music] you [Music]

Channel: Gabriel Aguiar Prod.

Views: 64,865

Keywords: Unity tutorial, unity effects, game effect tutorial, unity magic effects, unity particle effects, unity particle tutorial, unity game effect, Game Effects Tutorial, unity vfx, unity vfx graph, vfx graph, vfx, tutorial, unity gpu particles, unity gpu, unity vfx graph tutorial, unity particles, graph, unity, gpu, particles, unity graph, shader graph, unity portal, vfx graph portal, shader graph portal, portal, unity portal tutorial, portal effect, portal shader, unity fire

Id: V2NZb0WN7SY

Length: 17min 35sec (1055 seconds)

Published: Tue May 19 2020