I’m developing an application that implements a layered tile map. I’m running into a common problem related to scaling the map while using a texture atlas. As the map is scaled, gaps sometimes appear between the tiles. I’ve read this comes from the fact the renderer samples points from near the edge of the texture area being rendered.
I’ve tried adding a buffer around each tile in the texture atlas, so that any bleeding simply finds the same color, but the gaps were still there. I also tried this solution along with changing the interpolation between “linear” and “nearest”. The solution I’ve found that actually worked was to render the map at its original size and then scale the entire screen using SDL_RenderSetScale. This did get rid of the gaps, but it caused some other issues.
First, I can longer apply the scaling operation around the center of the screen. Instead, the screen scales from the upper left corner. This is not the functionality I want for the zoom feature. On top of that problem, it also seems to cause some issues related to the UI interface that will be overlaid over the tile map.
Right now, this is my current approach, which involves transforming the destination SDL_Rect of each tile, but this causes the gaps while zooming:
float scale_factor{camera_.zoom * TILE_SIZE};
SDL_Rect dst;
dst.x = (x + camera_.pos.x) * scale_factor + HALF_SCREEN_SIZE_X;
dst.y = (y + camera_.pos.y) * scale_factor + HALF_SCREEN_SIZE_Y;
dst.w = scale_factor;
dst.h = scale_factor;
SDL_RenderCopyEx(
renderer_, tilesets_[layer],
&tile.src, &dst,
0, nullptr, SDL_FLIP_NONE
);
