Settings Texture Coordinates for TextureAtlas

Troubleshooting graphics
1

Hello!

In my current project I’ve a single, big texture (2048x1024). Additionally, I’ve a 2D TileMap as one single Mesh, but separated with isometric vertices. If a tile in the game is changed, I get its tileId, get the texture coordinates from my tileAtlas texture and apply the texture coordinates to the sub-tile of the custom mesh. In theory, this sounded good to me.

Function to calc the tile coordinates for one specific tileId:

    public double[] toTileCoords(int atlasSizeX, int atlasSizeY) {
        double[] tileCoord = new double[4];
        tileCoord[0] = ((double)x)/atlasSizeX;
        tileCoord[1] = ((double)(atlasSizeY - y - height))/atlasSizeY;
        tileCoord[2] = ((double)width)/atlasSizeX;
        tileCoord[3] = ((double)height)/atlasSizeY;
        return tileCoord;
    }

Function to set texturecoods for one “tile” on my tilemap-mesh:

            textureArray[idx] = (float)(textureCoords[0]);
            textureArray[idx + 1] = (float)(textureCoords[1] + textureCoords[3] * 0.5);
            textureArray[idx + 2] = (float)(textureCoords[0] + textureCoords[2] * 0.5);
            textureArray[idx + 3] = (float)(textureCoords[1] + textureCoords[3]);
            textureArray[idx + 4] = (float)(textureCoords[0] + textureCoords[2]);
            textureArray[idx + 5] = (float)(textureCoords[1] + textureCoords[3] * 0.5);
            textureArray[idx + 6] = (float)(textureCoords[0] + textureCoords[2] * 0.5);
            textureArray[idx + 7] = (float)(textureCoords[1]);

As I said, it sounded good in theory. In practice, however, there are little seams between the single tiles. these are no geometry seems, but wrong texture data, because (I think) the floats got to imprecise and therefore the wrong pixels were selected with the texture coordinates.

In this image you are able to see the problem quite drastically:

error.png438×713 149 KB

If have tried filter to reduce the effect but it was not successful. Also I tried to add some minimal factor to the calculation (-1f/8096f), but that didnt work either. I really don’t want to lower the texture resolution, but I’m not sure if there is another way (like giving the coordinates in integers). Therefore I’m asked for your help.

2

One solution is to spread your textures out more and give them extra borders. If you aren’t filtering then one pixel might be enough.

4

Thanks for the tip @pspeed but I am already giving them 1 tile space. I just colored the space in-between pink (which is normally transparent) to be sure it was a texture issue. I’ll give you a part of the tileAtlas graphic:

as you can see the tiles are no rectangles but … yeah … isometric rectangles. using the texture-coordinates given:
x,y+height/2
x+width/2, y+height
x+width, y+height/2
x+width/2, y
I try to get only the non-transparent part to put it on a tile with equivalent shape. however this does not really work, some part of the transparent texture is also placed on the tile. Is maybe my formula wrong?

5

I believe that is the part you missed.

1 Like
6

No… it’s mixed with the pixel next to it. You need to stretch the borders of the tile out else you will get pink/transparent pixel mixed with opaque/green pixel and end up with partially transparent partially pink partially green pixel.

Edit: and make sure you have mag and min filter set to nearest pixel. If you were painting these as tiles without filtering then none of this would be an issue.

1 Like
7

Thanks again at @pspeed and @jayfella.

Setting the filter to

atlasTexture.setMagFilter(Texture.MagFilter.Nearest); atlasTexture.setMinFilter(Texture.MinFilter.NearestNearestMipMap);

has greatly reduce the issue, but not solved it completely. You said I should spread the border by one pixel. Maybe I misunderstood you: I thought I should add a padding of 1px transparency between the tiles in the tilemap? Did you mean that? Or does spreading the borders mean to make the tile itself bigger (like adding more grass 1px in all directions)?

8

Yes.

Though without filtering and if you are drawing flat quads in the GUI bucket then you shouldn’t be having this issue anymore anyway.
…unless your images are already blended at the borders. You should check.

1 Like
9

Ahh, thank you @pspeed :slight_smile:
The tiles are presented in the 3d-space. Which is done for a reason (mixing with 3d objects, tiles may be only placeholder). But again, thank you for solving this issue :slight_smile: