In a horizontal scrolling game, the player sprite is always visible, but the non-player sprites can move in and out of the stage. The non-player sprites in the Hunger Run game include the background sprites (such as bricks) and interactive sprites (such as food items). Even when a sprite moves in and out of the stage, it still exists in the game space. In a 2D scrolling game, the game space can be represented as 2D grids, which consists of 2D unit grids as shown in the following screenshot. Each grid unit is the same size as the stage, 480 pixels in length (L) and 360 pixels in width (W).

To keep the player sprite visible while scrolling, we keep the player sprite fixed in the grids but move other sprites horizontally or vertically, depending on the direction of the scrolling. To scroll Marco horizontally by N steps, move the other sprites to the opposite direction by N steps using the following steps:

The following screenshot illustrates how to scroll Marco to the right by N steps:

To simulate scrolling Marco vertically by N steps, move the other sprites also in the opposite direction by the same amount using the following steps:

The following screenshot illustrates scrolling Marco up by M steps:

Since Hunger Run game is a side-scrolling game, lets simplify our matrix grids to a row, as shown in the following screenshot. There are five grids shown; Marco is in grid at index -1 and the star is in grid at index 1.

We introduced the 2D grids as the game space, which consists of 480 x 360 (in pixels) grid units. Then through illustration, we showed how to scroll the player sprite horizontally and vertically. To scroll the player sprite, simply move all other sprites by the desired scroll steps in the opposite direction. In the next section, we will add scripts to the brick sprite to respond to the scrolling.