Tile Scrolling Platformer | 1. Setup

hello fellow scratchers paper minecraft scratch napped epic ninja geometry dash and apple what have these all got in common apart from being scratch games made by me give up well they are all tile-based scrolling games that is games that have their levels constructed from a regular grid of tiled sprites creating levels in this manner has been an extremely common technique in video game creation for decades and one that i myself have used over and over again with the aid of this video we are going to be building together the basis for such a game engine what is exciting about this technique is that it is not only good at speeding up your projects but it makes challenges like having off-screen enemies far easier to manage as well as many other tricky things like built-in level designers and level saving systems you are of course absolutely free to create all your own custom sprites for this project but if you want a quick start take a look at the notes under this video for a link to a starter project you'll find it already set up with a number of pre-configured sprite costumes from a familiar mario game simply remix it and off we go so if you remixed my starter project you'll have three sprites the first named mario contains a simple mario sprite which is hidden for the time being the middle sprite is called tiles if we look at its costumes you'll see the first two are quite interesting one named big containing a large square the purpose of this i shall explain later the second is a blank costume useful for the blank areas of your level all the rest of the costumes are cool level tiles and if you look at their size they are all 16 by 16 pixels if you draw your own then make sure to keep to this size too to follow on for this tutorial if we look closely at one of these costumes you'll see how it is precisely lined up with scratch's checkerboard grid it's super useful to know that the squares in this grid are exactly four by four pixels in size so if our costume lines up with this then we are all good also the costumes are perfectly centered in the costume editor a tip for checking this is to press ctrl a to select the costume and then drag it it will snap back to the center by itself showing that it is already in the right place if you design your own costumes just make sure they are aligned and sized just like this okay let's talk about creating our tile grid i'll select the block gold costume because it's nicely outlined shape now click onto the coding tab notice how small our 16 by 16 sprite looks on the stage we're going to double its size add a when flag clicked block and under that set size to 200. for good measure add in a go to position x y 0 0. now run the project so our tiles become 32 by 32 pixels instead of the old 16x16 pull out a crate clone of myself block into some free space and attach it to a new change y position by 32 block now this is cool click the clone and move block script and notice how a new clone of the tile is created while our original sprite skips up to perfectly sit above it right smash that script a few more times with your mouse and we can generate a very handsome looking column indeed right we can easily automate the process of colloding a whole column of tiles hit the green flag button to reset our project and then add a new repeat block around the crate clone and change y position blocks set it to repeat 5 times and click the script to run it perfect told you that would be easy but hold on one moment were you expecting six tiles in our column after all we asked for a five didn't we don't worry about this it's not a bug remember when our project starts we already have one tile on stage so after creating five more clones we do indeed expect there to be six sprites in total so let's move on we can improve our code by replacing the number five with a new variable create a new one named clone count y leaving it set 2 for all sprites and set it to 5 under the green flag and drag the variable into the repeat loop replacing the number 5. now is a good time to click the green flag again to make sure that the variable gets set before we do any more testing now click our repeat loop to ensure it draws our column still now wouldn't it be nice to move this little column further down the screen perhaps so that it was centered we just introduce a set y position block from motion category before our repeat loop and set it to clone count y multiplied by minus sixteen y minus sixteen well sixteen is half of thirty two it's half a tile and minus means backwards so we're moving backwards by half a tile for every tile that we want to draw which is half the whole stack click the code to test it good work so we have a column of tiles how do we make this into an awesome grid well obviously we need to move a tile to the right to begin the next column so stick a change x by 32 at the end of our script now when we run this script you'll notice the extra sprite at the top has hopped to the right so click the script again and again yup mash away looking really good to automate this start by creating a new variable named clone count x and we'll set it to 5 bringing in a new repeat block around our cloning script and set to clone tiles y then before this add a set x position to clone count y multiplied by minus 16. let's run this updated script and see what happens click the green flag to reset our project and then click the cloning scripts that's real nice you agree have you noticed that we still have a leftover sprite up at the top right of our grid let's just tidy that up by adding a hide block to the bottom of our script and of course a show block to the top to ensure that we still see the ones we want now green flag and run the scripts and that did it great all tidy we can make things look a little more interesting by switching costumes for each tile just add in a switch costume block before the crate clone block and drop in a pick random now what tile numbers can we use if we look in our costumes you can see our tiles run from number 3 to 19. so go back to the code and insert the numbers 3 and 19 in our random now reset the project and run our scripts again to see a different pattern of costumes appear each time okay it's nice to see the clones appearing like this but i'm ready for it to run quicker from the my blocks category make a block and name it setup don't forget to tick the run without screen refresh now drag all our cloning scripts under the new define block and then drag the new setup block itself to the bottom of the green flag script simply hit the green flag now and the grid of tiles should appear instantly love the power of that run without screen refresher right now you'd be correct if you were thinking that a 5x5 grid is not very impressive and if you resisted the urge to stuff in some larger values already then you've been very well behaved but for now this smaller size will help us to ensure we pick up on any problems with the tile engine that we introduce as we get more scripts before we can move on we have a small problem to address to be able to keep track of scrolling tiles we are much better off switching from using scratches built in sprite position x and y variables and replacing them with our own tile x and y variables this is especially important as we begin to want to move sprites off screen let's create two new variables we call them tile x and tile y making sure to create them both for this sprite only now i'm going through the setup script replacing all references to position x and y with my variable x and y this includes any set or change blocks make sure to double check your script after doing this with mine on the screen as it's very easy to make a mistake while doing this now because we are no longer setting the sprite's position our code is no longer going to work try it and we'll find it's completely broken but not to worry although the clones are now all appearing in a single heap in the middle of the stage the good news is that their positions can be restored very quickly now by adding a new when i receive block with a new event of position tiles within this add a go to xy position block and fill in here the tilex and tile y variable then we broadcast this event after our call to the setup custom block this needs to be a broadcast not a custom block because we want to notify every single one of our clone tiles to position themselves all at once and the broadcast will do that run the project and hey presto things are working again phew so what about that scrolling add with me two new global availables named camerax for all sprites and camera y also for all sprites these are to track the position of the camera as it tracks around the level now right click the camera x and y available reporters in turn on the stage to change them into sliders and then right click them again and change the range to be 0 to 500 for them both now update that when i receive position tiles script subtract the camera x from the tilex and the camera y from the tile y and finally add a forever loop around the broadcast position tiles block so that the positions stay up to date as the project is running run the project again and we can play now with the camera x and y's sliders watching the game tiles scrolling left and right up and down yes and now comes an unfortunate scratch limitation the 300 clone limit you might be hoping to simply expand out the number of tiles to generate your entire level from tile clones but no no no we can't do this it will take over 200 tiles just to create one single screen of the level so that only leaves us 100 more before we run out and we will need these other clones for other parts of the game like collectibles or enemies so what to do the solution is to only use clones for the tiles that are actually in view the tiles that are off screen will not create a clone for yet to demonstrate this let us pretend that our game viewport is actually only four by four tiles i will draw a dark border around the current stage to demonstrate this this is what i prepared earlier this is our viewport the area of the game that we will see at one time now i scroll the level using the camera x and y and things look good as they scroll off the screen but the problem is nothing is scrolling it back in on the right so the solution to this problem can be referred to as loop to scrolling as a tile clone moves out of the current viewport like this into this dark area of mine we recycle it by quickly moving it over to the right hand side of the viewport ready to scroll back into view on the other side filling up the gap if we do this quick enough the player will not even know that there was a gap at all to do this in code within the position tiles receiver add an if condition to check whether the position of the tile which is tilex minus camera x is less than the left side of the viewport which is clone tile x times by -16 if it is less then we change the tilex by the width of the viewport which is clone tilex times 32 and it should pop onto the other side of the viewport now slide camera x to zero and run the project and we can now scroll it to the right and success look how the tiles are jumping to the right hand side when they move out of the viewport but things are not so rosy when scrolling back to the left let's update the script to fix this we could write out the full script again but instead let's do something a little bit more clever insert the maths operator absorb around the tilex take away camera x and switch the less than symbol for a greater than symbol and finally change the negative 16 to be positive 16. now this abs function changes any negative values to positive ones so we are now effectively looking for when the tile moves out of the viewport both to the left and the right negative or positive then add an if-else condition block within and check whether tilex is less than camera x if it is then the tile has moved off the left side of the viewport and we need to move the tile to the right-hand side of the viewport otherwise it's moved off the right-hand side and we want to move it to the left-hand side by multiplying it this time by minus 32 let's give that a quick test okay it's looking really good really promising we can make short work of implementing the same scripts for scrolling up and down too just duplicate the if condition and make sure to switch all the tile x's for tile wise and camera x's for camera wise okay finally let's expand out our viewport to fill the entire screen scroll to our green flag script and change the clone tiles variable from 5 to 10. run the project boy that was easy but exactly how big should we make these values to fill the entire screen we can do a quick bit of maths to work it out precisely scratch's stage is 480 pixels wide since our tiles are 32 pixels wide we divide 480 by 32 and get exactly 15 tiles we can fill that in here the height of scratch's stage is 360 pixels 360 divided by 32 is ah 11 and a quarter well we always have to round up otherwise there will be a gap so that's 12 tiles high i'll enter that value in here now if we run that we can see that things are looking really good but it's not quite right see a gap on the left and right well we did the math so what went wrong the reason for this is that we calculated how many tiles we needed to fill the whole screen but we didn't factor in that a tile can be half on and half off the screen on either end so we simply need to add one more tile to each of the figures that we came up with that makes the viewport 16 wide and 13 high and now we have a very full screen of tiles wonderful but hold on are you seeing what i am seeing the tiles at the edge of the screen are getting stuck and not scrolling off the screen nicely at all we simply have to fix this this is obviously happening because of scratch's sprite fencing rules designed to stop us losing our sprites by moving them off screen sadly there are plenty of times when we do want to be able to move them off screen and this is one of them my favorite way of getting around this right now is to switch the costume of our sprite just before we position it to the costume named big remember that costume i told you we'd come back to that so this costume is larger than any of our tiles and scratch will allow this tile to be moved further off the screen than a smaller tile then once we've moved it to where we want it we switch back to the correct smaller tile ah problem we don't actually know what that was so let's add a new variable named tile ticking the for this sprite only and use this as the new costume identifier then in the define setup custom block replace the switch costume block with a set tile variable to replace the random number and we run the project again look at that so good we have a full screen of very well-behaved scrolling tiles well if you got this far then congratulations you should be very pleased with yourself look at how smoothly all those tiles are scrolling on and off screen this is the fabulous beginnings of so many exciting scratch projects just waiting to happen i don't know about you but i'm really looking forward to what lies ahead in part two of this tutorial if you are as excited as me then let me know in the comments below i hope you have enjoyed this video please smash that like button and subscribe to the channel if you want to see more with batch tutorials like this one thank you for watching and scratch on [Music]

Channel: griffpatch

Views: 418,448

Keywords: Scratch, Scratch3, Scrolling, Tile, Map, Coding, Tutorial, Tilemap, Platformer

Id: Fl-LX94Z4Cc

Length: 19min 15sec (1155 seconds)

Published: Mon Feb 15 2021