The following tutorial has been reconstructed, by the author, from the original. Though some content has been modified for clarity, the original format has been retained for authenticity.

Ecliptorial: Volume I

Copyright (c) Quinton Roberts 2000-2006.

Introduction

One effect that was used quite a bit on the Super Nintendo was an effect called floor mapping. This essentially took an image and tilted it into the distance to simulate depth. A prime example of floor mapping can be seen in Nintendo's classic game Super Mario Kart.

Floor Mapping with an Infinite Tile

Before we cover the more advanced methods of floor mapping we need to cover the basics. The easiest way to understand floor mapping is to use a single tile and map it indefinitely across our floor. First we must create a tile to map. In our case we will use a 128x128 image.

floor map tile

This tile is then projected onto the floor indefinitely.

floor map tile projected indefinitely

Projection Model

Our first step is to construct a diagram that models our desired projection. The floor will be a plane which extends outward indefinitely. Perpendicular to the floor will be the screen. The eye will be located a distance 'd' behind the screen and a height 'h' above the floor. Conceptually, the eye generates a ray which passes through the screen and intersects with the floor. The point at which the ray intersects the screen (x,y) is where we will color the pixel. The point at which the ray intersects the floor (u,v) gives us the color of the pixel we will draw to the screen. The following is a diagram to represent this:

conceptual diagram for floor mapping

Now, the idea is that given the distance of the eye from the screen and its height from the floor, we should be able to find any floor coordinate (u,v) given any screen coordinate (x,y). By seperating the above diagram into individual parts, we should be able to derive the relationship between floor coordinates (u,v) and screen coordinates (x,y).

Solving for 'v'

Removing triangle DEP from the original diagram we get the following diagram:

diagram solving for floor coordinate 'v'

It should be immediately obvious that we have similar triangles here, the most important of which has been formed with the dotted line. Since similar triangles are proportional to each other, we can set up a ratio and solve for 'v', the vertical component of the floor coordinate we wish to find.

1. Construct a ratio:

     v/h = d/(h-y)

2. Solve for 'v'

       v = h*d/(h-y)

Solving for 'u'

Removing triangle MDP from the original diagram brings us to the following diagram:

diagram solving for floor coordinate 'u'

Again it should be immediately obvious that we have similar triangles. We'll once again set up a ratio and solve for 'u', the horizontal component of the floor coordinate we wish to find.

3. Construct a ratio

     u/v = x/d

4. Solve for 'u'

       u = v*x/d

Though we now have the (u,v) coordinates, the 'u' coordinate is dependent on the 'v' coordinate as seen in step 3. To retain as much accuracy as possible it's best to have the coordinates dependent only on what's given (x,y,d,h). Therefore we will simply substitute equation 2. for 'v' and simplify.

5. Substitute for 'v' using equation 2.

     v = d*h/(h-y)        'equation 2.
     u = v*x/d            'equation 4.
     u = [d*h/(h-y)]*x/d  'substitute for 'v'

6. Simplify

     u = x*d*h / d(h-y)   'multiply (top by x, bottom by d)
     u = x*h/(h-y)        'd's cancel

7. Final Equations

     u = x*h/(h-y)
     v = d*h/(h-y)

So we now have the equations necessary to transform any screen coordinate (x,y) into its respective floor coordinate (u,v). There are, however, some important things to note about our newly found projection transform equations. The first is that both the 'u' and 'v' coordinates are scaled by the same value, h/(h-y). This little fact can be used to increase the speed of calculations. The second is that the denominator of both equations, (h-y), tells us that the height of the eye must never equal the height of any pixel on the screen, as this would produce a zero in the denominator (dividsion by zero is bad). Therefore, it is very important to remember that the eye must always be either above or below the screen.

--Eclipzer