3
\$\begingroup\$

I'm trying to render some textures using libgdx SpriteBatch. This sounds very easy but I have a serious problem. I'm testing on desktop and depending on the resolution of the app window, textures are automatically cropped. This happens when I configure width and height attributes of LwjglApplicationConfiguration or when I just resize app window manually. Right and bottom sides of some or all of the textures are cropped depending on the resolution (maybe it depends on x,y coordinates of texture rectangles, some are shown good others are buggy). I load textures from atlas. While atlas uses MipMapLinearLinear filter, I also tested with Nearest filter, the problem still persists

Here are important parts of the code (the rest is default things taken from example like creating SpriteBatch, etc.)

// I use premultiplied alpha blending
batch.enableBlending();
batch.setBlendFunction(GL20.GL_ONE, GL20.GL_ONE_MINUS_SRC_ALPHA);

myAtlas = new TextureAtlas(Gdx.files.internal("test.atlas"));
textureRegion = myAtlas.findRegion("testtexture");

batch.draw(textureRegion, 100, 100, 40, 40);

Here is a image below showing app windows.

enter image description here

\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

This is due to rounding errors in the rendering pipeline all the way to the GPU.

In this case the texture is cropped short, in other cases the texture is rendered a little too far (see: Sprite sheet textures picking up edges of adjacent texture)

One way to alleviate the issue (it is not possible to completely eliminate it due to the variety of GPUs and drivers) is to add a 1 pixel transparent border around your sprites, render that transparent border, while enabling interpolation.

This will push the hard-cut nature of the polygon edge 1 texel away from the important texels of your sprite. The sprite texture may become slightly misaligned and a bit blurry in the problem positions (rounding errors) but wont be harshly cut.

They will remain anti-aliased and avoid the +/- 1 pixel/texel rounding error.

enter image description here

\$\endgroup\$
2
  • \$\begingroup\$ I tried adding 1px transparent borders to my textures but it's still not fixed. My original texture is 180x180 px. I resize it to 40x40. Maybe this is the reason? \$\endgroup\$
    – hellgasm
    Commented Jan 27, 2018 at 20:41
  • \$\begingroup\$ I see this thread is old, but for the record: yes, scaling your sprites can produce this artifact. A 1px transparent border at 180x180 becomes 2/9ths of a pixel at 40x40, ie. it rounds to nothing. Depending on your scaling/filtering method, you might skip drawing several rows of texels at the edge of your texture, leading to a sharp cutoff, or average several rows of texels, producing a row of output that's more opaque/wider than the very edge in your source. This is one of the reasons we generally recommend drawing your sprites at their native resolution. \$\endgroup\$
    – DMGregory
    Commented Aug 29, 2019 at 19:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .