Contents  Introduction  Drawing the Tiles  Printable version

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.

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.

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 map[y_tile][x_tile]. 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 map[y_tile][x_tile] = new_id;

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.

Next : Drawing the Tiles