Row scrolling for parallax effects in Street Fighters 2

by kryptonomiston 10/23/20, 4:23 PMwith 7 comments
by percentceron 10/23/20, 7:33 PM

There's a more detailed writeup on this technique here: http://www.extentofthejam.com/pseudo/

You can get some really cool effects with minimal code, here's a shader I wrote that makes use of it: https://www.shadertoy.com/view/wdcSWf

by JohnBootyon 10/23/20, 6:34 PM

These simple techniques were really, really effective in 2D games.

When done well (as they were in SF2) they created a wonderful illusion of depth.

From a programmer's perspective, creating these sorts of effects surely gave you a true feeling of "racing the beam" - ie the nuts and bolts of the CRT itself.

The way scrolling worked on this systems was that you defined your tilemaps and then changed the scroll register to change the position at which they were drawn.

By changing the scroll register in the vertical blanking interval (the time between the bottom line was drawn) and before the topmost row was redrawn, you could shift the entire tile map left, right, up, or down en masse. That would move the entire tilemap like a flat sheet of paper.

However, if you changed the scroll register during the horizontal blanking interval - the time between individual horizontal lines were drawn on the screen - you could achieve fancier effects like the row scrolling effect described in the linked article.

by qwertoxon 10/23/20, 6:05 PM

Here's a video showing the scene in action: https://youtu.be/6OlenbCC4WI?t=373

by vernieon 10/23/20, 6:26 PM

Mod please fix title (Street Fighter II)