LAYERS 🧅 "Onion Skinning" in Scratch | RPG Tutorial #6

foreign [Music] scratchers welcome back to part six of our coding and RPG Series in scratch today we are going to be moving into New Dimensions as we expand our tile base levels not to one not two but three layers of tiles four if you include the background texture too this is important so that we can give our level texture and density making our level designs look far more impressive but what's more our third layer is to be special as it we layered on top of the player Sprite this means we can finally walk behind larger game assets and everything really starts to fall into place I've been so excited to get us to this point and I know from your comments you have too so please if you are then do hit the like button under these videos to try to get the word out and help keep this series going okay so we pick up from where we left off in episode 5 but take a moment to save this as a new copy but this is episode six let's get scratching before though we can begin painting multi-layered levels we need a way to store that level our grid list is currently storing a simple 2D grid of tiles in theory we just need to add two more of these on top so what two new lists that could work but coding it would be more difficult as we'd be forever referring to multiple lists so instead we'll simply tack each grid layer onto the end of the previous one creating one single huge level list the indexes into the list are still quite simple to use the first tile in our level is tile index number one to get to the tile above it we add to this the number of tiles in a row gmax if you remember so it's logical that to get to the next grid layer above we would now add the count of tiles in a whole grid layer and that is gmax multiplied by G Max we will therefore store this value in a variable named grid multiplier or G mull for short so let's do this we'll Begin by clicking into the level store Sprite we need to calculate the gmax multiplied by G Max in our case that's 10 000 tiles quite large and we should be able to confirm this does match the number of rows in our grid list yep 10 000 items create a new variable naming it g mull making it for all Sprites and we'll set Gmod to gmax multiplied by G Max now please click this script so that Gmail variable gets set there we go 10 000. so to add the extra two layers to our existing levels we repeat for two layers multiplied by G mole and we add the empty value to grid that should be twenty thousand empty items appended to the end of our grid list shall we test that currently we are on Ten Thousand rows and after clicking this repeat script now we have 30 000 items wonderful and yes they are all empty rows that fixes up our lists now we should make sure any future level lists are also set up correctly find our Define new map script and after it is generated our simple single layer level drop this repeat onto the end like so and that will bring it up to the full three layers two the set Gmail that can be dropped in after the set gmax awesome that's the setup done now to handle the drawing of the new layers click into the tiles Sprite and find the Define paint script script is responsible for stamping one screen of tiles from our level Grid we want to extend this to allow us to stamp a further layer of tiles on top so click to edit the custom block and rename it paint layer with a new input of layer number now if we scroll up to the when I receive paint background script we can now enter a layer number of one in this first paint layer block as that will be the first layer of tiles in our grid list but then right afterwards duplicate the paint layer block and we'll follow it up with a paint layer 2 as well right on top of the first layer of tiles okay but not to get carried away we haven't yet scripted how the layer input is to work so back into the Define paint layer script split off these scripts under the change gidx block gidx or grid index represents the item number of the tile in our grid list we just need to adjust this for the specified layer number if you remember we have the variable G mull that records how many items are in each layer so we just need to multiply these together except we first should subtract 1 from the layer number since layer 1 wants to begin at the very start not a whole layer into the list so that's layer number subtract 1 all multiplied by G Mull and we drop that into the change gidx block like so cool that's that and that should now be stamping both our tile layers of course testing that out is a little more tricky since we don't yet have any tiles in our second layer but you should at least be able to confirm that things are still looking okay as they are so to add tiles to another layer we need to know which layer we are painting to make a new variable named layer for all Sprites we want to see this layer number when using the level editor so find the when zero keypress script and where we previously hid the editor variable switch this to hide the layer variable and below that also show the layer variable just make sure to remember to actually hide the editor variable if it was left showing like mine was there this variable reporter is just as good an indicator that we are editing the level as the other reporter was and this one is also functional now to let us switch layers I'm going to use the number Keys one two and three for this so I'll just make some space for the new Scripts now when one key is pressed let's make a new custom block set layer with an input of layer number and when the one key is pressed we use the set layer to one now we could duplicate that again for the number two key setting layer to 2. and for the three key setting Layer Two yes you guessed it three right the Define set layer script we'll start with a check if editor is greater than zero just to make sure we are in the editor and then simply set the layer variable to the layer number input great let's test that worked smash the green flag and check that when the level editor is open you can indeed press numbers 1 2 and 3 to get the layer available to change value Splendid now we just need to extend the block placement to actually place on that specified layer right these scripts that place new tiles with the mouse is under the Define paint editor script scrolling down and here under the if Mouse down we are indeed replacing tiles in the grid we have that G idx again so all we need to do is account for the current layer number but we are using gidx twice here once for placing the blocks and again for that e key tile picker I don't want to write this maths twice but also we mustn't change the gidx variable itself so let's make a new variable name it TMP temp to store temporary calculations making it for this Sprite only before the if melts down set TMP to rgidx and then we can carefully replace the two following gidx variables with these new TMP variables instead since they are now the same value cool because now we are free to do the layer offsetting to this temp variable we need a layer and subtract from that one as before and then we multiply this by G mull the size of our layer lastly we add this to gidx and pop it back into the set temp block oh gosh wow how good are you feeling about this in theory we are now ready to replace tiles in any layer and have coated up the stamping of the first two layers too so poke that green flag and let's take a gander so I've entered Layer Two and I've got the top of a tree as my brush costume I'm going to try and place it right over this pathway so what do you think will this all come together and work click yes oh yes we've only gone and done it you can clearly see the previous tile still sat behind the top of this tree tile so I am pleased about that and I'll just finish off the rest of that tree now yes that's dead exciting isn't it now question why can't I delete this right hand portion of the tree uh it's because I'm still editing layer two you see and this tree was drawn on layer one of course so press the one key to switch to layer 1 and now with a blank costume selected using that hiki I can delete this tree too of course having done so it would actually have been better to move the whole tree across off the path so back to layer 2 and I'll redraw this tree one tile up to the right and then remove the left hand tiles there looking nice guys layer 1 and 2 work excellently but hold the phone something is not quite right should I really be able to walk right on top of this Treetop it would make more sense if that was drawn on top of my player right indeed and this is the whole purpose of layer three our third layer is to be drawn above or in front of the player giving that illusion of depth only problem is our level is stamped and the player is just a Sprite no stamping involved and as such can never appear behind the level hmm unless we stamp the player 2. okay if we look over here in the paint background script this is where the layer 1 and 2 are stamped and we will need to stamp the player right after this before we then go on to stamp layer 3. to do this we need to click into the player Sprite find the main game Loop when I receive start game Loop the scripts are running in this order player movement paint the background and then paint the player it has the right name paint player but if we check out the scripts it's only positioning and not stamping but no problem we just drop in a stamp block at the end but don't forget that the player Sprite is still showing so to tidy this all up under the when green flag clicked script drop in a hide block perfect let's give that a test to see if the player's Sprite is stamping correctly above layers one and two sweet yes it is looks just the same as before now we just need to paint that third layer after stamping the player find the main game Loop once more and we need a new broadcast after painting the player broadcasting the message paint layer 3. can you guess what this is meant to do I wonder how many of you could complete the scripts for painting layer 3 without me feel free to stop the video and see if you can drop me a message in the comments if you did manage it but here we go click into the tile Sprite we are going to need a new when I receive event hat block for the paint layer 3 event and what we do is just paint layer three of course now that in itself is almost enough except when the level editor is open we really want that to all draw after the main level finishes drawing so grab the scripts from the set Focus palette block above and move them over into the paint layer 3 script nice okay so in theory gosh the excitement is palpable I'm switching to layer 3 now no wait I need to remove the top of the tree so back to layer 2 and then press e over some empty space and draw over the old tree to remove it then back to layer three and draw the top back in yes it's drawing which is a very good sign but is it in front of the player careful does it oh guys yes that is so beautiful isn't it what a change now we can go behind and in front of these tiles so good of course without Collision detection we can still pass through the middle but hey one thing at a time right come on I just have to try this out on a larger house the whole top section of this should now be transitioned into layer 3. oh wait it's not even on Layer Two this is a layer one house at the moment so remove it from there and then on layer three draw the house back in with our magic space key feature Still Loving that here we go taking a stroll oh simply awesome if you are seeing these results in your project too then kudos to you you've done a great job we all can have a lot of fun making our levels look and feel super awesome from here on like creating this awesome Stone Temple complete with doorway grassy roof fence ladder or whatever else you feel like adding looks so good doesn't it now just before we conclude this episode one thing that gets a little tricky now that we have multiple layers of tiles is knowing which tiles you placed on which layers So to avoid confusion how about we add an option to fade out the layers you are not working on a so-called onion skin mode so still on the tile Sprite under the when flag clicked we'll make a new variable onion mode for all Sprites and set onion mode to zero when the game starts up now to be extra safe under the when zero key press script whenever we enter or exit the level designer let's also set onion mode back to zero turning this mode off we don't want to keep it enabled when playing the game now we could introduce a new key press to toggle the onion skin mode on and off but how about we combine it with the already defined number Keys one two and three at present when we press a layer number key we call the set layer here if we happen to press the same layer number twice then we simply stay on the same layer but perhaps we could use multiple presses to toggle the onion skinning on and off instead for this we need an if else block checking whether the current layer is already equal to the requested layer number well then if that isn't the case then we want to set layer to the new layer number as before so that goes in the else but if this is the same layer number again let's toggle the onion mode instead by setting onion mode to the result of subtracting from one onion mode that will toggle the mode from 0 to 1 and back to zero again let's just sanity check that by running the project with the level editor open and we are on layer 1 already so pressing number one again and woo the onion mode has toggled to one and back to zero with each subsequent press now press number two to get to Layer Two and press two again and yes this is working just as we hoped Okay cool so let's get this working find the Define paint layer script and we'll pop in an if block right at the top we simply want to check whether onion mode is greater than zero if it is then great we want to fade away all but the current layer of tiles so not layer equals layer number so if we are painting an onion skinned layer one other than the current layer then set ghost effect to fade this nicely out to something like 80. feel free to play with that value to find what you like the most now just before we try that out scroll down to the bottom of the script and we must ensure we set the ghost effect back to zero at the end otherwise the next tiles to be stamped will continue to be faded out and we don't want that so run the project now and clicking one again to enter the onion skin mode on layer 1 and look there's our first layer tiles showing up ghosted this lamp post is on layers two and three I expect if I press 2 to edit layer 2 there we go now layer 1 tiles fade away and we can clearly see the layer 2 tiles how about layer three here there they are that's so cool and will really help us when editing more complex level regions what you might note though is that the background grass texture doesn't yet fade away and we really need that to do the same so click with me into the background Sprite we've not been in here for a while have we before we stamped the background we want an if else block so that we again can check if the onion mode is enabled that is it's greater than zero if it is then we want to draw a faded out version of our grass texture to do that we'll first erase all from the pen category to clear the screen to Pure White and then set ghost effect as before to 80 percent before our script goes on to stamp the background this time faded out then we just need to account for when we are not in onion mode and we set ghost effect to zero fantastic that should do the job shall we check it out smash that green flag let's turn on onion skinning mode oh yes there we go now everything except layer 2 tiles are ghosted including that background we should now be able to view layer one yep without the background which is good news for helping us to build our level and know where our tiles really are if we check out the houses you can now clearly see where tiles are at the bottom which tiles are on Layer Two at just this corner tile for me and of course layer 3 that draws in front of the player well excellent that neatly brings us to the end of another highly productive episode if you're enjoying this series then please smash the like button now and don't forget to subscribe to the channel so as not to miss the next exciting episode I wonder what we'll cover next I'm thinking that we should perhaps start to think about Collision detection what do you think it's quite a biggie but it feels like it's the natural Next Step okay well that's it from me today do have a great week ahead and scratch on guys [Music] thank you

Channel: griffpatch

Views: 104,456

Keywords: scratch rpg tutorial, 3d list in scratch, scratch rpg game tutorial, onion skinning, onion skin, scratch coding games, scratch coding tutorial, scratch zelda, coding zelda, zelda, griffpatch, tile stamping, level editor, scratch level tutorial, scratch map tutorial, map editor, map editor tutorial, scratch grid list, rpg scratch tutorial, scratch.mit.edu, 3d list, scratch 3d list, layered grid list, scratch stamping, scratch programming, scratch layers, layers in scratch

Id: wWjot1vJBf0

Length: 21min 41sec (1301 seconds)

Published: Sat Oct 15 2022