Doing an SNES Mode 7 (affine transform) effect in pygame

Question

Is there such a thing as a short answer on how to do a Mode 7 / mario kart type effect in pygame?

I have googled extensively, all the docs I can come up with are dozens of pages in other languages (asm, c) with lots of strange-looking equations and such.

Ideally, I would like to find something explained more in English than in mathematical terms.

I can use PIL or pygame to manipulate the image/texture, or whatever else is necessary.

I would really like to achieve a mode 7 effect in pygame, but I seem close to my wit's end. Help would be greatly appreciated. Any and all resources or explanations you can provide would be fantastic, even if they're not as simple as I'd like them to be.

If I can figure it out, I'll write a definitive how to do mode 7 for newbies page.

edit: mode 7 doc: http://www.coranac.com/tonc/text/mode7.htm

Answer 1

Mode 7 is a very simple effect. It projects a 2D x/y texture (or tiles) to some floor/ceiling. Old SNES use hardware to do this, but modern computers are so powerful that you can do this realtime (and no need of ASM as you mention).

Basic 3D math formula to project a 3D point (x, y, z) to a 2D point (x, y) is:

x' = x / z;
y' = y / z; 

When you think about it, it makes sense. Objects that are far in the distance are smaller than objects near you. Think about railroad tracks going to nowhere:

If we look back at the formula's input values: x and y will be the current pixel we are processing, and z will be distance information about how far the point is. To understand what z should be, look at the picture, it shows z values for image above:

purple = near distance, red = far away

So in this example, z value is y - horizon (assuming (x:0, y:0) is at the center of screen)

If we put everything together, it becomes: (pseudocode)

for (y = -yres/2 ; y < yres/2 ; y++)
  for (x = -xres/2 ; x < xres/2 ; x++)
  {
     horizon = 20; //adjust if needed
     fov = 200; 

     px = x;
     py = fov; 
     pz = y + horizon;      
  
     //projection 
     sx = px / pz;
     sy = py / pz; 

     scaling = 100; //adjust if needed, depends of texture size
     color = get2DTexture(sx * scaling, sy * scaling);  
     
     //put (color) at (x, y) on screen
     ...
  }

One last thing: if you want to make a Mario Kart game, I suppose you also want to rotate the map. Well it's also very easy: rotate sx and sy before getting the texture value. Here is the formula:

  x' = x * cos(angle) - y * sin(angle);
  y' = x * sin(angle) + y * cos(angle);

and if you want to move through the map, just add some offset before getting the texture value:

  get2DTexture(sx * scaling + xOffset, sy * scaling + yOffset);
  

NOTE: I tested the algorithm (almost copy-paste) and it works. Here is the example: http://glslsandbox.com/e#26532.3 (requires recent browser and WebGL enabled)

NOTE2: I used simple math because you said you want something simple (and don't seems familiar with vector math). You can achieve the same things using the Wikipedia formula or tutorials you give. The way they did it is much more complex but you have much more possibilities for configuring the effect (in the end it works the same...).

For more information, I suggest reading this Wikipedia article about perspective projection.

Answer 2

Here is the code to make it. I is the same code of the tutorial that I made on my blog. Check there to learn the Mode 7 method and the RayCasting.

Basically, the pseudo code is it:

//This is the pseudo-code to generate the basic mode7

for each y in the view do
    y' <- y / z
    for each x in the view do
        x' <- x / z
        put x',y' texture pixel value in x,y view pixel
    end for
    z <- z + 1
end for

Here is the code that I made in JAVA, following my tutorial.

package mode7;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;

/**
 * Mode 7 - Basic Implementation
 * This code will map a texture to create a pseudo-3d perspective.
 * This is an infinite render mode. The texture will be repeated without bounds.
 * @author VINICIUS
 */
public class BasicModeSeven {

    //Sizes
    public static final int WIDTH = 800;
    public static final int WIDTH_CENTER = WIDTH/2;
    public static final int HEIGHT = 600;
    public static final int HEIGHT_CENTER = HEIGHT/2;

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) throws IOException {

        //Create Frame
        JFrame frame = new JFrame("Mode 7");
        frame.setSize(WIDTH, HEIGHT);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);

        //Create Buffered Images:
        //image - This is the image that will be printed in the render view
        //texture - This is the image that will be mapped to the render view
        BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
        BufferedImage texture = ImageIO.read(new File("src/mode7/texture.png"));

        //The new coords that will be used to get the pixel on the texture
        double _x, _y;

        //z - the incrementable variable that beggins at -300 and go to 300, because 
        //the depth will be in the center of the HEIGHT
        double z =  HEIGHT_CENTER * -1;

        //Scales just to control de scale of the printed pixel. It is not necessary
        double scaleX = 16.0;
        double scaleY = 16.0; 

        //Mode 7 - loop (Left Top to Down)
        for(int y = 0; y < HEIGHT; y++){

            _y = y / z; //The new _y coord generated
            if(_y < 0)_y *= -1; //Control the _y because the z starting with a negative number
            _y *= scaleY; //Increase the size using scale
            _y %= texture.getHeight(); //Repeat the pixel avoiding get texture out of bounds 

            for(int x = 0; x < WIDTH; x++){

                _x = (WIDTH_CENTER - x) / z; //The new _x coord generated
                if(_x < 0)_x *= -1; //Control the _x to dont be negative
                _x *= scaleX; //Increase the size using scale
                _x %= texture.getWidth(); //Repeat the pixel avoiding get texture out of bounds 

                //Set x,y of the view image with the _x,_y pixel in the texture
                image.setRGB(x, y, texture.getRGB((int)_x, (int)_y));
            }

            //Increment depth
            z++;
        }

        //Loop to render the generated image
        while(true){
            frame.getGraphics().drawImage(image, 0, 0, null);
        }
    }
}

The result is: