[SOLVED] ToneGodGUI bug where some text is darker than rest

Hello!

I’ve been having this bug with ToneGodGUI for ages. Some parts of the text are slightly darker than the rest of the text for some reason.

Here is a picture of the bug:

As you can see some parts of the text(“ili” especially) is slightly darker. Does anyone know what is causing this and how to fix it?

Thanks!

1 Like

Probably your text is not rendered right on pixels so some letters are between pixels and some aren’t.

1 Like

(Did you solve it in the meantime?)
What happens if you move that widget around?
What happens if you write the text “Population: Population: 5000”?
What happens if you use a different font, e.g. a bold font or a console (monospace) font?

1 Like

Looks like a pixel alignment + alpha antialiasing artifact. I was playing with SDF (Signed Distance Field) text rendering lately, and alpha antialiasing SDF glyphs produced a similar artifact.

1 Like

I have yet to figure out the issue. When I move the widget around the darker letters stay the same. When I write I change text, only sometimes does it cause the the L and i to be darker.

I tried using the console font at it’s preferred size, but it looks nothing like what’s in the bottom left corner!!
Screenshot of difference: https://i.imgur.com/943dcuA.png

I’ve tried re-rendering the font files several times now with different settings, but the GUI mangles it every time.

Looks like an alpha test/blend issue.

1 Like

I fixed it! I just floored the position of the text and that seemed to fix it. Thanks for the help!

1 Like

:slight_smile: Glad to know it worked.

1 Like

What does “floored” mean in that context?

But it’s good that you could figure out a solution! :slight_smile:

Hm … I thought that if it’s a pixel-alignment thing then it would flicker when moving the widget around, e.g. sometimes it’s the 4th letter and sometimes it’s the 7th letter that is being affected - but of course, if you move by exactly 1 pixel (which is normal), then the problem stays the same! :smiley: Stupid me… :slight_smile:

1 Like

Math.floor() is what I understood it to mean.

Yes, before he followed up with his solution I was going to ask what “moving it around” meant. If it was like a drag and drop then it was likely keeping the same non-integer offset as it was being dragged.

1 Like

Ah okay. That printing “Population: Population:” (or similar, with random spaced text in between) might also have revealed if it’s really the cause (pixels missed). But now it’s solved, and that’s fine.

Except all letters in the same string will be spaced by pixels. So if it’s a 0.5 coordinate issue than all letters will share the same visual artifact no matter where they are in the string.

The issue specifically was a combination of the Element class in ToneGodGUI using Vector2f for text positions and BitmapFont Center Alignment. I (very lazily)fixed the issue by converting all the flooting point positions to integers and I’m still working on fixing the center alignment of BitmapFont.

Your best bet is probably to do your own centering. Any patches to bitmap text to center on pixels are likely to be rejected as bitmap text is designed to work in any resolution and not just pixel boundaries.

1 Like

I’ll try that, thanks for the help. :slight_smile:

Here is the fix for the unclear text in toneGodGUI.
For anyone who’s having the same issue, add this code to the Element class and replace updateTextElement() and resetTextElement().

Align.Left and Align.Right should work fine since it seems they align to the pixel grid just fine.

NOTE: THE FIX ONLY WORKS WITH CUSTOM TEXTS. Not sure exactly why. Also, to fix Label and Buttons, remove the default alignment in those classes and toggle the better centering from in there.

private boolean betterHorizontalCentering = false;
private boolean betterVerticalCentering = false;
/**
 * Toggles text centering that always aligns to the pixel grid(clearer text)
 * Horizontal Centering
 * (Don't use Align.Center)!
 */
public void toggleBetterHorizontalCentering() {
    if (betterHorizontalCentering) 
        betterHorizontalCentering = false;
    else
        betterHorizontalCentering = true;
}
   /**
 * Toggles text centering that always aligns to the pixel grid(clearer text)
 * Vertical Centering
 * (Don't use Align.Center)!
 */
public void toggleBetterVerticalCentering() {
    if (betterVerticalCentering) 
        betterVerticalCentering = false;
    else
        betterVerticalCentering = true;
}

/**
 * Updates the element's textlayer position and boundary
 */
protected void updateTextElement() {
    if (textElement != null) {
        float tx, ty;
        if (betterHorizontalCentering)
            tx = (int) ((getWidth()/2f - font.getLineWidth(textElement.getText()) / 2f) + textPadding.x);
        else
            tx = (int) (textPosition.x + textPadding.x);
        if(betterVerticalCentering)
            ty = (int) ((getHeight()/2f + (textElement.getLineHeight() * textElement.getLineCount())/2f) - textPadding.z);
        else
            ty = (int) (getHeight() - (textPosition.y + textPadding.z));
            
        
        textElement.setLocalTranslation(tx, ty, textElement.getLocalTranslation().z);
        textElement.setBox(new Rectangle(0, 0, (int) (dimensions.x - (textPadding.x + textPadding.y)), dimensions.y - (textPadding.z + textPadding.w)));
    }
}

public void resetTextElement() {
    if (textElement != null) {
        float tx, ty;
        if (betterHorizontalCentering)
            tx = (int) ((getWidth() / 2f - font.getLineWidth(textElement.getText()) / 2f) + textPadding.x);
        else {
            tx = (int) (textPosition.x + textPadding.x);
        }
        
        if(betterVerticalCentering)
            ty = (int) ((getHeight()/2f + (textElement.getLineHeight() * textElement.getLineCount())/2f) - textPadding.z);
        else
            ty = (int) (getHeight() - (textPosition.y + textPadding.z));

        textElement.setLocalTranslation(tx, ty, textElement.getLocalTranslation().z);
        textElement.setBox(new Rectangle(0, 0, (int) (dimensions.x - (textPadding.x + textPadding.y)), 25));
    }
}
2 Likes