Tiling in OpenGL

[size="5"]Introduction

Since I've been writing the DirectX tiling tutorials, I thought I'd write an OpenGL tiling tutorial. This article is intended solely for porting basic tiling methods to the OpenGL API, so if you want an intro to tiling in general, you should read the What the Heck is a Tile section in my Tiling in DirectX: Part I tutorial.

There are not that many differences between tiling in OpenGL and tiling in DirectX (DirectDraw). We still have to define a 2D char array, loop through it, capture the ID of each tile, and draw each individual tile. However, with OpenGL, instead of bit blitting tile bitmaps, we have to render quads and texture them according to the ID at the particular location in the array.

[size="5"]Prerequisites

This article is not meant for the complete OpenGL newbie. The reader should be familiar to the basic form and function of the OpenGL API. For those of you who don't know OpenGL or want to brush up on your skills, I strongly suggest heading over to NeHe's site, which is chock full of beginner to advanced OpenGL tutorials.

[size="5"]Setup

In this section I'll be presenting all the global variables, defines, and extra functions that we'll need.

#define MAP_SIZEX 10
 #define MAP_SIZEY 10

Here we define the map size (in tiles) as 10 * 10.

GLuint texture[2];

The use of texture[] is pretty self-explanatory. It will be used to hold the names of the two textures that make up our map; one in texture[0] and one in texture[1].

char map[10][10] = {
 {1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
 {1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
 {1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
 {1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
 {1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
 {1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
 {1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
 {1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
 {1, 0, 0, 0, 0, 0, 0, 0, 0, 1},
 {1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
 };

This is the array that holds our map data. In this format, we can access any tile by [font="Courier New"][color="#000080"]map[y_tile][x_tile][/color][/font]. In this example, a tile defined as "1" is a wall, or a solid tile that the game characters cannot cross over. A tile with an ID# of "0" is a walkable area. We can redefine a tile's ID# by doing [font="Courier New"][color="#000080"]map[y_tile][x_tile] = new_id;[/color][/font]

I'm going to use NeHe's .bmp routine to load the texture bitmaps for this tutorial. Here's the code.

AUX_RGBImageRec *loadbmp(char *filename)
 {
 FILE *file = NULL;
 
 if (!filename)
 return NULL;
 
 file = fopen(filename, "r");
 
 if (file)
 {
 fclose(file);
 return auxDIBImageLoad(filename);
 }
 
 return NULL;
 }

Basically, the function loads a .bmp and stores it as a AUX_RGB_ImageRec type, which will then be used to attach the texture data to the textures we generate.

int load_gl_textures()
 {
 AUX_RGBImageRec *TextureImage[2];
 
 memset(TextureImage,0,sizeof(void *)*1);
 
 TextureImage[0] = loadbmp("tile0.bmp");
 TextureImage[1] = loadbmp("tile1.bmp");
 
 glGenTextures(2, &texture[0]); // We are generating two textures
 
 glBindTexture(GL_TEXTURE_2D, texture[0]);
 glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER, GL_LINEAR);
 glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER, GL_LINEAR);
 glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[0]->sizeX,
 TextureImage[0]->sizeY, 0, GL_RGB,
 GL_UNSIGNED_BYTE, TextureImage[0]->data);
 
 glBindTexture(GL_TEXTURE_2D, texture[1]);
 glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER, GL_LINEAR);
 glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER, GL_LINEAR);
 glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[1]->sizeX,
 TextureImage[1]->sizeY, 0, GL_RGB,
 GL_UNSIGNED_BYTE, TextureImage[1]->data);

In this piece of code, two textures are generated from two separate 64*64 bitmaps--tile0.bmp and tile1.bmp. (Note: If your bitmaps have different names or are not in the same folder as your program, make sure to make the correct changes to the code or else the program will crash, especially since I haven't optimized the function with any error detection.) These bitmaps are loaded with the function loadbmp() and are then used for creating the textures. The textures will be used later for texturing our quad tiles according to their ID# in the map[][] array. For an in depth explanation of very similar texture generating, check out NeHe's tutorials.

 for (int t = 0; t < 2; t++)
 {
 if (TextureImage[t])
 {
 if (TextureImage[t]->data)
 {
 free(TextureImage[t]->data);
 }
 
 free(TextureImage[t]);
 }
 }
 
 return(1);
 }

And we free the TextureImage[]'s after we use them.

Now, you should set up the camera with which you'll view the 3D scene. This is the way I'd do it:

gluLookAt(10.0f, 8.0f, 20.0f, 10.0f, 8.0f, 0.0f, 0.0f, 1.0f, 0.0f);

Calling gluLookAt this way will set the camera back (or the scene forward) 20 units along the z axis, as well as tweaking it a little bit left and right in order to view the scene better. (Note: You can also do this simple transformation with a glTranslatef(), but personally I find this way cleaner.)

Finally, any lighting, etc. that needs to be done should be done. Make sure that you have a working OpenGL program that creates two textures from two bitmaps before going on.

[size="5"]Drawing the Tiles

Ok, now we're ready to finally draw the tiles. I'll go through the code of this tile drawing function step by step.

int draw_tiles(GLvoid)
 {
 int tile;

tile is our place holder variable that will be used in determining if the tile at map[y][x], for example, has an ID# of 0 or 1 when we loop through the map array.

 for (int y = 0; y < MAP_SIZEY; y++)
 {
 for (int x = 0; x < MAP_SIZEX; x++)
 {

Here we have initialized a doubly-nested loop which will run through our map array, capture each tile's ID#, and then store that ID# in tile, as shown in the next step.

tile = map[y][x];

tile now holds the ID# of the tile at location map[y][x].

glBindTexture(GL_TEXTURE_2D, texture[tile]);

Here we bind the texture that we need, either texture[0] or texture[1], based on the value of tile, which holds the current tile's ID#.

 glBegin(GL_QUADS);
 
 glTexCoord2f(0.0f, 0.0f); glVertex3f(float(x), float(y), 0.0f);
 glTexCoord2f(1.0f, 0.0f); glVertex3f(float(x + 1), float(y), 0.0f);
 glTexCoord2f(1.0f, 1.0f); glVertex3f(float(x + 1), float(y + 1), 0.0f);
 glTexCoord2f(0.0f, 1.0f); glVertex3f(float(x), float(y + 1), 0.0f);
 glEnd();
 
 }
 }
 
 return (1);
 }

This is where the actual "tiling" takes place, and a square is rendered at the correct location with the correct texture (texture[tile]).

[size="5"]Conclusion

That's it! You now have a simple OpenGL-based tile engine. Here are a couple ideas on how you can optimize it some more yourself.

The beauty of 3D is being able to be virtually everywhere in your "world." Try moving the camera (either by using gluLookAt() or something else) to suit your taste. You could even move the camera 45 degrees to give the tiles a pseudo-isometric look.
You can also hack around with this piece of code and render the square in a different location, make it a different size, or even make it a different shape. In conclusion, I hope that a few people now have a better understanding of how to produce 2D/3D tiling with OpenGL. As usual, anyone can email me at either [email="lpsoftware@gdnmail.net"]lpsoftware@gdnmail.net[/email] or [email="lpsoftware@home.com"]lpsoftware@home.com[/email] for remarks, suggestions, or to report any typos/bugs there might be.

Visit my website at www.cfxweb.net/lpsoftware

This article is (C) 2000 Martin Estevao. This article may not be re-printed without the author's consent.