EDIT FASTER ⚡ Tile Tracing | Scratch RPG Tutorial #5

Key Takeaways

hello fellow scratchers this is episode five of our amazing tutorial coding a Zelda style RPG in scratch and today we are covering some awesome topics split screen scrolling drawing two independent scrolling areas in a scratch project is tricky without leaving that thick border between them to get around this we'd need scratch support clip regions and it doesn't but if we limit the pallet tiles to scroll a tile at a time then we can get around this issue next we'll add keyboard control over the scrolling of the tile pallet but rather than having yet another set of controls for both the level and the pallet we'll use the mouse cursor to capture the editor focus when the mouse is over the left the keys control the level but when the mouse is over the right the pallet the keys control that instead very efficient and finally I'm super excited about this one Sprite sheet tracing where holding down the space key locks the movement of the editor and the pallet cursors moving them in unison and allowing us to easily Trace large multic costume structures into our Maps that's cool right so stay tuned to the end for that what are we waiting for guys let's get scratching we begin with our projects from episode 4 four and as always take the time to save your project as a new copy for this is RPG episode 5 right let's get this right hand pallette scrolling click into the tile Sprite just like how we have a camx and Y for scrolling the main game map now we need similar variables for the pallet make a new variable pallet DX for this Sprite only and while we're at it make it into a slider on the stage then create another variable pallet DY for this Sprite only and make it a slider too we'll start by making the pallet slide to the right the pallet drawing code is called from here the paint pallet so find that custom block and yeah we begin painting tile number 20 set GDX to 20 here to scroll it right we just add pallet DX to this make sure the project is running and yeah that was easy so what about the pallet Dy we'll need to add that to the GX again but as with all grid lists to move up and down we must multiply the Y pallet Dy by the number of tiles in a row and for this pallet that is 18 okay so sum that all together and success we finally have access to all those nice costumes what fun and so many hey look here's a nice bed anyway you get the general idea now to make the panel scroll using the keyboard the main game world is controlled using the curse keys or wsd but if we are clever detecting which side of the screen the mouse is over we could switch the same keys to scroll the right hand tile pallet to we just need to know which side has the Focus right scroll over to the when I receive paint background we'll make a new variable Focus pallet for this Sprite only and before we check if we are in the editor set Focus pallet to the empty value but then when we begin painting the editor here I'm using scratch add-on's Dev tools extension to quickly jump to the custom block paint pallet we can add an if block after setting the pallet width and check whether Mouse X is greater than 240 that's the right edge of the screen subtract the pallet width great we know the mouse is over the tile panel so make a new custom block naming it scroll panel run without screen refresh and drop that into the new if for starters let's just set Focus pallet to one then let's quickly test this is working fine and as I hover over the tile pallet the focus variable toggles to one brilliant so click into the player Sprite and we'll use this to disable the player motion we'll find this in the when I receive tick player script we have a Joy X and joy y variable to represent our controls but do you notice how we don't move the player unless Joy dist is greater than zero we can use this fact come into the player controls custom block and where we set Joy dist surround it with an if else block with an equals comparator and we want the value of our new Focus pallet variable so using the sensing thing of thing block for the tile Sprite select the focus pallet variable and we compare it to the empty value great so when the focus palette is not set we continue as normal setting the joy disc but if the focus palette is set just set Joy disc to nothing that will disable the player Movement we can test that out and confirm that as soon as the mouse is over the editor tile pallet the player can no longer be moved with the keyboard that works perfectly great work click back into the tile Sprite and will activate the keys to scroll this area instead drag in a change pallet DX by and we need that Joy X variable from the player Sprite so use that sensing thing of thing block again with the player Sprite and choose Joy X we can drop that right in here and give that a test with the mouse over the pallet wow this Scrolls really fast too fast anyhow it works and when the mouse is over the game that Scrolls instead that's really cool I love that now we code the up and down scrolling to this time we need a change pallet Dy and of course changing the joy y however be careful here because you'll find that scrolling is inverted scrolling up in the game Scrolls us down in the pallet with the same key why is that because we began began drawing the tiles in the pallet from the top and we work down but the level starts at the bottom and works up typical anyhow we just need to invert this Movement by subtracting Joy y from zero and now ah sweet order is restored cool but aren't we scrolling up a bit too far it should most certainly stop when we hit the top of the pallet tiles we need to fence it in and you've seen this all before if pallet DX is less than zero then set pallet DX to0 and now the pallet cannot go further left than zero do the same for pallet Dy setting Dy back to zero that sorts us scrolling past the top of the costumes next up up the far extents the right and down if pallet DX is greater than and then we need to subtract and I have 18 tiles in each row so pop that in there and we subtract from that the pallet width of five tiles if we exceed this we set the pallet DX back to yeah the same value 18 subtract five now we are restricted from scrolling too far to the right perfect one more to go if pallet Dy is greater than and set pallet Dy you know the value to use just enter 19 that's the right values from my ti set you can scroll down and check the current pallet Dy to find the best values for you and this one seems great for me right now we'll address this more though later on okay I'm feeling pretty good that we're nicely fenced in and can see all the tiles what I don't like is that the panel Scrolls so fast there are so many ways I could fix this but to be more generally useful I'll add a tick timer into the player Sprite so click into there now then make a variable named tick this time for all Sprites we'll set it to zero in the green flag script and then when I receive tick player we change tick by one that will now serve as a quick reference to how many game ticks have passed since the project started and if we click back into the tiles Sprite we can add an if Clause after setting the focus pet to one and check this tick variable I want to only allow scrolling every other tick use a greater than and a mod block if we mod tick by two then it will cycle between zero and one each game frame so if it's greater than zero then we can stop this script and that prevents it running every other frame that should slow it down by half let's give that a test there we go so what do you think of the speed I'd say that's just about right now before we move on hide all those variable reporter variables to clear the Clutter so guys we can happily access any tile from our pallet and begin laying them down into the game but the process of building up large multi-tile assets like this house is rather time consuming this is where we need to bring out the big guns and implement the ubercool tile tracing feature yeah how this works is as soon as we press the space key we record the current grid position of the mouse on the map we'll call this drag X and drag y then when the mouse moves in any direction we can detect how far it moved and replicate that relative movement in the tile palette and Tada we have our newly selected brush we can then update drag X and drag y to the new position and repeat the process again this shouldn't be so hard right so let's begin by finding the Define paint editor script this is where we are calculating the grid tile the mouse is over GX gy and also GX too separate these off and we'll put these in a new custom block naming it calculate brush position and run without screen refresh those three set blocks can go in there and drop the new calculate block where that came from the start of the drag begins when the space key is pressed if else checking for the space key okay to record the drag start position we make two new variables drag X for this Sprite only and drag y also for this Sprite only then set drag X two the current grid X of the mouse that's GX and likewise drag y to gy then when the space key is not pressed we reset these variables setting them both to the empty value cool if we run that you should find that when we hold down space we get the grid position appearing in the drag X and Y variable reporters here and when you release the space key the values disappear perfect so now we want to look for changes in drag positions bring in an if block putting it before the set drag X and Y right at the top here and we check if drag X is greater than the empty value so if we look at this the first time you press down the space key the drag X will be empty and so all we do is skip this if and set the drag X and Y variables but the next tick of our game we come in here again and we are still holding down the space key so drag X and Y will now have been set to the previous grid position but GX and gy are the current grid positions now they might have changed so if these are different then we can move our pallet selection by the same difference so change brush that's our selected pallet costume by the difference between drag X and GX that is GX subtract drag X now that is simple right that can't possibly work can it let's give it a shot first off we hold down space and try moving the mouse left and right and wow would you look at that it really was that simple now try holding space and then clicking the mouse down to paint the tiles too yeah that is beautiful I love that of course since we didn't yet include that drag y this doesn't yet work for up and down let's do that next duplicate the change brush only switch the GX for a gy and the drag X for a drag y That's not quite all though as you might expect every vertical movement in the grid space needs multiplying by the grid width or in this case the pallet width and that is negative 18 mustn't forget that pallet is flipped giving that a test now and that is looking Sweet let's try that on a large house now oh yes very cool what else can we try how about a tree I'll just plunk it down by this pathway ah okay so that is so cool but did you see how the tree has replaced the nice edge of this path why is that because we still can only place one tile in each grid cell well one tile and the background grass anyway to fix this we will need to extend our tile engine further to support layers of tiles but rather than rushing into this now let's draw things to a close here and we can look forward to adding the tile layering in a very exciting episode six well I hope you enjoyed this video if you did then please click the like button to show your appreciation and that means a lot as it helps my video to be seen by more people and the more people that can see them the more videos I can make also do subscribe to the channel so as not to miss the next exciting video and if you want to catch these videos in Early Access then you can join the channel membership with many perks like priority replies to comments and all sorts check it out but that's all we've got time for today so have a great week ahead and scratch on guys [Music]