Hello fellow Scratchers,
Do you want to know how to create scrolling backgrounds in ‘your’ Scratch projects?
I’m Griffpatch, and I can’t wait to share with you how I would go about creating this cool effect.
Now there ‘are’ simpler ways to create side scrolling in Scratch,
but these don’t adapt as well to projects that requires more control over their scrolling,
like those that typically use CAMERA X & Y, or SCROLL X & Y variables.
(If you’ve ever followed any of my scrolling project tutorials,
then you will know all about these, but if not don’t worry – all will be revealed)
So jumping right in, Make a new sprite, naming it “Background”.
Chose a fill color of green, and outline of transparent (or none).
We can draw out a large rectangle filling the lower half of the drawing canvas,
making sure to slightly overlap the left, right and bottom edges of the screen area.
Switch to the Reshape tool, and click on the top line to add a new drawing node.
These points default to curve points, so just click and drag them to begin
shaping some nice mountains from the rectangle. We can repeat this for the entire shape. It will
be useful to try to keep the left and right points at the same height. You’ll see why later.
Now jump back to the code tab, and make a new variable named “CAMERA X” for all sprites.
With it still visible on the stage,
right click the CAMERA X variable reporter and switch it to slider mode.
Right click it a second time, and chose “sliders range”, changing the Maximum value to be 2000.
I’m now able to slide the CAMERA X value all the way up to 2000, cool – We’ll use
this to pan the camera across our scene. So, When green flag clicked, we’ll enter a forever
loop, setting the x position of the Background sprite to 0 – CAMERA X (Why the 0 minus?, Well
as we move the camera to the right, the background wants to move to the left… so we need to invert
the number to get the desired scrolling effect.) We’ll also set the y position to 0.
Ok, run that – I can now use the CAMERA X to scroll the background
around nicely, but do you see how the costume is getting stuck on the edge and not scrolling
off the screen? This we will fix right away. Open the Costume Editor and select the brush tool.
Now because we are never going to scroll down below the bottom of this costume, we can take the
liberty of painting a small dot diagonally down from the bottom left, and another diagonally down
from the bottom right, like so. This will extend the distance the background can scroll off screen.
Give it a test! Nice – it goes right off screen now. I’m not using the sizing trick because often
these backgrounds are already really big and that wouldn’t work here as easily as this technique.
Now we want to add another sprite to the right of the first so that the scene scrolls for longer.
Before that, we’d best do a little housekeeping in preparation for the use of clones.
Separate off this forever loop, and broadcast a new message of “begin”.
We’ll bring in a matching when I receive begin to kick off the forever
loop. Hmm,
do you want to just grab and drag Scratch cat on the stage to bring him in front of the background…
that’s better. Ok, make sure we are still in the background sprite scripts.
Now to allow us to keep track of two differently positioned backgrounds,
make a new variable, naming it simply ‘x’ and make sure to make it “for this sprite only”
that’s important this time to ensure each clone does indeed have its own position.
Set x to 0, and then replace the 0 in the set x position over here with the x variable.
This will offset each sprite by its own value of x… So, to add the new clone further to the right,
drop in a create clone block, and right away change the x variable by 480
(that’s one entire screen width). And run the project,
ah great – The scene has apparently doubled in length,
this being due to the new clone. And I can scroll back and forward with them both in view.
Can you see the seam where the two sprites meet here?
We can improve the join now to make it look better – With the project still running and the costume
join visible, open the costume editor and with the Reshape tool, select the left most point.
Now, using the up and down arrow keys on your keyboard
you can shift the position of this point up & down, watching the seam between the two
costumes in the project window until they line up perfectly. There – Beautiful!
Of course, now we can no longer tell where one sprite ends and another starts, so duplicate the
first costume and, for the time being, change the costumes color to make it a little darker.
We’ll use the two costumes now for the two sprites by dropping in a “next costume” block
after the first clone is made, and oh yeah, we should also set the costume to costume 1
right at the top here to ensure we know which costume we are starting on.
Give that a run, yeah now we can easily see where the two sprite clones start and end.
Ok, this is where things get a little more interesting. We now want to create a loop
in our scrolling background so that as one moves off the screen it re-appears
on the opposite side of the screen, a cycle if you will. We could do this with a number
of IF conditions and some bound checks, but for us keen coders, there is a better way.
Let’s ask Scratch cat for some help explaining this one.
In the scratch cat sprite, add a when green flag clicked, then a forever loop. And get them to “say
CAMERA X”. Ok, no problem there, we already know the value of CAMERA X – so bring in the MOD (or
Modulo) operator, and apply it to CAMERA X. On the right we’ll use the stage width of 480.
Now run the project and see what effect this has on the CAMERA X. Nothing initially, but as soon as
CAMERA X gets to 480, the CAMERA X MOD 480 forces the number back down to 0 again. This process
repeats as we keep increasing CAMERA X, cycling round and around again. This is a wonderfully
useful operator to use in our project as it represents exactly what we are trying to do
with the x position of our background sprites with the looping around and around. However,
since we have two sprites of 480, we need to loop for 480 * 2. Now this loops all the way up to 960
before resetting back down to 0…perfect, that will cover two screens.
Let’s make use of this in our Background sprite.
Housekeeping time first, make a new variable named “screen x”,
and set it to the “x – CAMERA X” from here. Then “set the x position to screen x” below.
And now, we can use that mod on “screen x” , and on the right 480 * 2.
But if we run the project we can see we are not quite there yet, the position of the sprites are
all off, appearing far too much to the right, and never getting past the half way point to
scroll further left. To be on the left, they would need a negative x position,
but the mod operator never returns negative numbers, instead it moves the sprites further
off to the right. We need to compensate for this by subtracting 480 from the result.
And Oh yeah! Finally, this is looking really good. The sprites are cycling around perfectly.
We could stop there, but why stop now – We can take this further and add in layers!
We’ll start with the sky - Switch to the Stage sprite, and we’ll add a blue sky rectangle,
and a yellow sun. I’m holding shift while drawing the sun to make it a perfect circle.
If we run this, you can see that the sun does not move with the mountains,
this is just as I wanted – It’s called a parallax effect. The things that are further
away from the camera move slower than those that are closer to the camera – in the case of the sun,
is sooo far away that it apparently doesn’t move at all, which is fine.
This can be a really nice effect, and we can go further with it by creating more layers of
parallax, each at a different distance from the camera. We’ll do this by adding a new variable
named “scroll speed” for this sprite only. Set it to 0.25 after the when green flag clicked.
We wants the mountains to scroll at a quarter of the speed of the camera
as they are far off. So multiplying (not the x, but just the) CAMERA X by scroll speed.
If you run the project now we find that the mountains do not scroll anywhere near as fast
or far as they did before this change. Now for the fun bit, duplicate the
Background sprite, and name the duplicate sprite as “foreground”.
In the costume editor, delete the second costume, and then in the first costume, I’m carefully
removing the costume shapes, but leaving in the two small dots we added for off screen scrolling.
Next, create a lighter green rectangle covering the lower third of the canvas to represent
grass for Scratch cat to walk on. Now, running the project
does not show up the foreground sprite at all… My guess is it must be behind all the other sprites.
Stop the project, and then we can drag them about on the stage, the last one moved always
becomes the frontmost sprite, so once I can see them all, move the foreground sprite,
and then lastly the cat sprite, and there, they should now be in the correct
order. So, run the project again. Yeah – Better, we can see the grass.
Before I continue, I’ll just delete the scripts in the cat sprite,
and hide all the variable reporters, all except the CAMERA X slider that is - there.
Ok, let’s add something more discernible to the foreground costume. I’ll make some cute little
mushroom stone things – With a nice highlight, and an awesome little shadow to make them pop – That’s
just the grass color, but made a little darker. Then duplicate the entire costume and we’ll create
another page of the scene. This time I’ll make a nice tree… hmm, but what color… Mushroom,
pink, or green… nah, I guess pink – ha. Time to check this out, I’ll run the project again
-Yeah this is cool – But as yet it’s not got that neat parallax effect because
the foreground and background mountains are moving at the same speed.
So, we’ll just change the “scroll speed” back up from 0.25 to 1 for the foreground, and run the
project again. Oh yeah, what a transformation, the parallax effect makes the whole scene just
really pop, it feels like it has real depth now – That always gets me really excited.
Now you might have been looking at this project, and wondering, what if we want more than 2
costumes making up our scrolling scene, that way they can be longer and more interesting?
Well of course you might, and there are two approaches to this depending on your project,
but I’ll show you the quick and easy one today. First create your 3rd costume…
then we change the 480 * 2 to be 480 * (you guessed it) 3, for 3 costumes. Finally,
we need to clone the extra 3rd sprite. We just duplicate these three blocks (the create clone,
next costume & change x by 480). We might even consider putting all these in a repeat loop if
we were to want even more costumes. Running that now, and all three costumes
are now in use in our scene – super! I know some people will have noticed,
so I’ll bring it up now, that the first costume you see when CAMERA X is 0,
is actually the second costume, not the first? This may not be an issue or bother you,
but if it does, then take a quick look at the math we used here to position the background sprite.
We are subtracting 480 from the final position of the sprite to allow it to scroll offscreen to the
left, but this is also scrolling our first costume off screen right away. So, if you really want
the first costume to appear first, then simply compensate by “adding 480 to screen x” within the
mod. There, and now the foreground is now showing the correct first costume right away – So we can
do the same in the background sprite too if you desire, but otherwise that step can be skipped.
So, you may already have a project in mind to use with this scrolling background,
but to let you see it in action, let’s just add a better Scratch Cat sprite – I’ve included a
link under this video to project that includes a sprite with the costumes for the new Scratch Cat
where I created a full 16 frame run cycle for him. You are absolutely free to backpack them
and use them in your Scratch games. I’m taking the 3rd sprite, the one without the rucksack.
Drag the sprite into our new scrolling background project
and we can get rid of the old scratch cat. Ok, these scripts can be deleted, and I’ll
set up a forever loop under a green flag block, simply switching to the next costume.
So that looks really quite odd – It’s happening because there are more than
just walking costumes in this sprite. The walking ones start at costume 7
and run until the end. So, If costume number < 7, then set costume to “run-01” (that’s costume 7).
Much better – that looks excellent! So we can make the level automatically
scroll along with Scratch Cat’s run cycle by adding a change CAMERA X by 16 to the loop.
Yeah, look at him go! Awesome! Hmm, perhaps I drew my costumes all
a little too low down, let me just tweak them up a bit… There :D
And so – with this you should be able to add scrolling backgrounds into your own games.
For example, here is the same scrolling background code used in my tile scrolling platformer
tutorial. You can look forward to seeing this very soon. Looking really good right?
You may notice that we also have a bit of up and down scrolling here too.
Well, this is not hard to script, if we just look back at our scripts again.
We need to add in the CAMERA Y variable, for all sprites.
Then where we are setting the y position to 0, we now set them to 0 – (CAMERA Y * scroll speed).
We do the same in the foreground sprite, and we can make the CAMERA Y into a slider too.
Then if you are following my example project here with Scratch Cat, we should
make a quick change to Scratch Cat’s scripts to prevent him looking like he’s flying off.
Set their y position to “-80 – CAMERA Y”.
Run that… and it’s actually a little hard to see the effect while Scratch Cat is hurtling
sideways to fast, hold on, let me remove the change CAMERA X so you can see better.
There, now I can scroll up and down and you can see the parallax effect working much clearer – So
that’s great, and it can look even better when you have a game that already has a good scrolling
scripts. This is especially true for the vertical scrolling as seen in the clip of my Mario game.
This technique will work in most projects though,
and can even be adapted to be used as the base for scrolling game levels themselves!
Well, I do hope that helped, and I will be showing you exactly how I use this in my tile scrolling
project very shortly. In the meantime, get this into projects of your own, and I hope you will
create some fantastic, some weird and wacky, but all awesome landscapes for me to check out! So,
If you enjoyed this video, smash the like button, and don't forget to subscribe to the
channel to avoid missing my next exciting video! - Thanks for watching, and Scratch on guys!