Create Tesla gun in Godot using simple shaders | Dicode

hey everyone welcome to another visual effect tutorial in this video we are going to create this amazing tesla gun i have created this lightning movement with simple shader coat this lighting is going to be fully intractable with other object as well so let's create this now before jumping in godot let's talk about some images that you will need if you are watching my channel then you may already have this image pack for the new viewer go to this website and there you will find this image pack which is made by kenny it contain amazing images so just download it now we have everything so let's open godot and there we will create a new scene of raycast2d then under it we are going to add a line to the node now select the raycast and in the inspector first enable it then cache 2 is the direction where our ray will point set it to 100 on x and 0 on y so our ray is pointing in the x-axis now collision must tell us from what object our ray can collide so you have to set it according to your game in my game i want you to detect the player and to the world so i will set it to true in the player and the world layer now depending on your game you might want to detect the areas as well so turn this on if you want now coming to our line 2d we first click on this add point icon and then create two points now in the inspector click on this pool vector and you will see the coordinate of this point here set the first point to 0 0 and in the second point just make sure that y is 0 x can be whatever you want because we will change it from the code now in the width set it to 150 then coming inside the fill here you will set the texture of the line for that go to the image pack you downloaded and in the rotated folder you will find the spark 06 image now add it to the godot and then put it inside the texture slot of the line 2d now in the texture mode set it to tile now you need to enable the repeat on the texture for this select the image and go in the import tab and then enable the repeat and also click on reimport also in the inspector click on default color and make it white now this time to add some motion in it for this we are just going to write two lines of shadow code so come under the material and add new shader material then in the shaders add new shader and then click on it here we are going to write shader code now if you know a little bit about shader then that's great but if you know nothing about it then i have made a grass motion video some time ago i recommended watch you first because there i have explained the shaders basic and the code i used to create the grass motion and the code i used to create this splash effect is almost the same so if you have watched that video then it will be helpful so coming back to the lightning here we will first write the shader type canvas item and here we are only going to need the fragment function as you know the frame and function have this color value that tells gpu what to draw here we are going to give this texture function and pass our texture and uv this texture represents our image and along with that we are passing uv in the texture function this texture function take an image and a uv coordinate and then return the value to the color to display the image on the screen now to move it we are going to make changes in uv coordinate so for that i am going to create a uv variable and set it to our uv dot x and uv dot y and instead of real uv we will pass our own uv right now nothing changes because we haven't changed anything now to move it along the x axis we will add time variable in uv dot x so now our lightning start moving in the x axis you can change addition to subtraction to change this direction if you like this then you can leave it like that but i am going to make it move left and right so i will add this inside the sine function now to change its wavelength i will multiply it by smaller number like 0.1 and to increase this frequency i will multiply time by a larger number like 80.0 now we are going to do the same thing in the uv dot y now just to make it little different on the x and y axis i will multiply time with 50 and multiply whole thing by 0.02 and congratulations we are done with our main lightning now it's time to add some spark at the end of the lightning don't worry about the color right now we are going to set it at the last first part we will again head over to the image pack and take this spark 01 image from it now in our laser scene we will add a node 2d and we will name it end under it we will add a sprite node now in the sprite add our spark image in the texture slot since the image is too large so scale it down to 0.1 then under the material add new shader material and open the shader editor now write down the shader type and create the vertex function now if you have watched my grass motion video then you will know that there we have moved the top part and keep the bottom same similarly here we are going to move the left part and keeping the right same now write vertex dot y because the moment is on y axis then we pass time in the sine function and to increase its range multiply it by 200.0 and to increase its frequency multiply time by 80.0 then multiplied by uv dot x this time because it changes from 0 to 1 on x axis and to invert it we subtract it by minus 1 so now it's going from 1 to 0 and x axis now our spark is also completed now just duplicate our spark and under offset flip it vertically now just make sure that the position of both sprite is set to zero comma zero now go to our end node and make sure that its y coordinate is set to zero you can change x whatever you want because we are going to change it from the script anyway so now let's attach a script to our raycast node here first we create a variable that contains reference to our line 2d and a variable to contain endnote and a variable that represents our maximum distance that the light can go then create a ready function and here catch the ray to a maximum distance in this case maximum distance is thousand that means our ray 2d is 1000 pixel long now create physics process function and inside it we first check it for collision and if our ray collide with something then we will store that position in a variable since this function written global coordinate but we want our local coordinate so we will use two local function to convert it now when we get the collision point then we set the second point of the line 2d to that point this will increase or decrease the line based on the collision point that we get now also put our end node to that collision point now since everything is placed on x-axis so whatever collision we will detect will be also on x-axis so in the code we can only set the x coordinate because y is always going to be zero now only one problem is left you see currently our line is set to 200 pixel and if i put the end node at 200 pixel it will go to the end but because of this sprite it look outside of the line so we have to bring it back a little for this you need to shift it 15 pixel on left so in the code we will subtract 15 from it now we are done with the coding and it's time to add some color to it now click on line 2d and come under visibility and select modulate then switch to raw mode and set 12 to 3 in the red blue and green do the same thing with the endnote as well you don't have to just copy this value feel free to try different values ok our lightning is fully ready now just create a gun image that will fire it and add the lightnings in your it then place it where you want and that's it i hope you found this video helpful if you have any doubt or any suggestion write down in the comment section and also like and subscribe to this channel and i'll see you guys in the next one [Music] [Applause]

Channel: Dicode

Views: 6,590

Keywords: godot, shaders, tutorial, laser, tesla gun, laser gun, godot 4, how to

Id: mJzM4xdooAU

Length: 6min 59sec (419 seconds)

Published: Thu Aug 26 2021