Custom font spacing issue

I'm trying to use a custom font in a watchface, it seems to load properly but then renders incorrectly:

As you can see, the "1" characters are pushed together which suggests that it is not using the xadvance in the fnt information. My fnt file looks like this:

info face="Segment" size=48 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=1,1 outline=0

common lineHeight=48 base=41 scaleW=256 scaleH=48 pages=1 packed=0 alphaChnl=1 redChnl=0 greenChnl=0 blueChnl=0

page id=0 file="segment_0.png"

chars count=11

char id=48   x=0     y=0     width=25    height=41    xoffset=1     yoffset=0     xadvance=27    page=0  chnl=15

char id=49   x=227   y=0     width=6     height=35    xoffset=20    yoffset=3     xadvance=27    page=0  chnl=15

char id=50   x=26    y=0     width=25    height=41    xoffset=1     yoffset=0     xadvance=27    page=0  chnl=15

char id=51   x=156   y=0     width=22    height=41    xoffset=4     yoffset=0     xadvance=27    page=0  chnl=15

char id=52   x=201   y=0     width=25    height=35    xoffset=1     yoffset=3     xadvance=27    page=0  chnl=15

char id=53   x=52    y=0     width=25    height=41    xoffset=1     yoffset=0     xadvance=27    page=0  chnl=15

char id=54   x=78    y=0     width=25    height=41    xoffset=1     yoffset=0     xadvance=27    page=0  chnl=15

char id=55   x=179   y=0     width=21    height=38    xoffset=5     yoffset=0     xadvance=27    page=0  chnl=15

char id=56   x=104   y=0     width=25    height=41    xoffset=1     yoffset=0     xadvance=27    page=0  chnl=15

char id=57   x=130   y=0     width=25    height=41    xoffset=1     yoffset=0     xadvance=27    page=0  chnl=15

char id=58   x=234   y=0     width=6     height=23    xoffset=2     yoffset=9     xadvance=10    page=0  chnl=15

Am I doing something wrong?

jim_m_58 over 9 years ago

@tea. Just draw the time, using the font, but one digit at a time. That way you can set the fixed spacing. And only one drawing operation per digit!

sharkbait_au over 9 years ago

Why don't you just change your x & width values to include extra space around the 1? You just might need to space your png file out a little differently so that you don't run over into the surrounding digits

teadriven over 9 years ago

All good suggestions, thank you. I may well have to resort to padding the png file if the performance is bad, however I did manage to achieve this with polygon-based drawing:

Weirdly, I couldn't get the pixel-perfect shape I wanted for the colon using fillCircle and so instead had to resort to fillRoundedRectangle!

jim_m_58 over 9 years ago

I've tried out the "use font, one digit at a time", where I set the proper x/y in the drawText() call. You need to use DrawText for the sting of the time once, so you are just calling it 3 more times to get the proper spacing per digit! That's the cheapest method to get the proper spacing, no doubt!

The 7 Seg digits all take the same space, and I do use a smaller "bold" version of the font for seconds!

sharkbait_au over 9 years ago

I doubt.

travis.vitek over 9 years ago

Weirdly, I couldn't get the pixel-perfect shape I wanted for the colon using fillCircle and so instead had to resort to fillRoundedRectangle!

This is a known issue. You should be able to work around it by using drawRoundedRectangle as you've done, or fillEllipse(x, y, r, r). That said, you shouldn't need to. It should not be difficult to find or create a fixed-width font for your purposes.

you are just calling it 3 more times to get the proper spacing per digit! That's the cheapest method to get the proper spacing, no doubt!

If you are drawing many characters using this technique, it will be expensive. I think the easiest thing to do is to find a free fixed-width font to use with the font tool. Barring that, it is not difficult to create a PNG with 10 digits and a colon.

jim_m_58 over 9 years ago

Travis, the problem addressed in this thread, is if you take a fixed space TTF, run it through bmfont, it loses it's "fixed space", and when it's displayed, as a full string, it can look weird. If you are displaying "hh:mm" one character at a time, the extra overhead is minimal - less than displaying a "move bar" for example!

And also less than a watchface that "drawsRectangle()" to show battery level!