Sign in to follow this  
lonesock

Unity Signed Distance Bitmap Font Tool

Recommended Posts

Hi, All. OK, there is a cool paper from Valve here, on using a signed distance field in the alpha channel of a texture to recover a nice vector-like representation of a shape using a simple alpha threshold, or looking a bit better in a shader with a smoothstep function. Then I saw this journal, where OrangyTang was using it to render text. So I thought it would be cool to have a tool to build these bitmap font textures from the raw TTF font files. And it would be really cool if it had similar features to the awesome AngelCode Bitmap Font Generator! So I'm writing one, and here is the initial trial (it contains the exe and 3 very nice free fonts for testing purposes). How to use: * drag font files onto the exe * the app asks for a texture size (256 will yield a 256x256 texture for each input font file) * the app will render all valid glyphs in the ANSI range [0..255] * the app will automatically search for the largest rendering size (integer pixels only, so hinting works with a greater range of TrueType fonts) where it can pack the output into the texture you specified earlier * the app packs the rendered Signed Distance Field glyphs into a single texture * look at the output PNG and TXT file (in the same directory as the font file) Credits: * FreeType2 for font rendering * LodePNG for saving the resultant file * BinPacker code from GameDev's own jyk! Please try it out and let me know what you think. Here are my ideas for where I'm going after this (please give any feedback or feature requests): * I want to output a text file compliant with AngelCode's BMFont spec so existing loaders can use this output without changing anything other than the alpha threshold * I want an XML file for configuration so you can specify specific unicode characters (I'm thinking <range>A B</range> and <chars>A B C...ZY ZZ</chars>) * I want to allow an image for input, where a Signed Distance Field would then be computed from that into a lower resolution texture So, what do you think? The source will be released (MIT) when I'm a bit closer to done. (Note, the RGB and A channels all share the same signed distance data, so there is a bit of a border to each glyph...I could just use all white for the color, but I think this looks pretty good.)

Share this post


Link to post
Share on other sites
I've updated the zip (same link). The changes:

* after dragging fonts onto the exe, you specify texture size and the highest Unicode character number (only characters with glyphs will be rendered).

* the output text file now has the offset and advance information, so you can finally render text properly (I hope!) I appended "page=0 chnl=0" to the end of each line to mirror the AngelCode BMFont tool. Note that this info is not integer data, and the offsets may be negative (both functions of the same thing...the actual glyph has border texels to help define the Signed Distance Field)

* There is a bit more text describing the requested inputs

* there is much better error checking (e.g. dragging non-font files onto the exe)

* the zip now includes all my source code, ugly as it is (it also has the LodePNG and BinPacker code...you'll need to get and compile FreeType2 yourself)


@AndyPandyV2: thanks for the kind words, you're welcome for the app [8^)

@OrangyTang & Kylotan: thanks for the feedback/input. As a simple hack you can now input the range of characters to be rendered. I think I like the XML approach as it would be slightly easier for me to implement than the UTF-8 file with all needed characters for 3 reasons: easier to parse as I already use an XML lib, I could see the UTF-8 file getting huge, and there is no guarantee of the glyph order after the packing (though the attendant text file would be in the specified order). Would the XML file be an OK solution for your needs? Or even the current incarnation? (note that rendering the entire Microsoft Arial font into a 4096x4096 took > 20 minutes, so I could see the use of limited sub-ranges! [8^)

Here is some sample output, as I forgot to include this last time:

and the text file:

info face="Automatica BRK"
chars count=97
char id=32 x=208 y=249 width=4 height=4 xoffset=-1.500 yoffset=1.500 xadvance=15.625 page=0 chnl=0
char id=33 x=247 y=205 width=9 height=22 xoffset=-0.750 yoffset=19.625 xadvance=6.875 page=0 chnl=0
char id=34 x=232 y=88 width=17 height=9 xoffset=-0.750 yoffset=19.625 xadvance=14.500 page=0 chnl=0
char id=35 x=198 y=105 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=36 x=32 y=105 width=24 height=27 xoffset=-0.750 yoffset=22.125 xadvance=22.438 page=0 chnl=0
char id=37 x=0 y=22 width=32 height=22 xoffset=-0.750 yoffset=19.625 xadvance=30.375 page=0 chnl=0
char id=38 x=56 y=105 width=24 height=27 xoffset=-0.750 yoffset=22.125 xadvance=22.375 page=0 chnl=0
char id=39 x=18 y=220 width=9 height=9 xoffset=-0.750 yoffset=19.625 xadvance=6.625 page=0 chnl=0
char id=40 x=80 y=176 width=17 height=22 xoffset=-0.750 yoffset=19.625 xadvance=14.625 page=0 chnl=0
char id=41 x=80 y=220 width=17 height=22 xoffset=-0.750 yoffset=19.625 xadvance=14.563 page=0 chnl=0
char id=42 x=216 y=88 width=16 height=11 xoffset=-0.750 yoffset=19.625 xadvance=14.125 page=0 chnl=0
char id=43 x=72 y=88 width=24 height=17 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=44 x=18 y=229 width=9 height=9 xoffset=-0.750 yoffset=4.750 xadvance=6.625 page=0 chnl=0
char id=45 x=223 y=249 width=24 height=7 xoffset=-0.750 yoffset=14.688 xadvance=22.375 page=0 chnl=0
char id=46 x=199 y=249 width=9 height=7 xoffset=-0.750 yoffset=4.875 xadvance=6.875 page=0 chnl=0
char id=47 x=222 y=105 width=24 height=22 xoffset=-0.750 yoffset=19.563 xadvance=22.375 page=0 chnl=0
char id=48 x=56 y=132 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=49 x=246 y=105 width=9 height=22 xoffset=-0.750 yoffset=19.625 xadvance=6.625 page=0 chnl=0
char id=50 x=56 y=154 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=51 x=101 y=105 width=25 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.500 page=0 chnl=0
char id=52 x=56 y=176 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=53 x=56 y=198 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=54 x=56 y=220 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=55 x=32 y=132 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=56 x=32 y=154 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=57 x=32 y=176 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=58 x=9 y=220 width=9 height=22 xoffset=-0.750 yoffset=19.688 xadvance=6.875 page=0 chnl=0
char id=59 x=0 y=220 width=9 height=24 xoffset=-0.750 yoffset=19.688 xadvance=6.875 page=0 chnl=0
char id=60 x=233 y=166 width=17 height=12 xoffset=-0.750 yoffset=17.125 xadvance=14.500 page=0 chnl=0
char id=61 x=56 y=242 width=24 height=12 xoffset=-0.750 yoffset=17.125 xadvance=22.438 page=0 chnl=0
char id=62 x=80 y=242 width=17 height=12 xoffset=-0.750 yoffset=17.125 xadvance=14.500 page=0 chnl=0
char id=63 x=101 y=127 width=25 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.500 page=0 chnl=0
char id=64 x=0 y=44 width=32 height=22 xoffset=-0.750 yoffset=19.625 xadvance=30.375 page=0 chnl=0
char id=65 x=0 y=110 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=66 x=0 y=132 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=67 x=0 y=154 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.375 page=0 chnl=0
char id=68 x=0 y=176 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=69 x=126 y=149 width=25 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.500 page=0 chnl=0
char id=70 x=32 y=220 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.375 page=0 chnl=0
char id=71 x=32 y=198 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=72 x=151 y=205 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=73 x=175 y=227 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.375 page=0 chnl=0
char id=74 x=175 y=205 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=75 x=223 y=183 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=76 x=199 y=227 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.375 page=0 chnl=0
char id=77 x=0 y=66 width=32 height=22 xoffset=-0.750 yoffset=19.625 xadvance=30.313 page=0 chnl=0
char id=78 x=223 y=227 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=79 x=175 y=183 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=80 x=151 y=183 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.375 page=0 chnl=0
char id=81 x=199 y=183 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=82 x=199 y=205 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=83 x=223 y=205 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.375 page=0 chnl=0
char id=84 x=151 y=227 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=85 x=126 y=171 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=86 x=126 y=193 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.375 page=0 chnl=0
char id=87 x=0 y=88 width=32 height=22 xoffset=-0.750 yoffset=19.625 xadvance=30.313 page=0 chnl=0
char id=88 x=126 y=215 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=89 x=151 y=127 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=90 x=175 y=127 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.375 page=0 chnl=0
char id=91 x=80 y=198 width=17 height=22 xoffset=-0.750 yoffset=19.625 xadvance=14.500 page=0 chnl=0
char id=92 x=126 y=127 width=25 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.500 page=0 chnl=0
char id=93 x=0 y=198 width=17 height=22 xoffset=-0.750 yoffset=19.625 xadvance=14.688 page=0 chnl=0
char id=94 x=57 y=66 width=16 height=9 xoffset=-0.750 yoffset=19.625 xadvance=14.500 page=0 chnl=0
char id=95 x=32 y=66 width=25 height=7 xoffset=-0.750 yoffset=-0.063 xadvance=22.500 page=0 chnl=0
char id=96 x=18 y=238 width=9 height=9 xoffset=-0.750 yoffset=19.625 xadvance=6.625 page=0 chnl=0
char id=97 x=192 y=88 width=24 height=17 xoffset=-0.750 yoffset=14.688 xadvance=22.438 page=0 chnl=0
char id=98 x=199 y=127 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=99 x=183 y=149 width=25 height=17 xoffset=-0.750 yoffset=14.688 xadvance=22.500 page=0 chnl=0
char id=100 x=223 y=127 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=101 x=208 y=166 width=25 height=17 xoffset=-0.750 yoffset=14.625 xadvance=22.500 page=0 chnl=0
char id=102 x=101 y=149 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.375 page=0 chnl=0
char id=103 x=101 y=171 width=24 height=22 xoffset=-0.750 yoffset=14.688 xadvance=22.438 page=0 chnl=0
char id=104 x=101 y=193 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.438 page=0 chnl=0
char id=105 x=247 y=127 width=9 height=22 xoffset=-0.750 yoffset=19.625 xadvance=6.750 page=0 chnl=0
char id=106 x=80 y=105 width=21 height=27 xoffset=-0.750 yoffset=19.688 xadvance=18.500 page=0 chnl=0
char id=107 x=101 y=215 width=24 height=22 xoffset=-0.750 yoffset=19.625 xadvance=22.375 page=0 chnl=0
char id=108 x=247 y=183 width=9 height=22 xoffset=-0.750 yoffset=19.625 xadvance=6.625 page=0 chnl=0
char id=109 x=151 y=149 width=32 height=17 xoffset=-0.750 yoffset=14.688 xadvance=30.313 page=0 chnl=0
char id=110 x=232 y=149 width=24 height=17 xoffset=-0.750 yoffset=14.688 xadvance=22.438 page=0 chnl=0
char id=111 x=208 y=149 width=24 height=17 xoffset=-0.750 yoffset=14.688 xadvance=22.438 page=0 chnl=0
char id=112 x=126 y=105 width=24 height=22 xoffset=-0.750 yoffset=14.688 xadvance=22.375 page=0 chnl=0
char id=113 x=150 y=105 width=24 height=22 xoffset=-0.750 yoffset=14.688 xadvance=22.438 page=0 chnl=0
char id=114 x=183 y=166 width=25 height=17 xoffset=-0.750 yoffset=14.688 xadvance=22.500 page=0 chnl=0
char id=115 x=168 y=88 width=24 height=17 xoffset=-0.750 yoffset=14.688 xadvance=22.438 page=0 chnl=0
char id=116 x=126 y=237 width=24 height=19 xoffset=-0.750 yoffset=17.125 xadvance=22.438 page=0 chnl=0
char id=117 x=101 y=237 width=24 height=17 xoffset=-0.750 yoffset=14.688 xadvance=22.500 page=0 chnl=0
char id=118 x=96 y=88 width=24 height=17 xoffset=-0.750 yoffset=14.688 xadvance=22.438 page=0 chnl=0
char id=119 x=151 y=166 width=32 height=17 xoffset=-0.750 yoffset=14.688 xadvance=30.313 page=0 chnl=0
char id=120 x=120 y=88 width=24 height=17 xoffset=-0.750 yoffset=14.688 xadvance=22.438 page=0 chnl=0
char id=121 x=174 y=105 width=24 height=22 xoffset=-0.750 yoffset=14.688 xadvance=22.500 page=0 chnl=0
char id=122 x=144 y=88 width=24 height=17 xoffset=-0.750 yoffset=14.688 xadvance=22.438 page=0 chnl=0
char id=123 x=80 y=132 width=21 height=22 xoffset=-0.750 yoffset=19.625 xadvance=18.500 page=0 chnl=0
char id=124 x=247 y=227 width=9 height=27 xoffset=-0.750 yoffset=19.625 xadvance=6.625 page=0 chnl=0
char id=125 x=80 y=154 width=20 height=22 xoffset=-0.750 yoffset=19.625 xadvance=18.438 page=0 chnl=0
char id=126 x=32 y=242 width=24 height=12 xoffset=-0.813 yoffset=17.125 xadvance=22.375 page=0 chnl=0
char id=198 x=0 y=0 width=40 height=22 xoffset=-0.750 yoffset=19.625 xadvance=38.188 page=0 chnl=0
char id=230 x=32 y=88 width=40 height=17 xoffset=-0.750 yoffset=14.688 xadvance=38.313 page=0 chnl=0


Share this post


Link to post
Share on other sites
Quote:
Original post by lonesock
@OrangyTang & Kylotan: thanks for the feedback/input. As a simple hack you can now input the range of characters to be rendered. I think I like the XML approach as it would be slightly easier for me to implement than the UTF-8 file with all needed characters for 3 reasons: easier to parse as I already use an XML lib, I could see the UTF-8 file getting huge, and there is no guarantee of the glyph order after the packing


By definition the UTF-8 file would almost always be smaller than the XML version. However, you've not made it clear what metadata would go in the XML - not that I can see an immediate need for any. Not a big deal to me either way though.

Share this post


Link to post
Share on other sites
Quote:
Original post by Kylotan
...you've not made it clear what metadata would go in the XML...

I'm sorry, you are correct. Here is an example of what I was thinking:

<?xml version="1.0"?>
<SDFont>
<range name="Basic Latin">0000 007F</range>
<range name="Extended Latin">00A0 02FF</range>
<range name="Greek">0300 03FF</range>
<chars name="Just Because">20A3 20A4 2500 2663</chars>
</SDFont>



@NineYearCycle: Thank you, I'm glad you can use it!

Share this post


Link to post
Share on other sites
I've put a version that I knocked up over a couple of lunchtimes here (.zip & VC2005 .sln) there's no prizes for guessing where I grabbed the basecode from :D

It just uses the shader that OrangyTang gave out on his journal and some basic setup stuff that I grabbed from other OSS sites.

The effect is really cool and I'm impressed just how little effort and data it requires to get something like this going!

I'll try and pull out some of the shader constants later on and get it to give some options about which font it loads and uses.

At the moment there's some graphical issues relating to texture wrap, or maybe I've calculated the S & T values wrong for some of the characters. Haven't had chance to take a closer look yet.

Good work! I updated it to use your new version as well.

Andy

Share this post


Link to post
Share on other sites
Oh I forgot to say, I used Glee for the opengl extension support and that it, totally arbitrarily, demands that your gfx card support GL version 2.0 or better.

Think I did that just because I was testing what version of OpenGL I had on my ATi at work :/ should probably remove it but if it bombs out early that'll be why!

Andy

Share this post


Link to post
Share on other sites
I posted a new version with 2 new little features:

1) you can drag an image onto the exe, and it will generate a signed distance field from that (thanks to stb_image!). This will let you use the tool for logos or signs or whatever.

e.g. and

2) for the fonts, if you specify a negative texture size it will also save the resulting SDFont data to a C header file, for easy inclusion into a project. This is more something for me and less of a feature I think other people will like, but there you go [8^)

Thanks to everybody who has tested this!

[edited to add the gamedev logo [8^)

[Edited by - lonesock on May 4, 2008 2:26:01 AM]

Share this post


Link to post
Share on other sites
Very nice!! =)

Two sugestions!

- A GUI Version??? It will be nice to set the properties in an GUI an see a preview of the resulting font! =)

