A Guide to the Graphics of the Sega Mega Drive / Genesis

Return to Table of Contents

Row / Column Scrolling

In addition to full-screen scrolling, the VDP supports scrolling sections of the background planes at different rates. Horizontally, individual scanlines and 8-pixel rows can scroll independently, and vertically, 16-pixel columns can scroll independently.

This can be used to achieve complex parallax effects—all while using only two planes. Perhaps no other effect was used in such a variety of ways on the console. Let’s take a look at some examples of row and column scrolling.

First, a relatively simple but well-done example of row scrolling from World of Illusion:

The opening scene from World of Illusion, showing row scrolling.

Each of the planes is shown here:

Plane A from the above World of Illusion scene.
Plane B from the above World of Illusion scene.

The bottom rows of Plane B represent the near foreground, which scrolls at the fastest rate. The ground near the player, on Plane A, scrolls at a slightly slower rate, and the background, on Plane B, scrolls the slowest. Even though it appears that there are three layers, the near foreground and the background never overlap since they are actually the same layer.

How does Mickey walk behind the tree? Priority for planes is set per-tile, so the tree tiles are set to high priority, while the rest of Plane A is set to low priority. Mickey’s sprites are set to low priority, so they pass behind the tree but in front of everything else.

Here’s a slightly busier example, the opening stage of Shinobi III:

The opening scene of Shinobi III.

The row scrolling here achieves a better sense of depth over the example from Revenge of Shinobi. All of the row scrolling is occurring on Plane B. The rows to the top and bottom of the plane scroll at a faster rate than the rows in the middle to create depth. You might have noticed that this example seems to show three overlapping layers. As the clip ends, there are three overlapping trees. The typical answer in this situation is ‘sprites,’ and as it turns out, the tree in the middle is made of sprites. There can only ever be two background planes. Let’s take a look at the breakdown of planes and sprites:

Plane A from the above Shinobi III scene.
Plane B from the above Shinobi III scene. Notice the missing tree.
The sprites from the above Shinobi III scene. Here’s the tree.

The designers cleverly linked a higher and a lower section of Plane B—scrolling at the same rate—using a set of tree sprites to give the illusion of a third layer.

Let’s look at another example, this time from Thunder Force IV. Technically, the VDP is set to line scrolling rather than row scrolling here, but since the lines are scrolling together in groups, the effect is similar.

The opening scene from Thunder Force IV.

The clouds in this example are particularly well done, and I’ve seen more than a few comments online from people who are convinced there are more than two layers. So how are they done?

Comparing the clouds with the previous example of row scrolling from Shinobi III, one noticeable feature is that each section of clouds in Thunder Force IV has transparent portions where you can see the scrolling layer underneath. This technique makes the impression of multiple layers even stronger than the more cleanly divided sections of forest in Shinobi III.

The clouds are cleverly done by interweaving the display priority and scroll speed of each of the planes, as shown in this diagram:

A breakdown of how the multi-layered scrolling is achieved in Thunder Force IV. No more than two layers ever overlap at once, but the appearance of many layers is created through clever manipulation of scroll speed and display priority. Scroll speed indicates the per-frame change in scroll offset, where negative is right-to-left scrolling.

So yes, this is still just two background planes.

Rocket Knight Adventures uses row scrolling effectively in this example to create the impression of the camera circling around the main character:

An opening animation in Rocket Knight Adventures.

The effect creates the impression that the camera itself is moving along an arc by having the perceived furthest point of the background scrolling at the fastest rate, while the closer layers scroll more slowly.

Let’s look at some examples of column scrolling. First, M.U.S.H.A.:

Vertical column scrolling in M.U.S.H.A.

The scrolling columns are all on Plane B, while Plane A has some foreground rocks:

Plane A from the above M.U.S.H.A. example.
Plane B from the above M.U.S.H.A. example.

The pattern of scrolling here, with the outside columns scrolling faster than the inside columns, creates the perception of flying over a deep canyon.

Here’s another example from Battle Mania 2, showing the main characters descending into a cave:

Vertical column scrolling in Battle Mania 2.

Did you notice the black bar covering the left side of the screen? This is a layer of sprites hiding the first column due to the VDP’s column scrolling bug. When column scrolling is combined with most forms of horizontal scrolling, the first column will show garbage tiles, so developers typically hid it using sprites. That same stage from Battle Mania 2 has horizontal scrolling as well:

Both horizontal and vertical scrolling in Battle Mania 2. The column of black sprites on the left side hides the column scrolling bug.

The M.U.S.H.A. example does not have a black bar on the left column because there is no horizontal scrolling on that stage, so the bug does not appear.

Sometimes, however, developers didn’t cover up the bug. Here’s the first stage of Gynoug (Wings of Wor), which contains both column scrolling and line scrolling:

The column scrolling bug visible in the leftmost column of Gynoug.

Next: Line Scrolling

Return to Table of Contents

List of Effects:
  1. Introduction
  2. Full-Screen Scrolling
  3. Row / Column Scrolling
  4. Line Scrolling
  5. Animation
  6. Multi-Jointed Characters
  7. Tilting / Rotation
  8. Scaling
  9. Shadow and Highlight
  10. Transparency
  11. Silhouette
  12. Palette Swapping
  13. Vertical Scaling
  14. Sprite Raster Effects

Want to post a comment? You can do so here.