hello fellow scratchers this is part two of our scratch rpg tutorial and man this episode promises to be a stonker sure we have our player sorted from episode one but the substance of our rpg relies upon the creation of a seamless persisted tiled scrolling level wow the things we are going to learn beginning by covering crazy simple infinite scrolling backgrounds yeah infinity sure does go on a very long way then we'll talk about level maps using scratch lists before coding a working grid list solution to power our stamped scrolling engine finally for those who think rift batch and lag never does they meet stay tuned to the end of the video because yes the lag is real but fear not where we are heading we'll say goodbye to lag for good yep silky smooth scrolling i promise hey talking of lag some of you have commented that loading these big projects in scratch can be real slow so here's a handy hint don't click the see inside button from the my stuff page watch how slow this is i'll leave that loading and in the meantime watch how fast it loads if we instead click to view the project like this and then my goodness does it load a lot quicker and then we simply click to see inside and there we are yep to the screen is still loading right with our projects loaded click to save as a new copy for this is episode 2. guys let's get scratching so last episode we got as far as getting our player to walk around and animate and that is great but this is supposed to be a scrolling game so let's see what we can do about that a scrolling effect is achieved by not moving the player but moving the entire scene around too so the grass will have to move left oops did you know that dragging a sprite on the stage causes it to move in front of all the other sprites now it's in front of the player sprite too oh not to worry click back into the player sprite and under the when flag clicked script drop a go to front block right after the set size that'll make sure the player stays at the front okay player x and y keep track of the player's position on the level now we will add some variables to keep track of the scrolling viewport the camera position if you will create a new variable cam x for all sprites this stands for camera x and we create cam y also for all sprites we can test these out by right-clicking the variable reporters on the stage and changing them into sliders find the when i receive paint player script now to scroll the sprite around using the camera sliders we just subtract camex from player x and cam y from player y this simple change gives us the power to pan the player around the screen independent of the normal movement scripts but to complete the effect we need to move the background grass sprite 2. so click into the background sprite we'll add some general setup scripts first when flag clicked set size to 200 yeah all my sprites are 200 in this project so bring in a when i receive event receiver and we'll add a new message paint background now we go to xy and we subtract from zero cam x and the same for the y zero subtract cam y to make this all work we just need to broadcast this new event so back in the player sprite find the start game loop script add a new broadcast block for the event paint background and we drop it in here before the paint player broadcast and this way the background will be drawn before the player excellent let's test it out smash that green flag and we have some fun wiggling these camera sliders and watching the player and the grass now scrolling around together beautiful and yes we can still walk around using the arrow keys as long as we click off the variable reporter first it's nice that the scrolling and the player movement are independent as the player will not always want to be locked to the center of the screen however that might be the exception rather than the rule so in the player sprite under the tick player receiver set camex to player x and set camera y to player y now the camera is locked to the player position following along as we walk but it's great that we have the flexibility to break away from that later on now it's a shame that the background costume is so small and we reach the end so soon it'd be nice if we could make it go further luckily there is a trick for that click into the background sprite now you see this large grass costume is made up of a repeating pattern of smaller grass tiles it repeats seamlessly every 32 pixels now this costume at 200 percent is a full tile wider and taller than the stage that means we can scroll it smoothly across by a full tile 32 pixels but here's the trick before scrolling further and revealing that ugly costume edge we jump it back to the left by a full tile width the magic is that the player isn't even aware that we did it and this creates a perfect infinite scrolling background and it's easy to script in the background sprite we replace the camex with a mod block camex can be placed on the left and on the right we enter the width of a tile 32 this will now loop the camera position around so it never reaches or exceeds 32 we want to do the same for cam y mod it by 32 and subtract the result from zero are you ready for this green flag time and would you look at that you wouldn't know the tricks going on behind the scenes would you just looks like a sweet scrolling background if you want to see the costume being shifted around then you can set size to 100 and there you go you can see how the costume is just shifting back and forth i love it now back to 200 so wow we could do a lot with this but to populate our world with exciting roads buildings and more we'll need an upgrade yes we're going to talk about tiles so for now hide the background sprite and we'll click into the tile sprite now you may or may not be planning to use the same tile costumes for your rpg as mine but whether you are or not we should try to understand how i've laid them out you'll find the first actual game tile doesn't start until costume 20. more on why in a moment but each costume has a width and height of 16 pixels which at a size of 200 percent ends up as 32 by 32 pixels in the game this is just a great size not too big and not too small the costume itself is a bitmap and is centered on the canvas this makes it really quick to import the new costumes so what about all those other costumes before this first tile well there's a big costume this looks empty but is actually a large transparent rectangle we use it to allow other costumes to move easily off screen the next costumes are going to be used in the level editor in future episodes i can't wait for that and then you'll also find the rest of the costumes are blank and they're named reserved you see we may need more costumes for other editor features later on and these reserved costumes can be replaced as and when we need them without changing then the costume number of tile 20. you see changing the costume numbers of tiles already used in our game will lead to broken levels and we don't want that well okay guys let's make a start we need the obligatory sprite setup code when flag clicked set size to 200 yep and then hide no need to have the original sprite visible on the stage then when i receive paint background now we are wanting to paint a grid of tiles to the screen like this so we'll need a new custom block named paint with run without screen refresh checked this will allow it to paint all the tiles quick enough before the screen refreshes drop the paint block under the paint background receiver nice let's start simple and just paint one line of tiles switch costume to the first actual tile costume and for me that's tile00 right after that line 18 costume thing there for now set x to zero and we'll paint one row of tiles so repeat ten often at this point we would drop in a crate clone block but nope not this time the reason i keep naming these events paint is that we are going to paint these costumes to the screen so click on add an extension and choose the pen extension and now we can stamp the sprite on the stage literally painting copy of it on the screen after which we move on to stamp the next tile by changing x by 32 that's the width of our tile sprite if you remember great let's see that working just click the define paint script and yes that's cool we've stamped a seamless line of tiles from the middle of the screen to the right margin well almost seamless the last tiles have experienced somewhat of a pile up at the edge of the screen and this happens because of scratch's fencing rules that prevent you moving a sprite fully off the screen oh bother well what we'll do to get around this is to switch to a big costume before we move because big costumes are allowed to move further off screen so we'll move to where we want to go before switching back to our smaller costume again perfect so duplicate that switch costume block and now change the original costume to be the big costume mine is costume one this is then moved into position and before we stamp the tile we quickly switch to the actual costume to be stamped then right afterwards switch back to the big costume ready for moving once more to test that click the paint block again and there we go bug squashed right then for a complete grid of tiles we just need to stamp more of these rows up the screen separate off the set x and repeat loop that drew that row and we begin with a set y again to 0 and then repeat 10 times for the 10 full rows these scripts go back inside this new repeat all we need to do though is make sure to keep moving up to the next row using a change y by 32 as the last block in the outer loop now this is exciting click the paint script again to run it and let's see what we've got yeah very promising indeed and don't be worried about it feeling slow if we clear the screen that's in the pen category click on the arrays all block there so if we now click the when i receive block up here bang instant tile painting much better it only draws slowly when we click on the define block itself and that's because running a block directly ignores the run without screen refresh option great for testing but it can be a little confusing if you didn't know that for now we'll place an erase all block at the top of the paint script to clear things up before we begin painting now one thing we haven't yet addressed is scrolling this tile grid with the camera no problem though just as before we take the set y block and carefully to use cam y for the y position replace zero with zero subtract cam y and do the same for the set x replacing zero with zero subtract cam x and then excitedly slap that green flag and bask in the glory of this beautiful scrolling grid of tiles nice work but we are not quite there yet click the green flag to reset the project because things are not yet positioned quite as they should be what i would expect to see is this since we start by setting player x and y to 0 0 the player should be snugly positioned at the bottom left corner of the bottom left tile of our level so why are these things not aligned correctly well it's down to our costumes if we position a tile sprite at an x and y of zero it appears here because the costume is center aligned what we actually want is for it to appear here half a width and height across and up from where it is so unless we want to edit all 500 plus costumes let's do this in code find the zero subtract cam y and to add 16 pixels to this we can just write 16 subtract cam y and for the x set x to 16 subtract cam x simple tap that green flag and we can confirm we are getting closer to our goal next up the player sprite in the costume editor we can see that they too are center aligned but it's not as simple as moving them up so that their feet are in the center because this is a semi 3d world we are simulating imagining them inside a 3d block helps a bit their feet are therefore actually around here so we have to move them up by 10 pixels and that should do the trick again leave the actual costume alone in our code find the when i receive paint player script we need an addition block and we'll add to player y an extra 10 pixels return that to the set y block so has this sorted the positioning green flag time and yes this is looking much more as expected so we can safely move on to greater things enough of the same repeating tiles i think we want to define a full level map recording what tile costumes appear where so who watched my tutorial on grid lists if you haven't or need a recap then do give that video a watch but basically our goal is to store a level map like this one in a scratch list let's take a smaller example we can't store costumes in a list but we can store costume numbers so starting at the bottom left this bush is costume 79 pop that into the list and then we work our way across the first row filling out the costume numbers all bushes once a row is complete we simply continue on the next row above left to right ah the plain grass is costume 44 and we continue sell after cell row after row until we've completed the entire grid perfect let's do this we'll start by creating a grid list exactly like this one so we're still in the player sprite so find the when flag clicked script to trigger the loading of our grid list broadcast and wait important because we must wait for the level to load before continuing and use the new message store load scene i begin with the word store to indicate this event is handled by the level storage code indeed we can create a new sprite for this now naming it level store all level loading saving and generating will go in here so when i receive store load scene we can add actual loading scripts later on for now we'll just generate a level make a new custom block named new map run without screen refresh drop the new map block into our event and we are ready to generate our grid list talking of which make a new list and name it grid leaving it for all sprites start with a delete all of grid to ensure that it's fresh and ready for us to use before we begin we need to decide the width and height of our grid make a new variable for this named gmax grid max for all sprites and for consistency let's set gmax to 10 this will generate a 10 by 10 cell grid now let's add this first row of bushes repeat for g max that's 10 items adding to grid the bush costume except i feel we're going to be adding a lot of runs of the same costume let's make this repeat ad into a custom block name it add to grid with an input count that's the number of tiles to be added in a line a label of tiles of with the input tile that's the tile to be repeated run without screen refresh we can then move the repeat into here using the count input in place of g max and the tile input is the costume number to be added to grid nice it's now simple to add the first row to the grid we just say add to grid gmax items of costume 79 that's my bush costume we can test that works by clicking the new map script and we should see 10 items of 79 appear in our list the next row begins with one bush so add 79 to grid this is followed by a run of grass how many well two less than the full width so add to grid block 44 that's the grass with a count of g max subtract two and don't forget to finish off with another bush add 79 that's the next row completed so clicking the script should add another 10 items to the end of our existing list great so we just need to repeatedly add more of those types of row so pop that in a repeat block and the number of times to repeat is again two less than the full height which is gmax subtract two lastly to complete our level we add another full row of bushes at grid gmax tiles of 79. if all is well running the whole new map script will now result in 100 items in our grid list brilliant we are ready to boogie we can hide the grid list and click back into the tile sprite ready to make use of this list to paint our tiles we begin painting grid tile one we need a variable to keep track of this and name it gidx that stands for grid index and make it for this sprite only and set gi dx to 1 pop that in at the top of the script now we are switching costume here so bring in an item 1 of grid now we want to pull the costume number of the tile at position gidx out from the grid list then to move on to the next list item change gidx by one just before the end of the inner repeat loop like so oh boy you know what time it is it's testing time smash that green flag yes yes look at that that's exactly what we were hoping for aren't grid lists the best so being the curious scratchers we are our next thoughts might be to wonder well how big can we make our gridless level let's find out click back into the level store sprite our level is 10 by 10 so now set g max to 100 that's a hundred times a hundred um ten thousand tiles gosh do you think our stamping script can handle this to find out we must click into the tile sprite once more because our stamping repeat loop is still set to a fixed 10 tiles we need to update this to use the gmax variable in both cases so before i run this what do you think do you expect stellar fast performance or terrible sluggish super lag well sadly it's the latter asking scratch to stamp 10 000 tiles is far too much for the poor thing to handle this is a problem for us but just wait a minute how many tiles are actually visible at a time certainly not the full ten thousand i'd say we're only seeing one to two hundred tiles on the screen at once the rest are out of view what do you say to us optimizing our script to only paint the tiles that are actually within the screen bounds for the time being just pop back into the level store sprite and set gmax back to 32 to curb the unbearable lag as i'm afraid this is all we have time for this week if you enjoyed this video then please smash that like button and subscribe to the channel now to ensure you don't miss the next epic episode it's going to be awesome as we optimize the tile engine to run literally hundreds of times faster believe me i'm excited are you if you can't wait then you might consider joining the early access membership to be one of the first to see episode 3 before everyone else let me please just show my appreciation to my three biggest patron supporters the random person minecraft and creep to craft thanks so much to you guys and all my other channel supporters you guys are the best and on that note we must finish thank you for watching have a great week ahead and scratch on guys then when i receive paint blah blah blah sorry when i receive paint background