blurry image - java slick2d

Newbie & Debugging Questions
#1

So, I have a scaled image size, but the problem is, the image is blurry…
I’ve found related topic http://slick.ninjacave.com/forum/viewtopic.php?f=3&t=5145 on this problem, but for some reason it does not affect.

With out Image.FILTER_NEAREST


            Image tableImg = new Image(tableImgRef);
            float miniTableScale = 0.35f;
            float miniTableX = miniTableBGX + (((miniTableBGX + miniTableBGWidth) - miniTableBGX) / 2) 
                                                        - ((tableImg.getWidth() * miniTableScale) / 2);
            float miniTableY = miniTableBGY + (((miniTableBGY + miniTableBGHeight) - miniTableBGY) / 2) 
                                                        - ((tableImg.getHeight() * miniTableScale) / 2);
            tableImg.draw(miniTableX, miniTableY, miniTableScale);

With Image.FILTER_NEAREST, it seems even worse.


            String tableImgRef = UI_PATH + setupTable.getTableTheme() + "/table.png";
            Image tableImg = new Image(tableImgRef, false, Image.FILTER_NEAREST);
            float miniTableScale = 0.35f;
            float miniTableX = miniTableBGX + (((miniTableBGX + miniTableBGWidth) - miniTableBGX) / 2) 
                                                        - ((tableImg.getWidth() * miniTableScale) / 2);
            float miniTableY = miniTableBGY + (((miniTableBGY + miniTableBGHeight) - miniTableBGY) / 2) 
                                                        - ((tableImg.getHeight() * miniTableScale) / 2);
            tableImg.draw(miniTableX, 
                          miniTableY, 
                          tableImg.getWidth() * miniTableScale, 
                          tableImg.getHeight() * miniTableScale
            );

#2

Odd question, but what is the original size of the image? OpenGL (and in turn Slick 2D) can sometimes do odd things behind the scenes with non power of two sized images to get them to work properly with the GPU. If your image isn’t a “pot” image, then try padding it with transparent pixels until it is and see if that makes a difference.

#3

[icode]GL_NEAREST[/icode] is the fastest scaling filter but [icode]GL_LINEAR[/icode] is the one that gives you best appearance.

So change it to


Image tableImg = new Image(tableImgRef, false, Image.FILTER_LINEAR);
#4

The choice of filtering is not going to impact performance in desktop OpenGL, since it’s all done on the GPU.

The image is going to look blurry no matter what, since we are re-sampling it and there are always artifacts. To reduce artifacts, use a power-of-two texture size and snap to a scaling factor like 0.5 instead of 0.473. For really small sizes, you can use mip-mapping in OpenGL to get smoother down-sampling, but that isn’t well supported in Slick.

#5

[quote]Odd question, but what is the original size of the image?
[/quote]
-580/320, png format.

[quote]GL_NEAREST is the fastest scaling filter but
GL_LINEAR is the one that gives you best appearance.
[/quote]

  • It’s same, nothing changes.

The image is going to look blurry no matter what, since we are re-sampling it and there are always artifacts.
To reduce artifacts, use a power-of-two texture size and snap to a scaling factor like 0.5 instead of 0.473.
For really small sizes, you can use mip-mapping in OpenGL to get smoother down-sampling, but that isn’t well supported in Slick.

  • Looks better if I set 0.5 value to scaling factor, but that’s not size I need.

It seems, that everything below 0.5 is goint to make picture look blurry… :confused:
You can see that these smaller circles (in above picture) are also blurry, which are images, scaled with factor less than 0.5…

#6

Have you considered using Slicks shape and gradient drawing functions to generate the image in question at run time instead of loading it from a preexisting image? It’s a little work, but in this particular scenario it could give you the smooth look you want.

#7

Yes, and I’ve already experienced that, when I used to make this components, and unfortunately found that it is really bad to draw rounded shapes in Slick2D, as I had the problems with using the AA on them. Whenever I would like to draw some rounded rectangle or circle, some strange pixels would appear above the corners. I have already asked for an answer to this problem on Slick2D forum, but they say that Slick2D not suitable for drawing rounded shapes.

#8

Slick’s shape classes are not so great for rendering. Things like line thickness, anti-aliasing, etc are not so easy to control.

You can just use another image that is the correct size of whatever you need it when scaled down. That way both will appear with 100% crispness, and no issues due to resampling. Or you can try mip-maps for a smoother down-scale – search the slick forums.

#9

Ok, thanks for the information.

#10

I’ve found a nice example on how to get smoother downscaling
https://bitbucket.org/kevglass/slick/src/tip/trunk/Slick/src/org/newdawn/slick/tests/MipmapTest.java?at=development

but it seems that latest version of Slick2D, does not include


supported = InternalTextureLoader.isGenerateMipmapSupported(); // the InternalTextureLoader does not have this method
...
ImageData.Format fmt = imageData.getFormat(); // also this ImageData doesn't have that static class Format

So I can not run a test…

#11

Grab the latest version from the repo.

You probably shouldn’t expect a great deal of support for Slick since it isn’t actively maintained anymore. If you want more control over your game’s rendering then maybe LibGDX is a good choice. :slight_smile:

#12

Here’s a slightly modified version of the function from Kevin’s old codebase:


public static boolean isGenerateMipmapSupported() {
	return GLContext.getCapabilities().OpenGL14;
}
#13

I keep hearing this; however, Slick was updated in June. It just isn’t maintained by Kevin anymore. Now it’s handled by NinjaCave.

#14

Lol, I’m downloading right now the latest version from http://slick.ninjacave.com/, no way that I had out out of date version.

EDIT:

I’m checking now javadoc for LoadableImageData, and it does not contain the getFormat() method:
http://slick.ninjacave.com/javadoc/org/newdawn/slick/opengl/LoadableImageData.html

Thanks for that, but what about the

ImageData.Format fmt = imageData.getFormat();

There’s no Format class :/, and getFormat() method from LoadableImageData class… ?

#15

Only four commits this year, and still lots of outstanding bugs. Compared to LibGDX, which has had 26 commits in the last week. :wink:

With that said, it’s a nice library. Hats off to kev for all his hard work.

#16

There seems to be multiple ways to tackle Slick’s lack of MipMaps. A couple are discussed here and here.

Well if LibGDX wasn’t so buggy…:wink: OK, I’m just kidding and you do make a valid point about the rate of commits, but I haven’t seen any announcement that development on it has been halted. I’ll also second your tip of the hat to Kevin for his work on making a truly “slick” 2D library. (I need to lay off the bad jokes and get some sleep. :P)