1
\$\begingroup\$

I'm having issues rendering rounded shape figures. I have a Texture with different images in it and I get this whale figure from it with TextureRegion but the stroke of it looks pixelated.

enter image description here

The original whale image is 357x721 px and the program scalate it up or down depending on the device.

And I use TextureFilter to Nearest but it doesn't solve problem as I thought it would.

Does someone knows a bit about this issue?

    texture = new Texture(Gdx.files.internal("texturepack_nuevo.png"));
    texture.setFilter(TextureFilter.Nearest, TextureFilter.Nearest);

    pilar = new TextureRegion(texture,591,0,357,721);

    whale_1 = new TextureRegion(texture,0,0,591,323);
    whale_1.flip(false, true);

    whale_2 = new TextureRegion(texture,0,323,591,323);
    whale_2.flip(false, true);

    whale_3 = new TextureRegion(texture,0,646,591,323);
    whale_3.flip(false, true);

    TextureRegion[] whales = {whale_1,whale_2,whale_3};
    whaleAnimation = new Animation(0.15f, whales);
    whaleAnimation.setPlayMode(Animation.PlayMode.LOOP_PINGPONG);
\$\endgroup\$
  • 2
    \$\begingroup\$ Is the image you posted what you want to see (but aren't), or what you don't want to see? If the former, please post an image of what you don't want to see as well. \$\endgroup\$ – Josh Jun 19 '14 at 16:41
  • \$\begingroup\$ It's how it seems but I don't want it to seem like that. \$\endgroup\$ – user48352 Jun 19 '14 at 17:17
3
\$\begingroup\$

You can't render a rounded shape perfectly on a computer screen; a computer screen is composed of discrete cells (pixels) so some approximation is always going to happen. It's just a matter of hiding that approximation so the result is visually appealing enough.

Nearest texture filtering is generally not what you want to create the appearance of smooth curves, because it simply chooses a color based on the closest integer boundary of a texel. Linear filtering (TextureFilter.Linear in libgdx) is more akin to what you want, since it will interpolate between the surrounding integer-boundary texel coordinates to arrive at a color. This can remove harsh edges, but often has the result of overcompensating and making those edges "blurry," especially for uneven scale factors.

If adjusting the filter does not provide the results you want, you may want to look into some methods of anti-aliasing.

\$\endgroup\$
  • \$\begingroup\$ Hi Josh! yes that's a screenshot from desktop, I've render it on my mobile device and, tho it looks better, it still looks a bit pixelated. I've changed it to Linear and it improves a lot! It looks a little bit blurry as you stated so do you think making the resolution of the imagen even would fix this a little bit up? Thanks for the answer! \$\endgroup\$ – user48352 Jun 19 '14 at 16:57
0
\$\begingroup\$

You might also be interested in using vectors graphics. Vectors graphics use mathematical functions to describe objects rather then normal pixels. As such vector graphics are always as good as they can be on a given screen no matter how much you zoom in or out. You can look here for a number of software programs to generate vector graphics, now not every programming language supports vector graphics but most do.

\$\endgroup\$
  • \$\begingroup\$ Using vectors would solve a lot of problems I agree! But it seems Libgdx doesnt support SVG well enough to render vector as of now... I designed my graphics in Illustrator then I export them to a desired resolution I'd use in the project. \$\endgroup\$ – user48352 Jun 19 '14 at 20:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.