BitmapFont rendering artifacts

Question

I have setup scaling of GUI to occupy whole screen (window). Control widgets are fine, but scaling of fonts is terrible - there are artifacts from neighbouring glyphs (because of some rounding errors I suppose).

You can quite clearly see it on a right side of T:

I tried setting various values in padding area in Hiero, but all those values affect how font is rendered - they add space between characters in rendering, not just to a texture as I wanted.

Any idea how to fix this artifacts? I don't want dynamic font generation or multiple fonts, I want ordinary nearest-neighbour scaling (I'm going for a pixely look). I'm assuming this is a bug in libGDX 1.2.0.

Answer 1

After some fiddling around I figured what needs to be hacked in order to get it working.

The gist: shrink all glyphs to not overlap.

My solution in scala:

  def fixFonts(fontsMap: ObjectMap[String, BitmapFont]) {
    def fixFont(font: BitmapFont) {
      for {
        glyphPage <- font.getData.glyphs.toSeq.filter(_ != null)
        glyph <- glyphPage.toSeq.filter(_ != null)
      } {
        glyph.u2 -= 0.001f
      }
    }

  fontsMap.iterator().asInstanceOf[java.util.Iterator[Entry[String, BitmapFont]]].
    asScala.foreach { e => fixFont(e.value)}
  }

  def load() {
    skin = manager.get(SKIN_FILE)
    fixFonts(skin.getAll(classOf[BitmapFont]))
  }

EDIT(6. 4. 2015): Updated code to work in Scala 2.11.4 and LibGDX 1.5.3.

Answer 2

I adjusted monnef's solution above for java use like this:

public static void fixFont(BitmapFont font) {
    for (Glyph[] page : font.getData().glyphs) {
        if (page == null) {
            continue;
        }

        for (Glyph glyph : page) {
            if (glyph == null) {
                continue;
            }

            glyph.u2 -= 0.001f;
            glyph.v2 -= 0.001f;
        }
    }
}

Note that additionally glyph.v2 is adjusted too, without this I still got artifacts.

Note: This is a workaround and should probably be fixed by editing the font.