• Advertisement
Sign in to follow this  

OpenGL Sprite Maps and OpenGL [Howto]

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

If you intended to correct an error in the post then please contact us.

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
	struct MyRect
		float x, y, w, h;
		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;

	// Just hanging around
	~SpriteMap() { }

	// Default ctor, we will have to call SetDimensions now
		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:Free Image Hosting at www.ImageShack.us 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
	glLoadIdentity();									// Reset The View

	// 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);
		ctr = 0;

	// Begin

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

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

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

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

	// End drawing

	// Have it switch the texture each 3 seconds
	static int cur = GetTickCount();
	if(GetTickCount() - cur >= 3000)
		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!

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
  • Advertisement
  • Popular Tags

  • Advertisement
  • Popular Now

  • Similar Content

    • By LifeArtist
      Good Evening,
      I want to make a 2D game which involves displaying some debug information. Especially for collision, enemy sights and so on ...
      First of I was thinking about all those shapes which I need will need for debugging purposes: circles, rectangles, lines, polygons.
      I am really stucked right now because of the fundamental question:
      Where do I store my vertices positions for each line (object)? Currently I am not using a model matrix because I am using orthographic projection and set the final position within the VBO. That means that if I add a new line I would have to expand the "points" array and re-upload (recall glBufferData) it every time. The other method would be to use a model matrix and a fixed vbo for a line but it would be also messy to exactly create a line from (0,0) to (100,20) calculating the rotation and scale to make it fit.
      If I proceed with option 1 "updating the array each frame" I was thinking of having 4 draw calls every frame for the lines vao, polygons vao and so on. 
      In addition to that I am planning to use some sort of ECS based architecture. So the other question would be:
      Should I treat those debug objects as entities/components?
      For me it would make sense to treat them as entities but that's creates a new issue with the previous array approach because it would have for example a transform and render component. A special render component for debug objects (no texture etc) ... For me the transform component is also just a matrix but how would I then define a line?
      Treating them as components would'nt be a good idea in my eyes because then I would always need an entity. Well entity is just an id !? So maybe its a component?
    • By QQemka
      Hello. I am coding a small thingy in my spare time. All i want to achieve is to load a heightmap (as the lowest possible walking terrain), some static meshes (elements of the environment) and a dynamic character (meaning i can move, collide with heightmap/static meshes and hold a varying item in a hand ). Got a bunch of questions, or rather problems i can't find solution to myself. Nearly all are deal with graphics/gpu, not the coding part. My c++ is on high enough level.
      Let's go:
      Heightmap - i obviously want it to be textured, size is hardcoded to 256x256 squares. I can't have one huge texture stretched over entire terrain cause every pixel would be enormous. Thats why i decided to use 2 specified textures. First will be a tileset consisting of 16 square tiles (u v range from 0 to 0.25 for first tile and so on) and second a 256x256 buffer with 0-15 value representing index of the tile from tileset for every heigtmap square. Problem is, how do i blend the edges nicely and make some computationally cheap changes so its not obvious there are only 16 tiles? Is it possible to generate such terrain with some existing program?
      Collisions - i want to use bounding sphere and aabb. But should i store them for a model or entity instance? Meaning i have 20 same trees spawned using the same tree model, but every entity got its own transformation (position, scale etc). Storing collision component per instance grats faster access + is precalculated and transformed (takes additional memory, but who cares?), so i stick with this, right? What should i do if object is dynamically rotated? The aabb is no longer aligned and calculating per vertex min/max everytime object rotates/scales is pretty expensive, right?
      Drawing aabb - problem similar to above (storing aabb data per instance or model). This time in my opinion per model is enough since every instance also does not have own vertex buffer but uses the shared one (so 20 trees share reference to one tree model). So rendering aabb is about taking the model's aabb, transforming with instance matrix and voila. What about aabb vertex buffer (this is more of a cosmetic question, just curious, bumped onto it in time of writing this). Is it better to make it as 8 points and index buffer (12 lines), or only 2 vertices with min/max x/y/z and having the shaders dynamically generate 6 other vertices and draw the box? Or maybe there should be just ONE 1x1x1 cube box template moved/scaled per entity?
      What if one model got a diffuse texture and a normal map, and other has only diffuse? Should i pass some bool flag to shader with that info, or just assume that my game supports only diffuse maps without fancy stuff?
      There were several more but i forgot/solved them at time of writing
      Thanks in advance
    • By RenanRR
      Hi All,
      I'm reading the tutorials from learnOpengl site (nice site) and I'm having a question on the camera (https://learnopengl.com/Getting-started/Camera).
      I always saw the camera being manipulated with the lookat, but in tutorial I saw the camera being changed through the MVP arrays, which do not seem to be camera, but rather the scene that changes:
      Vertex Shader:
      #version 330 core layout (location = 0) in vec3 aPos; layout (location = 1) in vec2 aTexCoord; out vec2 TexCoord; uniform mat4 model; uniform mat4 view; uniform mat4 projection; void main() { gl_Position = projection * view * model * vec4(aPos, 1.0f); TexCoord = vec2(aTexCoord.x, aTexCoord.y); } then, the matrix manipulated:
      ..... glm::mat4 projection = glm::perspective(glm::radians(fov), (float)SCR_WIDTH / (float)SCR_HEIGHT, 0.1f, 100.0f); ourShader.setMat4("projection", projection); .... glm::mat4 view = glm::lookAt(cameraPos, cameraPos + cameraFront, cameraUp); ourShader.setMat4("view", view); .... model = glm::rotate(model, glm::radians(angle), glm::vec3(1.0f, 0.3f, 0.5f)); ourShader.setMat4("model", model);  
      So, some doubts:
      - Why use it like that?
      - Is it okay to manipulate the camera that way?
      -in this way, are not the vertex's positions that changes instead of the camera?
      - I need to pass MVP to all shaders of object in my scenes ?
      What it seems, is that the camera stands still and the scenery that changes...
      it's right?
      Thank you
    • By dpadam450
      Sampling a floating point texture where the alpha channel holds 4-bytes of packed data into the float. I don't know how to cast the raw memory to treat it as an integer so I can perform bit-shifting operations.

      int rgbValue = int(textureSample.w);//4 bytes of data packed as color
      // algorithm might not be correct and endianness might need switching.
      vec3 extractedData = vec3(  rgbValue & 0xFF000000,  (rgbValue << 8) & 0xFF000000, (rgbValue << 16) & 0xFF000000);
      extractedData /= 255.0f;
    • By Devashish Khandelwal
      While writing a simple renderer using OpenGL, I faced an issue with the glGetUniformLocation function. For some reason, the location is coming to be -1.
      Anyone has any idea .. what should I do?
  • Advertisement