Godot 3.1: 2D Laser Effect

Key Takeaways

in this tutorial I'll show you how to make a 2d laser effect in gdau 3.1 for this demo I've got a kinematic character which I'm controlling with the mouse and keyboard walking around in a top down tile map and so what we want to do in this tutorial is get this guy to shoot but I don't want him to shoot bullets I want him to shoot a laser beam a beam that's going to come out of the gun and travel until it hits something so pretty much instantaneously to do that we're going to need to use two techniques a ray cast which is going to be a line projecting from the gun and detecting a collision at some point and then we're also going to need to draw this laser beam and we're going to use a line 2D for that here's my Soldier and he's got a position 2D marking the muzzle of the gun so I'll know where to project from but we're going to need to add the visible component of this laser which is a line 2D I'm going to add a line 2D node and to start with we're just going to draw this on the screen uh just so we can see something so I'm just going to put two points kind of like that now over here if we look at the positioning we'll see it's not quite on the muzzle so I'm going to move that a little bit just so we have it and so this is just going to be a test version of it when we draw it we're going to dynamically set where this goes and and let's make the default color more lasery looking and then for the capping I'm going to make the end cap round it looks a little better so that's now coming out of the gun projecting out and our line 2D is basically always going to have two points the starting Point's going to remain the same all the time it's the muzzle of the gun but the ending point is going to be wherever the ray cast detects a Collision or its second point is going to be non-existent right if I remove the second point I don't have a line so that's the condition when we're not shooting or we haven't hit anything all right so let's look at the Players code right now all I have in here is the movement code and I just have a the left Mouse click action um calling a shoot function and that shoot function right now doesn't do anything so this is where're we're going to do our our code so I'm going to add a couple of variables here we're going to have a beam duration it's going to be how long the beam lasts now while we're testing we can make this big you probably don't want it to be a long number um but maybe you do I'm going to put one and a half seconds and I'm also going to make a cool down is how long you have after the beam disappears before you can shoot again and then this can shoot flag is what's going to determine if the shooting happens see we have this here when you press click it'll only shoot if that can shoot variables true and then um one more variable called hit this is going to be our Collision did we detect a collision or not so I like having this beam here for visibility for testing but obviously when the game runs I want this to disappear I don't want to see this line sticking out of the player so what we want to do is remove this second point in the line and so I'm going to do that in the ready I'm just going to say line 2D do remove Point number one right we'll leave Point number Z Z on there so that way we have our line ready to go ready to have the second Point added when we shoot so when we shoot what do we do we are shooting so we're going to set can shoot to false and then we're going to need to cast our beam cast our Ray to detect a collision and I'm going to put that in a separate function because as you'll see later we're going to want to do some different things with it so I'm going to assign that [Music] to a method so I'm going to make a method called cast beam that's going to return it's going to return either null if it didn't hit anything or a collision if it did hit something right so rather than use the raycast 2D node which you could use for this I'm going to use the direct space State method so we're going to get World 2D and we're going to get the direct space state from that and that's going to let us cast array in the current world space that will detect a collision with any physics objects so result the result is going to be space state do intersect Ray now the parameters that we passed to this we need to the start Point that's the muzzle Global position we need the end point well that's the muzzle Global position projected outwards so we're going to take the transform dox of our player that's going to be the direction the player's pointing in and how far we want to cast it uh I'm just going to put a thousand there for now that's how far we want to cast this beam out oh and then we don't want the beam to collide with ourself just in case we have any kind of U one pixel overlap with our Collision shape or something like that let's make sure we don't intersect with the player itself okay so now we've cast array 1 th000 pixels forward so result is either going to be null or it's going to be equal to the Collision so if there's a result then we want to add to the line 2D and so you might think you could say add Point uh result. position right that's that's the location of the collision and then we're going to return uh result so now if we try this let me move over here into the center and then I'm to shoot and you see how that is not a straight line at all right it collided over there somewhere and that's because the position is this is a global position but we're adding it to the line 2D so we needed to use local coordinates and we can do that by using the transform again right transform again is the transform 2D of the player so it has the player's position and rotation encoded in it so we're going to use used transform the transform inverse on the position result and that will transform it to local coordinates okay let's see what that looks like now so I'm going to walk over here I'm going to shoot okay it hit that spot right now we're not able to shoot again because we haven't reset things but two problems you notice one is it did hit right it hit the wall there but now when I move the the line is still extending that same distance even if I move and I don't want that I want the beam to stop when it hits the wall no matter how I rotate while the beam is active so we're going to need to update that position every frame because the player might be moving okay so let's fix those problems first let's make it so we can shoot again well after we shoot we're going to give it uh we're going to say get tree create timer and we're going to use the beam duration right that's how long we wanted the beam to show and then we t wait for that to time out and then we will remove 01 from the line so now the line will disappear again and we also want to set can shoot equal true actually we want to wait so the beam went for that long we need another yield because we also want to wait for the amount that we gave the cool down so we're going to get tree create timer cool down also wait for the timeout and then we're going to set can shoot to true so let's see how that looks so we go over here we shoot it hit the wall then the beam goes away and I can shoot again right so wherever I'm pointing when I'm able to shoot that's where the beam is cast to and it stays that length so the next thing we have to fix is that process of updating the length of the beam okay so we have to go down here in our physics process we want to update that beam as long as there is a as long as there's a value of hit right so if hit isn't null then we must have hit something and we want to update that beam so we're going to call it again then it'll go through cast The Beam again but it's going to add another point right and we don't want to do that right because if we've already hit something we already have two points in the line we don't want to add a third point to the line so if if we have a result we want to add a point if there's no we had never hit anything before right it's first time we've hit something we're adding the point otherwise we're going to update we're going to set point position one to that same value so we're going to grab this and update it to the new result so let's try this so I shoot at the wall right but now look my error me code is going crazy and that is because hit is still hit is still valid after the timeout right I've removed a point from the line when the beam ended but hit the value of hit hasn't changed because I haven't cast a new beam so after we time out the beam we need to just reset hit to null and that will put everything back to the way it was so we can cast the next one so now you can see the beam as long as it lasts won't go through any walls and this is including if I keep moving around I can shoot as I move and we're all good so that'll do it for our 2D laser effect tutorial um obviously we kept the look of it very simple with a plain line 2D there's a lot more things you could do to add World Environ enironment glow to add shaders for uh pulsing effects to get something like this which is a quick one that I did but that will have to be a topic for another video click the link below to download the project and play with it yourself thanks for watching and I'll see you in the next video