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
