Anti-Aliasing Problem

Question

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) {
    graphics.drawImage(imgHeart, this.radius - 4, 1);
    graphics.drawImage(imgCoolDown, this.radius - 4, 18);
}

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);
}

Answer 1

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.

Answer 2

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.

For more info: https://stackoverflow.com/questions/32151974/slick2d-using-anti-aliasing-with-animations-images