Drawing Tiles with OpenGL

Author: Mark Szymczyk
Last Update: August 7, 2006

This article shows you how to use OpenGL to quickly draw tiled backgrounds for 2D games.


Textures do not have to be square for widest compatibility. The width and height should be a power of 2. I misread a statement in the OpenGL Red Book. (August 7, 2006)


Most of you are aware that OpenGL is a library for 3D graphics, but you can also use OpenGL for 2D graphics. Why use OpenGL for 2D graphics on Mac OS X instead of Quartz or Cocoa’s graphics routines? There are several reasons to use OpenGL for 2D drawing.

  • Speed. OpenGL takes advantage of your Mac’s graphics accelerator, which makes drawing fast.
  • Portability. Your OpenGL drawing code will run on Windows and Linux as well as Mac OS X.
  • You can take your OpenGL knowledge and apply it to 3D games.

The fastest way to draw 2D graphics with OpenGL is to use texture maps. If your game has all of its action on one screen, you can draw the game’s background on a texture map and draw the texture map on the screen.

If your game’s world is large, covering multiple screens, storing the background in one texture map won’t work. The maximum texture size depends on your video card, but it generally is no more than 4096 pixels. Even if you had one texture map per screen, you would eventually run out of video memory. This is where tiling comes in.

A tile is a reusable piece of artwork. If you ever played one of the Super Mario Brothers or Ultima series of games, you’ve seen tiles in action. By using tiles you can create large game worlds and have the graphics fit in video memory. Fitting your game’s graphics in video memory is the key to fast drawing. The fastest drawing occurs when drawing from video memory to video memory because the pixels don’t have to travel from the CPU to the video card.

The best strategy for using tiles in OpenGL is to place a set of tiles in one texture map. For the widest compatibility you should make the texture map a power of 2. A texture map size of 1024 by 1024 pixels enables your code to run on Macs with Rage 128 and better video cards, which is almost every Mac capable of running Mac OS X. This texture size allows you to store 1024 32-by-32 pixel tiles in one texture map. If you don’t care about supporting the Rage 128, you can increase the texture size to 2048 pixels; a 2048 by 2048 texture map can store 4096 32-by-32 pixel tiles.

Next (Setting Up the Viewing Volume)