Scanlines in Retro Games: What They Are and How Games Copy Them

Thin dark stripes across an old game picture are one of the best known parts of the retro look. This guide explains scanlines in retro games: what they are, why old CRT screens showed them, and how a modern browser game copies them with a few lines of code. You will also work out how faint the effect is.

What are scanlines in retro games?

A scan line is one row of a picture that is drawn row by row. On an old TV or computer monitor with a CRT (cathode ray tube, the deep glass screen used before flat panels), the picture was built from many of these rows, one under the other.

On a CRT you can sometimes see the rows as bright colored lines with black lines between them.

Today the word has two meanings:

• The real thing: the rows a CRT actually drew, and the dark gaps between them.
• The copy: a visual effect that adds dark stripes over a sharp digital picture to bring back that look.

The word is also used for one row of pixels in any digital image. If you want a refresher on how those small grids of color make up a game, read our guide to what pixel art is in video games.

How a CRT drew the picture one line at a time

A CRT has one or more electron guns at the back of the tube. They fire beams of electrons at the inside of the screen, which is coated with phosphor. Where a beam hits, the phosphor gives off light.

The beam never lights the whole screen at once. It moves in a fixed pattern called a raster scan:

1. The beam sweeps from left to right at a steady speed, changing strength to draw that row.
2. It switches off and moves quickly back to the left.
3. It switches on again and sweeps the next row.
4. All the while it creeps slowly downward, so each new row lands under the last one.
5. At the bottom, it goes back to the top for the next frame.

The phosphor keeps glowing after the beam passes, so by the time the whole screen is painted, the first rows are still lit.

Why the dark lines showed between rows

TV pictures used a trick called interlacing. On one pass, the beam drew only the odd-numbered rows. On the next pass, it drew the even-numbered rows in the gaps between them. This reduced flicker and lit every part of the screen in turn.

Now picture a signal that does not do this. It has fewer rows than the screen can hold, and each pass draws them in the same place. The spaces between those rows are never lit. They stay dark, and you get lines of light with black stripes between them.

CRTs also blended the picture a little. Retro gaming is still a popular use of CRTs, and some games made for them used this natural blending of detail and color to turn raw pixels into softer images. On a flat screen, each pixel is a sharp square instead, and the scan line look is sometimes added back as a visual effect.

How Tank City Reboot draws its scan lines

Tank City Reboot is a free browser game with a scan line effect you can study in its code.

The game builds one small picture for the effect, called a texture. It is 64 by 64 pixels and is set to repeat, so copies of it can sit side by side like floor tiles. The rule for each row is simple:

• If the row number divides by 4 with nothing left over, the row is black with an alpha of 46.
• Every other row is fully clear.

Alpha is how solid a color is, from 0 (invisible) to 255 (fully solid). So the dark rows only shade what is under them.

The game then turns that texture into a sprite, a flat picture it can place in the scene. Our guide on what a sprite is in video games explains the idea. Three settings matter here:

• Two texture pixels per game pixel. The board and the tanks use one texture pixel per game pixel. The scan line sprite packs in two, so each of its rows is half a game pixel tall.
• Tiled and sized to the view. The sprite repeats across the whole view, plus some extra on each side, so it covers the board and the side panel.
• Drawn on top. It has a sorting order of 50, higher than the board, the tanks and the side panel, so it is drawn last, over everything else.

Nothing in the code turns it off, so the stripes are always there while you play. The second game, Tank City Zero Day, builds and places the same overlay.

The player tank's 16 by 16 pattern, scaled up with point filtering, then with the game's scan line overlay: one texture row in four is black at alpha 46, and each row is half a game pixel tall.

A worked example: count the lines and the shade

Grab a pen and work out how strong the effect is, using only the numbers from the code.

1. Size of one tile. The texture is 64 pixels tall and packs 2 texture pixels into each game pixel. So one tile covers 64 / 2 = 32 game pixels.
2. Dark rows per tile. Rows 0, 4, 8 and so on up to 60 are dark. That is 64 / 4 = 16 dark rows per tile.
3. Spacing. 32 game pixels / 16 dark rows = one dark row every 2 game pixels. Each dark row is half a game pixel tall.
4. Lines across the board. The board is 208 game pixels tall. 208 / 2 = 104 dark lines run across it.
5. Lines across a tank. A tank is 16 game pixels tall. 16 / 2 = 8 dark lines cross each tank.
6. How dark each line is. Alpha 46 out of 255 is 46 / 255 = about 0.18, or about 18 percent black. Under a dark row, about 82 percent of the color comes through.
7. How dark the whole screen gets. Only one row in four is shaded. So on average the picture loses about 18 / 4 = 4.5 percent of its brightness.

The lines are close together and faint, so they hint at an old screen without hiding the tanks or the walls.

To check it, open the game, press Full screen and look closely at a bright tank. You should see thin bands across it, one for every two of its pixels.

The art underneath stays sharp because the tank and wall textures use point filtering. Point filtering scales each pixel up as a solid block with hard edges. The game runs on WebGL in your browser, which our guide on what WebGL is covers.

Frequently asked questions

Are scanlines real or just a filter?

Both. Real scan lines are the rows a CRT drew, with dark gaps when each pass drew its rows in the same place. A scanline filter is a modern effect that adds dark stripes to copy that look on a flat screen.

Why did CRT TVs use interlacing?

To reduce flicker. The screen drew the odd rows on one pass and the even rows on the next, so every part of the screen was lit in turn.

Can I turn off the scan lines in Tank City Reboot?

No. In the code, the overlay is always drawn, but it is faint: one dark row every two game pixels, at about 18 percent black.

Do scanlines make a game darker?

A little. In Tank City Reboot the picture loses about 4.5 percent of its brightness on average.

Get started

Tank City Reboot is an original game inspired by the 8-bit tank classics of the Family Computer. Your antivirus tank guards the CPU core, and every enemy, power-up and wall is named for a real computing or security idea. The game teaches the idea behind each name; it is not a course.

Start with the first game, then try Tank City Zero Day for a faster mode with 8-way moves, dashes, upgrades and a boss every fifth wave.

Play Tank City Reboot: it is free, plays in your browser on a computer or a phone, and playing never needs an account.