Last Sunday, I was watching this video (“Super Nintendo Effects Dev Special – Did You Know Gaming? Feat. Mario Castañeda”) that talks about the different effects that could be achieved with the SNES and I realized I could write a very simple Shadertoy inspired by the Mode 7!
Let’s start with the basics though: Do you remember the SNES and its Mode 7?
If you don’t, you have probably seen it, it was used in many games, such as : F-Zero, Pilotwings, Yoshi’s Safari, Secret of Mana, Final Fantasy (many), Super Mario RPG, Super Mario Kart, Super Mario World, Chrono Trigger, The Legend of Zelda: A Link to the Past…
Mode 7 is a graphics mode on the Super NES video game console that allows a background layer to be rotated and scaled on a scanline-by-scanline basis to create many different effects.
Disclaimer: I have never actually work with the original Mode 7, this post and its shadertoy are just guess work based on the Wikipedia article. If you did work with it, please share your thoughts, I would like to learn more about it.
From a technical perspective, looks like the Mode 7 is just a texture projection, a very special one, that results on an image that looks like it is 3D. If you look at the picture again, the actual circuit looks like it is using the special projection, however, the karts look like regular sprites that are scaled based on the distance.
The way I achieved a similar result in the Shadertoy below is by generating a Z coordinate based on the Y, and right after project it back to 2D by doing: X/Z and Y/Z. Obviously, you do not want Y=Z, otherwise the projection will always give you back the same value, 1.
We need to move Y=0 to the horizon we want, and then, right before the projection to 2D we will change a bit the Y coordinate so it does not project to 1 always. For instance, if your Y axis goes from [0, 1], you can easily transform Y to [-0.5, 0.5], which means that if you add some “value” to the Y right before Y/Z you will have a horizon in Z=0. The “value” you want to add you can think of it as a FOV of the camera. These coordinates can now be scaled, or even rotated.
Finally, I added a sprite on top (with no projection) just scaling it and adding a fake shadow to make it feel more part of the scene. Check the Shadertoy/source code below.
Shadertoy : Nyan Cat in Mode 7
Full source code : https://www.shadertoy.com/view/ltsGWn