# Anti-Aliasing Problem

So, I was annoyed by how the HUD for my GameState was very pixel-ated and I wanted to change that through the use of anti-aliasing. However, it works with a small exception:

It adds all these lines to the HUD, which is not what I want at all, is there a way to prevent this from occurring?

Here's what it looked like before anti-aliasing:

Also, here's the code:

    public void render(GameContainer container, StateBasedGame game, Graphics graphics) throws SlickException {
graphics.setAntiAlias(true);
renderOverlayGui(graphics);
renderGui(graphics);
graphics.setAntiAlias(false);
renderIcons(graphics);
}

private void renderIcons (Graphics graphics) {
}

private void renderGui (Graphics graphics) {
graphics.setColor(GameColour.brown);
graphics.fill(guiCircle);
graphics.fill(guiBox);
}

private void renderOverlayGui (Graphics graphics) {
graphics.setColor(Color.black);
graphics.fill(guiOverlayCircle);
graphics.fill(guiOverlayBox);
}


It looks like the edges get a fractional alpha based on the edge coverage. Problem arises when two edges fill 100% together but are blended as translucency, not coverage, only applying ~75% color. It's like the difference between covering your eyes with both hands vs covering your eyes with two pair of sunglasses.

I only know how this works in opengl, but basically the technique requires you to render front to back order, no depth buffering, having alpha channel in destination framebuffer and set a special blending function (glBlendFunc(GL_SRC_ALPHA_SATURATE,GL_ONE)).

I don't know much about slick, but you could start out checking if you have an alpha channel in your framebuffer/window. Slick just might do the rest for you. I'll check out the library more closely when I have the chance.

Edit When looking closer at the slick source code (Graphics.java) it appears not being able to anti-alias triangle meshes without artifacts. It does appear possible to fix the source. I'll look into it.

Until then it might be best to draw textures instead that are anti-aliased from the beginning using GIMP or similar tool.

• Problem is is that I just used the graphics.setAntiAlias(); in the hopes it would only render the circles better. I essentially have no clue to what you are trying to say nor how the rendering is suppose to be done :( (I don't know much about graphics-programming). If you could explain a bit more in depth, it will probably help a little more. Thanks! – BlueJet May 3 '16 at 19:15
• @BlueJet I have read the slick source code. It does not look to good. Seems like anti-aliasing of meshes such as circles is not implemented at all (or incorrectly depending how you see it). It only works for lone triangles and line meshes. I could rewrite the source for you... What do want me to do? – Andreas May 3 '16 at 20:13
• By "source", do you possibly mean re-writing the Graphics.java anti-aliasing source code? I went through the source code as well and upon inspection the anti-aliasing that the Graphics class isn't really the best, but I can't really say since I've only been using Slick2D for a while now. If you could redo the "source" and publish the source-code in an edit to your post above, that would be beneficial to most people who are also having problems with anti-aliasing in Slick2D. But the question is if you actually want to redo the source (it will probably take some time looking at it). Thanks! – BlueJet May 3 '16 at 22:45
• @BlueJet Exactly. I'll edit my post describing my findings. If I get the time I will try to fix the source and post it here. Gotta setup dev env for slick and java as well as making a test application. It might take while. – Andreas May 4 '16 at 5:10
• Alright, thanks for helping out and I look forward to your findings. – BlueJet May 4 '16 at 22:41

When you enable anti-aliasing in Slick2D, it should look like this.

g.setAntiAlias(true);
GL11.glBlendFunc(GL11.GL_SRC_ALPHA_SATURATE, GL11.GL_ONE);


GL11 class is provided by LWJGL which is required by Slick2D.

Call that line after every time you enable AA to be safe, I haven't checked the Slick2D source code.

Note that with this whatever you draw first will be on top, rather than what you draw last. So you may need to reverse rendering order.