What are tiles and scrolls?

[This post is a prologue to an upcoming post about parallax scrolling in Street Fighter 2]

Most games of the SF2 era were tile-based, meaning the graphics weren’t drawn in individual pixels, but with square tiles of pixels. This helped reduce the RAM that would be required to store individual pixels (often in multiple layers) and also reduce work for the CPU to update animations.

The Capcom Play System hardware which SF2 ran on uses three different tile sizes: 8×8, 16×16, and 32×32. Background graphics are displayed these tiles in three layers, each using one of these tile sizes, and the layers can be arranged in any order from foreground to background; transparent areas in one layer reveal the layers beneath it. These are called scrolls.

On top of these three scroll layers is the object layer, where sprites such as the playing characters, projectiles, some stage animations, as well as the energy gauge and score display. Tiles in the object layer are 16×16 pixels.

Let’s take a look at a diagnostic screen in SF2 which lets us look at individual tiles:

Some of Ryu’s tiles, each 16×16 pixels, numbered with a unique ID. I’ve displayed them all separated by gaps so you can see how big one tile is.

Often, the tiles are stored in ROM in a natural order as they are above so it’s easy to visualise the fully assembled image, but they don’t need to be. As far as the graphics hardware is concerned, each tile is selected by its identifier, and can be placed next to any other tile.

Many of the tiles are reused for different animation frames. For example, if Ryu’s legs look the same whether he’s standing or throwing a short punch, each of those tiles can be reused for that frame. This saves space in the tilemap ROMs. Background graphics especially are designed to exploit this, usually feature large areas of the same tile, or group of tiles, repeating.

Each pixel in a tile is assigned one of sixteen indexed colors, with the last color always being transparent. The graphics hardware looks this indexed color up in a palette, which determines the red/green/blue components of the pixel color, which is then finally drawn on-screen. In this way, tiles can be reused in different colors. This is used a lot for Ryu and Ken, who differ only in tiles containing their faces, and the color of their uniform.

Let’s take a look at that:

Some tiles of Ryu throwing a Hadouken. We can also some tiles of Ken’s head, but they don’t look right, because we’re displaying these tiles with Ryu’s palette.
Exactly the same tiles, but with Ken’s palette. Now Ryu’s head doesn’t look right, but those tiles won’t be used with this palette.

SF2 Championship Edition, which allowed fights between two of the same character also used this effect so each of them could be distinguished.

Additionally, each tile can be flipped horizontally or vertically. For example, a player facing left uses exactly the same tiles and if they were facing right, only flipped.

This is why Sagat’s eye-patch changes from one eye to the other when he turns around, and why a Shoryuken is thrown with a left arm when facing left, and vice versa. To do otherwise would have required a different set of tiles depending on which way the player was facing, which would have complicated the animation engine also.

Now let’s talk about the scroll layers used for the background. One limitation with these is that each layer is arranged in a single large grid. Tiles drawn this way can’t be moved around by individual pixels like the sprites can, so there’s a limit to what kind of animations that can be used there.

In SF2, animations in the background layers are constrained to simple sequences of a few repeating frames, such as these elephants, which move their trunks up and down, but don’t otherwise move around relative to the other tiles in the same layer. If they did, it’d need be by a multiple of 8, 16, or 32 pixels depending on what layer they were in.

However, each of the scrolls themselves can be moved with one-pixel resolution. The most noticeable use of this is seen as we move left and right along the stages, which – apart from the bonus stages – are wider than the screen.

But a more subtle effect (well, it was subtle for me, whose attention was mostly drawn to fighting, and usually losing) involves moving the scrolls by a different amount relative to each other, to achieve parallax scrolling and create the illusion of depth, or 2.5D:

Both players are near the middle of the stage, note the three elephants
Near the extreme left, note the elephants are starting to overlap each other

Another example of parallax can be seen on the floor. Note the orange rug changes perspective as we move across the room. This effect can’t be achieved with tiles alone, or at least not without creating lots of them for all of the different perspective angles.

This is a graphics effect on the CPS1 called line-scrolling (or row-scrolling), which involvs each individual row of pixels being translated left/right by a certain amount, and will be the topic of my next post. Until then!

What are tiles and scrolls?