Shall We Learn

.

Instead of diving right back into the Mini Mario game to add the scrolling effect, I would like to take this lesson to do the best I can to explain how scrolling works,

The trick to have the scrolling effect in a Scratch game is to add multiple Platform Sprites. A Platform Sprite is an immobile sprite that looks like a stage background but it can interact with other sprites on stage.

To view or print the PDF copy of this lesson, click  HERE.

Think of the Stage as a viewable area of an infinitely long strip. This viewable area starts from x = -240 and ends at x = -240. We will just consider the one-dimensional reference frame and ignore the y-axis for now. The reference frame does not change when sprites move.

The viewable area also does not change when sprites move.

To illustrate how scrolling works, let’s use these two platform sprites that each spans 480.

Platform 0:

Platform 1:

Line them up side by side, starting from the left edge of the Stage (the viewable area):

,

The Whole Strip	What’s Shown on Stage
Before Scrolling
Scroll to the right by 120
Scroll to the right by 480

When the game first starts, the red platform’s center is located at x = 0 and takes up space from x = -240 to x = 240; the green platform’s center is located at x = 480 and takes up space from x = 240 to x = 720. Both have width of 480.

240 – (-240) = 480 ß width of the red platform sprite

720 – 240 = 480 ß width of the green platform sprite

The orange box represents the Stage and only area inside the orange box is viewable. The Stage is 480 in width (x-axis) and 360 in height (y-axis). Only the x-axis is shown because we will only be scrolling left or right.

If we let STAGE_WIDTH be a global variable for the width of the Stage, and PLATFORM_INDEX be a local variable of each platform sprite, which specifies where the platform is on the strip, then we can represent the starting positions for both sprites as PLATFORM_INDEX * STAGE_WIDTH ( * is the multiplication sign).

STARTING_POSITIONRED = PLATFORM_INDEX * STAGE_WIDTH = 0 * 480 = 0

STARTING_POSITIONGREEN = PLATFORM_INDEX * STAGE_WIDTH = 1 * 480 = 480

Imaging you are driving a car and are moving forward (scrolling to the right). Though the car is moving forward, but looking from inside the car, the landscape is moving backward relative to you.

In the same way, to move forward from the user’s perspective, we move the platforms backward. Therefore, if the user scrolls to the right by 120, then the positions for both platform sprites should be:

POSITIONRED = STARTING_POSITIONRED + SCROLL_XPLATFORM = 0 + (-120) = -120

POSITIONGREEN = STARTING_POSITIONGREEN + SCROLL_ XPLATFORM = 480 + (-120) = 360

 

Moreover, if the user scrolls to the right by 480, then the positions for both platform sprites should be:

POSITIONRED = STARTING_POSITIONRED + SCROLL_XPLATFORM = 0 + (-480) = -480

POSITIONGREEN = STARTING_POSITIONGREEN + SCROLL_ XPLATFORM = 480 + (-480) = 0

We also need to hide a platform sprite if its center is larger than 480 or smaller than -480.

When the game first starts, the green platform is hidden because its center is at 480.

After scrolling to the right by 480, the red platform is hidden because its center is now at -480.

Now we are ready to put the scripts together. Below is the script for the red platform or Platform0.

The green platform or Platform1 has exactly the same script as the red platform or Platform0, except that its my_platform is 1 instead of 0.

 

To view or print the PDF copy of this lesson, click  HERE.

Download the demo project for this lesson HERE.

< Prev		Next >