[Intro] Hello Fellow Scratchers – This
is episode 5 of our amazing tutorial, coding a Zelda style RPG in Scratch,
and today we are coving some awesome topics Split screen scrolling – Drawing two independently
scrolled areas in a Scratch project is tricky without leaving a thick border between them.
To get around this we’d need scratch to support clip regions, and… it doesn’t. But
if we limit the palette 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 palette – But rather than having yet
another set of controls for both the level and the palette, 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 over the palette,
the keys scroll that instead. Very efficient! And finally, and I’m super excited about this one,
Sprite Sheet Tracing – Where holding down the space key locks the movements of the editor,
and palette cursors, moving them in unison and allowing us to easily trace large multi costume
structures into our maps! That’s so 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, and as always, take the time to save your project as a
new copy, for this is RPG episode 5! [Scrolling Palette]
Right! Let’s get this right hand tile palette scrolling!
Click into the Tiles sprite. Just like how we have a CAM X & Y
for scrolling the main game map, now we need similar variables for the palette.
Make a new variable, “palette dx”, for this sprite only.
And while we are at it, make it into a slide on the stage.
Then create another variable, “palette dy”, for this sprite only, and make it a slider.
We’ll start by making the palette slide to the right.
The palette drawing code is called from here “Paint Palette”, so find that custom block,
and yeah. We begin painting tile number 20 (set gidx to 20) here.
To scroll it right, we just add “palette dx” to this. Make sure the project is running,
And yep, that was easy! So what about palette dy?
We’ll need to add that to gidx again, but, as with all grid lists, to move up and down,
we must multiply the y (palette dy), by the number of tiles in a row,
and for this palette that is 18. Ok, so sum that all together again,
and… Success! We finally have access to all those nice costumes 😊 What fun! Here’s a nice bed 😊.
You get the general idea… [Focus Panel – Deciding
which UI element has focus] Now to make the panel scroll using the
keyboard. The main game world is controlled using the cursor keys or WASD. But if we are clever,
detecting which side of the screen the mouse cursor is over, we could switch the same keys
to scroll the right hand tile palette too. We just need to know which side has focus.
Right, scroll over to the when I receive Paint – Background.
We’ll make a new variable, focus palette, for this sprite only.
And before we check if we are in the editor, set focus palette, to the empty value.
But then, when we begin painting the editor, here… (I’m using Scratch Addons Dev Tool extension
to quickly jump to the custom block), Paint Palette. We can add an IF block after setting
the palette width, and check whether, mouse x, is greater than, 240 (the right edge of the screen),
subtract the palette 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 palette” to 1.
Then let’s quickly test this is working fine, and as I hover over the tile palette,
the focus variable toggles to 1. [Disable Player Motion]
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 & joy y variable to represent our controls, but do you notice how we don’t move the
player unless “joy dist” is greater than 0? 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 palette variable,
so using the sensing thing or thing block, for the tiles sprite, select the focus palette variable.
Comparing it to the empty value. Great, so when the focus palette is not set,
we continue as normal, setting joy dist. But if the focus palette IS set, Just set joy dist 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 palette, the player can no longer be moved with the
keyboard. That works perfectly!!! Great work. [Scrolling the Tile Palette with the keys]
Click back into the Tile sprite, and we’ll activate the keys to scroll this area instead.
Drag in a change “palette dx” by. And we need that joy x variable from the
player sprite… So use the sensing thing of thing block, 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
palette, 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, love that.
Now we should code the up and down scrolling too. This time, we need a change palette dy,
and of course changing by joy y… However, be careful here because you’ll find the scrolling
is inverted! Scrolling up in the game, scrolls us down in the palette! Why is that? Because we begin
drawing the tiles in the palette from the top and 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 0.
And now, ahhh, sweet order is restored :D – Cool. [Fencing the scrolling of the palette]
But, aren’t we scrolling up a bit too far? It should most certainly stop when we hit the top
of the palette tiles. We need to fence it in. You’ve seen this before, IF, palette dx is less
than 0, then set palette dx to 0. Now the palette cannot go further left than 0.
Do the same for palette dy. Setting dy back to 0… That sorts
us scrolling past the top of the costumes. Next up, the far extents, right and down.
If palette dx is greater than. Then we need a subtract, I have 18 tiles in each row,
so pop that in there, and we subtract from this the palette width, of 5 tiles.
If we exceed this, we set the palette dx back to, the same value, 18 – 5.
Now we are restricted from scrolling too far to the right…
One more… IF palette dy >,
and set palette dy… The value to use… just enter 19… You can scroll down and
check the current palette dy to find the best value, and this seems a good one right now.
We’ll address this more later. [Reducing the Palette scrolling speed]
Ok, 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 too fast. There’s so many ways I could fix this, but to
be more generally useful, I’ll add a tick timer into the Player sprite. Click into there now.
Then, make a variable, named TICK, this time for all sprites.
We’ll set it to 0 in the green flag script.
And then, when I receive Tick Player, we change TICK by 1. 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 in an IF clause after setting the focus
palette to 1, 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 2, then it will cycle
between 0 and 1 each game frame, so if it’s greater than 0, then we can
stop this script. That prevents it running every other frame. 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.
Before we move on, hide all those
reporter variables to clear the clutter. [Tile Tracing using Relative Positioning]
So guys, we can happily access any tile from our palette 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 uber cool tile tracing feature. 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 & 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 ta-da we have our newly
selected brush. We can then update drag x & drag y to our 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 gidx 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 from where they came.
The start of the drag begins when the space key is pressed, IF ELSE, checking for the space key.
Ok, to record the drag start position, make two new variables, drag x, for this sprite only,
and drag y, also for this sprite only.
Then set drag x to, the current grid x of out mouse, that’s gx. And likewise, drag y
to dy. 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 & y variables 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 & y, right at the top here, and we check if drag x > the empty value.
So if we look at this, the first time you press down the space key, drag x will be empty, and
so all we do is skip this IF and set the drag x & y. But the next tick of our game we come in here
again and are still holding the space key, drag x & y will be set to the previous grid position…
but gx & gy, they are the new grid positions. If these are different then we can move our
palette selection by the same difference. Change brush, that’s our selected palette costume,
by the difference between drag x & 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’ll hold down space, and try moving the mouse left and right… Oh 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
the 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 grid space needs multiplying
by the grid width, or in this case the palette width. And that is, negative 18. Mustn’t forget
that the palette is flipped! Giving that a test now…
And that is looking sweet! Let’s try that on a larger house!
Oh yep, very cool. What else can we try? How about a tree? I’ll just plonk it down by this pathway…
Ah, ok – this is so, 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 tile grid cell… Well, one tile, and the background grass anyway.
To fix this we will need to extend our tile engine further to support tile layers…
[Outro] But rather
than rush into that now, let’s draw things to a close here, and we can look forward to adding
tile layering in a very exciting episode 6. Well, I hope you enjoyed this video, if you did,
then please click the like button to show your appreciation – That means a lot as it helps my
video to be seen by more people, and the more people that 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 video in early access, then you can join the channel membership,
with many perks like priority reply to comments, and all sorts, check it out.
But that’s all we have time for today, so have a great week ahead, and Scratch on guys!