- Export to Asphyre Casual XML font format! =)

Keep on the good work! =)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Announcements

  • Forum Statistics

    • Total Topics
      628383
    • Total Posts
      2982379
  • Similar Content

    • By Canislupus54
      I'm looking for programmers for an rpg I want to make. If you're wondering what "semi-turn based" means, it means that you take turns, but instead of a rigid back and forth like Pokemon, a timer determines when you can act, a sort of modernization of the classic Final Fantasy Active Time Battle system. Right now, I'm looking for programmers to create a prototype of both the combat system and the movement outside of combat. Preferably for Unity C#. Concept artists, particularly for characters, and writers to help me flesh out the character and story aspects, would also be helpful.
      Here's a concept doc to fully explain things: https://docs.google.com/document/d/1ObDMAUWsndSAJ1EpQGRDxtR8Xl9xPotx89OZ0sgRaIw/edit?usp=sharing
      If you can fill another role and are interested, feel free to let me know as well.
      At the moment, this is purely a hobby project, with no payment planned. If we produce something we feel we can release, then of course we'll work out something for compensation. But, again, don't join this project counting on payment.
      If you're interested, contact me on here, or at jordestoj@yahoo.com . Thanks.
    • By sveta_itseez3D
      itSeez3D, a leading developer of mobile 3d scanning software, announced today a new SDK for its automatic 3D avatar generation technology, Avatar SDK for Unity. The Avatar SDK for Unity is a robust plug-n-play toolset which enables developers and creatives to integrate realistic user-generated 3D avatars into their Unity-based applications. SDK users can allow players to create their own avatars in the application or integrate the SDK into their own production processes for character design and animation.
      “Virtual avatars have recently become increasingly popular, especially in sports games and social VR apps. With the advance of VR and AR, the demand to get humans into the digital world is only increasing”, said Victor Erukhimov, itSeez3D CEO. “Our new Avatar SDK for Unity makes it super-easy to bring the avatar technology into any Unity-based game or VR/AR experience. With the Avatar SDK for Unity now every developer can bring face scanning technology into their games and allow players to create their own personalized in-game avatars, making the gameplay much more exciting and immersive.”
      Key features of the Avatar SDK for Unity:
      Automatic generation of a color 3D face model from a single selfie photo in 5-10 seconds (!). Works best with selfies, but can be used with any portrait photo.
      Shape and texture of the head model are unique for each person, synthesized with a deep learning algorithm crafted by computer vision experts
      Head models support runtime blendshape facial animations (45 different expressions)
      Generated 3D heads include eyes, mouth, and teeth
      Algorithms synthesize 3D meshes in mid-poly resolution, ~12k vertices, and ~24k triangles
      Six predefined hairstyles with hair-recoloring feature (many more available on request)
      Avatar generation API can be used in design-time and in run-time, which means you can allow users to create their own avatars in your game
      Cloud version is cross-platform, and offline version currently works on PCs with 64-bit Windows (support for more platforms is coming soon)
      Well-documented samples showcasing the functionality.
       
      Availability
      The Avatar SDK for Unity is offered in two modes - “Cloud” and “Offline”. The “Cloud” version is available at http://avatarsdk.com/ and the “Offline” version is available by request at support@itseez3d.com.
      ###
      About itSeez3D
      At itSeez3D, we are working on the computer vision technology that turns mobile devices into powerful 3D scanners. itSeez3D has developed the world's first mobile 3D scanning application that allows to create high-resolution photorealistic 3D models of people's' faces, bodies and objects. The application is available for iOS and Windows OS mobile devices powered with 3D cameras. In 2016 the company introduced Avatar SDK that creates a realistic 3D model of a face from a single selfie photo. To learn more about itSeez3D scanning software and 3D avatar creation technology, please visit www.itseez3d.com and www.avatarsdk.com.

      View full story
  • Popular Now