Tile Scrolling Platformer | 4. Platforming Scripts

Key Takeaways

hello fellow scratchers welcome back to part four in our series creating a tile scrolling platformer in scratch in this episode we will bring mario fully to life fleshing out his platforming scripts and giving him some awesome animations to boot just look at him go this is really great and to wrap up the episode we will improve mario's collision box and sneak in a simple particle system to add to the skid effect wow all this in one episode amazing when i began creating this tutorial series i didn't include the required mario costumes that we are going to use in my starter project that's no longer the case but if you need them then you'll find a link under this project to the updated scratch resource and i'll quickly talk you through how to get them into your existing project too so you can either click the scratch project link under my video or visit my griff patch tutor page directly and find the mario resource project there click look inside and oh nice look at all these lovely animated frames that i've lovingly cut out positioned ready to animate all for you you lucky people click your backpack bar to open it and drag the entire mario sprite onto it next we'll also backpack this cute little particle sprite for later and lastly click on the stage backdrop we might as well bag the single blue backdrop costume 2. ok now load up your tile scrolling platform of object from where we left off in episode 3. if you open your backpack once again and drag the entire mario sprite out dropping it safely in the sprites panel to the right do the same with the particle sprite and then carefully drop the blue backdrop costume onto the stage backdrop panel like this now we have two mario sprites so click into the mario 2 sprite that's the one we just dropped from our backpack and switch to the costumes tab we will carefully drag each costume one by one from here to our main mario sprite like this i like to count them off as i do it one by one to keep track of which costume i'm up to you should find nine of them lastly click into your first mario sprite and delete the costume mario one if you have the dot costume like me then delete that too if all has gone well then we should end up with nine mario costumes all ready to go you are then free to delete this mario 2 sprite if you like i left mine in but only because i was too excited to move on and so in the words of mario himself here we go okay the first thing we're going to do is add some excellent mario style jumping code currently in our project we're able to jump to any height and engage the jump at any time perfect for a jetpack game but plain rubbish for a platformer we need to set some rules that mario is only allowed to begin a jump when his feet have recently touched the ground to do this we'll make a new variable named falling for this sprite only locate the x and y movement scripts here under the when i receive move player event we're going to split these out into their own custom blocks so make with me a move sprite x block one without screen refresh and a move sprite y block again without screen refresh now move the change y and its fixed collision block into the moves y custom block and do the same for the move sprite x we'll then place the new move sprite x and y blocks in place of where we switched out their scripts you can test this if you like to ensure it works just as before i want to make some space for these new blocks if you have my scratch dev tools browser extension installed there's a link under the video then using the cleanup blocks plus feature will helpfully move these other scripts over to the right but otherwise you're best off moving them by hand i'm afraid that scratch's built-in cleanup feature is rather brutal add a change falling by one after the change y by speed this way the falling variable will be continually counting upwards but what if the player isn't falling well we should then be setting this back to zero when we touch the ground we detect ground collisions here within the fixed collisions in direction at the bottom of this script now let's move the if solid is greater than zero block out of here back to the new define move sprite x and y blocks we can duplicate it so that is in both now we can simplify this because the move sprite x only ever wants to set speed x to zero and vice versa in the move sprite y good that makes things cleaner okay so before setting speed y to zero we can now check if speed y is less than zero this will happen only when the player has fallen down such that their feet have touched the ground and then we can set the falling variable to zero let's give that a quick test what we see is that the falling variable is always zero while i'm standing on the ground but as soon as i leave the ground the number begins to increase now let's look at the define handle keys jump script i'm going to move the change speed y and the scripts following it up to the top of this custom block as it will make things a little easier going forward within the key press condition by adding an if falling is less than 2 around the set speed y we are able to limit mario to only jump when they last touched the ground in the last two frames of the game let's test this well that surely stopped him from getting very high so why did we use falling less than two rather than falling equals zero the reason is that you want to give the player a little room for error like when they are jumping from the edge of a platform and also to allow them to jump when skipping down surfaces that mean that they are not always touching it consistently now we want to allow the player to jump higher when they hold down the up key make a new variable named jumping for this sprite only and we'll change jumping by one here to keep account of how long he's been jumping this time the end of a jump is when the player releases the jump key so we need to switch the if on the key press block for an if else block now we can put the set jumping to zero here signifying the jump is over now back to the main jump script add in an or and the check for jumping being greater than zero this is saying we can jump when we are touching the ground or we have already started a jump but we don't want to be able to jump forever again so we add an if around the set speed y and ensure that jumping is less than 11. okay great just change the set speed y to be 13 instead of 14. this is a nice size for a mario jump time to test this baby out it may look a little odd now without any animation to back up mario's huge jump height but this is working really well we are able to do little jumps and our big jumps are consistent with the official mario jump height of five blocks high wonderful now there's one problem that i can see here and that is that mario is tending to stick to the ceiling just a little bit when the player is holding the up key but i know exactly where to fix this locate the define move sprite y script and switch the if speed y to be an if else block the if is now for feat collisions the else for head collisions so set jumping to 99 in there so that when we hit our head the jumping code is told that we've been jumping for long enough quick test and yep that did the job perfectly my head is no longer a tall sticky feeling okay it's good practice to ensure we reset these new variables in the reset script add a set jumped to 99 and a set falling to 99 too alrighty then it's about time we did a little sprite animation don't you think locate the when i receive move player hat block and where we are positioning the player sprite you won't be surprised when i tell you to make a new custom block and we'll name paint sprite run without screen refresh and the go to block can be moved in there don't forget to add the paint sprite block back under the move camera block so that it gets run i'll just move it down here so we have some more space to work we can check for when falling is greater than one this indicates the player is not touching the ground so we'll switch costumes to the mario jump costume and then add a stop this script i like to use these stop script blocks when we intend to have lots of if conditions this prevents long build up of nested if else's you know what i mean now under this if switch the costume back to mario walk one and let's give it a test wow doesn't a bit of animation just bring things to life i'm loving it already now to be true to mario he should not actually keep his hand up once he begins to fall back to the ground we can code this too simply by introducing an if else block around the switch costume to mario jump and checking for speed y being greater than zero this is true when the player is travelling upwards otherwise set the costume to mario walk 3. that costume has mario in the same pose as the jump but his hand is down a quick run of the project and that's exactly what we wanted so with jumping sorted let's hide the falling and jumping variable reporters to clean up our stage and we'll move on next up we'll take another look at our player walking scripts that we created in the define handle keys left right custom block i'll move the scripts into a clean space so we have room to work on the scripts further now firstly let's get mario turning to face the left or right just add an if else block with a check for keywalk equaling zero so if the player does press a key then it will be the else part of this if that triggers so in the else drop in a point in direction block and we'll set it to be 90 multiplied by key walk which will result in either minus 90 for left or 90 for right we can give it a quick test to confirm that works oh wow finally a breath of fresh air to see him finally facing left now let's revisit the define handle keys left right script this simple code for walking smoothly left and right is the same method i use in most of my games however mario games tend to work a little differently we need a slower and more steady build up and change of speed we'll start by splitting up the acceleration from the deceleration so we can handle them differently just duplicate the set speed script into each side of the if else like this we'll begin by getting the acceleration script right first we'll cap mario's top speed bring in and if key walk multiplied by speed x is less than 10 that will be the top speed and within this if we change speed x by key walk multiplied by 0.4 okay so remember key walk is -1 when we're holding left and one when we're holding right so this change of speed will accelerate us in the correct direction the if above also uses this variable to negate our speed check to also check for negative speeds a bit of a clever mathematical hack let's run the project and make sure that it is behaving okay i'll just find some free space to check my acceleration is feeling good yep that's much better it now takes a bit more time to get to full speed okay now let's address mario slowing down i'll just code this logically so add with me and if else block checking for speed x being greater than 0.4 if so then we change it by minus 0.4 otherwise duplicate the if and swap the greater than for a less than now we can check for a speed x being less than negative 0.4 make sure to remember that negative sign there if so we change speed x by positive 0.4 and if neither of these conditions are true then well we simply need to set speed x to zero because we are coming to a complete stop it's testing time again getting into some free space oh yes mario's certainly now taking his time to slow down great ah but here's another mario trait when you are actively changing direction mario then slides less so back down to the acceleration script and add in an if else around the change speed x we can duplicate the condition above into the if but we'll change the value we are comparing to to zero now duplicate the change speed x2 into the else so this check for speed being less than zero is true when the player is currently traveling in the opposite direction to the way the player is pressing that is a slide so in this case we can change up his acceleration to 0.8 making him turn around much faster let's have a quick test to confirm yeah cool it no longer feels like i'm slipping around all over the place and i have much more control again okay before we add in the walking animations there's one more platforming dynamic that mario has that i often miss in my own games when you aren't pressing left or right mario slows down but only when he's touching the floor when he's jumping or just in the air he doesn't naturally slow down at all this is easy for us to code we just place an if around the whole of the deceleration script and as always checking falling being less than two so that the slowing down code is not even run unless we are touching the ground now that feels awesome i think i added too many of those gold blocks though they're getting in the way of my testing but mario is now traveling through the air without me pressing left or right to keep him going just as he should so with all mario's controls working correctly we can finally add in his animations too make a new variable player frame for this sprite only this will be our animation frame for the walk cycle and make a second variable we'll call temp for this sprite only set player frame to zero after we set speed x to zero that is when the player comes to a stop and now we'll add in scripts to increase the frame to show a nice animation we want the animation to get faster and slower depending on mario's walk speed set temp to the absolute value of speed x all divided by 19. this means temp will always be positive when we are walking left or right now we want to make sure that the animation is never played too slowly that it looks weird so check for temp being less than 0.2 and if it is then set it back to 0.2 finally we now change our player frame by temp now locate the define paint sprite custom block and place an add operator into the final switch costume block we'll start the costume at costume one if we check our players costumes then you can see the walk cycle goes from frame one two three and four before we hit the player turning costume so four costumes for this we use a mod operator on the left side we use the floor of player frame this is to round the frame down to the nearest whole number and then mod it by four to ensure it loops around and around the four costumes only and oh yes look at this beautiful thing it's like we flicked a switch and suddenly mario's movements make sense notice that as he slows down now his walk cycle also slows with him this means he no longer looks like he's sliding to a stop but instead that he is naturally slowing down his walk it makes all the difference is there anything we could add to make this any better well actually yes remember that player turning costume we can use this to give mario an awesome turning animation for this we need a new variable player action for this sprite only this will keep track of the special actions the player is currently performing still in the paint sprite script we'll check if player action equals turn and if it does we'll switch costumes to mario turn and then stop this script the best place for this is just before the walking animation script okay nice and simple we just need to set this variable to the value turn and this will activate the animation so locate the handle keys left and right custom block and we'll set player action to walk at the top here for now then scroll down to the turn around code here and we can simply set player action to turn just like we said i'll run the project and we can check out his new turning animation ah it works loving it this is getting so beautiful we really must fix mario's width he's still able to get far too close to blocks and falls off ledges that he should be able to stand on locate the reset player script add a new variable named width for this sprite only set it to 8 and place it next to the set height now i'm going to also fix another potential bug here that might crop up later by making another variable named minus tiny that is hyphen tiny make it for all sprites this time all sprites and set it to now do this carefully negative zero point zero zero zero zero zero one did you get that negative zero point and then five zeros and finally a one yep that really is a very small negative number now let me show you what this is for find with me the define fix collision at point script now see those negative 0.01 numbers so these were my previous negative tiny numbers but it just so happens that they are not really tiny enough once we start adding in slopes and the like later on so i'm fixing that now replace both the negative 0.01 values with the new negative tiny variable okay to give mario some width scroll up to the define fix collision in direction script and we'll duplicate the three collision checks at present we are just looking for three central points it is feet head and middle now we'll widen the checks by first checking at to mario's left by subtracting width from x and then on the right by adding to x width and minus tiny okay so put that all back together and we can see if that worked as expected my gosh i hope you've got this far in your scripts too because this is just too fun mario suddenly feels a lot more solid i can edge nicely over the edge of platforms without dropping off too early and i can no longer get up too close to walls very nice very nice indeed let's hide all these available reporters since it's all working so well now as a special treat in the closing few minutes of this episode i just wanted to try to sneak in some smoke particles for when mario changes direction they will really finish off the whole mario look hopefully you've brought in the particle sprite for my resource project so click into that sprite now so working quickly with me let's add a when flag clicked we need a frame variable for this sprite only that will set to the blank value we'll use this to identify that the sprite is not a clone in a moment as always with this pixel art tile set we'll size to 200 percent and then hide now bring in a when i start as clone and then set frame to one that will distinguish the clone make two new variables named x for this sprite only and y for this sprite only these hold the position of the dust cloud clone now when this cloud particle is created we want its position to be the same as the player's position so bring in a set x2 block however the x variable of the player sprite was defined as for this sprite only so to access it we need to use the thing of thing block in the sensing category and change the of to mario and then we can change the left hand side to the x variable be careful not to select the x position as that would be the wrong one we need to do the same now for the y variable now we need to use the x y to position the sprite clone on the screen using a when i receive position tiles hat block the go to x y follows our usual pattern of x minus camera x and y minus camera y and then we make sure to show the sprite and before we forget we need to ensure this position tiles event does not run for the original sprite that was not a clone by adding in an if frame equals empty value then stop this script right so all this code but nothing is creating the smoke particle clones click on the mario player sprite and locate the define handle keys left right script find where we are setting the player action to turn and this is where we want to generate our smoke we'll make a new custom block for this named make skid smoke run without screen refresh and we'll call it right here after setting player action to turn now in the make skid smoke simply create clone of particles let's run the project and see what it does well that's weird but it's also correct we are creating smoke sprites at our location every time we turn quickly now back in the particle sprite we'll move the particles down to be under mario's feet by subtracting 20. that's a little better if you look inside the smoke particle costumes you can see that there are two sizes for us to animate over we'll use a frame variable to handle this as we did for the player's walk cycle bring in a change frame by 0.4 the animation is only 2 frames long so if frame is no longer less than 3 we can delete this clone and to handle the change in costume we switch costume to the floor of frame testing the project now has this looking a lot better and smoke is well positioned and only lasts for a short time the only problem i can see is that there is simply too much of it switch back to the mario player sprite and we'll limit the amount of clones that get created firstly change player frame by one and then add an if around the crate clone that checks for the player frame mod 3 being less than one that will only happen one in every three frames testing that now and i hope you'll agree that that makes the smoke cloud look far more convincing oh no wait look when mario jumps he's leaving smoke trails in the sky how did we miss that scroll up to the call to make skid smoke oh man did i call it make skip smoke that was a typo sorry anyhow bring out an if block and surround the whole set player turn and make smoke blocks the condition to add is a check for falling being less than two yet again so no turning animation when we are in the air yes that did it wonderful and i think my friends we are there although i may have overdone it with the number of golden blocks in my way i'm just going to go to the generate sprite and change the pick random to be 1 in 25 rather than 1 in 10. wow what an epic scripting journey that has been i was thinking this would be a quick tutorial so that we could move on to other more exciting things like off-screen enemies the level designer or sloping tiles but i'm really pleased we spent the time to get the platforming scripts right plus the added player animation makes a huge difference in how the game feels when you play it if you have managed to keep up and everything is working then i think you're going to be pretty pleased with yourselves and rightly so this level of player animation is not often seen in a scratch project so your projects are going to look pretty special why not leave me a comment under the video to let me know how you got on if you enjoyed this tutorial then please smash that like button don't forget subscribe to the channel to avoid missing my next exciting video we are really making progress on this project i can't wait to continue the journey with you and i'm pretty sure we will be looking at creating a level designer next but until then scratch on guys you