Unity 2018 - Game VFX - UI / User Interface Effects

hey what's going on guys welcome to the tutorial number 23 of the series visual effects for games and today we are going to see how to create effects for the user interface for the UI this kind of effects require a different setup if you are working with the Unity built-in UI which is actually a great UI but by default particle systems don't work on the user interface if you are using a third-party asset to create your UI you should probably be fine but you still can learn how to create this kind of effect alright so let's see how we can do this so the first thing we want to do is actually download the unity UI extensions the UI particle system this one I left the link in the description and we can come here to download and simply download the unity UI extensions package save it somewhere and import to unity and now we turn select a few things like the editor we don't need the editor the examples the squid we only need one script which is the UI particle system you can select that one and in shaders we only need the ones that say UI particle and then you can press import and as you can see my scene I have a canvas with a render mode set to screen space overlay and I have a button where we are going to create a particle system I'm going to rename it to square glow 0 tool and as you can see if I increase the start size we notice that the particles are in the scene but in the game nothing appears so the trick now is to use the squid we have imported and we can add it some components right here and select uy particle system now there are two things you may notice one is that it's being rendered in the game which is good and if you look closely the renderer of the particle system is disabled and now this happens because this UI particle system script is basically handling the rendering system of the particles now let's create a new material rename it to something and let's select the shader we want to use the ones we imported in the UI extensions as you can see these shaders are the same as this ones but the new shaders allows to render in nudity to by default system which is awesome so let's select the additive one I'm going to add this texture but I'm going to show you in a moment how we can create something familiar let's go over to our particle system and down here in script we want to add the new material and cool it's render it's working so let's make this button glow we can turn off the shape and in the mission we want one in the right overtime we don't want any start speed this is not going to move the duration is going to be three seconds as well as the start lifetime let's turn on pre-warm and loop let's turn on color over lifetime so it can fade in and fade out and we want something similar to these gradients and by the way if you don't know the keys on top controls the opacity all right now it's starting to look like it's glowing let's set the max particle to 1 and now we have a small problem because if you want to adjust the size of this texture normally we would use the 3d start size but as you can see it doesn't work and way to fix this is to use the scale of the particle system as you can see so it's increase it a little bit until it covers the button let's give it some start color let's select an orange and the reddish orange now let's create a new texture and I'm going to use Photoshop you can use another software that's fine we are going to create something similar to this let's create a new file with 500 by 500 in the widen head let's pick the background to black create a new layer control-shift-n and down here we want to select a rounded rectangle tool let's create a rectangle let's set the field to white we can Center these by selecting both layers pressing V and now we can align these to the center just like this let's just rasterize this boundary tackle by pressing right click cool now let's double click in this layer and we want to turn on outer glow increase the size just like this to around 70 or more all right this is looking good now let's just erase these hard edges with the erase tool like this and this is looking strange because the spread is not zero this pad has to be zero all right and now with the smudge tool with a strand of around 30 40 we can start creating some spikes like this let's grab this hide this black background and export this to unity once you 'ti let's drag this to the material we had already created just like this and as you can see I've added the new texture to the material but the particle system doesn't update which is very odd and to fix this you need to go back to the Y particle system and reassign the material again now right just like this I'm just going to create a prefab now and now what we actually have to do is create an empty and add the square glow to that empty so we create a new empty and add the square glow to hit and let's create another particle system which is going to be some particles and let's go to shape and select the box she's really cool because now we can make the box fit the button just like this let's change the emit from 2 edge that's also had the UI particle system script and let's drag beam 0 1 UI material which in case you don't have a texture like this one you can quickly create one in your image editing software by using the brush and going from a big size to a smaller size like this and that's it once you have done that we can set a random start size between 5 and 25 more or less like these let's set a random start life between 0.8 and 1.6 and I'm just going to copy and paste the start colors from square glow to these particles like this now let's activate color over lifetime and create a gradient similar to this one and we also want some size of our lifetime with this curve we can increase the box thickness between 0.2 and 0.3 or 0.4 it is just to make sure that part also appear almost in the center of the button now let's just turn velocity of a lifetime set the space to world and we want to random values between -5 and 5 or even more just so the particles move around a little bit and that's almost it let's increase the rate over time in the mission to around 50 go in more if you want and that's pretty much it we have a nice glowing button you can do plenty of stuff with these really depends on what you want to achieve but let's just see how we can create quick effect for when we click a button and let's say we need to collect some coins let's see how you can achieve that so let's head over to photoshop I'm going to create a rounded rectangle set the stroke to white and the field to nothing now let's double click the layer some outer glow where we can increase the size to more than 30 you want and now let's decrease the feel of this layer to around 2025 it's up to you to create this nice glow all right let's crop this down hide the black background the next part to unity create a new material and drag and drop the new texture we have created now let's create a new empty and call this visual FX click at 0 2 let's add a particle system let's add the UI particle system script to the particle system we can turn off shape we can set the rate over time to zero had the burst with ten in count and I'd set the max particles to one the start speed is zero and the duration is one with loopy turn off the start lifetime it's going to be really quick so 0.4 0.5 it's fine and the size it's probably around 150 we are going to see in the moment let's also turn on color over lifetime and create a gradient similar to this one to create this effect let's just drag and drop our material and it's starting to look good we only need to adjust the size of our particle system like this all right it's looking good we only need to turn on the size of a lifetime and like the curve smear to this one and increase the start size now we are starting to have a cool effect just going to rename this to square and let's change the start color to an orange to match the button if you want to increase the color intensity of this texture you can do it right here in the shader all right cool let's create another particle system this one is going to be for the particles let's set the duration to 1 turn off looping and set the start lifetime between 0.6 and 1.4 start speed is going to be 0 because we are going to use the last T of a lifetime and start size it's going to be between 5 and 25 maybe less maybe more wheels in a moment and start rotation between 0 and 360 with 1 in randomized rotation and the colors can be an orange and a reddish orange which we have already used before the emission is going to be 0 but we will have a burst between 30 and 50 and we will also use the box in the shape to match the size of the button just like this and we want to emit from edges let's just a DUI particle system script and add the same B we have used it before to the material alright cool now in the velocity of a lifetime we can set values between 20 and minus 20 or even 40 minus 40 it depends on the impact you want to create now let's create a nice fade out with color of a lifetime or you can also use size of a lifetime with the same curve we have been using nice let me save this as a prefab now we can go to the square glow and basically duplicate the square glow and parent it to the clicked effect let's set the duration to 1 turn off the looping and the prewar and set the start life to 0.5 if you want you can change the texture I'm going to use the simpler one and then in emission we want to set the rate over time to zero and use the burst which is going to be only one particle alright just like this now if we select this three particle system and press play we have an impactful effect for when we press the collect button which is really great now let me just explain you how this script works it's really simple basically the scripts attach it to the button and I'm going to add the click and effect we have created to the click it is what effect in the inspector just like this and basically this click is what effect is instantiated in this function and this function is called by the button when we click it as you can see so the effect is bounded in the origin and the origin disguises the button and I'm going to parent to the button the visual effect and then I'm going to try it after its duration which is really simple now if you press play we can see that we have the glowing effect really nice and as soon as we click it we found the click of effect we have just created it's really cool does a nice impact but now if you want to collect the coins basically we can see that in the button we also have an on click call for another function and this function basically is an aerator which is going to iterate throughout an amount that we set an inspector and in this case is ten basically ten coins that we are going to create this first money scripts number increased color line it's just to increase this counter here basically nothing special and then we found the UI visual effects in the origin game object that we have set in the inspector and we are so parent to the origin and then we have here a line which is very important and we are using I twin which is extremely useful to create very simple animations with just one line basically what I'm saying here is that I'm going to move the visual effect to the destination with an offset and within each type if you go to the inspector we have a lot of these types and these really speaking these types is a mathematical function that may look like these ones extremely useful guys I really recommend you to get AI tween it's free in the asset store by the way and then the last parameter is the time that it's going to take to go from the origin to destination which in this case is alpha second and we have the rate the rate at which we spawn the coins well so let's see this in action and if you press play as soon as I click it we have the click effect and the current spawning and going to the coin icon and yeah you can do a bunch of stuff with these UI visual effects I have created a package with some cool effects that you can get in my patron link in the description by the way thanks out 12 the patrons that have been supporting me for the last month you guys are really great thanks a lot I hope you all have enjoyed this tutorial thanks for watching and see you in the next video [Music] [Music]

Channel: Gabriel Aguiar Prod.

Views: 101,844

Keywords: unity tutorial, unity special effects, game effects, particle system, unity particle system, effects for games, unity game effect, unity vfx, unity effect, vfx, unity UI, unity user interface, unity ui vfx, unity ui effects, unity user interface effects, unity user interface vfx, unity GUI, unity GUI effects, unity GUI vfx, game ui effect, unity canvas, unity canvas effect, unity canvas particle system, game user interface effect, unity ui tutorial, ui particles

Id: hiRdux33UCs

Length: 15min 36sec (936 seconds)

Published: Sun May 20 2018