LibGDX stretching 2d graphics

Question

I have a problem with stretching sprites in LibGDX.

I have one png file for the sky in the game (1 x 1000px) and I want to render it 1000 x 1000px

sprite.setSize(pixelWidth,pixelHeight);

I want to stretch this 1px-wide sky image. It has little gradient from the top to the bottom, as you can see. I want to make it 1000px in width. But I get this strange result:

You can see that there is something like a horizontal gradient, even with lines, but there's no apparent reason why that's happening, since I'm scaling a 1px wide image!

The strange thing is that everything looks fine on other PCs and mobile phones - but I don't think that the problem is with my PC!?

I don't know what to try. Any ideas?

Answer 1

Without seeing your code, my ability to help you is limited. However, these are some ideas I can think of:

• There's another semitransparent texture on top of it, that is causing this problem. Try removing all other sprites, and if the problem is solved, then start adding sprites one by one to see which one is causing this problem.

• The texture coordinates are set to the corners, you're using bilinear filtering, and for some reason, the sampler is getting black pixels for out of range texture coordinates. To see if this is the problem, make the texture 2 pixels wide or more. If the correct color covers a wider area, this is probably your problem.

  To fix this problem, you can do one or more of of:

  • Changing the texture U coordinates to 0.5 instead of 0 and 1

  • Explicity set the wrapping mode to clamp

  • Use nearest neighbor filtering

• The fragment shader is adding extraneous colors, probably due to an uninitialized uniform. Make sure you set values to all of your uniforms before you start drawing. In fact, this could actually explain why this only happens on your computer, which probably has shader debugging activated, and may set uninitialized uniforms to 0 (black).

The banding itself may be caused by the format of your framebuffer. When you created it, what pixel format did you set for it? RGBA4441 or similar could lead to banding like this.

Answer 2

If you want to make a gradient covering a rectangular area in libgdx, you can just use a ShapeRenderer and the method

shapeRenderer.fillRectangle(0,0,screenWidth, screenHeight, topColor, topColor, bottomColor,bottomColor);

for this.

It's a better solution as it's more portable and allows you to change the colors without making new art.