Tile Scrolling Platformer | 5. The Level Editor

hello fellow scratchers i'm griff batch and welcome back to part five of our series creating a tiled scrolling platformer in scratch we've been working really hard building up our game engine and now i'm dead excited to have reached a point with you where we can finally begin to build up an in-game level editor you will have noticed me showing off a little creative demo of what's in store today but oh man enough of me talking let's begin coding okay my preference is that we will repurpose the generate script for scripting the level editor so click on it and give it the new name editor now the original level size was far too small to contain our upcoming levels of epicness so we'll set grid width to 100 and grid height to 40. you should also remove the spattering of beautiful golden blocks by removing the if else and keeping just the add 2 to tile grid lastly switch the floor tiles from costume 10 to costume 7. this is the official floor costume from the tile set now let's run the project and check out the new basic level we have generated yeah i like the floor and wow it is surprising how big the level feels now it's 100 tiles long still going so this is a good start next we'll define a new variable named editor for all sprites and we'll set it to 1 in the when i receive generate level script a value larger than 0 will mean that our game is in level editor mode surround the generate level usage with an if length of the tile grid equals zero this will now only run if we've deleted our level i'm just moving all these scripts down here out of the way right level editing we need an event from our game loop to hang the editor scripts off so bring in a when event receiver and we'll borrow the move player event as it is the first one that gets called straight away checking whether the editor variable is less than one if it is then we stop the script right here as the editor is not enabled okay now this bit is fun click into our player sprite and find the define get tile at x y custom block this is a super useful block and it would be a very nice if we could just use it again in our level editor and luckily we can grab the whole custom block and drop it on to the editor sprite now hold on there remember for a moment that this block is using variables like tile and tile grid x and y these were created for this sprite only the mario sprite so how will they work in a different sprite like the editor sprite well let's take a look click back into our editor sprite and we'll find a copy of the get tile x y custom block waiting for us be it smooched right over my other scripts i'll just move it into a better position now look at this all the variables that were used by this custom block have been magically recreated for us in this sprite if we make the tile variable visible we can also confirm that it has been recreated for this sprite only now for the editor sprite not mario that's nice thank you scratch we'll quickly make use of this block getting the tile at mouse x plus camera x by mouse y plus camera y we must remember to add the camera position to our mouse's position so that it caters for the scrolling screen okay and test what we should see is that the tile variable is now updating to show the tile costume under the mouse cursor value of 7 for the bottom tiles 2 for the background and 10 for the wooden tiles awesome so we want to allow the player to click the mouse and to set a tile to the new costume we'll start by adding an if not mouse down then stop this script okay so the next scripts will only run if the mouse is pressed down this next bit is so easy you won't believe it use a replace item tile index of tile grid with 10. i'm going to test this right away i can just click and draw out a little wooden platform like this run and jump and then draw some more no way how is this possible right i just love that so much don't you but i want more what if i want to remove a tile again okay so in all my level editors i have this feature that if you draw over an existing tile then it clears it so let's do that make a new variable named brush for this sprite only and we'll set it to zero in the when i receive generate level script we'll also set it to zero when the mouse is not pressed a brush of zero therefore means that we are not painting so we'll check for this condition before doing the actual painting here that is for brush equals zero within there we now add an if else block and we'll check where the tile equals ten now remember we just got the tile under the mouse using the get tile at block above so if the tile we are about to paint over is already a 10 then we will instead paint with a brush of two that is the blank tile otherwise we do indeed want to paint with costume 10. lastly replace the 10 here with the variable brush hooray my favorite time yup it's testing time yes this is very good i can click and drag to paint but if i click again on an already painted tile then i can clear those blocks away loving it i think we can now safely hide these variable reporters now i know what you're thinking you're missing that gorgeous golden block right create a new variable named chosen brush for this sprite only and set it to 10 in the when i receive generate level script this variable indicates the brush that we are intending to paint with come back to the paint script we should then replace both usages of the value 10 with this new chosen brush variable choosing the brush can be super easy for now drag in a when key press tap block and trigger it off the 1 key and simply set chosen brush to 9. the lovely golden block nice and we can duplicate that up and have the 2 key setting chosen brush to 10. let's run the project and see if the one and two keys do indeed let us paint with a different costume and yes they do the one key has me fashioning handsome golden platforms all over and the two key lets me go back to using wooden blocks also the delete feature is working just the same very very good so how could we make this even better well at present we can't see what the brush is that we're about to paint with so how about we add that click into the tile sprite and look at the define setup script now can you remember way back in episode 1 why we added this hide block at the bottom of the setup script well it was because we always had one tile left over after creating all the clones so we simply hid it okay well then how about we actually make use of it now to show the current editor brush well that would be efficient wouldn't it first we need to have a way of identifying this sprite from all the others so after we hide it set tile index to the empty value so that every other clone will have an index but this one will not next under the define position tile script let's separate out the first two ifs that deal with looping around off-screen tiles and bring in a new if else block the looping tile if scripts can move into the else and the lower scripts just need tacking on the end the condition for this if should be a check for tile index equals the empty value just capturing this single leftover sprite let's define a new custom block for the editor brush scripts naming it editor brush run without screen refresh and we'll make use of it right here specifically for that one hidden tile with a blank tile index okay so if editor is less than one or if the mouse is pressed and we don't want to show the brush and we stop this script now we want to position this little tile on the screen at the position referred to by the editor sprite so set tile x to are you ready for this 32 multiplied by and now we'll use the off block from the sensing category setting it to the editor sprite and now we can choose the tile grid x variable that will have been set by the last call to the get tile at in the editor now all we need to do is add 16 pixels to this to account for the centering of the costume we'll do the same for the y position with the sceptile y and the tile grid y and the tile costume itself well that's set on the editor sprite too so set tile to chosen brush of editor to make it beautiful we can set ghost effect to 50 so we can see through it and lastly don't forget to show this hidden sprite ah now two more changes before we can try it out we need to remember to hide the tile when the editor is disabled and also scroll over to when i receive position tile script and we also need to move the set tile block into the if else block above so that our brush tile doesn't get messed up oh yay as promised it's testing time run your projects and confirm we can now see a ghosted brush at our mouse cursor pressing the one and two keys also switches the brush visually now which is really nice so i've talked about us hiding the brush when the editor is turned off well how do we turn it off click into the editor sprite and we'll add a when zero key pressed to toggle the level editor for now bring in an if else and check for editor being greater than zero if it is then we set it back to zero otherwise we set it to one easy we won't need to start the level in the editor mode anymore so it's a good time to go back over and set editor to zero in the generate script run the project now you can see that when the project begins i have no ghosted brush and i can confirm clicking on the screen does not paint any blocks so i press the zero key and woo yeah i can lay down some sweet tiles pressing zero again and i'm back into play mode i love it when things all come together so nicely now have you guys heard of god mode not only does it give us the ability to edit the level but also lets us quickly fly around and clip through solid walls it would be really useful to add this to our editor however before we can add more keyboard controlled scripts it would be wise to first revisit our primary control scheme at present we are limited to just using the arrow keys but many scratchers far prefer the wazed or looking forward even mobile controls to cater for this i'm going to suggest we create a new sprite naming it controls we'll add a when i receive block and make a new event named check controls we can use variables to represent the different control inputs we are concerned about so we'll add four new ones all of them for this sprite only we need a left right down up variable set left to key left arrow pressed or key a pressed we do the same for right down and up filling out the letters d s and w next we'll create two new variables named x-axis and y-axis again for this sprite only and use that cool trick of setting x-axis to right subtract left and the y axis to up subtract down great that's all we need in here so click back into our mario sprite so that we can hook it all up look for the define game loop custom block at the top of the forever loop add a broadcast to check controls that will ensure all the control variables are set before the move player and position tile scripts run each frame next find the define handle keys left right script and change the set walk to we need the of block again from here from the sensing category and choose our control sprite and now we'll select the axis x variable the other place that the controls are used is in the handled keys jump custom block here we switch the up key pressed for an up of controls is greater than zero we can run this now and confirm that our controls all still work all available reporters for left right up and down should be triggering and then we can also test for our wazzed keys too as they are also hooked up to the same variables in this control sprite excellent so with new control mechanisms defined let's add the god mode movement scripts find some free space in the mario sprite and make with me a new custom block named handle god mode run without screen refresh now this works just like our original movement scripts before we added gravity first we handle the change in speed from key presses by changing speed x by 6 multiplied by axis x and the same for speed y and axis y next we account for friction to slow us down by setting speed x to 0.7 multiplied by speed x do the same for speed y lastly we actually move the player by changing x by speed x and y by speed y super we just need to make use of the god mode script so scroll up to the when i receive move player script add an if else condition and we'll look for when the level editor is enabled that is editor is greater than zero if it is we trigger the handle god mode block now we always want to move the camera and paint the sprite so these go underneath here leaving the handle keys and move sprite blocks to be run when not in editor mode like this there that's nice and clean and makes sense so let's give it a test to begin with i'm in play mode and can move around as normal let me press the zero key okay now things have changed and as i press the arrow keys or wast i am able to quickly fly around and i'm no longer stopped by the blocks instead i just clip through them that's really good and i can toggle back to normal movement so easily just by pressing the zero key again it's so much easier now to create a level structures without worrying about my player's movement okay i have an announcement to make here if you see my control sprite disappear after this part of the tutorial then please don't panic it's just that i had to go back and re-record that part of the tutorial to improve the design we most certainly want to keep this new sprite so don't go deleting it thank you so next up if i click on the editor sprite see where we are selecting tile costumes under the number keys one and two well only having two sprites to draw this is never gonna cut it we need heaps more than that right problem is we don't have enough keys on the keyboard to map to all the tile costumes we are going to need so we need a better solution if you've used any of the level editors in my scratch games then you probably have seen how i like to categorize the different tile types and assign each category to a key instead then you simply press the key over and over to cycle through the different brushes so let's do that make a new custom block naming it next brush with a text input of key and run without screen refresh we'll replace both the when one and two key pressed hat block scripts with calls to the next brush block and set the input variable to the same number that has been pressed one for key one and two for key two then we'll add two more when key pressed hats for the three and four keys i think four categories will do for starters but we can always add more i think you get the pattern this system to work we need some way of mapping the different level tile costumes to these key numbers the easiest solution is to make a new list named tile key map for this sprite only we will leave the new list visible for now and click into the tile sprite so that we can see the costumes in its costumes tab we are going to add a row in this tile keymap list for each costume in tile sprite and the number we enter will be the key number that we want to assign to it to select it now costume 1 and 2 can't be chosen so we leave two blank rows in the list for them okay costume 3 is a ground tile so we'll assign it a key press of one and looking down the costumes the following costumes are also ground tiles until we reach costume nine so we enter key one all the way down to costume eight costume 9 though is a single block tile so let's assign that to key 2 and the same for costume 10. then looking at costume 11 we have yet another tile type this will be a special jump through platform when we add this ability so all the blue tiles can be assigned to key 3 all the way down to costume 19. quick tip just ensure to click out of the last row you enter in the list otherwise it can sometimes fail to save the last change you made cool the mappings are all there now in the list so we can click back into the editor sprite so when we press a certain key we want to find the next brush in this list after the currently chosen one that matches the key pressed we only want to look through this list once so add a repeat for length of tile keymap add an if else and we'll check whether the currently selected brush is less than the length of the mapping list if it is then we will add one to it to go on to the next brush in the list otherwise we set it back to the first costume to cycle round again now with an if we check the number entered in the keymap list for the current brush and compare it to the number of the key being pressed if it matches then we found our next brush so simply stop the scripts here otherwise the repeat loop continues around again and the next costume is checked for a match that's it let's test it i click 0 to enter the level editor and now i'm tapping the 1 key over and over this is cycling happily through the floor tiles just as hoped if i tap the 2 key then we should see those two single block tiles and then the 3 key cycles through the blue platform tiles this is awesome loving how it works and so now i can actually begin to choose and create far more interesting levels using the other available blocks you know one more useful editor feature we should add is the eyedropper tool that is where pressing e for eyedropper lets us use the tile under the cursor as the current brush so when e key pressed simply set the chosen brush to tile remember that tile will have been set in this sprite by the previous call to the get tile at xy so that makes it super easy give the project a run and enter the editor now hovering over a beautiful gold block and pressing e changes my current brush into the gold tile nice and pressing e over the corner of this floor tile yep this editor is coming along just great now thank you guys for all the comments you leave me under the videos they are super helpful for directing where this tutorial goes i've been asked a number of times how we can have holes in the floor that the player can actually fall down as you can see that doesn't happen right now and a comment from zukana asked whether we could remove the walls and ceiling too so let's try and address all that now so why don't we fall off the bottom of the level keeping the game running click on the mario sprite and find the define move camera script watch what happens when we temporarily take out the set camera y to 180 block do you remember how our level is actually wrapping around from bottom to top and top to bottom so since the level has a roof we are actually standing on that so i'll put back the block and move to the define get tile at xy script we can wrap the set tile in an if else block checking for a grid y of less than zero then if the tile is below the bottom of the level simply set tile to the empty value otherwise we set it as normal running the project now lets us actually fall into the hole well almost we just need to script what should happen next to mario move into some space and make a new custom block named check around player run without screen refresh and check if y is less than zero if it is then we have fallen off the level and let's just call the reset player script for the time being now we'll use this block in the when i receive move player script dropping in the check around player block just after the move sprite y we can test this quickly yay that's a little better now mario rushes back to his spawn point when he dies that will do just fine for the time being so how do we handle these walls that surround us the truth is we don't actually want the player to be able to walk off the side of the level at all so keeping a wall here to block him is quite useful so how about we do a little trick and just stop the camera from scrolling that far so that the wall is not shown on screen locate the define move camera script create with me a new custom block named limit camera edge x colon adding an input named edge x then a label of edge y colon and another input named edge y run without screen refresh we can move the entirety of the camera fencing scripts that is all four if conditions into the new define block and then we'll call it from where we took them with the values 240 and 180 this lets us replace all the 240 180 values from the limit camera edge script below with the edgex and edge y input variables like so it's probably a good idea to just test that the camera fencing is still working as before i'll whiz around the entire level and check that it's nicely fenced in on all sides yep still beautiful so this is cool because now we can tweak the fencing based on whether we are editing the level or not use an if else and we'll check for editor being greater than zero duplicate the limit camera edge block into both sides the top one stays the same for when we are editing the level but the bottom one will change the edgex to be 272. that's one block of 32 more than before run the project and right away we'll see that we are missing the left edge of tiles but try walking or jumping that way and we're still prevented from walking off screen that's good now click the zero key to enter the level editor and bing we could see the wall as before now we are in a pretty good place to start playing with designing some levels i really am this fast at laying down a level but you know what before we bring this episode to a close i'd really like just a few more tile types to decorate our level if you began this tutorial more recently then you probably already have lots more tiles in your tile sprite than you've been seeing in this video if so then just bear with me as i show all these amazing scratches at the cutting edge of production how to get the new tiles too so if you only have the 19 tile costumes look under my video again for the link to the resource project or find it on mywithpatch2 account and look inside click on the tile sprite and check out all these new costumes we must have these open up your backpack by clicking on the backpack bar and drag the entire tile sprite in there it'll be faster than dragging the costumes one at a time now go back to your work in progress tile scrolling project and open the backpack the tile sprite should be there so drag it out and drop it into the sprites panel now in the costumes tab scroll down until you can see costume 20. we will now drag each new costume one at a time down into the tiles sprite you may find counting them off as you go helpful 20 21 22 to help you keep track of where you're up to and then feel free to delete this tiles 2 sprite as we're done with it click back into the tile sprite and we can see costumes 20 to 27 are all accounted for before we can use these costumes we need to map them to an editor key so click into the editor sprite and make the tiles key map of the list visible then we can revisit the tile sprite costumes for reference now costume 20 is a single tile block so we'll assign it to key two but the following three costumes are actually just animation frames of the previous tile so let's not have those selectable add blank rows for these in the key map the coin at costume 24 is the next interesting tile we'll give that a key binding of four as it's something new a collectible and once more enter blank values for the following three costumes so i'll just nip into the editor sprite to hide the tile keymap list so we can give this a test i enter the level editor and press the 2 key oh yeah that's nice a new block always looks fresh when you've been seeing the same thing for a while now how about pressing 4 yeah cool a nice coin i'll press 0 to test the level you know what that's some clever balancing act sorry to say we are not going to cover collecting coins in this episode however to wrap things up let's at least make these animating tiles animate right click back into the tiles sprite and scroll to the bottom of the when i receive position tile script we'll change the if tile is less than 2 to an if else condition and then in the else check for a tile of 20 or 24 these are the two animating tiles to make them cycle around their four costumes we change tile using the mod 4 operator and in the left we use timer multiplied by 8 which sets the speed of the animation and wrap that in a floor operator to avoid any rounding issues and here comes our final test for this episode i hope it looks good and yes it does the magic of a little animation to bring the level to life and now let your imagination run wild i wonder what level creations you will begin to shape from this episode of the tile scrolling tutorial of course there's still so much more we need to cover the next episode will focus on the level saving and loading scripts we need this before we can add in the collectable scripts because otherwise the very act of collecting coins would be destructively changing our level and then from there perhaps we will move on to adding enemies and player lives oh and so much more i'm really looking forward to reading how you were getting on in the comments let me know if you managed to get your level editors working as always if you're enjoying this tutorial please smash the like button and don't forget to subscribe to the channel to avoid missing my next exciting video but until then thanks for watching and scratch on guys

Channel: griffpatch

Views: 87,994

Keywords: Scratch, Scratch3, Scrolling, Tile, Map, Coding, Tutorial, Tilemap, Platformer, Griffpatch, programming, animation, Mario

Id: t9ahg3B3pzk

Length: 29min 53sec (1793 seconds)

Published: Mon Mar 15 2021