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

Published by Kodex Academy – Learn. Build. Innovate.
Block Programming
Ultimate Scrolling Background & Character Animation Step-by-Step Scratch Tutorial

Introduction: Scrolling Background & Character Animation

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.

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 You'll Learn:

  • ✅ 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

👉 Watch the Full YouTube Tutorial Here:

Background Scrolling & Character Animation | Moving Sprites (by Omaansh Aggarwal)

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

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

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:

  1. Click on the sprite thumbnail (the cat) in the bottom-right area of the screen.
  2. Press the trash can icon to delete it.
  3. Now, click the "Choose a Sprite" button (the cat icon with a plus sign).
  4. 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:

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

Step 2: Designing a Custom Scrolling Backdrop in Scratch

Create a Background Sprite:

  1. Click the "Paint new sprite" button.
  2. Choose the Rectangle Tool from the costume editor.
  3. Select a grayish fill color for the ground (darker tones work best).
  4. Turn the outline width to 0 to avoid black borders.
  5. 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

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.

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.

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

Set the Layer Properly:

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

For the bear (character): go to front layer

For the background: 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

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

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

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

To make a seamless loop, duplicate the backdrop sprite.

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

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

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

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]

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

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 
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

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

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:

Stay updated with new content, free tutorials, and coding challenges!

← Back to All Blogs