Tile Scrolling Platformer | 11. Death, Background & Sound

Key Takeaways

[Music] hello fellow scratchers i'm griff patch and welcome back to a very exciting part 11 of our series creating a tiled scrolling platformer in scratch today we'll be focusing on death backgrounds and sound quite a mix and welcome additions to our game engine so are you ready great so here we oh stop stop sorry we have some bug fixes to squash first okay you will probably already have fixed this one wowzers how did i not see this one the first time around look at those coins fly i'm naming this the coin fountain bug still it's a good example of what our particle scripts are capable of a mistake is in the tile sprite within the when i receive position tile script this is where we are checking whether a tile has been bumped by mario's head but it just so happens that our editor brush the one we drew within the level editor has a tile index of blank which is the same as no bump so this is always spawning coins as if we were bumping we could fix this in a number of ways but we'll just make sure we are not in the level editor by adding an if the bump index check and checking if editor is less than one while we are here it has been pointed out to me many times thank you for picking me up on these things guys that we should be adding one to the coin variable each time we spawn one of these coins too there give that a quick test cool no more coin fountains and i can confirm that we are registering the collection of a coin now when we head bump a mystery block nice and so finally all the shame of it remember last episode's bug fix where i said we'd fix gumba not being cleared in the level editor when we're setting a level oh gosh i completely messed that up let me show you why come into the editor sprite and see how we added the delete all object index and object type lists here i was supposed to place them down here in the define generate level script under this delete all from tile grid oh sorry about that and now with that out of the way let's move on to something new we'll finally add in mario losing a life this will occur when we accidentally touch a gumba so click into the enemy sprite and find the define tick gumba script if you scroll down here and find the touching mario check you may remember we left the else side of this condition blank the condition was checking whether we were dropping down from above or not if so we squish gumba but otherwise we should be losing our life what we will do then is add in a new broadcast of mario lou's life that's nice and straightforward and our mario sprite will implement the receiver but before we do that just pop into the enemy costumes and let's copy the big costume over into our mario sprite because although up until now mario doesn't really go off screen when we lose a life we will now need him to so next up click into the mario sprite and then i'll make some space after the define game loop that's using my new dev tools extension but you of course can just drag the scripts to make space otherwise we'll add in when i receive mario lose life now we have to ask ourselves what happens when mario loses a life it's a lot easier to work from reference so let's watch a quick video of mario in action okay so first off in super mario we should only lose a life when we are small mario big mario has a second chance however we'll ignore that for now because we don't have a small mario yet now when mario gets hit first off the game pauses all the enemies and mario stop moving but note the level tile animations keep playing due to this it will probably be best to stop the main game loop altogether and make a lose life loop to replace the game loop so let's look at mario's movements firstly he changes costumes and then pauses this lets us see what killed us and reassures the player that the death was legitimate next mario jumps into the air and falls off screen back to our scripts then we always change mario's costume in the define paint sprite custom block but it's controlled by us setting the player action variable we will therefore set player action to lose life and we'll add in the code to switch costumes later next we'll use a stop other scripts in sprite to stop the main game loop from continuing once we've lost a life now the next thing that mario does is pause for almost a second nothing else on the screen should move but the tile should continue to animate so repeat 25 and paint sprite to update mario and we'll bring in a broadcast position tiles this ensures the level tiles are positioned and animated but we will not be broadcasting any of the enemy or player movement events now let's update the define paint sprite script if you have my dev tools enabled you can just middle click the custom block to jump to its definition otherwise it's fine script time so i'll duplicate one of these ifs and change it to look for a player action of lose life and then switch costumes to mario death it's been a long time coming we'll pop it right at the top under the go to xy so that it's the first thing that is checked now that mario will need to go off screen during the lose life animation we should switch to the big costume right at the top of this script okay give it a test i'll run right into a gumba and pow the game pauses with mario looking very uncomfortable and also notice that the animating tiles do keep moving for the first second perfect next step then is to have mario bounce up into the air come back to the when i receive mario lou's life we can make this effect using a simple jump script we therefore start by setting speed y to a positive number i found 17 to work well for a nice big bounce now we want this animation to repeat until mario has fallen off the bottom of the screen that is until y subtract camera y that's his screen position is less than minus 200 it actually might not be quite enough maybe perhaps -220 to be sure see how you go whether you can still see the top of his head when he falls off screen now in the loop change speed y by minus one to simulate gravity and then change y by speed y you've all seen this before by now and finally paint sprite and broadcast position tiles to keep the tiles animating cool we can give it a test so on touching goomba now we pause as before and then bounce yeah that's just like mario and he does appear to have gone fully off screen so maybe we were okay so let's just make the game pause a little longer after he's gone off screen using a simple repeat 30 broadcasting position tiles we never want to stop animating these and then finally broadcast and wait the level load event to reset the level and broadcast without a weight level start game loop respawn bit of a mouthful that one shall we test that running into a gumball bounces me off the level a short pause and then the entire level resets perfect i'll just confirm i can still squash the goombas and then try losing life over here yep the level still resets and all is looking good okay you have a choice here depending on the version of mario you like to play when mario falls off the bottom of the level he just disappears and in other games he does his loser life animation too if you want him to do the jump when he falls off the level then find the define check around player remove the reset player block and replace it with a broadcast mario lose life simple as that let me show you what that looks like so we find the gap to fall down and then there he goes and he now plays the same lose life animation here too yeah so it's up to you whether you want this or not next up then did you catch last week's video the simple background scrolling tutorial if not then you may want to catch that now as we are going to use the same scripts to add in our parallax scrolling background to mario a link to the background scrolling tutorial is in the notes under this video and covers things in far more detail so if you don't have the background sprite already in your game follow the link under this video to the scratch tutorial assets project on my grip patch tuto account and there you will find the new background sprite with two nice costumes backpack the entire background sprite and then switch back to your tile scrolling project and drag the background sprite into the sprite panel like so okay so these two new costumes are exactly 256 pixels wide as with all the graphics in this mario game though we want to set the size to be 200 percent so in your code tab add a when green flag clicked show the background send it to the back with the go to back layer block and set size to 200 percent now i click the script stack and hold the phone this costume did not get any bigger look the size is still 150. in fact even if i enter 200 in this box here it still jumps back down to 150 this is simply the biggest scratch we'll let this costume become well no problem we have ways of making this work click into the costumes tab and make a new costume i'll name it size 100 the name isn't important but helps us to know what it's used for and i just draw a small shape in the middle of the canvas back in the scripts we switch to the size 100 costume before we set the size to 200 now if we click the script stack scratch is happy to size this costume to 200 and the happy news is that now that we are at this size scratch is also happy to let us switch back to the background costume afterwards and it remains at our desired two hundred percent yes so let's continue make a new variable sprite width for this sprite only and set it to be 256 multiplied by size divided by 100 that quickly converts the original sprite width to how big it is now 200 of course we could have just set it to 512 i guess make another new variable named x for this sprite only and set it to zero now just as we did in the scrolling background tutorial create a clone of self so we have two background sprites and then change to the next costume change x by the sprite width so this new costume is next to the last one good we are all set up now we need the scripts to position the background as things scroll around when i receive position tiles make a new variable screen x for this sprite only and set it to x subtract half of camera x that is camera x divided by 2. now we set position x 2. we need a subtract sprite width on the end on the left we use a mod operator on the left of the mod we have our screen x variable and on the right sprite width multiplied by 2 that's the width of our two background sprites combined the y is easier because it doesn't wrap around just set position y to 244 subtract half of camera y that is camera y divided by two these divided by twos will cause the background to scroll at half the speed of the foreground super did you get all that like i said refer to the previous video for help on this there's a link under the video no time to waste let's give it a test looking good standing still just dispatch this goomba ah delightful the background is scrolling slowly along with us then look how we can also scroll up and down very cool i'll enter the level editor with the zero key this is looking really great i don't see any seams and the background repeats perfectly hold on a second i think we have one problem did you notice something missing yeah the mushroom power has gone did you expect this we should have because the mushroom had to be sent to the back to allow it to appear from behind the tile but now doing that we'll have placed it behind these scrolling backgrounds too but fear not we planned for this do you remember if i click into the enemy sprite here where we send the mushroom to the back we are also moving it forward by the value of the variable layers background this was well planned we just need to set this variable to the right number of layers to bring it to the front of the background now back in the background sprite set layers background to 2 for this sprite and its clone two sprites so let's test this oh man as i was saying let's test this now haha success the mushroom is back with us right now since i've been squashing all these gumbers i feel like we should just make another improvement here too when you jump on a gumba not only do you squish them but you're supposed to get a little score a number 100 float up from them if you click into the enemy sprite you'll find we already have a costume for this around costume 20 i think i added it here but now that we have the improved particle sprite scripts we will copy this costume into the particle sprite so click into the particle sprite the script for score particle is very straightforward under the when i receive position tiles add a new if and we'll check that type contains the word score this will be true for any particle with the word score in its name now make a new block named tick score run without screen refresh and we'll use it in our if block followed by a stop this script so the animation of the score particle is just a change y by one to slowly move it upwards there's no acceleration we can then use the position with costume block passing in the type that'll be the name of the particle and also we'll double up as the name of the costume for simplicity more on that in a second though and then to make the score disappear after a moment change frame by one and check if frame is greater than 60 that's two seconds and then delete this clone now we want to spawn this particle when a goomba is squashed so click into the enemy sprite and find the define tickumba script scroll down to the if touching mario check and we need to add to the particle list the first thing we do is add the name of the costume we want to spawn that is score 100. next we add the x and y position of the goomba drop these in after all the squishing code give it a run and oh my gosh wow that's weirdy the costume is definitely wrong so let's check the name of the costume in the particle sprite ah look it's score with an uppercase s the thing about costume names is that unlike almost everything else in scratch they are case sensitive that is you need to get the upper and lower case letters the same for it to work come back to the enemy sprite and we must fix the score 100 to be an uppercase s that was my mistake we can test this again oh no get off me goomba again gosh yes havar a very neat little addition i won't do this now but we should be looking to allow this score to get bigger the more gumber heads we bounce on in consecutive jumps am i right with that i think so oh no i spotted another problem the score is not appearing in front of the blue platform tiles the particle sprite must have moved too far back so stop the project select the particle sprite and then click on the go to front block there that should do it and now to finish off for today let us add in some music and sounds this can really help to make a project come alive if you don't have the sound sprite in your project already then back to my asset project and now backpack the sound sprite there's a whole lot of sounds in here for you to play around with i'll bring the entire sprite into the tile scrolling project like so let's work at this a sprite at a time starting with mario so click into the sound sprite and the sounds tab and now copy the following sounds to our mario sprite the jump sound skid sound coin sound and losing a life sound great now click into mario i'll delete that default meow sound we really don't need that starting with mario's jump sound then find the define handle keys jump script now we only want to play this jump sound when we first begin a jump we can detect this by checking if jumping is equal to one this number gets larger the longer the jump lasts but one is the very beginning then start sound jump drop it in after setting speed y to 13 just here okay quick test does the first sound work jumping now ah the silence has been broken that's quite weird cool let's add the coin collection sound find the define check around player at x y and we'll simply start sound coin nice now find the when i receive mario lou's life this occurs when we just lost our life so right at the top add in a start sound lose life [Music] coming along great lastly in this sprite locate the define make skid smoke and whenever we create a smoke particle we can also start sound skid simple enough but very effective okay that's mario's sprite sorted so back to the sounds sprite and we'll copy the following sounds to the enemy sprite item sprout one up and stomped click into the enemy sprite now and find the defined tick gumba script scroll down and in the scripts where we detect and squish gumba start sound stomped this next one requires a little scripting locate the define tick life this is where we process a new mushroom going up from a block while frame is less than 16 the mushroom is not yet appearing so if we compare frame with 16 we should be safe to then start sound item sprout drop it within the if frame is less than 48 conditional and this happens to also be where we check for picking up the mushroom we can just start sound one up before deleting this clone a good point to test again so we can jump on a gumba and then head bumping this block there's the mushroom sound yeah and we should also be able to collect it super so once more back to the sound sprite this time we'll be copying sounds to the particle sprite all we want is the coin sound this time for when a coin pops up from a mystery block so copy the coin sound across to the particle then in the particle sprite itself find the when i start as clone and we'll simply start the coin sound when type is coin like this we can test it by jumping up under a mystery block yep like that [Music] so just one more sound to add and that's the music track [Music] let's do that in the sound sprite itself for now the music will start when i receive level start game loop but also when i receive level start game loop respawn make a new custom block named music but don't tick the run without screen refresh we'll loop forever and play the sound until done selecting music level 1. the finishing touch is to stop the music when we lose a life so when i receive music lose life stop other scripts in this sprite and that will terminate the playing music and wow with that we can test the project again the music is off and it is all hanging together pretty well now how about losing a life though does the music stop yeah that works really well and the music stops and the lose live music kicks in then the main theme restarts with the level very slick and guys that brings us to the end of another episode it's very satisfying to finally have sound and also losing a life is huge we are destined to now need to build out level progression and more content it may be good to also recap some of what we've done looking at how the game engine is working as a whole but that will be for another time so if you've enjoyed this tutorial then please do smash the like button and don't forget to subscribe to the channel to avoid missing my next exciting video thank you for watching and scratch on [Music] guys