Ultimate Scrolling Background & Character Animation | Step-by-Step Scratch Tutorial

Introduction: Scrolling Background & Character Animation

Welcome to this in-depth Scratch Scrolling Background & Character Animation tutorial, perfect for kids, beginners, and educators diving into the world of game development with Scratch.

Build Your First Side-Scrolling Game with Scratch – Perfect for Beginners, Kids, and Educators

If you’ve ever dreamed of creating your own video game or interactive animation, Scratch is one of the best places to start. Developed by MIT, Scratch is a visual block-based programming language that makes learning to code fun, creative, and accessible—especially for kids and beginners.

In this comprehensive tutorial, we’ll walk you through one of the most exciting concepts in 2D game development: the scrolling background and character animation effect. This type of animation makes your game environment feel alive and dynamic, just like popular side-scrolling games such as Super Mario Bros. or Sonic the Hedgehog.

But we’re not stopping there!

You’ll also learn how to:

Create a walking sprite animation (watch a bear walk smoothly across your screen!)
Implement a side-scrolling background using Scratch motion blocks
Build a custom backdrop directly inside a sprite (without needing the Backdrops tab!)
Duplicate background sprites for seamless infinite scrolling
Use forever loops to run animations and movements continuously
Manage layering so your characters appear in front of the background
Explore core concepts of Scratch game development for beginners

This is more than just a Scratch beginner tutorial—it’s a foundation for building your own fully playable side-scrolling games using block-based logic, creativity, and storytelling.

Start Here: Watch the Full Tutorial on YouTube

Before diving into the steps, check out this beginner-friendly Scratch tutorial on YouTube by Omaansh Aggarwal. It’s a visual walkthrough that complements this blog and will help reinforce key concepts as you build along.

What Are We Building?

By the end of this guide, you’ll have completed a polished Scratch animation that includes:

A walking bear sprite
A realistic side-scrolling effect
A looping background with duplicated sprite backdrops
Proper use of Scratch forever loops
Introduction to layer control
And many beginner-friendly tricks used by real game developers!

Whether you’re just starting out or teaching Scratch to kids in a classroom or workshop, this hands-on project offers a fun and educational way to learn Scratch programming basics.

Plus, with our enhancement features and extra code examples (toward the end of this post), you’ll be able to level-up your project with sound, jump mechanics, parallax scrolling, and more!

Tools You’ll Need

