ClassX Video Lessons Youtube Channel Scratch Team How to Make a Scrolling Background in Scratch | Tutorial
Hello everyone! Today, we’re going to learn how to make a cool scrolling background in Scratch. This means you’ll create a project where the background moves behind your character, just like in video games. Let’s get started!
First, we need to pick a character for our project. In Scratch, characters are called “sprites.” Click on the “Choose a Sprite” button and pick any character you like. For this example, I’ll choose a character named Avery who is walking.
Now, let’s make a background. In Scratch, the background is called the “stage,” but it doesn’t move. So, we’ll create a sprite to act as our moving background. Click on “Choose a Sprite” and then “Paint” to draw your background. Make sure the edges of your drawing line up so it scrolls smoothly. You can draw a rectangle for the ground and another for the sky.
Add some fun details like rocks or trees. To make a rock, set the color to gray, draw a circle, and use the editing tool to shape it into a rock.
Oops! Where did Avery go? She’s hiding behind the background sprite. We need to move the background to the back. In the “Looks” category, find the block that says “Go to Front Layer” and change it to “Back.” Now Avery is in front!
Let’s make the background move! In Scratch, we use the X coordinate to move sprites left and right. X is 240 on the right, 0 in the middle, and -240 on the left. Set the background sprite’s X to 0 and Y to 0 to start in the middle.
To move the background to the left, use the “Change X by” block. If you want it to move left, use a negative number. Put this block inside a “forever” loop to keep it moving.
When the background reaches the left side, we want it to start over on the right. Use an “If Then” block to check if the X position is less than -460. If it is, set the X position to 465 to move it back to the right side. Put this inside the forever loop.
You’ll notice a blank space as the background moves. To fix this, make a copy of the background sprite. Right-click on the sprite and click “Duplicate.” Set the duplicate’s X position to 465 so it starts on the right and fills the blank space.
You can add more fun by creating different scenes. Duplicate the background and change some details, like replacing a rock with a plant. Use the “Next Costume” block to switch between backgrounds as your character moves.
That’s it! Now you know how to make a scrolling background in Scratch. Have fun creating your own projects, and remember to keep experimenting. Scratch on!
Create Your Own Story: Think about a story you want to tell with your scrolling background. Draw a new background sprite that matches your story. For example, if your story is about a jungle adventure, add trees, rivers, and animals. Share your story with a friend and explain how the background helps tell your story.
Observe and Report: Go outside or look out your window. Notice how the scenery changes as you move. Draw what you see in a sequence of pictures, like a comic strip. Then, try to recreate this sequence in Scratch by drawing new background sprites and making them scroll. Discuss with your class how real-life movement is similar to the scrolling background in Scratch.
Experiment with Speed: In your Scratch project, change the speed of the scrolling background by adjusting the number in the “Change X by” block. Try making it move faster or slower. How does this change the feel of your project? Write a short paragraph about how speed affects the mood of your game or story.
Sure! Here’s a sanitized version of the YouTube transcript:
—
Hi everyone! It’s Zoë from the Scratch Team, also known as Zinnea. Today, I wanted to show you how to make a scrolling background in Scratch. By the end of this tutorial, you’ll be able to create a project where the background moves behind your character. Let’s get started!
First, let’s pick a character for our project. You can click the button that says “Choose a Sprite” and select any character you like. I will choose Avery walking.
Now, let’s create a background. The actual background in Scratch, known as the stage, can’t move. If you click on it, you’ll see it says “Stage Selected – No Motion Blocks.” So, what we’re going to do is create a sprite that will serve as the background, and that will be the moving element.
I’ll hover over “Choose a Sprite” and click “Paint” to draw a scrolling background. It’s important that the edges of the drawing line up for a smooth transition. My favorite way to do this is to create one flat rectangle for the ground and another for the sky. It’s good for these edges to align.
I also like to add some detail that can pass by. One of my favorite tricks is to set the color to gray, draw a circle with the circle tool, and then use the point editing tool to drag the point upward to create a rock.
Now, where did my character Avery go? She’s behind the backdrop sprite. We want to make this background sprite be in the back layer. There’s a block for that in the Looks category. If you scroll down, you’ll find a block that says “Go to Front Layer.” You can click “Back,” and there you go!
Next, we want to make the background move. In Scratch, you control how far a sprite is from one side of the screen to the other using the X coordinate. X is 240 on one side, 0 in the middle, and -240 on the other side. Let me show you with Avery, as it will be easier to see. If I set X to 240, she moves all the way over there. If I set X to 0, she goes to the middle.
The Y coordinate controls how high up a sprite is. We can use these X and Y numbers to move the background sprite. If we set X to 0 and Y to 0, it will be in the middle, which is a good starting point. Let’s have it go there when we click the green flag, and then we want it to move to the left. To do that, we can use the “Change X by” block.
Let’s try it out! Okay, that makes it move, which is what we want, but the backdrop is moving to the right, and I want it to go to the left. We just need to use a negative number. Great! Now I want it to keep moving to the left, so I’ll put this block inside a forever loop.
Now it’s moving, but it’s stuck on one side of the stage. If it reaches that side, I want it to go back and restart on the other side. To do this, we can use an “If Then” block to check if it’s over there. We can find the current X position of the sprite in the Motion category.
Right now, we can check what our sprite’s X is. If we drag the backdrop sprite to the left, we can see its X position. We can use a “Less Than” block from the Operators category to check if the X position is less than a certain value. Let’s use -460, which is the X position when the backdrop is all the way to the left.
If the X position is less than -460, we want the backdrop sprite to go back to the right side. I’ll set it to X = 465 and Y = 0 to start over there. Let’s put this inside the forever loop. Now, every time it changes X by -5, it will check if it’s all the way to the left, and if it is, it will go back to the right side.
Now you’ve probably noticed a blank part of the screen. The reason this happens is that when our backdrop starts moving left, we need something to fill in that space. We can make a copy of this background to fill in the blank spot. To copy a sprite, right-click on it and click “Duplicate.”
Now we have a copy of the background. However, both sprites are starting in the same place. To fix this, let’s have the duplicate start all the way to the right. If I set its X to 465, the main one will start in the middle, and the duplicate will follow it, filling in the blank spot.
Now, there are many things you might want to add to this. For example, if you want different scenes to appear as the character moves, you can duplicate one of these backgrounds and modify it. You could delete the rock and draw a simple plant, then add a “Next Costume” block to switch backgrounds.
That’s what I wanted to show you today! I hope this video helped you out. There’s also a link in the description to a starter project I made. If you want to, you can open that project and remix it. Have fun making scrolling backgrounds, and see you next time! Scratch on!
—
This version removes any informal language and maintains a professional tone while keeping the instructional content intact.
