(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?
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.
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.
But it’s good that you could figure out a solution!
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! Stupid me…
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.
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.
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));
}
}