Code a LEVEL EDITOR in Scratch | RPG Tutorial #4

Key Takeaways

foreign scratchers I simply love level editors almost every game I've created has a level editor built in somewhere there's Apple eat the level paper Minecraft well the whole game is a level letter to the right but even my 3D laser tag game has an editor hidden away inside so it's no surprise that our scratch RPG is to feature one two without it designing large epic levels would be so very hard yes we've got loads of cool stuff to learn but in this episode we'll include using the pen to paint a Nifty split screen user interface this is looking so good right snapping to the level Grid and calculating the exactile under the mouse cursor displaying a ghosted copy of the active tile brush that's the one we selected to paint with and then we'll cover placing or painting new tiles within our levels so do stick around until the end of this video to see all this and more but enough talk guys let's get scratching load up your projects from episode three yeah looking great and so as not to lose all our epic progress we should begin by Saving this as a new copy for this is RPG tutorial episode 4. oh yes this is going to be fun the first thing we want is a way to toggle our level editor on and off and since the editor will need access to all the tile costumes we'll click into the tile Sprite for this when zero key pressed I often use the zero key to toggle My Level editors if you don't want every user to have access then you can either remove this script later on or you could add a user name check so only you can access it now an if else and drop in a greater than operator we need a new variable to keep track of whether we are editing the level or not let's name it editor for all Sprites now when editor is greater than zero we are editing the level so to toggle the editor off set editor back to zero else we are not editing so set editor to 1 to toggle it back on again we can just test that by tapping the zero key and we should find the editor variable happily switches between 0 and 1. as an enhancement let's hide the editor variable when the editor is not enabled hide variable editor and conversely show variable editor when it's active nice that works well so all the level editing scripts need to hang off somewhere so find the when I receive paint background script we'll paint the user interface after we paint the background but only if the editor is enabled if editor is greater than zero then we'll make a new custom block for this naming it paint editor and run without screen refresh as with the painting of the level tiles these scripts must run very fast within one game tick pop that into some free space and will make use of the new block right away when the editor is enabled here Splendid are you ready to rock the first thing we'll do is highlight the tile under the mouse cursor if you take a peek in our costumes you'll see costume 2 named outline is designed for this purpose I drew this to perfectly surround our 16 by 16 tiles hence it's 18 by 18. so for starters try switching to the outline costume and simply going to the mouse pointer then because we are not using clones stamp the outline costume right here great tap the green flag and check out what we have accomplished a very pretty cursor outline that follows the mouse but what's wrong with this is that we really want the outline to be snapping to the underlying tile grid not smoothly gliding around like this well then we need to know which grid cell the mouse is over the trick to remember is that we are viewing only a small window into our larger world map to get our Mouse position in World coordinates we must factor in Chemex and cam y so for the time being move these painting scripts over to the right and now in our variables we already have a GX and gy variable we can use these these stand for grid X and grid y so make them visible on the stage while we work this through set GX to and we'll sum Mouse X with kamex if we run the project you'll find this usefully now shows GX is 0 at the far left of the map rather than the negative 240 we are used to the player is at 240 and as we walk to the right GX gets bigger and bigger which is just what we'd expect but to find out how many tiles across we have gone rather than pixels we need to divide this by the tile width that's right divide the whole thing by 32. of course as often is the case after dividing we are left with a fractional number and that should be cleaned up using a floor operator to round the number down carefully drop the entire expression into the floor and now beginning at zero we have a beautiful readout of how many tiles across the level Grid the mouse cursor is positioned let's do the same for up and down setting gy this time and we swap Mouse X for Mouse y and Chemex for cam y and there we go as you might imagine this GX gy grid location will be super useful going forwards now that we know the grid location of the mouse let's use it to snap that outline to the tile grid before we display it set X to we need to multiply the grid X backup by 32 our tile width to find its position on the full map then to position it relative to our camera we subtract kamex but one last week we add half a tile width 16 to account for the centering of our costumes we now do the same for this set why only with the gy variable and the cam y available cool that's the positioning we just need to bring back the switch costume to outline and the stamp block make sure to remember to remove that go to Mouse pointer now we must leave that in guys it's time to smash that green flag will the outline snap to the grid oh boy yes that's much better and importantly if we Edge the player along the grid snapping perfectly follows us and isn't fooled by the camera offset no sorry there's something very satisfying about walking around with the grid aligned cursor very professional indeed next up we want to get level editing and place down some new tiles if Mouse down then now we want to replace the existing tile under the mouse with a new tile so we use the replace item of grid block we need to choose what tile costume we are placing something a bit fun um uh ah yes 118 this big Stone so replace item of grid with the tile costume 118 118. but which item of grid we have the grid X in Grid y but not the grid index yet and that's what we need so we need to calculate that set G idx grid x 2 and do you remember this calculation the first item is a one and then we sum this with g x our grid X now that is how many tiles across the grid we need then to add the vertical we need to add and for this we need a multiply block because for every tile up the grid g y we need to multiply by G Max the number of tiles in a row great so sum them both together and that gives us the grid index gidx and now we can drop that happily into the replace item block here well this is exciting smash that green flag and it's time to get clicking ah if everything has gone well then we should have placed our first tile and the first of many I can assure you we can make some pretty cool looking Walls by just clicking and dragging in straight lines oh yeah right I'm getting carried away though and before you go to town making some Ultra snazzy maze don't forget that as soon as we hit the green flag boom our beautiful creation is gone because the level resets so before we get around to adding level saving and loading the best option would be to click into the level store Sprite and simply separate off the new map block from the when I receive load scene this means that when we run the project and lay down some funky level the next time the project is run our level stays just as it was wonderful of course there are times when you may still want to reset the level and then well just pop into this Sprite and click the new level block and the level resets Okay click back into the tile Sprite let's expand things so that we can place other types of tile other than just this stone block so in place of the costume number 118 we need a new variable rush for this Sprite only and for fun we can begin by making it a slider setting its range from 20 the first actual tile costume up to say 200 for now although we have a lot more I know I can then drag that to the first tile 20. and we drop the brush variable in place of the number 118. cool let's see that in action click click and there is costume 20. let's try another brush tile 77 oh the grass of course one one six oh nice that's a fence yeah so there are loads of interesting tiles to be explored but a lot of them are hard to understand out of context and wouldn't it be nice to see what tile we're going to place before we actually start painting with it well not a problem come back up here to where we switch to the outline costume duplicate both the switch costume and the stamp block and to show the brush tile before we actually place it simply switch to the costume given by the brush variable and now we can stamp it in place just like that however it can be nice to just fade the tile out a little bit so set ghost effect to 25 before we stamp then we must remember to turn off that effect before continuing so drop in a clear graphic effect block before switching back to the outline costume and it's testing time so do you see how we have a faded version of the brush tile appearing at our cursor that is sweet and when we click the tile becomes fully solid wow we are making progress are you enjoying this you know what though a feature I often add to my editors is the tile picker key that is when you press e over an existing tile it selects that as the current brush and we can paint with it we can do this simply by adding to the bottom of the same paint editor script if e key is pressed then we set the brush to well the tile under the mouse so item of grid and we want the grid index again gidx but watch out this won't work yet because if you look we are only setting G idx when the mouse is pressed above here we need to move this set gidx out of there moving it up to a more suitable position under the set GX and gy blocks here that keeps all those all nicely together and now running the project we can finally press e over an existing tile and switch quickly to that matching brush to continue painting I love that feature also note this is the fastest way to remove existing tiles pressing e over the grass and you will find you can then paint over any tile to remove it very useful but it's still a real pain trying to find any other tile you are after just using the brush slide available so we are going to Now work on that awesome tile selection palette let's scroll back to the when I receive paint background receiver so as well as painting the paint editor we'll split the palette into its own custom block paint palette run without screen refresh drop that in right after the paint editor let's find some free space for this okay we'll start by painting a black rectangle to act as a background to our palette we'll need to know how wide to draw it so make a new variable palette width or Pal width for short for this Sprite only and set pal width to then we use a multiply so you can say that the palette is five tiles wide and multiply that by 32 of course but we also want a small border around the whole palette area so add to this eight more pixels that's four for each side we'll use the pen to draw a thick line so begin by setting the pen size to the width of our palette pal width then position it using a go to XY block beginning at the top of the screen that's 180. the X position that wants to be halfway between the left Edge and the right edge of the pallet start at the right 240 and subtract half the palette width that's pal width divided by two we can check this looks right by from the pen category set pen color to and choose black then use a pen down block and right away a pen up block if you run that you should find we have stamped a large pen Circle right here at the top right of the screen positioned perfectly for drawing a thick line down the full right edge of the screen shall we do that then drop in a set Y2 just before we pen up again setting y to negative 180 the bottom of the screen and did you see that drop down brilliant hey do you notice though that with this right hand panel in place the game world no longer feels correctly centered on the player what's more if we Dash over to the far right of the map it can take a while the level fencing is also broken now in that the rightmost edge of the level is obscured by the palette area that's a shame let's fix this click into the player Sprite oh gosh you know what before we fix the camera fencing can we just fix this other highly reported issue you know when the project starts the player can flick from facing forwards to facing in any other direction well this is so easy to address the problem is that we didn't initialize the player der variable player Direction when we set the player X and Y so set player der to 180. that's facing forwards bug squashed Now find the when I receive tick player script everything from the setcam X block onwards is to do with positioning and fencing the camera so we'll split this off and make a new custom block for it name the block move camera and run without screen refresh all these scripts can be popped into the Define block and the move camera block placed from where they came but we are going to want to change the camera positioning based on whether we are editing the level or not so using an if else block check if editor is equal to one okay just to be clear here I am using equals rather than the greater than that I usually use as I'm reserving an editor value of 2 to mean full screen editing but we'll come to that later on next up make a new variable TMP for this Sprite only we use this to store any temporary variable we might need for intermediate calculations and in this case when we are in the editor set TMP to the width of this palette to get that from the sensing category we need the thing of thing block we first switch it from stage to our tile Sprite and then and only then can we find the variable named pal width yep the palette width this is a great block for getting values from other Sprites but it's not good for changing values but that's fine because we don't need to do that here in the else set temp to zero this means the panel is closed and has no width when the editor is not on so first off to Center the player correctly when the panel is open we need to scroll the level over to the right by half the panel width where we previously set cam X we now sum player x with TMP divided by two half the palette width if it's open otherwise TMP is zero and this will make no difference test that out and you can see we are positioned smack bang in the center that's looking smart hit that zero key and ensure the position keeps toggling back to the center of each view that's so cool now though for the other fencing problem right over here to the right what you should see is that we will need to allow the camera to scroll over by an extra full panel width if you move down in the code this is the right hand fencing Chemex greater than and we have a long-ish expression we are comparing to we need to add to this the variable TMP but rather than doing that twice let's instead put a change TMP block before that if check and drop in the gmax expression instead this has the effect of summing the two values and storing them in TMP so now we can simply replace both those longer expressions with TMP itself and there we go the proof is in the pudding and this is a rather yummy slice of said dessert it works splendidly in both editor and non-editor modes so good so with all that resolved we can move on to adding some content to our so-called tile palette click into the tile Sprite and we'll continue to work on the Define paint palette script I'm going to use the G idx variable to represent the palette's grid of tiles setting gidx to 20. that's the first tile costume now to position the first tile set y to 180 that's the top of the screen and we move down by subtracting 16 from that that's half a tile downwards plus four the small border around our tile palette next for the X position set the X2 and working back from the right of the screen 240 subtract pal width and to this we add the same half tile and border 16 plus 4. and now we can switch costume to the variable G idx and yep stamp few after all that slap the green flag and see if we got the maths just right if you did you should find that the first tile costume has appeared majestically in the top left corner of the tile palette yay that was the hard work done to extend this out just drop our repeat loop around the last switch costume and stamp repeating for the five tiles wide we said we'd include then we just need to change gidx by 1 to proceed onto the next costume and change X by 32. can I assume you know that's the tile width by now run the project now that is great can you appreciate the nice four pixel border we accounted for in our maths that is working a treat next up we'll extend this tile palette downwards too so another repeat block this time between the set Y and the set X surrounding everything below you'll find we can support a palette of exactly 11 tiles high so repeat 11. after each row is completed we need to add a change y by negative 32 yes negative as we need to move to the row below it you'll note that we reset the X position before continuing to paint the next row run that now and yeah this is not bad 11 tiles High fits perfectly right the only problem we have is that the tiles are looking like a little bit of a jumble if we look at the original Sprite sheet that these were split out from you can see that the layout is actually really helpful in making sense of the tiles we want to maintain this layout so in the same way we created the viewport for the game map we need to add a tile skip after each row ends to move us on to the correct costume for the next row below before we change y then drop in a change gidx and the amount we skip is one row of tiles from the Sprite sheet this is 18 for me but we then have to subtract from this the number of tiles already painted and that was five cool and there you go the tile palette is suddenly looking rather awesome indeed but grant me this one more Liberty the black background to the palette is a little bit severe and typically the area behind irregular shaped costumes is often shown using a light gray and white grid like the one you see in the costume designer it just so happens I have created one such costume just for this purpose costume number three named mask all we need to do is stamp this behind each other costume in the palette so duplicate the switch costume and stamp changing this time to the mask costume and then pop it back in before the other costume is stamped run that now and haha that's sweet perfectly aligned fit or purpose you can see how well using the Sprite stamping is helping us stay fully in control of our project and can quickly make some crazy cool effects that would otherwise require a lot more work and expensive clones okay so I'm currently painting with this flowery bush costume but although I can see the same costume in the palette on the right it's not indicated that this is the selected tile shall we fix that now start by dropping an if Block in after stamping the palette Sprite and check whether this was the active brush or not that is when G idx is equal to brush and then we just stamp the selection costume over the top switching to that outline Sprite and stamping but if we run that you'll see we have a problem yes it does highlight the selected brush and we can change brush using the slider and see the selection change but the outline is not fully drawing only the top left of it do you know why it's because of the order we are painting the tiles in the palette we draw the first tile then the outline if it's selected and then we go on to paint the next tile and this overwrites the edge of the outline and the same happens below to fix this we need to paint the outline last after all the palette tiles are painted so drag out those painting blocks and instead we'll make a record of the position of the selected tile for painting later we'll use that GX available so set GX to the X position and gy2 the Y position but in case we don't find the selected brush and set GX we'll also need to set GX right up here before we begin the loops and we set it to the empty value got that good so back down to the bottom of the script now we can check if GX is greater than the empty value this is only the case if we did find the tile so simply go to x y popping in our recorded GX and gy and then switch to and stamp the outline costume wow well that should do it running the project now and yes yes it does the outline is painted fully on top of the other tiles well we're running out of time for this episode but it wouldn't be right to conclude before we've added in code to actually select a tile from the palette will it now since we are stamping a full Square mask behind each tile we can simply use a touching Mouse pointer for this if and we'll pop it just below the first stamp block and we'll need an and operator so that we can check both when the mouse button is down and when the Sprite is touching the mouse pointer and if that is the case then we just need to set the brush to G idx the currently painted palette tile let's check this out so on first impression this is doing exactly what we want clicking on a tile on the palette selects it and we can paint with it as we like well what could possibly be wrong with that it seems to be working perfectly right hide the editor palette and you'll see do you remember us painting any of this over here if not then how did it get here let me give you a clue in some free space open the editor and click on the Flower Rock and tree stumps and then walk across and oh no do you see what's happened every time we selected a tile from the palette it also gets painted to the level behind the palette at the same time what a disastrous bug and no no stop it there's no way we are leaving this until next time come on now can you find with me the Define paint editor script this is where we position the mouse on the grid and replace tiles when the mouse is pressed this needs to be fully disabled when the mouse is over the pallet so separate off all these scripts and we'll check if Mouse X is greater than and we want the left edge of the palette so that's 240 subtract pal width if this is the case then we can stop this script you can see it works when the outline costume stops painting as we move over the palette here very neat and if we click around on the palette then if all is well no tile will be painting behind nope that's perfect the only thing I might add is it's often nice to leave a little room for errors so when detecting this palette Edge I'd be tempted to change it to 230 instead giving a 10 pixel Dead Zone but that's completely up to you wonderful you know I think we are there not that we haven't got plenty more features to cover I'm very aware that we can't yet scroll our palette area to access the masses of extra costumes available to us this will cover in the next episode along with adding the exciting palette tile tracing feature that allows us to lay down large runs of connected tiles far more quickly I love that feature with luck we'll also be able to expand our levels to feature not one not two but three layers of tiles so that we can experiment with layering tiles in front of the player as well as behind them for a more immersive experience wow guys I put a lot of effort into making these videos the best I possibly can if you wouldn't mind showing your appreciation by clicking that like button that would be amazing and if you don't want to miss the next exciting episode now is the time to make sure you've subscribed to the channel and toggled on that Bell icon then you'll be sure to catch the next episode when it's available of course if you want to be ahead of the game then there's always my Early Access Channel membership which in turn helps support this channel further so as I wrap up a quick shout out to my top supporters the patrons and Inner Circle members you are amazing thank you so much to on Jay Chandra bully with yoyo chicken wipes Chris Maiden coding Creeper craft dance portfolio the random person David ridicui Declan and Friends deskus Andreas Elgato games vendorva Jasper the game master Johnny gaming John Jordan TRS Joanne Carlos more or less Helen Glenn Mike Schmidt Minecraft Sandra Paul shark shock 59 Sophia Wang TBD yasika Hernandez and you song so until next time thank you for watching have a great week ahead and scratch on guys [Music]