Downscaling an asset, still pixellated?

Question

I created a rounded rectangle in photoshop, and I rasterized the rectangle before I saved it. Yet, when I try to use the rectangle in libGDX, it looks pixelated. How can I make it so that it's smooth?

Here is how my rectangle looks now:

My original image is 2048x2048, and I'm using batch to rescale it depending on the screen size. For example, this is how I draw the rectangle:

    batch.draw(img, Gdx.graphics.getWidth()/2-fitW/2, Gdx.graphics.getHeight()/2-fitH/2, fitW, fitH);

Where fitW and fitH depend on the current screen width and height (arbitrarily set to 300 now). So I'm essentially downscaling the original 2048x2048 rectangle to one that's 300x300. Can this be why the image is not rasterized?

Answer 1

This is simply the result of nearest pixel centre scaling, the simplest, fastest, and most horrible form of image scaling.

For this image to be scaled in an acceptable fashion you need two features enabled. You need the texture to have a mipmap, otherwise it is impossible to get good results from heavy downscaling, to get a mipmap all you need to do is tell LibGDX to create one when you load the texture. And you need a reasonable method of filtering enabled for the texture. Depending on use case you may get away with something simpler, but TextureFilter.MipMapLinearLinear works for everything, and I don't think there is many devices left where it makes much of a performance difference.

Relevant documentation:
Texture class
setFilter method

Answer 2

Looks to me like any anti-aliasing you see in photoshop after (supposedly) rasterising, is not being applied to the final image , either in general or more specifically when rendered in your program. You may want to check the resultant image in your operating system's image viewer to be very certain that you are not in fact getting the expected result. If this does look correct, it may be due to how batch.draw() is rendering your alpha channel, e.g. alpha cutoff values.

Otherwise (and this doesn't look like what's happening in your image, but just in case), jaggies can occur due to the rescaling algorithm used by LibGDX's batch.draw() (which may result in unwanted jaggies when downscaling).

Answer 3

You can use an anti aliasing algorithm to fix it. One simple way to do AA is to take multiple samples per destination pixel when you down sample. Here's a link to one such method, called 4-rook ssaa! http://blog.demofox.org/2015/04/23/4-rook-antialiasing-rgss/