Tile Scrolling Platformer | 2. Grid List

hello fellow scratchers welcome back to part two of our series creating a tiled scrolling platformer in scratch today we are bringing order to the chaos and by the end of the video we will have a coded a large and well-bounded scrolling level using scratch lists exactly the same technique used in paper minecraft or scratchnapt okay so continuing from where we left off in episode one i wonder if you noticed that the random tiled level is actually repeating over and over in a loop do you see this pattern coming back again and again as i scroll what we need to work on is creating levels that can be much bigger than a single repeating screen but for this we will need to be brave and learn how to store a level in one of scratch's list variables let me try to explain how this works it will be easier to demonstrate using this titchy 4x4 grid here is a key showing the tiles i will use and their costume numbers in scratch i'll use these to fill out our tiny but perfectly formed mini level so the question is how do we take this level and store it in a scratch list like this one well do you remember using number squares in maths we can create a number square right over our level like this the numbers start from 1 at the bottom left and then count upwards in a column and then they keep counting up again from the bottom of the next column until the whole grid is filled numbering each tile of the grid like this allows us to ask the question what is at tile 1 the answer of course a tile of costume 10. well ok then let's add that 10 into row 1 of the scratch list there row 1 of our list represents tile one of the level and tells us which costume is being shown there look at our level tiles two and three are also both costume tens so we can fill out row two and three in our list with tens but tile four ah look at the key that is a costume two so we need to add a two into our list excellent that's a whole column sorted now let's quickly fill in the next one we have a costume ten then a beautiful golden costume nine my favorite and then two more costume twos the last two columns follow the same principle and we are done all 16 tiles in our grid have been accounted for in our scratch list well enough talk let's try to do the same thing in code only perhaps we'll make the grid just a tiny little bit bigger we can start by deleting this viewport sprite if it's still there that is create a new sprite and call it generate we don't need to give it a costume now we create a new list named tile grid leaving it for all sprites in this list we will store the entire level make a new custom block called generate level and let it run without screen refresh before we do anything else add a delete all of tile grid now to generate a level we first need to know how big it should be we want to be super flexible so let's create two new variables to store the level dimensions in we'll name them grid width for all sprites and grid height also for all sprites for the time being set grid width to 30 and grid height to 20. that should be a good size for testing as it is roughly two screens wide and two screens tall next up let's decide on what our level will look like we'll start simple by creating an empty level with a single border of tiles surrounding it a box level if you will we start with filling in the left hand column that would be this one so make a new block and name it add wall column add a repeat block looping grid height times and we'll be adding tile costume number 10 to the tile grid each time now drag the new add wall column block into our generate level script and that should take care of the first column of the level the next column is a little bit more complicated but nothing we can't handle create another custom block and name it add boxed column run without screen refresh now we can begin by duplicating the wall column script but change the costume number to be 2 that's the blank costume that will create a full column of empty tiles but not so fast we also need to handle the different first and last tiles in this column no problem though we can add the floor tile in before the loop that would be a costume 10 and another one at the end of the loop at the ceiling but because we now have two extra tiles being added to an already full column we need to compensate by subtracting two from the repeat loop to bring everything back into balance good drag the new add boxes column custom block into our generate script but we need lots of these in fact we need them all across the width of the level except the first and last columns so wrap the block in a repeat loop and loop for grid width subtracting two we can complete the box level by adding the final right hand wall column and we are done excellent a simple test to see nothing is a miss but don't run the whole project just click the generate custom block now to run it we can check how many tiles have been added to the tile grid list if all is correct then a full grid of thirty by twenty tiles should total to six hundred rows that is thirty multiplied by twenty six hundred we'll want this generate script to run when the project starts so add with me a when i receive block and we'll define a new event of generate level drag the generate level custom block under that finally switch back to the tiles sprite code and add a broadcast and wait for generate level here under the green flag script so the tile grid list is all there but our tile sprite doesn't yet know how to use it to display our level let's fix that switch over to the tiles sprite each tile clone has a tile x and tile y to let it know its position but it doesn't know which tile in the tile grid list it represents make a new variable named tile index for this sprite only and we'll set it to 1 at the beginning of the setup script now a tile index of 1 means that this tile is representing row 1 in the tile grid list to correctly align our first tile such that its bottom left edge is flush with the world origin of zero zero we start it at tile x y of 16. this is because our tiles are centered positioned and have a half width of 16 pixels after the change tile y block add in a change tile index by 1 so that the next tile becomes tile grid row 2 and then 3 and so on in this loop then to correctly move to the next column we do a little jiggle of the index by adding a change tile index after the change tile x and change it by grid height subtracted by clone count y this perhaps requires a little more explanation adding grid height to the tile index has the effect of moving right by one column in our grid it's very useful and since we just looped clone count y times adding 1 to the index to go up our column it makes sense that subtracting clone count y from it will bring us back down to the start of the column again this is good our tile indexes are set we just need to move the set tile block from the setup script to just before we switch costume block we'll set it to item tile index of the grid so that is looking up the costume number from the tile grid list using the tile index we just assigned it well now it's been a while but we can finally do a full test just before we do though let's reset the camera by adding a set camera x to 240 that's half a screen and set camera y to 180 to the green flag script great and now let's run the project if all is well then the level will look like this we can see that the random level has been replaced by an empty level except that we have a solid tile border flush with the bottom and left edges of the stage so scroll the level to the right using the camera x slider we immediately hit a wall to the right is that right no because we set our level to be two whole screens why did we not so obviously we are not quite there yet as a result this means that our tile clones are still looping around and repeating as before we're going to introduce a new custom block to make things more readable name it loop tile x and this time we'll also click to add a number input we'll call it tile skip to represent how many tiles it wants to skip and make it run without screen refresh we'll switch the change tilex block here with our new custom block like so now the clone count variable can be used as the input and we'll use the tile skip input variable in its place this should now do exactly the same thing as it did before but we can also reuse it in the else condition below however we'll pass in zero minus clone count to negate the direction of the tile skipping so it'll go to the left let's carefully do the same thing for the vertical looping below make a new custom block named loop tile y with an input variable of tile skip and run without screen refresh replace the change tile y block with our new custom block and switch to clone count y for the custom blocks input variable we'll duplicate the custom block and use it in the else clause 2 again modifying it to use zero minus clone count y now this was just a little code rearrange and again it should do nothing more than it did before but it should work so we can confirm that by clicking the green flag and testing things are still scrolling as before so let's fix the vertical that is the up and down looping first in the looptile y custom block that we just added add in a change tile index by tile skip let's run the project again and see that in action the starting screen looks unchanged but as we now scroll up we find the level continues further than before and then we hit a double row of tiles oh that's a bit different the good news is that's exactly what it's expected although we fixed the clone looping issue the tile grid list itself inherently wraps around from top to bottom when we scroll out of the level bounds all we need to do to fix this is to prevent the camera from scrolling up this far and hiding this effect altogether however we will come back to that now for the left and right tile looping this is done in almost the same way duplicate the change tile index block and place it in the loop tile x custom block instead of moving up or down we need to move the tile left or right a column at a time this is achieved by multiplying tile skip by grid height remember that adding grid height to the ear tile index has the effect of skipping to the next column before we give this another test we are going to need to extend the reach of our camera x slider right click the reporter on the stage and increase the slider range up to a maximum of 1 000 and now we'll give things another test oh yes looking good we can scroll much further and here's the right hand wall coming into view as expected but oh ah we've hit something really odd looking can you think what we are seeing here well we are now actually seeing beyond the end of our 30 tile wide level there's no data in tile grid list for this area we are viewing as a consequence the change costume script is getting stuck on the big costume and being unable to change it to an unknown tile afterwards so it just lazily stays on the big costume and it looks big and purple and ugly okay so i'm almost ready to congratulate us on an awesome feat of scripting but before i do let's address the two issues that have come up firstly the purple weirdness we are seeing when scrolling too far to the right or left come with me to the bottom of the position tile script where we are setting the tile variable before switching costumes simply add an if condition checking where the tile is less than two anything less than two is definitely wrong so we compensate by setting tile back to two easy when the project confirmed that that worked ah much better the purple was playing havoc with my order loving eyeballs now what about this looping at the top and bottom edge of the level this is a natural result of how we store our level in a list the solution is to simply ensure that our level does not scroll out of bounds we could add the bounding checks to the forever loop here in the tile sprite but it's probably better to think longer term it will be much better to have the real game loop relocated to the mario player sprite bring in a new when i receive block and create a new message of clone level tiles let's separate off what needs to stay in this sprite from the when green flag script we want the set size and the clone counts the position is no longer needed so that can go and delete that and we can call the setup custom block from here bring in a broadcast and wait for the clone level tile script we just created and stick it right under the broadcast to generate level okay so these green flag scripts and everything under them wants to move to the mario sprite we simply drag it across like this dropping it onto the mario sprite now it's worth clicking into the mario sprite just to confirm that the scripts are indeed there yep there they are that's great so let's pop back to the tile sprite and remove the green flag stack from this sprite don't miss this step otherwise we'll be doing these scripts twice and things will go haywire right this is fun we are scripting back in the mario sprite and we can give the project its obligatory test hit the green flag to ensure that the project is still working after the little reshuffle all looks good now we can work on placing bounds on the camera create a new custom block naming it move camera tick run without the screen refresh and now we'll just drag the new block into the forever loop first we'll stop the camera from moving too far to the left if we run the project and scroll the camera x and y to zero you'll see that the bottom left corner of our level is perfectly centered in the viewport from this we can deduce that a camera x of zero causes us to scroll half the screen too far half screen is 240 pixels so we add an if block and check for camera x being less than 240 if it is then we set camera x back to 240. run the project and start to scroll it left and right and voila it's perfectly bounded on the left edge as intended very professional indeed the bottom edge is just as straightforward duplicate the left edges if block but swap all the camera x's for camera-wise we also need to change the 240 to be 180 since that's half of the screen height give that a quick test and that's looking wonderful too so what about the right hand and top edges duplicate the two ifs and we'll work from there first switch the less than operators or greater than operators to know the furthest horizontal point we can scroll to we first need the width of the entire level in pixels we calculate this using 32 times grid width 32 being the width of a tile and then we need to subtract half a screen's width so that's 240. the same applies to the top edge of the level it's 32 times grid height all take away 180 and now we can run the project again and this makes me really happy we have a really clean looking scrolling level now indeed so for fun let's spice things up just a little bit click back into the generate sprite with me and in the define box column script drag in an if else block the condition can compare a pick random 1 to 10 with one then duplicate the add block into the else branch and we'll change the first add to use a costume number of nine remember that's my favorite golden block this change provide a nice random scattering of gold tiles to our level give it a go and see stupendous this episode has taken quite a bit of explaining and if you've followed it and got this far then you have done exceedingly well congratulations moving on from here we shall look at how to introduce a player character to the level and how collisions are detected in the world of tile-based games i'm also looking forward to introducing us to how to begin creating a level designer right here in the game if you've enjoyed this video then do smash the like button and leave me a comment subscribe to the channel to avoid missing out on any future episodes thank you so much for watching and scratch on you