Lesson 1 of 0
In Progress

Making a Scrolling Backdrop

Making a Scrolling Backstage

Making a Scrolling Backstage

In this activity, we will make our Background Scroll Continuously.

We have created previously script to make the sprite move which we are going to use in this activity to scroll backdrop. You can make more than one scripts run simultaneously in one program.

Scrolling Backstage

To choose the Backdrop click on the icon and go to the search option and select the Backdrop as per your choice and which is suitable for sprite environment.

Choose Backdrop

After selection go to the backdrop editing option and click on the picture for export. and save the picture in device.

Export Backdrop

. For scrolling the background, we must create the sprite as background. After exporting just delete the backdrop.

Choose Sprite

Click on upload sprite and choose the backdrop image from device and also add the sprite of car from search option.

Upload Sprite

It will overlapped on each other. To avoid this click on the background stage which you have selected, and let us script it as below.

1. To make the sprite as background, Car should be in front of the screen. For this Scratch has the Go to front layer () block available in the Looks tab.

Go To Front Layer

2. Add the block and change front to back layer. Make the script shown below. You will find the blocks used in the mentioned palettes:

  • when flag clicked – Event
  • Go to Back layer ()--Looks
  • Go to x (0) and y(0) ---for placing the background at center.(Motion)
  • Forever – Control
Background Script

3. For Scrolling Background, it should move right to left to the identified the position, let’s go to the x and y position. To identify the position, refer the below image for X axis.

X Axis

X = 0

1. To move the background, use the block change x by 10 and change 10 to -5 to move right to left. And add this block in forever loop.

Change X By -5

2. Now Background will just move to the edge of the screen, to look it continuously moving. Add the if then block from control event as shown below.

If Then Block

3. It will show gap now in between the scrolling image to avoid this click on background sprite. And make a duplicate of that, and just edit the block go to x 0 to - 460. As shown below.

Duplicate Background

4. Drag the go to x:(0) y:(0) and drop it in the if() then block and change the x value to 433.

5. Click the green flag to start the animation.

Congratulations on making your first background animation! It was fun, wasn’t it? Now, let’s move forward with the course.

Final Output 1
Final Output 2