Make an Action RPG in Godot 3.2 (P22 | Sounds + Hit Flash Effect)

good morning afternoon or evening wherever and whenever you are my name is Benjamin and welcome to part 22 for our Godot action RPG series this is the real final part this time I didn't forget anything this will be the last video and in this video we're going to be implementing some simple sound effects into the game and we're also going to be adding the flash animation for our player and our enemies let's get started the first thing we'll do is start implementing some of the sound effects and actually I think my recording software is doing desktop audio so I'm going to turn that down just a little bit so that we can hopefully make sure that these sound effects aren't too loud let's come into our player we'll add a new note an audio stream player and don't do audio stream player 2d my understanding is that the difference between a basic audio stream player and the 2d one is that with a 2d audio stream player you can have sound effects happen basically relative to their position in the world so the closer you are to that sound effect the louder it will be and we don't need that for this game so we're just going to do a basic audio stream player like this we'll come into our animation player and on our attack down here we can let's zoom in just a bit new track do a new audio playback track and select our audio stream player then we can come over to the first key and we'll insert a key here and then click on that key and we need to tell it what sound to play it's called the stream over here and we can come into our music and sounds here and we'll choose our swipe sound this you can see when we play the animation it should play this sound effect I will watch how loud it is on my recording software here ok that was pretty loud I'm gonna quiet it down just a bit there that should be good ok now we're going to do that with the other directions add track audio playback add a new key and then drag over our swipe sound effect again [Music] and we'll do it with right as well and we'll do it with up you there we go we've got swiping in every single direction we're gonna add some sound-effects to some of our actual effects as well so come into your effects here come into your enemy death effect we're gonna add a new audio stream player to this oops I did 2d try this again audio stream player do not do the 2d one and we'll drag over the enemy die sound effect right here and we'll check autoplay so it plays automatically we can close that will come into our hid effect as well add an audio stream player and will select it turn on autoplay on that as well now if we play the game should be able to run around here are swiping and here a nice little hit effect and a death effect for our enemies hopefully that explosion effect isn't too loud in my Street in my recording here it's pretty loud I think I might turn down my audio just a bit more here to try and help make sure that this isn't too harsh on you guys as ears especially if you're watching with headphones okay so we've got those in let's add in for our role animation as well so do roll down coming to here at a track we'll do an audio playback we can select the same audio stream player for this insert a key and now we'll use the evade sound effect like this there we go okay and we can choose left all the same process right and one of the cool things about this is you can see the sound effect down here in the animation player you can actually drag it around - which is super cool to me you can drag it around in your timeline and move the key okay roll up we got to do this one too and there we go let's see there is one more sound effect we want to do here let's see let's run the game first and this team we should also have a sound effect when the player gets hit make sure that's working uh-oh we've messed something up let's come into our let's see we want to come into attack down and we want to go all the way to where our collision shape is disabled our collision shape was being enabled because we had it set to this right here so well you don't have to do that either we could just go we want to set this back to idle down anyways and then we can just come into our sword hit box and we can't come into the collision and just disable it right here outside of the animation player okay there we go now we can see the bats are damaging us so there's one more sound effect we want to do and it's when the player takes a hit we want the sound effect to be we'll have the hit effect still but we want to layer another sound effect on top of it for when the player gets hit no we could add a sound effect here to the player scene and have it play that sound effect when we take a hit right but the problem is with that is that if the player dies it will destroy that sound effect player and it will cut off the sound effect and so it'll it'll destroy the note it'll free the node when the player dies it'll cut off the sound effect now there's two different approaches to this problem that people will use I asked about on Twitter a while back actually and the two main approaches that people will use is they'll actually have like a dying state for their character and they'll put the character into that state while the sound effect plays and then once the sound effect has finished they will then destroy the character and they'll just hide the character when it's in the dying State now I don't really like that approach because I don't like to have the character actually in the world still because then the enemies will still be trying to chase it and attack it and all these things the other approach that you can do and you can find worker ways to work around all those problems too but I feel like the there's there's a lot that you have to deal with and I don't like to have to deal with all that stuff so the solution that I came up with at well that other people have come up with as well it's just to create the the a player sound effect like a scene for it and then instance that scene into the game world so if we create a new scene here we can choose other node and do audio stream player and we'll call this player Hurt sound and we can attach a stream player to it so we'll we'll grab the hurt sound effects here attach it we can have an auto play right here and then we can just connect this audio stream player finish signal to a receiving method on here and we can just choose Q free and hopefully this will work scene does not contain the script we shouldn't need to do a script we should be able to if we do connect let's see it doesn't seem like we're going to be able to do this we could use an animation player too I'm just going to attach a script to it will save it inside of player right here we'll attach a script to it and then inside of our ready function here we can just connect the signal manually I think so we'll say connect finished self queue free like this [Music] do that this should work I think Connect returns a value we can ignore that because we don't need the return value okay also that's another thing to mention is if you do have warning messages they list them as errors but they're just warnings that's why it's yellow instead of red these can you can click on these individually and then ignore them so for example with Delta here it's not being used in this argument so you could put an underscore under it if you don't actually need to use it like we no longer actually need that one in this case so that's why they have the warnings is so that you can see whether or not you still need them like the attack state doesn't need Delta the role state doesn't need Delta so we can actually remove these from there there we go this one right here this one right here however we can't remove this because this argument is passed in from the signal I think we can just do an underscore on it and then it will ignore even though we're not using it it will ignore that we're not using it like that so so you can go and do that with all of these different warnings that you get if you want to clean up your warnings as well and that's a good idea here we go we've got the player Hertz sound now we can just come into the player and when we take a hit right here on the player we can well we'll need to actually get access to it up here so let's do const player hurt sound well preload it and we'll just come into layer here and drag this scene drop it right here okay and then we can just instance it inside of our world and we'll come into when we take a hit here will save our player hurt sound those player hurt sound instance [Music] and then we can do get tree current scene add child will add our player hurt sound while you're hurt sound I must have added an S to it up here let's remove that wait what the variable rate it okay there we go at I think since we already set to autoplay that's all we need to do right we said we turned autoplay on let's make sure that that works there we go so we're getting the play hurt sound and on the last hit you can see that it continues to play that sound if we check our remote scene we shouldn't see any of them in the world because they did manage to get freed when the when the sound finished playing so that's what you can do for that situation I feel like that's that's the way that I like to approach it there you know and everyone has kind of their different method when I asked on Twitter I got so many different responses for how to handle sound effects like that and this is the one that I decided to go with so there are other ways to do it and they're not bad as well so if you have a way you prefer you can do that so let's get started with the blink animation so we're going to come into our player here we'll come into our local scene and we're going to add a new a brand new animation player and the reason it needs to be a new animation player is because we want it to work on top of our players existing animation player so when we play this whatever animation in this new one we want it to play that animation on top of our old animation so you can actually stack too and you can be playing two animations at the same time which is really interesting to me actually we'll call this our blink animation player like this we'll give it two animations we'll get it a blink we'll give it a start let's give it a start animation will make this point too long and will also give it a stop animation and will make this one point one long and this is going to be for our blinking okay but we need to actually make the character blink and you can do this by there's a couple ways to do this you can alter the modulate property by setting raw to true and then maxing out a bunch of these values that is weird to me that method also feels like it's kind of like an icky but the other method you can do is by making a shader and using a material on the sprite and I feel like that is the method that I would like to use because it's first of all it gives me the chance to talk about shaders and to teach you guys a little bit about shaders in Godot we'll just cover the very basics though so first let's come into our players properties we'll click on the sprite come over and select the material and do new shader material okay so we can attach a shader material and then we want to click on this and we need to do a new shader we'll do new shader inside of here okay and then click on that and that will open up a little code box down here and it's really great that the code is down here because as we as we manipulate this shader in fact let's right-click here and do edit this will bring the shader so that all we see is the shader properties here we're going to click these little object properties and do save as and we'll just save this in the default at the res up here we'll call this white shader let's see white color shader white color shader we'll save that okay we've saved that shader now as a resource we can use it in different places we use the little icon right here or the shader so in Kido it has its own shading language and this shading language is pretty easy to learn but it is different from GD script so GD script is based off of Python godot's shading language fills more like a conventional language like C C++ or something like that so although it's more simple than C++ and the way that it works but you do have to define all your types so the first thing we have to do is tell Godot what kind of shader this is and you can see down here it says expected shader type at the beginning valid types are canvas item articles and spatial the particles are for your own particle shaders spatial is for 3d the canvas item is for 2d that's what we're going to be doing here the shader type and then you just type can this item and then you have to have a semicolon okay so once again this is different from GD script where you don't need semicolons we have to have one here so then we need a function in here in this canvas type and there are different kinds of shader functions and they're listed in the documentation the specific function we need is called a fragment shader so void fragment now void just means that this function doesn't return anything and this is a built-in function inside of the canvas item shader type and basically what this does is this little teeny function right here executes saan every single pixel inside of our image here and that's one of the powerful things about a shaders that were able to do that so this function however even though it says it doesn't return anything it has a value at the end that you need to set and this is the color so for example if we set our color here to vector for 1.0 1.0 1.0 and 1.0 and then do a semicolon at the end this is going to set every single pixel inside of let's actually hide our title these collisions shapes here it's going to set every single pixel inside of our image to this color right here and this color is a red value a blue a red green blue alpha and so each of these values represents one of those colors red green blue alpha so if we set if we set our red to one are green to zero and our blue to zero but left our alpha at one we're gonna get a red square right because this color right here is just maxed out on red and nothing on the others what we actually want to use white right well this isn't quite what we want because we don't want our character to become a giant white square when he's blinking right so what we're gonna do here is we're going to create a new variable we'll call this previous color and we'll set this equal to texture this is a function inside of the shader language and this function takes it basically it basically accesses a pixel on the texture and we have to tell it which texture we're going to access well that is texture everything uppercase this texture that we're telling it which texture we want to access this is the basically this function goes to our sprite and it looks or it goes to a texture which in this case is going to be our sprite and it looks at a specific point on that sprite and that's the next thing we have to pass in is the UV value which is just kind of like an XY position on this sprite and it will give us the color at that specific position on this texture this is the color of our current image here this right here this previous color is actually the color and so if we set color here it's easiest to just show you [Music] if we set our color equal to previous color you can see that our shader what it does here is it steps through each pixel and it says what color is on at this pixel at what color is this pixel at this position on our texture it says oh that's clear you know it's transparent goes through each one until it finally gets down to here and it goes oh this one's actually black so then it sets it to black and then it goes through each this is each individual like I said this function gets run on every single pixel and each time it gets run it gets the exact color of that pixel and sets the output color to the color that was already there which so this shader literally does nothing except get the color that was there and set that to our new output well we don't want that we want to have our own mixture of the two right we want to be able to mix the alpha value that we have with the with the actual with the white color that we want so we'll do that for here [Music] make a new color white color and we'll set this equal to vector for like or and the first three values will just be 1.0 1.0 1.0 okay but the alpha for the alpha we want to use the previous color alpha so that it's not transparent where and where on the image but it is transparent when we're out here so we're going to do previous color dot a you can see it's got all of these different ones here we've got red green we scroll down we've got red green well this isn't this isn't showing since it's a vector for it's just giving it variables here but we can do a for alpha here okay and then do a semicolon but basically that will select the alpha value of this color and then instead of X instead of setting our output to previous color we'll set it to white color [Music] and now we get a white character like this where it's completely white so we can set this we want to be able to control this shader with the animation player and the way that you can do that is by using what's called a uniform variable and so a uniform is kind of like you know how in our player we did export variables up here and we could export a variable and that would allow us to edit to change it inside of the editor in a shader double-click on a shader here in a shader that is called uniform uniform and this will be a boolean so it's going to be either true or false I'll say active equals true okay so we're creating a uniform value here that means when we're inside of our shader we can actually see that value so if we come to our player sprite right here and we come down to our material if you come to shader parameters right here you can see the active variable and we can turn it on and off but we need to make it so that this active variable is used to set us either to flash white or not and there's ways to optimize this but I'm intentionally going for the simplest method that is slightly less optimized because you really shouldn't use you want to avoid using if statements inside of shaders but in this case it'll be fine I'm going for the simple version here we're gonna create a new vector for here called new color and by default we'll set this equal to previous color and then our output will set to new color right so that's going to make it so that our shader is just showing the value that the colors that it was set to before because we get the colors right here we set our new color equal to those and then we just output our new color but we can add an if statement here we can say if parenthesis active is equal to true you [Music] right if active is is true here then we can set new color equal to white color and do a semicolon okay there now when active is true and let's set it to false by default when active is true our shader will let's save wait what I must have I selected active over here so that's overwriting it if we do that it will it will set it back to what it was before but if active is true then it will use our white color if it's false then it will just default to the previous color like we set up here right and we can easily come over here to our shader parameter and turn it on and off and watch our character link white like that so this is a really simple shader hopefully this kind of helps you get started with shaders it's not too complicated they are a little bit weird at first but once you start to think of it is that this little program right here gets run on every single pixel and you learn a little bit more about getting return values and stuff it's not too bad good Godot also has a visual shading language which is pretty good but I tend to I tend to prefer just programming and not using visual languages personally visual scripting languages but you can try that out if you want to instead if you want to give that a try now that we have this set up we can come back into our blink animation player and we'll set our start animation to loop here and on the first frame we click on our sprite we can key active as true and then our next frame we can uncheck active and key that okay so now if we run this our character blinks just like what we want right and we want to come to our stop animation and on the very first frame we'll just key active as false there we go we'll save that now we can come into our player script and we can get access to our new animation player on ready VAR blink animation player equals blink animation player like that clear this get rid of our output we can come down here and once we could set the blink animation player here manually but if you remember inside of our hurt box we actually set up some nice signals invincibility ended and invincibility started so let's use these to activate our blink animation player double-click on invincibility started connect that to the player [Music] and you'll see they're already connected but they're actually connected to the hurt box itself so now we're connecting them to the player you [Music] inside of here we can say link animation player dot play start and then right here will say link animation player dot play stop so it'll start blinking once our infants at once we trigger the invincibility and it will stop once our invincibility is over there you go it doesn't actually trigger for our bats so let's I actually want to give the player just a little bit more invincibility - let's do point six here so the players got a slightly longer amount of time that the player is invincible so let's get it let's do it for our bats - and part of the reason I want to do it with the bats is because it introduces a new problem that I think is really important to talk about so let's bring up the bat here and inside of our bat we're going to add another animation player is the first one inside of the bat actually and we'll just do on red Ivar [Music] animation player equals animation player there we go access to it will do the same thing where we create two new animations start point to new stop make this in point one there we go and that we have those we can come into our animated sprite come over and we can do a new material will select shader material click on that where we have a shader here we can just come drag our white color shader and drop it right here and then we can get access to the shader parameter here and we can come down into our animation player however when we click on the animation player it gets rid of all the properties that we need for our shader parameter right if we click on the animated sprite it then gets rid of our animation player so you actually have to click down here on animation while you're on the animated sprite that way you can have access to key the values here so for start we'll activate it and key it then go over one frame and key it off make sure to set this one to loop and for stop we'll just Kia as off like this okay and we'll come into our bats code here and when the bat gets hit on entered right here oh this good good this reminded me of something actually okay I just don't want to forget about it but what we need to do here is we need to do dirt box dot start invincibility and for the bat will do zero point three I think point-three should be maybe 0.4 for the bats invincibility and so we're starting the invincibility on the bat when it gets hit for 0.4 seconds and then we can come into our bats Bert box connect those same signals invincibility started an invincibility ended to the bat and we can do animation player dot play start animation player dot play stop so we're linking our blink the blinking linking the blinking to the invincibility frames and so I've just decided to do that you don't have to do that but here's the problem that comes up when I hit one bat they all blink they all blinked watch so why is that why do they all blink well Godot actually shares resources through uh through scenes so we've got our battle scene here and we've got our animated sprite right this sprite is shared between all the bats if we make a change to this sprite it will change all the bats that's the same with our shader so if we activate the parameter here it will activate it for every single bat and that is done as a way to optimize your game right obviously if you can share a resource if the resource doesn't need to be unique then you want to share that resource to optimize your game so you're not wasting wasting that memory so if we come into here though inside of our bats animated sprite we can see that there is a resource drop down here and we can click on that and we can check local to scene and what that means is that it will actually create a new shader for every single one of a new shader resource for each of these bats it will instance a brand new one that way when we activate that shader we get it only the only one of the bats blinks because the shader is local to that bat scene and that's a really important thing to know and to understand so that you are able to use that right you by default it's good that this is turned off but there are certain situations like this one where you want it to be on where you want them each to have their own copy of the shader so the other thing that I wanted to do and this is really good I forgot about this somebody else noticed this and made a comment about it but inside of the player when the player takes damage here we're actually still just subtracting one which means even if the player if the bats did two damage the player would still only be subtracting one health here which is different from our bats which is saying area damage right which basically gets the damage amount on the hitbox because the area is the hitbox here so inside of our player we need to do status dot health minus equals area dot damage and remember when we actually had this underscore here remember when we have the warning if we'd actually looked at our code here closer that warning would have said to us wait a minute you're passing in a hit box here that has a damage amount but you're not using it and so warnings like that can actually help you to find issues in your code there aren't necessarily error messages but could potentially be bugs still so even though these warnings can sometimes be annoying we can always we can always come and add and ignore when we when we need to like for this one right here we don't need the area this one right here we don't need the body for this one right here we don't need to return a value so we can ignore both of those you can see adds a little comment to make sure that it's ignored and then when we run our game we should no longer get any messages like that and now our players should be able to take more damage if the enemies deal more damage to us so that's gonna be it for this serious man I really had a lot of fun with this series I learned a lot and hopefully you guys learned a lot with me as we're going through it I'm excited for future content here on my channel I'm going to be doing pixel art content I'm going to be doing Godot content I'm here pretty soon I'll probably do some more game maker content because of the new game maker update that came out it's still in beta so I'm gonna be waiting a little bit because not everyone has access to it and such but once once everyone gets access to it then I will be making content on that the new version of game maker as well because I'm excited for that I've got a lot of stuff planned for the channel and I really appreciate all your support especially to the people who have supported me on my one bit Godot course the Kickstarter backers who initially did it and everyone else who has supported me since then it has really helped me to get my business back on its feet again cuz there was a time there where I was tapping into savings in order to keep doing this so but I'm back in the black now we're doing well thank you so much for that support and if you're interested in supporting me more I do have a patreon I've also got the 1 bit ghetto course you can check out those links in the description and at the end of the video and I will talk to you all later

Channel: HeartBeast

Views: 52,383

Keywords: Godot Engine, Godot 3.2, Godot 3, Tutorial, Series, Action RPG, RPG, Pixel Art Game, Indie Game, Game Development, Learn gamedev, Gamedev

Id: Ot9M0TlxApU

Length: 37min 1sec (2221 seconds)

Published: Fri May 01 2020

Reddit Comments

[u/Sploon3]

I remember buying this course for GM1.4. Awedome course

[u/nibzAU]

I started this series and very interested.. Ive gone back a bit and looking at ur earlier stuff. Im new so some things are not clear.

Very keen in ur 1 bit but a little too exspensive

I cant wait to finish this series and give a full review on it as a newbie :)