Making a Scrolling Backdrop
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.
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.
After selection go to the backdrop editing option and click on the picture for export. and save the picture in device.
. For scrolling the background, we must create the sprite as background. After exporting just delete the backdrop.
Click on upload sprite and choose the backdrop image from device and also add the sprite of car from search option.
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.
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
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 = 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.
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.
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.
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.