Early video game platforms had limits that seem quaint today, when even a $25 Raspberry Pi can push uncountable polygons at 1080p. They'd often support tile and sprite based rendering, where the hardware would draw graphics in terms of background layers and sprites - moving objects like a player character or a projectile. Both background layers and sprites would be made up of tiles of pixels, with a common tile resolution being 8x8 pixels.
The number of sprites you could display, along with any weird limits on displaying them, would vary depending on the platform. Likewise for the number of background layers you can display. In the 16-bit generation it became common for hardware to support 2 or more background layers, but 8-bit platforms often were limited to just one background layer and a handful of sprites.
A single background layer.
Maybe 40 tiny sprites.
And you can only display, say, 10 sprites per horizontal line.
But as the generation progressed, programmers found clever tricks to simulate the depth gamers were seeing in arcade games of the time; most who played Dracula X on the Turbo Duo would assume the system had hardware support for multiple backgrounds.
The game simulates a variety of environments with impressive effects throughout - a village on fire, a busy view of ships at sea - and displays depth on par with an SNES or Sega Genesis game, despite the hardware having support for just one background layer. And a handful of sprites.
And many of the tricks used in that game can be used across platforms, to greater or lesser extent. On the NES games like VICE: Project Doom have excellent usage of parallax backgrounds using many of the same techniques.
And we can use them on the Gameboy as well. We'll go through a few common ones today using an early scene from my game, Depths of Europa.
Interrupt-based parallax
2D systems like the NES and Gameboy draw the screen by scanning down from the top left, to bottom right, drawing horizontal lines across the screen, row by row.
If we know how far into that screen drawing process we are, we can make a change to the scene as it's being drawn - like changing the position coordinates of the background layer.
The gameboy can do this via interrupts, and with care it can be used to make one vertical block of the background appear to move at a different speed.
This is usually used cosmetically, as a way to simulate parallax, but it can also be used to simulate a large boss sprite moving around.
In the "Promenade" room of the demo, I use this technique to move the area of the background containing the exteral windows at half the speed of normal background movement on the X axis. giving a sense of depth against the foreground cafe.
The raw background for this scene without any sprites or processing:
We use interrupts to stop when the screen has drawn the first 24 pixels and again after it gets to 56 pixels; the red lines show where the interrupts are called:
We can hide the seam where the background position changes by making sure the color between the "foreground" and "background" match, and by designing the tilework to make it ambiguous where the line is.
And there are effects we'll stack on top of this to further sell the effect.
Animated Tiles
You've probably noticed there's more going on in that GIF than just the background in the window section moving slower. The windows move like they're more distant, yes, but the view outside the windows seems to do that, too, moving as if even more distant.
We do that by replacing the tiles that make up that view with one that's pre-drawn - essentially, we've already drawn the movement of the layers and baked it in to tiles. So the start of the graphics rom bank will show all these slightly different tiles for the view outside the windows:
So to make this work, for every frame of camera movement we have to replace the tile with the one for the appropriate camera position. Tiles are 8 pixels wide, and for a basic version of this with no other parallax, we could simply take the camera X coordinate modulo 8 to get the index of the tile to use.
Because we're also using interrupt parallax that causes that part of the background to move at half speed, we'd use modulo 16 instead. But here I've doubled the tiles and do a modulo 32 to slow the apparent movement down even further and increase the sense of depth.
On the Gameboy, you can also make this faster by swapping the Modulo for a Logical AND - it only works for powers of 2, so 8, 16, 32 and the like, but that's perfect for what we're doing here.
Animated tiles are particularly useful in vertical rooms, as interrupt based effects aren't really useful for vertical scrolling.
Sprites
So now we have a section of the background that moves at a different speed, and animated tiles to add even more layers of apparent depth.
highlighted in red
But the limitations of the interrupt technique mean no part of the "foreground" can overlap with the background.
We can obscure that by placing sprites to break the interrupt lines, making the effect less obvious and also providing platforms for player movement:
The tree and the section of the wall that hang down past the window are both sprites.
The platform the player stands on at the end of the GIF is also a sprite.
There are some real limitations with sprite usage, though: on the GBC, you can only have 10 hardware sprites on any given line.
My player character is already 2 in most frames of animation, and sometimes 3. Each projectiles you shoot is also one, and most enemies require at least 2 hardware sprites to draw.
So definitely use sprites to enhance parallax effects, but do so sparingly to avoid hitting limits.
Window/Overlay Layer
You may have noticed the HUD area looked weird in the raw background image above. That's because the HUD in Depths of Europa is actually drawn onto a separate layer called the Window or Overlay; the graphics you see in the background are pieced together like a puzzle to draw the HUD you see.
I said earlier that the Gameboy only has one layer, so what gives?
The Overlay IS another background layer, yes. But there are severe limits on how you can use it compared to the additional layers on, say, the Sega Genesis or SNES. It can only be positioned in certain ways and it can't show the main background through an area where it's drawn - so it's great for making a HUD on the right or bottom side of the screen, or maybe displaying a popup text box, but you have to get really clever to do much more.
parallax effects on the GBC.
Conclusion
That covers most of the more common techniques; there are others, but you rarely see them outside of the demoscene.
On that note, the Cute Demo by Mills is a fantastic showcase of many of these effects, and it's been released open source, so you can see how it was done.
Thanks for reading; I hope people found it interesting.
Demo & Kickstarter shilling
If what you saw here looked good, please do check out the demo; it's a standalone game - a prequel, that takes maybe half an hour to an hour to complete.
https://jmkdev.itch.io/depths-of-europa
My goal is to make the metroidvania the GBC never really got during it's lifetime.
We're still on the last week of the Kickstarter Campaign for the full game:
