• Replies 11 replies
  • Subscribers 19 subscribers
  • Views 3868 views
  • Users 0 members are here
Options
Related

Anti-Aliasing Custom Font in Digital Watchface?

ChrisX
over 5 years ago

Hello, everybody,
I am new here the developer of the Watchface "Ambi"

https://apps.garmin.com/de-DE/apps/bf70dbb4-905a-4430-bb49-87dbe6f50c09

Please forgive me, but this is my first Watchface and I am not a super developer.

After reading a lot here in the forum and on other sites, I still haven't found a solution.

I created the numbers 0 - 9 in a PNG file (relatively high resolution) and a FNT file.

The time is drawn as with drawText into the Watchface.
But now the edges of the numbers are not very smooth.
According to the documentation drawText does not support "antialiasing".

I'm desperate, how do I make the numbers appear smoother?

Thank you guys for your support.

  • over 5 years ago

    When you define the font in the xml, set antialias="true"

    like this:

    <font id="large" antialias="true" filter="0123456789:" filename="lai100.fnt"/>

    it will cost some memory and not all watches support it.  Like the fr45 for instance.

  • over 5 years ago in reply to jim_m_58

    thanks for your quick response.
    i forgot to mention, my fonts.xml
    already looks like that:

    <fonts>
    <font id="customFont260x260" filename="Font260x260.fnt" filter="0123456789" antialias="true"/>
    </fonts>

    I myself use a vivoactive 4.

  • over 5 years ago in reply to ChrisX

    How was the fnt file built?  You may need to do some pixel editing to get things smoother to start with.

  • over 5 years ago in reply to jim_m_58

    the fnt file still looks like this at the moment.

    info face="Arial" size=-160 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=178 base=144 scaleW=720 scaleH=288 pages=1 packed=0 alphaChnl=0 redChnl=0 greenChnl=0 blueChnl=0

    page id=0 file="NestHubFont260x260.png"

    chars count=10

    char id=48   x=268   y=0     width=65    height=136   xoffset=1     yoffset=28    xadvance=66    page=0  chnl=15

    char id=49   x=469   y=0     width=56    height=136   xoffset=1    yoffset=35    xadvance=57    page=0  chnl=15

    .......

    ......

    .....

    kernings count=1

    kerning first=49  second=49  amount=-12 

    I created a dummy fnt file with BMFont for the font "Arial" then, 
    Because I have my used numbers from my Watchface only as PNG, I transferred the X and Y coordinates (etc.) of the single numbers into the FNT file.

    sorry, like I said, I'm not a good developer..^^

  • over 5 years ago in reply to ChrisX

    pixel edit the png to make it as smooth as possible to start.

  • over 5 years ago in reply to jim_m_58

    unfortunately the edges in the PNG are very smooth (picture 1), while in the Watchface (picture 2 - simulator) there is not much left of it.

  • over 5 years ago in reply to jim_m_58

    i found the error.
    the PNG where the numbers are written had a transparent background.
    when i made the background black with gimp, the numbers in the watchface were also smooth.
    thanks for your help.

  • over 4 years ago in reply to ChrisX

    Just to contribute to this, I found out that to get a smooth font I needed to keep the font smoothing and cleartype turned on in the BMFont tool. 

  • over 4 years ago in reply to 1721169

    When you define the font in resources, you also want to specify anti-aliasing:

    <font id="large" antialias="true" filter="0123456789:" filename="lai100.fnt"/>

  • over 3 years ago

    I don't know whether it is supported on Garmin watches, but generally you can avoid any resolution/scaling problems when using .svg files instead since they are independent to resolution. Rather than containing actual graphical information, they contain the information of how a picture shall be displayed using scalable vectorgraphics. This might be something to look into.