Tile Scrolling Platformer | 14. Sloping Tiles

[Music] hello fellow scratchers i'm griff patch and this is part 14 of our tiled scrolling platformer series and finally we are expanding our engine to support sloping tiles and yes slopes are so cool allowing our level design to break away from the enforced rigid blocky structure and our levels can become a lot more exciting but there is a catch calculating collisions in a tile-based world requires us to work with a bit more math than we are used to doing ah but fear not my friends there's no way i will let that stop us but just in case it does get a bit much just be assured that you will be fine to skip this episode if you don't need slopes in your game in which case just sit back watch the video and enjoy so you will have seen the new tile costumes i was just showing off as always i've popped them into the tile scrolling tutorial asset project on my grip batch tutor account there's a link under this video and if you need those new costumes then open up the project now here they are in the tile sprite from costume 50 onwards to make life simple just backpack the entire tile sprite okay back to your projects and open up the tile scrolling platformer scripts drag the tile sprite from the backpack into your project sprites panel and i'll just move it next to the original tile sprite if i check in the original one we should find that the last costume we added was costume 49 and back again into tiles 2 the next new costume is costume 50. super we are in sync we are going to copy each new costume one at a time to the tile sprite starting at 50 and counting all the way up to 67. the problem with adding sloping tiles is that there are a lot of different variations needed for all the different angles now we can clean up the backpack and we are all set okay to be able to use these new costumes we need to click into the editor sprite and make the tile key map and tile shape lists visible on the stage i find it useful to then return to the tiles sprite costumes tab to see what we are setting up so what do we have yeah the new costumes begin at costume 50. beginning with the tile keymap list then we can assign an editor number key for those sloping tiles up until now we've used 1 2 3 and 4 and the number 9 but i think we'll use a new key press of 5 for the slopes so enter a 5 in row 50 and then every row up to row 67 wow 17 rows just for the slopes crazy next up we have the tile shapes list and this is where things get a bit exciting first ensure we add some blank rows to get us up to row 50. the first costume is just a normal full tile we know what to do with that enter a hash in the tile shape list but the next costume costume 51 is a slope how should we represent that shape in our list well how about as a forward slash i like this as it matches the slope's direction okay but we have other slopes that also slope in the same direction we will therefore need some way to describe the slope in more detail what we'll do is use two digits the first tells us how many costumes make the full slope so this one takes one tile from the bottom to the top but these ones take two so enter slash one if there are more than one costume then the second digit lets us know which one this tile is but we'll count from zero so that's now slash one zero so costume 52 that will be backslash because it's going down backslash then a one then a zero and on we go costume 53 is a forward slash again but is a two costume slope so enter a two and this is the first one so enter zero that's forward slash two zero costume 54 is similar forward slash 2 but complete it with a 1 since this is the second costume in the same slope then downward slopes are then backslash 2 0 and backslash 2 that's all the slopes accounted for and the rest of the costumes are simple solid tiles enter hashes all the way down from rows 57 to 67. cool to make use of these costumes in the editor we'll need to add a script to handle the new number key 5. click into the editor sprite and we'll simply duplicate the when 4 key pressed switching it to trigger off the 5 key and also to use the next brush of 5. nice i'm just going to hide these lists and we can give it a test enter the level editor with the 0 key and press the 5 to switch to the grass tiles category i'm going to place down a simple sloping obstacle in front of mario sadly there is no auto arranging defined yet so we'll have to do this by hand press 0 and let's see what we have firstly the tiles are solid that's good news but as expected they are acting nothing like slopes yet they are no different to fully solid tiles to get these slopes to work we'll need to do some scripting in the mario sprite so click in there now the first script we'll look at is the define fix collisions at point x y you can see we are already checking the shape of the tile at this point we now need to pull out the first letter and check whether it's one of these sloping characters set temp to letter one of tile shape that gives us what we need so that we can now check if temp is equal to forward slash or temp is equal to backslash if it does then the tile we are checking is indeed a sloping tile right stop there up until now when we used fix collision at point if the tile was solid then we would know at once that we had collided but now with the sloping tiles we don't yet know if we've entered a solid area or a non-solid area and for this we must find a way to tell whether the collision point is above or below the line of the slope and so which of you has got far enough in your math lessons to know the basic formula for the slope of a straight line y equals m times x plus c we have two variables here that define the line m and c m is the gradient of the line that is the steepness of the slope and c is the intercept the point at which the line crosses the y axis given these two values we can describe all the slopes we want to represent take the first example costume 51 the tile shape of the costume was forward slash one zero and the equation of the line is y equals one times x plus zero an m of one and a c of zero well that makes it look super straightforward but sadly this is not quite the case look at costume 54. we have a shape of forward slash two one but the equation for this line is y equals 0.5 times x plus 16. the true relationship between these digits and the equation is m equals 1 over the first digit and c equals second digit multiplied by 32 times m well given this let's plug that into our code and see what we get to make two new variables m for this sprite only and c for this sprite only two set m to one over the letter 2 of tile shape that's the gradient next set c to letter 3 of tile shape multiplied by 32 multiplied by m that's the intercept the y-intercept now we didn't talk about this in the math just now but we also need to handle downward slopes check if temp is equal to backslash in this case we need to invert the slope so set m to zero subtract m the y intercept needs to be flipped to offset down from the top of the tile so set c to 32 subtract c and now we'll use the equation for a line to work out whether we are above or below it make a new variable named offset y for this sprite only and set offset y to mod y that's the y position within the tile that we are testing for collisions subtract now we want the line height at this point so that's mod x multiplied by m all added to c yeah that's our equation for the line plug it into the offset y variable so with this if offset y is zero then we are on the line if it's greater than zero then we are above the line and if it's less than zero we are under the line if we are not under the line then we are not colliding and we can stop this script otherwise we are colliding with the slope so we need to handle both sideways and vertical collisions we'll deal first with the colliding from above we can detect this if fixed y is less than zero that is mario was travelling downwards into the collision to get mario out of the slope we just need to move them up by the amount of the overlap change y by zero subtract offset y that should do it so set solid to 10 to record the collision and stop this script we are done we can give this a test so remembering we've only coded this for vertical collisions i'm going to try and jump up and fall onto the slopes if mario moves towards a slope then he glitches position but if he lands on the slope or walks down the slope then things are looking surprisingly good i think we should complete the scripts to correctly resolve the sideways collisions next we already know the collision has occurred we just need to move them out of the collision we'll start by ensuring this was a sideways collision by checking that fixed dy is equal to zero if we were not moving up or down then we must have been moving left to right so now we just need to ensure that we were walking towards the slope if we are traveling from the opposite direction then we'd need to push the player right out of the tile luckily this is the default behavior if we do nothing here so all we need to do is handle the case when we are moving towards the slope i have a clever trick for that i'm going to compare two statements fixed dx is greater than zero this is true if mario is walking right and compare that to m is greater than zero this is true when the slope is sloping upwards so if both of these statements are true or both are false then this condition will run and to move the player out of the slopes we change x by and a little bit of algebra gives us offset y divided by m again set solid to 10 and stop this script let's give that a run i'm still unable to walk into the slope that's to be expected but if i jump onto it i am now free of most of the glitching caused by the left and right movement however there is still something off occurring when i approach the junction between slopes do you see that me suddenly teleporting so what causes this the reason can be a little confusing but look at this example a situation we have not accounted for in our collisions is that mario may move into a collision with a slope like so but pushing them out of the slope may actually leave them still colliding with a second tile yes to resolve collisions we now have to check twice find the define fixed collision in direction script this is where we do all the checks for mario's collision points and add a repeat to under the set solid to blank surrounding all the fixed collision blocks now we could leave it at that but there isn't really any point doing all these checks twice if we know there wasn't a collision the first time round so add in an if solid is less than one stop this script at the end of the repeat loop that was nice and easy we can test again to see if the glitches have gone yep that's looking beautiful that really just leaves us then with needing to allow mario to walk up these slopes so rather than being blocked by them we allow them to be lifted up and out of the slope as he walks over it still in the mario sprite find the define move sprite x script in the case of a collision we are going to have to attempt to move upwards first out of the slope but if this fails we need to get back to where we are now so make a new variable orig y that is original y and set it to y that will keep it safe next up we're going to do a vertical collision check using fixed collisions in direction dx of 0 and a d y of minus one a minus one is a downwards motion and tells the collision fixing code to try moving mario up out of any collision so then if we did collide after moving sideways then we will now be raised up higher than before we need to put a threshold on how far we are allowed to move upwards if y is greater than of ridge y we compare with the original position plus 4 pixels leeway and then the absolute value of speed x that means we can move upwards just a little bit more than we are walking sideways so not much more than 45 degree slopes maximum so yeah if y is greater than this then it's too much and we need to undo the move so set y back to the ridge y and then instead we use our original fixed collision script from before super let's give that a test just approaching the slope carefully oh yeah i think we got it i can walk right up the slope now and down again jumping whatever it's a very stable feeling indeed the only one thing i may add is that it would be nice if there was a little resistance to climbing the slope mario shouldn't be able to rush up them like this you see we have the empty else condition here we can first just confirm that mario is indeed traveling upwards if y is greater than orig y then set speed x to speed x multiplied by 0.85 that should do the trick pushing back against mario test the game again okay i certainly can't run up this slope now and yeah if i turn around you can see how it slows me down and then i get up to speed and it slows me down again looking really sweet this mario engine is getting better all the time and the slopes are an excellent addition to the game i can't help but notice that we still have to get this working for the gumbas though oh man is this going to be a nightmare well hopefully not because we were careful to try to keep the movement scripts very similar between player and other sprites it should just take some careful copy and pasting we'll start in the mario sprite with the define movespritex script now we can't copy the define block itself as one already exists in the enemy sprite instead carefully drag all the scripts under the define sprite into the enemy sprite like so now click into the enemy sprite and you'll see that scripts have been dumped here we need to move these over to the define movespritex script in the sprite where is that script here it is so bring the scripts down to here okay before we replace things we just need to ensure we keep this turn 180 script so that the goombas change direction when they hit a wall now delete the old scripts and replace them all with these new ones next up back in the mario sprite find the define fixed collisions in direction script this time to avoid all the scrolling i'm going to use my scratch dev tools copy and paste feature if you don't have my add-on then just drag the scripts as before i'm going to click the script i want to copy the block below the define hat block and then press ctrl c to copy it you could also right click it and choose the copy all feature now click into the enemy sprite and we find the same define fix collision in direction script press control v to paste the scripts and i can right away replace the original ones with these as there was no modifications right one more back to the mario sprite and find the define fix collisions at x y i'll use the right click copy all feature of scratch dev tools this time we can now click into the enemy's sprite to locate the same define fix collisions in direction script this one is almost the same paste it in with ctrl v replace the original scripts and then we just need to scroll down and remove the if down of controls check this was a bug fix we did a while back too to prevent goomers dropping down through the platforms do you remember and we are ready to give it a play do i have any goomba volunteers aha just the goomba come this way and would you look at that straight up the slope he's even affected by the slope speed too that's great and it also brings us perfectly to the end of this episode that was surely more tricky to teach than i was hoping sometimes a little script can wrap up a whole lot of learning that you forgot you learnt until you try to explain it however it's super fun functionality and i'm hoping you'll be able to make use of it a challenge if you want it is to try to make the layout work with the tile auto arranger it's a little bit more complicated than you might think though so be warned you may prefer to leave that one out before i go i also wanted to apologize for the lack of posts on my community tab sadly i am suffering from youtube issues youtube technical support are looking into things but at present i cannot make new posts yes it's a disaster i felt so cut off from you all not being able to let you know what i'm up to or pose the polls i'd promised thanks though so much for continuing to watch and love the videos hopefully i'll be sorted and back soon talking of which please smash the like button if you've enjoyed this video and subscribe subscribe subscribe i'll answer as many comments as i can but if you want a closer interaction with me then consider joining the channel membership as members comments come up first and i'll prioritize them you can also get super perks like custom channel emoji have you seen those they're really fun early access to videos and even downloads the projects themselves more importantly you get to support me making these videos which is super important and memberships can make a great birthday treat too next time we'll do a mix it up monday and i've got some ideas already perhaps the greatly anticipated path binding too with lists or follow-up to the cloud multiplayer tutorial looking at working that into an existing game oh i know those two will get people excited right the end thank you for watching and scratch on guys