Feature request - Alpha-tested magnification

[sirival]

Hi there,

I think it would be really awesome if you had an implementation of this paper:

http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf

KvanteTore has already taken a shot at implementing this in Unity:

http://forum.unity3d.com/threads/68647-Scaling-Bitmap-Fonts

Perhaps whenever you import fonts you could automatically generate the distance texture in your atlas maker, and all your text shaders could work with the Alpha Test Magnification shader ( which already exists in Unity ).

That would allow users to create 3d text that is very crisp at all distances and also automatically create outlines and shadows for it too. Imagine that you want to add some text on a wall like a WARNING sign. You could create a Label, put that on the wall in 3D and that would look really good at all distances instead of small and blurry like now.

I does require work of course, but it would be really nice!

Regards!

[ArenMook]

Yeeeah... except that there are no "text shaders". Fonts are generally a part of the atlas, and you can't apply that shader to the entire atlas or you will get some very weird results. I've looked into this before. It works well only in certain situations (font being in a separate texture, using a separate draw call, and pre-generated offline with plenty of padding in-between of characers). It's not a silver bullet.

[sirival]

Hey there - thanks for responding.

Well couldn't it work in a similar way to the way packed fonts work? You do need a different texture there and you are using a different material / shader to render packed fonts. So I would guess that your font maker could have an option to create a distance font texture instead of a 'normal' font texture  and add a shader that should be used to render text with this texture. It wouldn't work in every case of course but as packed fonts have their limitations so would that.

Let me know if I'm missing something!

Regards

[ArenMook]

Certainly can, and all you need to do is write a shader for it. No source code modifications necessary.

Keep in mind, font maker doesn't make textures. The font texture is created by an external program -- BMFont, bmGlyph, Glyph Designer, Hiero... I know at least one of them can make these maps already.

[sirival]

Cool!

I did that and it seems to work! Here is a screenshot:

[ArenMook]

Nice! Share the shader and the process you've followed with the community for extra bonus points

[loopyllama]

that is really cool!                                                                                                                             awesome work!

[sirival]

Well it took some time for me to end up with something that works and perhaps you might be able to help make this process a little more painless, if you are interested.

Here are the steps:

• Download this tool: http://bitsquid.blogspot.com/2010/04/distance-field-based-rendering-of.html
• Download the shader found in this post:: http://forum.unity3d.com/threads/68647-Scaling-Bitmap-Fonts/page3
• Run BMFont ( I haven't used other font tools )
• Make sure that you select an 8 bit depth!
• Also select the XML option for the output file
• Add  16-pixels padding to all sides of the characters
• Select the white text with alpha preset
• Save your settings and export the font
• Open up the export settings again and select the text format for the output file
• Export the font again with a different name ( we need both the XML and the text files )
• Now run the tool you downloaded in step 1
• Click File->Convert and select the .fnt file that was saved in step 8 ( the xml one ). This will create a new texture and a new .fnt file. Delete this new fnt file as it doesn't work for some reason
• Time to import stuff in Unity. Import the shader from step 2. Import the texture created by the converter in step 12. Import the text fnt file created in step 10.
• Change the extension of this fnt file to txt
• Open the Font Maker and assign the font texture and the text file. Do not add them to your atlas just create a font without an atlas
• Select the material of the font that was just created and change its shader to the one we downloaded
• That should be enough. You can now create Labels with this font and your text should appear a lot sharper. Note that the default color of the new material is white and you cannot change that from the UILabel inspector. You need to go to your material and change the color there.

.

Messy but it worked for me. Let me know if it doesn't work for you!

[ArenMook]

Good stuff, thanks for sharing!

[PixelEnvision]

Nice work sirival, thx for sharing! 

Are you using this on a desktop project or mobile? I'm curious about the shader performance...

[sirival]

Hey there,

I've been working on a desktop - web player project so I haven't tested this on mobile. I think the shader should be pretty fast though.

[rsoo]

Well it took some time for me to end up with something that works and perhaps you might be able to help make this process a little more painless, if you are interested.

Here are the steps:

• Download this tool: http://bitsquid.blogspot.com/2010/04/distance-field-based-rendering-of.html
• Download the shader found in this post:: http://forum.unity3d.com/threads/68647-Scaling-Bitmap-Fonts/page3
• Run BMFont ( I haven't used other font tools )
• Make sure that you select an 8 bit depth!
• Also select the XML option for the output file
• Add  16-pixels padding to all sides of the characters
• Select the white text with alpha preset
• Save your settings and export the font
• Open up the export settings again and select the text format for the output file
• Export the font again with a different name ( we need both the XML and the text files )
• Now run the tool you downloaded in step 1
• Click File->Convert and select the .fnt file that was saved in step 8 ( the xml one ). This will create a new texture and a new .fnt file. Delete this new fnt file as it doesn't work for some reason
• Time to import stuff in Unity. Import the shader from step 2. Import the texture created by the converter in step 12. Import the text fnt file created in step 10.
• Change the extension of this fnt file to txt
• Open the Font Maker and assign the font texture and the text file. Do not add them to your atlas just create a font without an atlas
• Select the material of the font that was just created and change its shader to the one we downloaded
• That should be enough. You can now create Labels with this font and your text should appear a lot sharper. Note that the default color of the new material is white and you cannot change that from the UILabel inspector. You need to go to your material and change the color there.

.

Messy but it worked for me. Let me know if it doesn't work for you!

which shader are you talking about in step 2? the one I tried did not work

[sirival]

which shader are you talking about in step 2? the one I tried did not work

Hey there - the one I tried was the shader named "Ippo/Font/Plain".

[rsoo]

Hey there - the one I tried was the shader named "Ippo/Font/Plain".

Hi, thanks for the clarification!

Unfortunately I followed your exact steps a few times over and I couldn't get it to work as intended

I downloaded the tool and the shader, followed your BMFont export options, converted the xml .fnt file, deleted the converted xml .fnt, put the converted texture and txt .fnt file into the font maker, and applied the shader but my resulting label resulted nothing the font.  Any ideas on what I may have done wrong?

Thanks again!

[sirival]

Hi, thanks for the clarification!

Unfortunately I followed your exact steps a few times over and I couldn't get it to work as intended

I downloaded the tool and the shader, followed your BMFont export options, converted the xml .fnt file, deleted the converted xml .fnt, put the converted texture and txt .fnt file into the font maker, and applied the shader but my resulting label resulted nothing the font.  Any ideas on what I may have done wrong?

Thanks again!

Hi there,

I added a quick video showing this exact process. It doesn't have any sound but hopefully it will help you out a bit. Other than that I have no idea what might be wrong! Note that even though I managed to make this work I am not actually using these fonts in my game - it was more R&D so I'm not sure if it works fine in practice but at the moment I don't see a reason why it shouldn't.

Here's the link to the video: http://youtu.be/Jd7mqoOBkI0

Regards!