Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm using SDL & openGL to render a tile-map. The issue is that the tile-map rendering is extremely messed up, and I'm just a bit unsure what I'm doing wrong exactly.

It should just be the first tile being rendered, but I'm getting a blurred mess :S. My rendering code:

glBindTexture(GL_TEXTURE_2D, texture);
float texscale = 1.0f / (float)tileWidth;
sourceX = sourceX / (float)tileSheetWidth;


// Top-left vertex (corner) 
glTexCoord2f( sourceX, sourceY);
glVertex2i(x, y);

// Bottom-left vertex (corner)
glTexCoord2f( sourceX + texscale, sourceY);
glVertex2i( x + tileWidth, y);

// Bottom-right vertex (corner)
glTexCoord2f( sourceX + texscale, texscale + sourceY);
glVertex2i( x + tileWidth, y + tileHeight);

// Top-right vertex (corner)
glTexCoord2f( sourceX, texscale + sourceY);
glVertex2i(x, y + tileHeight);


My initialization code for OpenGL:

// Set the OpenGL state after creating the context with SDL_SetVideoMode
glClearColor(0, 0, 0, 0);
glEnable(GL_TEXTURE_2D); //Enable 2D rendering
glViewport(0, 0, Width, Height); //Set Up openGL viewport (screen)
glOrtho(0, Width, Height, 0, -1, 1); 

Just in-case, here's my image loading code, I think that perhaps this may be were the problem lies somehow:

LoadImage(string filename, bool loadingTileSheet)
  SDL_Surface *LoadedImage = NULL;
  GLuint texture;
  Uint32 rmask, gmask, bmask, amask;
  LoadedImage = IMG_Load(filename.c_str());

  if (loadingTileSheet)
    tileSheetWidth = LoadedImage->w;
    numberOfTiles = (LoadedImage->w / tileWidth) + 1;

  SDL_PixelFormat *pixf = SDL_GetVideoSurface()->format;
  SDL_SetAlpha(LoadedImage, 0, 0);

    rmask = 0xff000000;    
    gmask = 0x00ff0000;   
    bmask = 0x0000ff00;   
    amask = 0x000000ff;
    rmask = 0x000000ff;    
    gmask = 0x0000ff00;   
    bmask = 0x00ff0000;   
    amask = 0xff000000;

  SDL_Surface *image = SDL_CreateRGBSurface(SDL_SWSURFACE, LoadedImage->w, LoadedImage->h, 32, rmask, gmask, bmask, amask);
  SDL_BlitSurface(LoadedImage, NULL, image, NULL);

  glGenTextures(1, &texture);
  glBindTexture(GL_TEXTURE_2D, texture);

  glTexImage2D (GL_TEXTURE_2D, 0, GL_RGBA, image->w, image->h, 0, GL_RGBA, GL_UNSIGNED_BYTE, image->pixels);

  return texture;
share|improve this question
Well to update, it seems i'm getting something now, but the rendering is still in-correct. Image below shows the correct rendering: & the tilesheet (the blue tile was just for testing): I changed GL_LINEAR to GL_NEAREST and the texscale to: float texscale = 1.0f / (float)numberOfTiles; The tile seems somewhat "zoomed in", it seems to be rendering the top section of the tile and not the entire thing. – danran Oct 13 '11 at 4:22
Ah, good news i got it working :) – danran Oct 13 '11 at 4:28
up vote 4 down vote accepted

Code dump + find my problem, doesn't make a good question. I suggest finding code that works via a tutorial or other source, and build off of that code or compare it to yours.

That being said... Test your texture loading code by drawing a quad with the full texture on it (use the texcoords 0 -> 1). If that displays correctly then check your glTexCoord2f calls.

share|improve this answer
Doing what you said, the tilesheet loads fine as a full image. Though, that being said, earlier i tested the code with a simple tilesheet which just had 3 tiles ((96x32) and that rendered fine :S So that's why i've basically posted all the code just to make sure everything looks fine. – danran Oct 13 '11 at 4:10
If the tilesheet loads fine as a full image, then the problem is not in the texture loading code. Check through your glTexCoord2f calls. Set a break point, check their run time values against manually calculated values. – Byte56 Oct 13 '11 at 4:30
Thats exactly what i did, stupid me :P. Got it working fine now, thanks for your help/advice though :) – danran Oct 13 '11 at 4:45
Sure thing, glad we got it solved. Good luck! – Byte56 Oct 13 '11 at 4:46
float texscale = 1.0f / (float)tileWidth;
glTexCoord2f( sourceX + texscale, texscale + sourceY);

You are computing texScale from your x axis but applying it to the y axis too.

Compute the height of a tile in the texture separately from the width of a tile in texture coordinates, as they are different values when your atlas is packed to not have the same number of tiles vertically as horizontally...

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.