# Tilemap not rendering properly

I'm making a single-screen scrolling platformer (OpenGL/SDL) and I've made a tilemap out of a 2D array, pre-sized with variables of the LEVEL_HEIGHT and LEVEL_WIDTH. Each element in this 2D array corresponds to a position in the spritesheet that I'm loading from. In my render function, I have the following code to iterate through the matrix,and put each element into a 1D vertex buffer:

for (int y = 0; y < LEVEL_HEIGHT; y++) {
for (int x = 0; x < LEVEL_WIDTH; x++) {
if (levelData[y][x] != 0) {
float u = (float)(((int)levelData[y][x]) % SPRITE_COUNT_X) / (float)SPRITE_COUNT_X;
float v = (float)(((int)levelData[y][x]) / SPRITE_COUNT_X) / (float)SPRITE_COUNT_Y;
float spriteWidth = 1.0f / (float)SPRITE_COUNT_X;
float spriteHeight = 1.0f / (float)SPRITE_COUNT_Y;
float vertices[] = {
TILE_SIZE * x, -TILE_SIZE * y,
TILE_SIZE * x, (-TILE_SIZE * y) - TILE_SIZE,
(TILE_SIZE * x) + TILE_SIZE, (-TILE_SIZE * y) - TILE_SIZE,
TILE_SIZE * x, -TILE_SIZE * y,
(TILE_SIZE * x) + TILE_SIZE, (-TILE_SIZE * y) - TILE_SIZE,
(TILE_SIZE * x) + TILE_SIZE, -TILE_SIZE * y
};
GLfloat texCoords[] =  {
u, v,
u, v + (spriteHeight),
u + spriteWidth, v + (spriteHeight),
u, v,
u + spriteWidth, v + (spriteHeight),
u + spriteWidth, v
};
glBindTexture(GL_TEXTURE_2D, sSheetIds[0]);
glVertexAttribPointer(program->positionAttribute, 2, GL_FLOAT, false, 0, vertices);
glEnableVertexAttribArray(program->positionAttribute);
glVertexAttribPointer(program->texCoordAttribute, 2, GL_FLOAT, false, 0, texCoords);
glEnableVertexAttribArray(program->texCoordAttribute);
glDrawArrays(GL_TRIANGLES, 0, 6);
glDisableVertexAttribArray(program->positionAttribute);
glDisableVertexAttribArray(program->texCoordAttribute);
}
}
}


For some reason, when I run the code, the textures are overlapping between tiles. Consider the following example:

sprite sheet with tiles

2D Array for with the indices into the sprite sheet

int levelData[LEVEL_HEIGHT][LEVEL_WIDTH] = {
{ 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 },
{ 4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4 },
{ 4,4,4,4,4,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,5,0 },
{ 0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0 },
{ 0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0 },
{ 0,5,0,0,0,0,0,6,6,6,6,6,6,6,6,0,0,0,0,0,5,0 },
{ 0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0 },
{ 0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0 },
{ 0,5,6,6,6,6,6,0,0,0,0,0,0,0,0,6,6,6,6,6,5,0 },
{ 0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0 },
{ 0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0 },
{ 0,5,0,0,0,0,0,6,6,6,6,6,6,6,6,0,0,0,0,0,5,0 },
{ 0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0 },
{ 0,5,0,0,0,0,0,6,6,6,6,6,6,6,6,0,0,0,0,0,5,0 },
{ 0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0 },
{ 0,5,0,0,0,0,0,6,6,6,6,6,6,6,6,0,0,0,0,0,5,0 }
};


Tile map being rendered when the game is run

I've tried varying the size of each tile, but the textures just seem to scale up or down accordingly. I think the problem could be with the orthographic projection, but I'm not sure. What is causing the distortion here?

Here is the full code for reference

• To me it seems more like your u and v are off rather than the acutal size not being correct. Can you provide an image of which tile-id you expect to correspond to what part of the tilesheet? – Niels Mar 30 '16 at 13:44
• @Niels So 0 should correspond to the top left corner and 7 would correspond to the top right corner. The bottom left corner would be 16 and the bottom right corner would be 23 as the dimensions are 8 columns and 3 rows. – loremIpsum1771 Apr 1 '16 at 19:36
• The resulting image looks like you divide the tileset into three horizontally, and too often vertically. My guess would be that you flipped your your u and v somewhere sinze you want to divide into three tiles vertically. – Niels Apr 4 '16 at 6:03