Simple Game Mechanics in Scratch:
Screen Scrolling

Because sometimes one screen is not enough.

A common mechanic in video games is having a game level or environment that is larger than what can fit on screen at any one time. Since Scratch is a web browser based programming environment, its screen size is limited to 360x480 and Scrolling is important for making games that have larger worlds to explore. Scrolling in Scratch can be done along the X Axis (Horizontally), the Y Axis (Vertically), or along both Axises at the same time (Open Space). The code in Scratch has a few different parts and looks something like this:

There are two important sections of code to make scrolling happen. The first section is stored in the Backdrop of the Scratch Program since it is made from global variables (variables that effect ALL sprites within the program). The second section is stored within a sprite that is used for all of the backgrounds.

Both the Backdrop and the Sprite are used in Scrolling, but it is possible to contain all the code inside the sprite.

The main Variables that make background tiles move are ScrollX and ScrollY. A Game with only horizontal scrolling would not need the ScrollY variable, and a game with only vertical scrolling would not need the ScrollX variable. Other important variables used in this style of scrolling code are the MapX and MapY variables. These variables serve two purposes. First: They keep the scroll tiles repeating so that only a single sprite is used. Secondly: these variables control which costume the sprites display to create the illusion of a much larger space. The Mario Scroller I remixed used individual sprites as background tiles, but in this style of simple scrolling, the Background Tile Sprite uses clones of itself and different costumes to save space. Notice how in this remixed scroller, only the ScrollX variable is used.

The MapX and MapY variables are used with the join command to constantly update the costume of the sprite to a naming convention specified. Below is an example of the Join command used with a health meter on a space ship:

A using the two variables to control the sprite costume for map squares, the Join command uses a more complex set of operators:

The Prefix "Map" is joined with "1" then "_" and then the variable MapX with a -1 operator. In more complex XY scrolling, the first number is for MapY and the second number is for MapX. Keeping this in mind, you can design complex background environments for your games and explore larger worlds.