Space Shooter 3 - Camera Shake & FX

[Music] hello fellow scratchers yes we are back for another fruity episode of lemonoid invasion i can't tell you how excited i got putting this particular tutorial together because well this one is all about special effects and game polish yes finally by the end of the episode we will have put together all the action you are seeing right here all the sounds all the flashes pops and lighting and of course the awesome camera shake oh man this is going to be fun are you ready so let's get juicing so here we are at the end of episode 2. oh wow it suddenly feels rather bland doesn't it the first thing i notice is how easy it is to break up these large lemons you'd expect it to take a little more firepower right we can address this by giving each lemon its own health level click into the lemon sprite and make a new variable named health for this sprite only yeah each lemon has its own health now just before we create a new clone set the health to 15. i'm intending that we have to shoot a lemon around 15 times before it splits find the define enemy hit script this runs whenever a lemon is hit by a laser we need to check how much health this lemon has so check if health is greater than zero if it is then we change health by minus one that's negative one this is a typical pattern if the lemon has health then we now take some away if it's hit enough it will have no health left but in the meantime what else do we want the hit lemon to do we want to show that the lemon was damaged this is often done in computer games by flashing the impacted object white just for a moment we can do the same by setting the sprite's brightness effect to 100 great that's all for now so drop in a stop this script otherwise the lemon will split right now and we don't want that yet okay let's give that a test here comes the first lemon if i shoot it yes the brightness effect is working lemon turns perfectly white but yeah we will have to tell them to go back to normal as we don't want them to stay this way we'll sort that out in a moment though after shooting a lemon 15 times it finally splits and then a single shot is all it takes to destroy the smaller lemons what i realized we are missing though is the sounds of those dramatic impacts to match up to the visuals do you still have the all audio sprite in your project from last time click in there and we'll look at the sounds okay these three explosions are what we are after copy all three into the lemon sprite if we have a quick listen explosion six is a small fuzzy boom explosion 2 is a softened version of that same sound it's made a little shorter an explosion 18 is a big boom cool click back into the lemon sprite and we'll start with the big lemon being shot but not destroyed and we'll want the short impact sound start sound explosion 2 just when we change health by -1 okay we can test that yeah nice oh let's sort out those white lemons they don't want to stay white forever right the simplest way to stop this is to come back to when i start as a clone script and set the lemon's brightness to zero right at the top of the forever loop a brightness of zero resets it to its normal base level and setting it at the start of the repeat loop ensures each frame begins with no white lemons that is until they're hit by a laser testing again oh yes lemontastic i like those flashes [Music] how about those other explosion sounds then we have the big explosion and the smaller explosion sounds find the define enemy hit script again to tell the difference between a large and a small lemon we'll use an if else block and check for a size being greater than 250. our first lemon is size 300 after all so a big lemon has a size greater than 250 so start the explosion 18 sound the small lemons can just start sound explosion 6. oh and since we know what size of lemon we just destroyed why not set health to four here so that we need to shoot the next largest lemons four times more to get their health down too that should work well it's because we don't give the split lemons any extra health that they otherwise only take a single shot to destroy now yeah coming along nicely but there's still not enough visual feedback from all this firepower we need particles explosions or something what i'm going to add is a small bright light flash white explosions if you will as these can look awesome in space games and are quite easy to draw in scratch now we could add the explosion costume to the lemon sprite and switch to it when it explodes but that would cause us trouble the reason is that the large explosion would then still count as a lemon sprite and all our lasers would continue to bump into it that would not be very professional looking so we'd be better making the explosions in a new sprite create a new sprite and name it boom do you like the name right let's get arty we're going to start by drawing a filled circle with a width and height of around 50 pixels now to do this i zoom in and start at the middle point count diagonally left and up by six grid squares then click and drag with the shift key held down remember that that makes a perfect circle and finish with my mouse six diagonal squares down and to the right of the middle if you check your size that should be around 50 pixels oh nice spot on now with the selection tool drag and snap the circle to the center of the drawing canvas brilliant i just need to change the fill color to white and its outlined too transparent that already looks quite cool on the stage but you wait till we add a light haze around it hold down the alt key and drag the previous circle to create a copy now snap it back to the center over the first circle and then holding down the alt key again drag the corner outwards to around double its current size i want a sprite size of around 110 from this okay this is the fun bit click into the fill color and switch to the circular gradient pattern we want to keep the center white which it already is so click the right hand black color swab and we can switch it to transparent yeah now the circle fades off to nothing at the edges we don't see the effect on the stage until we close the colour chooser oh yeah look at that cool that's beautiful we are going to have fun with this let's name the costume flash that will do for the smaller explosions but we need another more dramatic one too for the big lemon duplicate the flash costume and name this one god raise we are going to draw some big rectangles so select the rectangle tool and then we must remember to click into the fill color and switch back to a solid white fill now zoom right out as far as you can until you see the full canvas and beyond we need these god rays to be really long so start drawing at the far left and we finish over on the far right height wise it's roughly as tall as the original outer circle perhaps now using the shaping tool i can pull in one side to make it nice and narrow now these rays want to radiate out from the middle of the ball of light so drag it so the smaller end is right in the middle here like this next we will make another light ray by holding alt and dragging the first one rotate it and then position again with its pointed end at the middle of the light bulb do this a few more times making some thinner than others works well and hey presto one rather gorgeous light bulb explosion effect complete with god rays we now have an awesome sprite so we just need a way to make them appear where they are needed if you remember our laser sprite we were able to create a clone of the laser from the player's script could we do the same here create an explosion from the lemon perhaps that would be nice but sadly the clone would not be positioned at the lemon and neither would it know which lemon created it now we could store the position of the exploded lemon in a for all sprite variable then the new clone could take that position from that but that would limit us to one explosion at once and we may need more than one that points us to a better solution of using a for all sprites list we can then make a record of as many explosions as we want to be generated let's do that make a new list naming it bang tick for all sprites start by hiding the sprite by clicking the hide button and i'm going to add a simple script to allow us to test the explosion scripts as we work i want to clone a new boom sprite at the mouse position when i press t so when the t key is pressed that's a t for test of course start by adding one to the bang list this says our new clone will use costume one at least it will then we add the position of the clone so add mouse x and then add mouse y there we don't need to run the project to test this just position the mouse on the stage and press the t key see how the bang list now contains the costume and position of the mouse as the first three items in the list i can move the mouse and again press t and now i have a second set of three items added to the list two a costume number followed by an x and a y position good this repeats for as many explosion sprites as we need to clone now we just need to write the scripts to actually create the explosion clones from this list we'll begin as normal with a when green flag clicked hat block next keep things tidy by officially hiding the initial sprite you can also delete all from the bang list just in case it has stuff in it you never know and erroneous data can cause unexplained bugs later on so now down to business add a forever loop we're going to be looping around waiting for something to be added to the bang list so if the length of bang is greater than zero we will do something right we need to consider the first three items of the bang list the first item is the costume so switch the costume to item 1 of bang next up the x and the y positions so set x to item 2 of bang and set y position to can you guess yeah item three of bang i think that makes a lot of sense having read in these top three rows we should now delete them from the list otherwise we'd end up cloning even more explosions at the same position to do this we just delete item one three times in a row i know that doesn't sound right at first glance but once you realize that deleting item one causes the rest of the items in the list to shuffle up a row then you can see that deleting item one again makes sense and we can do this three times to remove the top three items cool now create the clone of myself to start off a new boom sprite clone with the costume and position we have just set if there are more items in the bang list then this loop will go around again and create another clone we can almost test this but we must make the new clone visible first when i start as a clone show now i want to test this but i won't run the project i'll just click this green flag script with my mouse to start it off so with my mouse over the stage i press t and yeah we've cloned a beautiful light bloom as i repeat this action you'll note that each successive bloom is getting lighter now that's odd why is that well this is the same issue we saw before when we have a key press event trigger on a sprite that has clones all the light bloom clones on the screen are adding explosions to the bang list when i press the t not to worry though as this was just a test key press and it won't be like this in the real game our next job is to get the explosions to fade out after being created start by pointing it in a random direction between -180 and 180 this will be more useful later on though now we can use a weight 0 to ensure we see the sprite before we start to animate it make a quick fade using a repeat for and change ghost effect by 25 after this the sprite will be completely invisible since 425s is 100. so we finish by deleting this clone i'll test again by carefully clicking the green flag hat script tapping the t key now flashes up the light effect and they do quickly fade away that's perfect almost like little popping fireworks that's going to look great in game so how about costume 2 the god rays we can switch to testing these by updating the when t key press script and setting the first item to a 2 for costume 2. click the green flag script again and let's see what the tiki does now well that's as expected the god rays do look good but we can do better on a side note you can see why we pointed in a random direction now as it makes each god ray appear to look a bit different okay to improve the god rays we want them to stay on screen a bit longer and perhaps to have a bit of a rotation effect since this is only for the god rays that is costume 2 add in an if after the initial weight zero and check whether costume number equals two repeat an extra four times now i think this time just turning right by one degree no fade out yet then in the second original repeat also add a turn by one to continue the effect let's test that again by clicking the green flag script here now press t oh yeah look at that that slow rotation really makes this effect stand out nice let's get this in game delete the testing script as we've done with that and click into the lemon sprite here's the define enemy hit script and we should be creating our boom sprites right here as we play the sounds so we need to add three rows to the bang list to create a clone right we'll start with the big lemon god rays set a costume number of two and then the position of the lemon to be exploded that is its x position and y position you can duplicate that and put the first stack here in the if and the other stack within the else since the else is for small explosions switch it to create a costume one explosion before we test this i spot that we can make an optimization see that both the if and the else end by adding the same two items to the boom list we can therefore remove these two lines from each if-else branch and place just one copy below instead that will do just the same thing in less blocks okay i am excited to give this a go let's run the project for real by smashing that green flag and we are off yes it's working the initial boom of the first lemon is really cool and then as we clean up all the smaller lemons we get these very satisfying pots so good now there's just one thing missing that would really just bring the whole thing together and what's that camera shake we've all seen it and perhaps it's overused in games no we really want it yeah so what's the theory behind this well imagine the shock of the blast from the exploding lemon is so great that it actually knocks and shakes the entire screen itself funnily enough this is much easier to do if your game is already a scrolling game because then we already have an easy way to move the entire screen around but in a game such as this we don't have that yet so let's try and work with what we've got we'll start by adding an event to trigger this motion broadcast a new message when the large lemon is destroyed here and name it shake now we'll start coding this in the player sprite we need to be able to move everything on the screen by the same amount to simulate a shake create a new variable naming it shake dx for all sprites this is the amount each sprite is to move in the x direction and of course we need a matching shake d y too again for all sprites set them both to zero after the green flag is clicked so like i said everything wants to move by this amount each frame of the game so find where we are moving this player sprite here in the move x and move y custom block scripts and add shake dx to speed x and shake d y to speed y nice okay we need to do the same for every sprite so click into the laser sprite next so where do we move this one yeah here add in a new change x and change y and just change them by shake dx and shake dy2 that should do it next up is the lemon sprite okay um yes this movement scripts are here under the when i start as a clone we do exactly the same thing again change x by shake dx change y by shake dy super we can give that a test click the green flag now to see the shake valuables in action we can double click the shape dui reporter twice to change it to a slider this only works when not in full screen and now if i drag the slider around whoops everything just raises up the screen wow that was quicker than i expected and of course if we do the same for shake dx then everything rushes over to the right so where does that leave us i guess if we were to wiggle the shake dx and shake d y sliders left and right quickly we could imagine the screen would look to be shaking around right and yes indeed that is exactly what we're going to do the trick is being able to move it in a way that keeps things centered on the screen and looks like a nice impactful shake click back into the player sprite and in some free space pop in a when i receive shake so first we must decide on the initial direction of our shake i feel the shake should be away from the lemon we shot that should be roughly in the opposite direction to how our ship is facing if we were just shooting at the lemon so using those clever maths operators sine and cos again we covered that in the last episode set shake dx to the sine of our sprites direction and set d y to the cos of our direction now that will be a shake speed of just one pixel and towards the lemon that's really slow and in the wrong direction we should multiply it by a large negative number to fix that in fact we'll make a new custom block for just that name it shake and add two numeric inputs the x and d y that is how much we're going to multiply shape by note here we are not ticking the run without screen refresh block that's right don't tick it you'll see why soon set shake dx to itself that is shake dx multiplied by the new input dx and set check d y to shake d y multiplied by the input d y now the thing about our shake is we want it to take some time to occur but since we've only updated a variable in here this won't happen by itself we therefore add in a weight zero here to force a screen update before continuing that gives everything time to shift on the screen it's also why we didn't tick the run without screen refresh as that wouldn't allow us to do the weight in here and now i'm going to wait zero again why so that everything on screen will move by the same amount of shake dx and shake dy again that makes for a much more authentic shake as it amplifies the back and forward motion over two frames beautifully great so we said we wanted to multiply shake dx and dy by a large negative number let's do that now using our new custom shape block multiplying by minus 16 in both the x and y directions 16 pixels is a nice strong shake that will shake everything on screen by this much to about here now each time we shake we want to move in the opposite direction so the next shake wants to take us back through to the opposite side of where we just came from that would require us to move almost twice as far as the last time and again in a negative direction to achieve that we would multiply the original shake by just less than minus two i'm going to pick minus 1.8 for the x and y we use just less than two so that the shake will slowly get less over time okay so the shake has really begun now so we can create a repeat loop to continue the action back and forth repeat say 16 times should do and use a shake block again how much well now the shake is in full motion from side to side we want to multiply by just less than one a negative one that is to ensure the shake keeps decreasing but flips from left to right we'll use a random number pick random minus 0.5 to minus 0.8 and the same for the second input too finally to clean up add a shake 0 0 at the end to stop any further movement this is important as otherwise our whole game may slowly drift out of sight right let's spin it up and give it a final [Music] test this lemon oh this is great you dare to invade our galaxy not on my watch this shake just looks awesome and blends perfectly with all the other effects we've added too boom i shall single-handedly put a stop to this oh man so obviously you may have noticed i can't actually die yet in this game but i can tell you things are getting rather out of hand very quickly what i would suggest is we make the lemons begin spawning a lot slower than they are click into the lemon sprite and if you remember we can set the delay between lemons here in the green flag script set it to something like five seconds and the original pause before the first lemon appears that can now be two seconds and this this is it we have caught up with the game as i originally designed it for you in the first episode we have created lemonoids okay so it's by no means a finished game but i wanted it to be more of a catalyst to give you ideas of games you could make for yourselves there's so much left you could add not least a simple way for your player to end the game either by winning or more likely fighting until you were overcome by lemons now i may well be tempted to make a follow-up video to answer outstanding questions posed by my fellow scratchers so go to town make something amazing with what we've covered in these three episodes and then bring your questions and ideas back here in the comments and i'll try to pull it all together in a fresh new video for you all and that brings us to the end of this video if you've enjoyed it then please smash the like button and do please click to subscribe to the channel if you can that helps me a lot and i really do need your support making these videos takes a lot of time and effort and that's why i also opened up the channel membership supporting me financially will allow me to continue to create more great content for you and also you get some cool extra perks yep you can get early access to videos before everyone else priority access to me in the comments and well the projects themselves if you wish if you're an educator or parent then it's a super deal so please check that out right until next time though have a great week ahead and don't let the lemons bite scratch on guys

Channel: griffpatch

Views: 120,178

Keywords: scratch coding, scratch programming, scratch game, scratch 3, griffpatch, griffpatcho, camera shake, shake, wobble, explosions, video fx, video effects

Id: RKdXM3x-jEo

Length: 27min 35sec (1655 seconds)

Published: Mon Jul 19 2021