Scratch Editor (online at https://scratch.mit.edu or desktop version)
Basic familiarity with Scratch blocks
An animated sprite with multiple costumes (e.g., bear walking)

Scratch Coding: Scrolling Background & Character Animation

Let’s dive into the Scratch coding for Scrolling Background & Character Animation

Step 1: Setting Up Your Scratch Project – Remove the Default Sprite

Watch it in video: Adding a New Sprite and Resizing It – Adjusting Sprite Size for Better Fit

When you open Scratch (via scratch.mit.edu), you’ll notice that the default cat sprite is already on the stage. For this project, we’re going to use a walking bear sprite instead.

Here’s what to do:

Click on the sprite thumbnail (the cat) in the bottom-right area of the screen.
Press the trash can icon to delete it.
Now, click the “Choose a Sprite” button (the cat icon with a plus sign).
From the sprite library, search for “Bear walking” or any walking sprite you like.

🔍 Tip for kids: Look for a sprite that has multiple costumes. These costumes help us create the walking animation later.

Resize the Sprite:

💡 Tip: If your sprite is too large, resize it using:

By default, the bear might look too large on the stage. To fix that:

Click the sprite
Go to the “Size” field in the toolbar
Set it to 50

set size to 50%

This gives your game a polished look and leaves room for background elements.

Step 2: Designing a Custom Scrolling Backdrop in Scratch

Watch it in video: Creating a Custom Backdrop in the Sprite – Choosing Colors and Drawing the Background

Instead of using a regular backdrop, we’re creating the background inside a sprite. Why? Because sprites can move, which means we can scroll them from side to side!

Create a Background Sprite:

Click the “Paint new sprite” button.
Choose the Rectangle Tool from the costume editor.
Select a grayish fill color for the ground (darker tones work best).
Turn the outline width to 0 to avoid black borders.
Draw a long horizontal rectangle to represent the ground.

Add Some Details (Optional but Fun):

Use the Circle Tool to draw rocks or bushes.
Copy and paste them to scatter across your ground.
Vary the size and color to add realism.

🎨 Scratch custom backdrop design helps kids explore artistic skills while reinforcing coding logic. It also opens doors to storytelling.

This sprite becomes our scrolling background. You can name it something like Background1.

Step 3: Coding the Walking Bear Sprite in Scratch

Watch it in video: Animating the Bear: Costume Change Loop

Next, we bring our sprite (the bear) to life by animating its walking motion using costumes and Scratch’s forever loop feature.

Objective:

Make the bear look like it’s walking — not running or sliding!

Code the Animation:

Select the bear sprite.
Go to the Events category and drag:

when green flag clicked

From Control, drag a:

forever

Inside the loop, add these two blocks:

From Looks:

next costume

From Control:

wait 0.1 seconds

Why the `wait 0.1 seconds`?

Without the wait block, the sprite will change costumes too quickly and appear to be running instead of walking.

✅ This is a key concept in Scratch animation tutorial workflows.

What This Does:

Each costume frame shows a new walking position. The wait block ensures the switch happens smoothly, simulating realistic walking instead of fast running.

when green flag clicked
forever
  next costume
  wait 0.1 seconds

⏱️ Scratch forever loop example shows how loops are essential for continuous animations like walking, flying, or moving scenery.

Step 4: Fixing Sprite Layering in Scratch – Bear Behind or in Front?

Watch it in video: Fixing Sprite Layering in Scratch – Bear Behind or in Front?

If your background is hiding the bear or vice versa, it’s likely due to the layering order in Scratch.

Set the Layer Properly:

Select the bear sprite.
Add the following code under when green flag clicked:

when green flag clicked
go to front layer

But in this tutorial, since the background is a sprite too, we send the backdrop to the back:

when green flag clicked
go to back layer

This ensures the walking sprite appears in front of the background.

🎭 Scratch layer control explained: Layers determine which sprite appears on top. Always place characters in front of scenery for visual clarity.

Step 5: Scratch Scrolling Background Tutorial

Watch it in video: Scrolling Code Begins

To create the illusion of motion, we move the background to the left continuously.

Here’s how:

Code for Backdrop Sprite 1

when green flag clicked
go to x: 0 y: 0
forever
    change x by -5
    if x position < -465 then
        go to x: 460 y: 0
    end
end

📌 Explanation:

The backdrop moves left by 5 units every frame
Once it goes off screen (x < -465), it jumps back to the right (x = 460)

Step 6: Scratch Duplicate Sprite Background

Watch it in video: Scratch Duplicate Sprite Background

To make a seamless loop, duplicate the backdrop sprite.

Right-click the backdrop sprite → Duplicate
Change the initial X position of the second backdrop

Code for Backdrop Sprite 2

when green flag clicked
go to x: 460 y: 0
forever
    change x by -5
    if x position < -465 then
        go to x: 460 y: 0
    end
end

Now your game has infinite scrolling!

💡 Pro Tip: Keep backgrounds identical in design to prevent noticeable seams.

a. Scratch Motion Blocks Tutorial

You’ve already used:

change x by
go to x: y:
x position

These are crucial for movement-based logic in any Scratch beginner tutorial.

Read more on Scratch’s official motion block documentation: https://en.scratch-wiki.info/wiki/Motion_Blocks

b. Scratch Forever Loop Example in Action

In this tutorial, both animation and movement use forever loops.

Benefits of forever:

Runs continuously without manual triggers
Great for background scrolling, animations, and event loops

forever
   change x by -5

Bonus Enhancements for Your Game

Here are extra features you can add:

a. Add Parallax Effect (Multiple Scrolling Layers)

Add multiple layers of background sprites moving at different speeds for depth.

when green flag clicked
forever
    change x by -2  // slower layer
    if x position < -465 then
        go to x: 460 y: 0
    end
end

b. Add Background Music

Upload a music file and add:

when green flag clicked
play sound [background music v] until done

Or for looped sound:

when green flag clicked
forever
   play sound [looping music v]
end

c. Add Jumping Action

Use space key to make the sprite jump:

when space key pressed
change y by 50
wait 0.2 seconds
change y by -50

Make sure to limit how often jumping happens (add checks or cooldowns).

d. Add Start Screen or Menu

Use a broadcast message to transition between a start menu and game:

when green flag clicked
show [Start Screen v]
wait until <mouse down>
broadcast [start game v]

Conclusion

You’ve just built a complete Scratch scrolling background animation with a walking sprite from scratch! This project covered:

Animation logic
Scrolling effects
Backdrop management
Layering and sprite control

Want to expand this project? Add enemies, coins, or levels!

Call to Action

Don’t forget to check out the full video tutorial by Kodex Academy here: Background Scrolling & Character Animation | Moving Sprites (by Omaansh Aggarwal)
Like, comment & share the video
Visit kodexacademy.com
subscribe to the Kodex Academy YouTube channel for deeper Scratch content.

Happy coding with Kodex Academy! 🚀

Learn More with Kodex Academy

At Kodex Academy, we’re passionate about helping students learn coding in creative ways. This project teaches more than Scratch—it empowers young minds to build tools that work in the real world.

Explore more: