What is tile-mode?
Released 27/9-2002
Written by VerticalE
In this article I'll explain the theory behind the tile-mode. It revolutionized gaming by allowing detailed graphics with fluid scrolling. Super Mario Brothers, Final Fantasy 2 and Zelda 3 are examples of games that used a variation of tiles and sprites. Before we go into details about the variations, lets take a look at how the tiles work.
Let’s say that you wanted to create a platform game, like Super Mario Brothers. Tile mode is used to draw the background, not the actual moving characters and other stuff you see in games. You may think “just create a hella-long background image that will represent skies, platforms and so on. Well, if you where to create an image that wide, it would take up too much memory to draw it on screen. Also, it doesnt make the background very flexible, now does it? So how do we solve this? By making tiles. Think of it as building up an image with Lego-blocks. Let’s say we have a blue background with some white clouds. We use one blue Lego as the sky, and a white one as a cloud. Actually, the white one is a blue one, with white painted over it. We make up the background using these two Lego’s. Let me visualize this with my ground-breaking drawing skills:
As you can see, the image (which is the background) is made up by two tiles (formerly known as Lego’s). So, why do it this way? I am sure you already can think of many reasons, but just let me explain them anyway. It saves a lot of memory because you only have to save the two lego-blocks in memory, then just use that data over and over again by using a map. The map is the information of where each tile is placed within the screen. Here is a simple array representing the image we just saw:
#define SKY 0
#define CLOUD 1
int background[4][4]
{
{ SKY, CLOUD, CLOUD, SKY } ,
{ SKY, CLOUD, SKY, CLOUD } ,
{ CLOUD, SKY, CLOUD, SKY } ,
{ SKY, SKY, SKY, SKY }
};
You don’t have to draw the tile that is to the right of the background, until that tile is actually going to appear on-screen. It is also a lot easier to do it this way, than to make a huge picture. You can recycle the same tiles all over again. If we display it as a whole picture, it takes 8 times as much storage place (just count the tiles to figure that out). It also enables you to draw the graphics faster, as the player scrolls. In a platform game, when a player moves from the left to the right, the array is updated with new tiles on the right edge of the array, while the other tiles/array elements get pushed to the left. If you have a large background where not all is displayed on-screen at once, you dont have to copy any more picture data to VRAM, as it is already there. All that is needed, is to update the tile-array (well, basically). That’s how Nintendo managed to make Super Mario Brother so smooth on the old 8-bit, while PCs that where far superior in power, couldn’t do it. Below is a nice little example of a tile-mode game (using large, crude tiles):
Note: The resolution of the tiles (the size of them), are made very large at the example so it would be easier to understand. Real tiles are much smaller (8x8 pixels is often used), and this results in a much smoother movement.
You may remember me talking about different tile-modes. Well, the only major difference is the scrolling direction. Some games scroll from left to right, and doesnt allow the player to change the movement (like in some side-scroller shooters), while others allow for full movement in both X and Y axis (for example Zelda 3). If you have no prior experience with tile-modes, you may wonder how they can let Link from Zelda 3, move on top of the tiles. Well, the Link character is really a sprite, which is an essential part of almost all tile-modes. Sprites are the "overlay", which you (as a developer) can move, rotate, scale... all of the above, using special techniques. Sprites may have an alpha-layer, which means that certain parts of the sprite is transparent. If you have played around with certain sprite packages before, the alpha layer is often recognized with either a reddish pink or a green color.
That concludes this short view at tile-modes. If you are interested in knowing more about this, feel free to bug me for more articles by mailing me.