# OpenGL Sprite Maps and OpenGL [Howto]

This topic is 4767 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

I know I've always read those posts asking how do you take one large texture (sprite/tile map) and only extract out a cerain part of it. By doing this, you could only load one texture that has a lot of images on it rather than hundreds of smaller textures of individual images. I've never really seen a good solution that worked for any general applicaiton of doing it, there was always some 'specific' that the code had to be used for (such as all tiles are the same size, etc...) I know how easy this is to do in SDL, so I decided to give it a try myself in OpenGL. (Thanks to all of the people that helped me understand OpenGL concepts on IRC [wink]). Long story short, here's a class you can use to get this done. SpriteMap.h
class SpriteMap
{
private:
struct MyRect
{
float x, y, w, h;
~MyRect(){}
MyRect(){ x = y = w = h = 0; }
};

// Size of the original texture
GLint texWidth, texHeight;

// Used internally
GLfloat X, Y;

// The rectangle we extract from, used internally
MyRect src;

public:
// Just hanging around
~SpriteMap() { }

// Default ctor, we will have to call SetDimensions now
SpriteMap()
{
texWidth = texHeight = 0;
X = Y = 0;
}

// If we want to do everything in the ctor
SpriteMap(GLint w, GLint h)
{
texWidth = w;
texHeight = h;
}

// Set the dimensions of the original texture, this is important to properly
// extract out the right region
void SetDimensions(GLint w, GLint h)
{
texWidth = w;
texHeight = h;
}

// Set the rectangle we want to extract from
void SetExtractRect(int XStart, int YStart, int Width, int Height)
{
// Set the location and size
src.x = XStart;
src.y = YStart;
src.w = Width;
src.h = Height;

// Since OpenGL starts in the bottom left corner, we need to fix the Y
X = src.x;
Y = texHeight - src.y - src.h;
}

// Function code to bind the correct texture coordinates
void BindCorner1() { glTexCoord2f(X/texWidth, Y/texHeight); }
void BindCorner2() { glTexCoord2f((X + src.w)/texWidth, Y/texHeight); }
void BindCorner3() { glTexCoord2f((X + src.w)/texWidth, (Y + src.h)/texHeight); }
void BindCorner4() { glTexCoord2f(X/texWidth, (Y + src.h)/texHeight); }
};


Usage 1. #include "SpriteMap.h" - You can make modifications to use pragma once, or include guards. I didn't add that in to make it as simple as possible for this post. 2. Create a SpriteMap variable. If you do not pass in the size of the original texture, you will have to call SetDimensions 3. Call SetDimensions if you did not pass it in though the constructor. Note that this class is not a unique object. In other words, you can use one SpriteMap for as many textures as you want, you just have to know the sizes of those textures. 4. Call SetExtractRect right before you need to draw a texture from the sprite. You will pass in the starting X position, the starting Y position, then the Width and the Height of the region you are taking out. 5. Now when you are drawing your textured quad, you will make a call to each BindCorner in the order you need before you call glVertex3f. So for the first corner you will call BindCorner1, then for the next corner, BindCorner2, and so on. And that's it! I hope it's simple and easy to use, but if you want to change it, feel free! Now for a demonstration of it, you will need three things, the code above, NeHe Lesson 6, and this modified BMP I've made: Note that ImageShack has saved it as a PNG, so open it up in Paint and resave as a BMP. Once you have all of that, then you can do the following to see the code in action: 1. Include the header file at the top of the program under the others. 2. Replace the *entire* int DrawGLScene(GLvoid) function with this code:
// Tells which image to use
int ctr = 0;

// This is the sprite map
SpriteMap sprite(1024, 256);

int DrawGLScene(GLvoid)									// Here's Where We Do All The Drawing
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);	// Clear The Screen And The Depth Buffer

// This time only rotate on the Y-Axis
glTranslatef(0.0f, 0.0f, -5.0f);
glRotatef(yrot, 0.0f, 1.0f, 0.0f);

// Bind our texture is normal
glBindTexture(GL_TEXTURE_2D, texture[0]);

// However, we will be choosing a new sub texture to use each time
if(ctr == 0)
sprite.SetExtractRect(0, 0, 256, 256);
else if(ctr == 1)
sprite.SetExtractRect(256, 0, 256, 256);
else if(ctr == 2)
sprite.SetExtractRect(512, 0, 256, 256);
else if(ctr == 3)
sprite.SetExtractRect(768, 0, 256, 256);
else
ctr = 0;

// Begin

// Bind the first corner
sprite.BindCorner1();
glVertex3f(-1.0f, -1.0f,  1.0f);

// Bind the second corner
sprite.BindCorner2();
glVertex3f( 1.0f, -1.0f,  1.0f);

// Bind the thrid corner
sprite.BindCorner3();
glVertex3f( 1.0f,  1.0f,  1.0f);

// Bind the forth corner
sprite.BindCorner4();
glVertex3f(-1.0f,  1.0f,  1.0f);

// End drawing
glEnd();

// Have it switch the texture each 3 seconds
static int cur = GetTickCount();
if(GetTickCount() - cur >= 3000)
{
ctr++;
cur = GetTickCount();
}

yrot += 0.02f;

return TRUE;										// Keep Going
}


3. Move the new NeHe.bmp file to the /data directory, overwriting the old one. Compile and run, and you should see the texture changing every few seconds to the next one, then loop back. Well, I hope this helps with this issue. There could be lots of improvments made down the line, but or now it's really straight forward. You do not have to modify any of your existing code to make it compatible, you just drop in the class, set the settings, set the extracting rect, then finally replace your glTexCoord2f calls with the correct function from the class. And just a FYI, because this class just works with the texture mapping, you can use it in 2D or 3D projects. I've tested and verified in both, the example above is the 3D and my current project uses 2D. So tell me what you think about it, if you have any questions on it feel free to ask. If you have any improvements, I'd love to hear them too! Happy New Year!

• ### What is your GameDev Story?

In 2019 we are celebrating 20 years of GameDev.net! Share your GameDev Story with us.

• 10
• 11
• 13
• 9
• 11
• ### Forum Statistics

• Total Topics
634087
• Total Posts
3015444
×