While using libGDX, I've noticed that occasionally the textures I draw to the screen are not being drawn to the exact pixel, but are rather being drawn with tiny portions of the edges from other textures at various sides (e.g. Here a single line of pixels from the top of the hair is being rendered down below the player's foot).
When I scale my game to a different size, black lines appear on the sides from what I can only assume are neighbouring textures.
I get the same problem when trying to render a font in a text field from a TextureAtlas file.
I am loading these textures from a TextureAtlas using Nearest Neighbour. Here is my sprite sheet, and these are the selections that my TextureAtlas is making from the sprite sheet
player.png
size: 64, 128
format: RGBA8888
filter: Nearest,Nearest
repeat: none
player1moveDown
rotate: false
xy: 0, 0
size: 10, 16
orig: 10, 16
offset: 0, 0
index: 1
player1moveDown
rotate: false
xy: 10, 0
size: 10, 16
orig: 10, 16
offset: 0, 0
index: 2
player1moveDown
rotate: false
xy: 20, 0
size: 10, 16
orig: 10, 16
offset: 0, 0
index: 3
Is there any logical explanation as to why my TextureAtlas isn't cutting up images perfectly?
As a follow up question, is there anything I can do to solve it, or should I resort to adding some transparent padding around each texture?
EDIT: I found the setting in the GUI TexturePacker. On the right hand side of the window, under "Sprite" you can change the space between each texture by modifying the "Shape Padding" value
The atlas is cut perfectly, but float precision can cause this issue when it is sampling from the texture. The solution is to put transparent space between your images on the atlas. If you use TexturePacker, this is done for you.