How to create a scrolling sprite project

Scrolling a Series of Sprites

The first scrolling example I'll show is a method in which you do not reuse any sprites. In other words, if you want your game to scroll through 10 frames (sprites), then you will need to create a series of 10 sprites to accomplish the scrolling effect.

For clarity, I'm using the word "frames" to describe the sprites because I compare them to frames in a viewfinder (if you remember those). However, you can think of them as tiles, images, scenes, and so on. I will refrain from using backgrounds to describe the scrollable sprites because that's a confusing word in the Scratch context.

Scrolling a series of sprites is the perfect approach for those who want full control over what each frame looks like, and it is especially nice for people who want to show off their drawing skills while creating a platform game. I'm still waiting to find my drawing skills, so I'll scroll several variations of the underwater background that is already included with Scratch.

In the FishChomp project, the underwater image is a stage background, so you'll need to remove it. Leave a white background in its place. Next, you can add the underwater background in as a new sprite. When you add a new sprite, browse up the directories in the New Sprite dialog box and navigate to the Background | Nature folder to find the image named underwater.

To demonstrate the effect, add the underwater image three or four more times. A fast way to get the sprites you need is to duplicate them from the sprite list by right-clicking on the thumbnail. Just be aware that if you duplicate the scripts in this way, the center of the sprite will be offset by 20 pixels on the x and y axis. Use the

go to x: () y: ()

block to ensure the new sprites are positioned to (0,0) and therefore line up.

Figure 1 shows all the scripts needed to make the frames scroll when the fish moves. The three scripts are shown together for comparison, but each script is attached to a respective sprite. Each of the scrollable sprites (e.g., frame0 and frame1) use the scrollx value to position the sprites. The main player in the FishChomp game is the hungry fish sprite. That script initializes the scrollx variable and controls the movement of hungry fish.

Figure 1: Scripts to scroll a series of sprites. The hungry fish script on the left changes the scrollx value based on which arrow key is pressed. The scripts shown are attached to sprites named hungry fish, frame0, and frame1.

The scrollx variable is so named because the scrolling occurs on the x axis or horizontally. It's also a common naming scheme for this task in the Scratch community. Moving left or right changes the value in the scrollx variable accordingly. In this example, moving hungry fish to the right will cause the sprite to scroll to the left. Moving hungry fish to the left, scrolls the sprite to the right.

The scrolling sprites use scrollx to calculate the x position of each sprite. In Figure 1, the two smaller scripts using the set x to () blocks will each be attached to their respective sprites (frame0 and frame1). I'm showing them side-by-side so you can easily compare the position calculation for the series of frame sprites.

The frame0 script constantly calculates a new x position based on a relatively simple calculation. At the start of the game, frame0 is positioned at the center of the stage (x=0).

The change (scrollx) by () blocks will likely need some experimentation. To reduce lag while scrolling on the Pi, a larger incremental change will smooth everything out. Instead of changing by 5 and -5, for example, 20 and -20 might produce better results for you.

What if you scroll to a scrollx value of -240? That will put frame0 at x=-240, which is calculated as -240+(480*0). The same scrollx value will place frame1 at x=240, calculated as -240+(480*1).

The multipliers in these scripts are important. The 480 corresponds to the width of the scrollable sprite. The 0 references the first scrolling sprite (frame0 in the example). It sets the first sprite's position at x=0. This sprite displays at the start of the game. The 1 references the second scrolling sprite (frame1). It sets the second sprite's position to x=480. This sprite is outside the viewable area and does not display at the start of the game. Like a viewfinder, the sprite only becomes visible when its x position forces part of the sprite into the viewable area. In Scratch, the viewable area is between x=-240 and x=240.

If you add a third scrolling sprite, then that sprite would need the same positioning script with the multiplier changed to 2, instead of 0 or 1. That would set the third sprite's starting position to x=960.

Figure 2 shows a visual representation of scrolling to a scrollx value of -240. As you see, the frame0 sprite is moving off the left edge of the stage while frame1 is moving in from the right edge. Only half of each sprite in the illustration is visible; as you scroll, the sprites position themselves in real time as they slide in and out of view.

Figure 2: When scrollx is set to -240, both the frame0 and frame1 sprites are visible on the stage.

Remember, you're only setting the x value of the sprites, and the location of the sprite is determined by the sprite's center point. You can adjust the center point of a sprite by editing each costume and using the set costume center option in the Paint Editor, if needed.

The option to scroll a series of sprites works well if you have unique frame designs or challenges or if you have a defined end point. That may not always be the case. Sometimes, you might want to scroll continuously through a couple of sprites.

Continuously Scrolling Sprites

To scroll two sprites continuously requires the same basic concept that I showed in first method. The hungry fish sprite will store its horizontal movements into the scrollx variable, which in turn will be used to calculate the positions of the scrolling sprites.

Figure 3 shows the revised scripts for each of the two scrolling sprites, and as you see, the calculation is different. If you look at a sample scrollx value of 240, you can calculate the position of each sprite. The first scrolling sprite would be at -240. That's calculated as -1*(240 mod 480). To solve, you need to know that mod returns the remainder of 240 divided by 480, which is 240. Now the calculation becomes -1*240.

Figure 3: The scripts to position each of the two scrollable sprites in the continuously scrolling example.

If you want to check the calculations as you move hungry fish, click the checkbox next to the x position block in the Motion pane to enable the stage monitor for the two scrolling sprites. You'll observe that the x position values for the two sprites always differ by 480 because the second scrolling sprite subtracts 480 from the mod calculation before multiplying the result by -1.

The result of this scrolling method is a never-ending scrollable frame. Because the script only uses two sprites, the scenery remains constant, but for a goldfish-eating contest, that seems appropriate.