Row scrolling for parallax effects

In the last post we looked at what tilemaps are and how they’re used in SF2, and ended with a mention of how multiple layers (or scrolls) of tilemaps can be moved at different amounts to achieve parallax scrolling, creating the illusion of depth.

Elephants overlapping by different amount depending on the camera position.

This really only works for elements that are standing upright, though. There’s no way we can use this effect for horizontal surfaces like floors and ceilings – we’d either need to use a lot more layers which we don’t have, or a huge amount of tiles to represent different perspective angles, which we’d rather not.

For horizontal surfaces like floors and ceilings, SF2 uses another technique called row scrolling (a.k.a. line scrolling).

We saw in the previous post that the CPS1 has three layers of tilemaps which can be scrolled independently: Scrolls 1 through 3. One of these layers is special, and allows for each individual row of pixels to be scrolled horizontally, in addition to the entire layer itself. We can see this effect on the the floor here:

Two different perspectives of the floor: one in the centre, compared with one at the far left of the stage.

This layer is Scroll 2. In SF2 we can think of this as the “main” scroll. The other two scrolls and the sprites are always positioned somewhere relative to this main scroll’s position, and the Z-depth of those scrolls.

We can think of an imaginary line just underneath the feet of our fighters as having a Z-depth of zero. A small amount of floor in front of the fighters has a negative Z-depth, with background elements having some positive Z-depth.

As the camera moves horizontally, elements with a negative Z-depth move more than elements at Z=0, which in turn move more than elements with a positive depth. Elements very far away (in photography and modelling we call this “at infinity”) don’t move at all.

This matches our experience with the real world, for example riding a train and looking out the window a far away mountain. In the space of a minute, the mountain seems not to move at all, nearer features appear, cross our vision and disappear from view, while the fence bordering the railways corridor whizzes past, the only object giving us a true sense of the train’s speed.

Let’s take a look at E Honda’s stage as it is the most interesting. All of the SF2 stages have a floor with parallax scrolling, only a few also have a ceiling, but E Honda’s also has a nice bath in the centre of the stage. Let’s look at how that stage is layered:

The three tilemap layers, Scrolls 1, 2, and 3 from left to right.

We have Scroll 1, with the front surface of the bath, Scroll 2 containing the floor, ceiling and the top surface of the bath, and Scroll 3 with the background.

The three layers combine with the sprites to create the full image shown below. Ken and Ryu’s sprites are anchored to Scroll 2, water dripping from the bath and a small tub are anchored to Scroll 1, which contains the front surface of the bath.

Note that while Scroll 1 is drawn on top of the other layers, the object it contains appears between the floor and the top of the bath. This works, because Scroll 1 moves as if it were located there. The key thing here is that the layer’s priority (which layers it is drawn on top of) and the layer’s displacement are two different things.

Note also that the scrolls don’t have to be layered with 1 on top and 3 at the bottom, it just happens to be this way for E Honda’s stage. Ryu’s stage uses Scroll 1 for drawing the sky, which places it underneath all the others. The clouds in the sky fly past independently of our movement on the stage – parallax isn’t used for it all.

Consecutive rows in Scroll 2 are grouped together depending on which surface they belong two, and each row within that group is displaced by a certain amount to create a shear transformation. I’ve drawn a rectangle around the floor area so its effect can be easily seen:

Three different floor perspectives, the extreme left of the stage, the centre, and extreme right.

In the centre of the stage, the horizontal offset is zero, and the tiles are drawn unmodified. As we move away from the centre of the stage, the rectangle becomes more and more skewed, and the entire layer also scrolls, giving the appearance of a flat horizontal plane behaving as if we were looking at a 3D scene.

Why can’t the front of the bath just go in Scroll 2? Because there are 16 rows of floor pixels that are beyond it. If the bath were in the same layer, it would be sheared along with the floor tiles, which wouldn’t look right. You can see the sheared floor rows disappearing behind the bath here:

The same effect is used on the ceiling and the top of the bath. Nothing remarkable happens with Scroll 3, the most distant, background layer, until the round ends and man holds up his sign. (I used to think it was meant to be some sort of candy bar commercial, but it turns out the kanji says something like “round complete”).

This has been a visual overview of how the CPS1 uses row scrolling in addition to layered tilemaps to create parallax effects. In the next post, we’ll look under the hood at the code that makes all this happen.

Row scrolling for parallax effects

6 thoughts on “Row scrolling for parallax effects

  1. unknownavatargravatar says:

    Brilliant. I’m thinking about how they made that pseudo 3d effect in’s stage so it was the shearing and tearing transformation of the bottom layer? Very fascinating.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s