Pixel Perfect Bitmap Font in Unity

Hi

I made a Unity package that shows how to render pixel perfect bitmap fonts in Unity using Sprite Manager. I hope some of you find it useful

http://lukasz.dk/2011/05/01/pixel-perfect-bitmap-font-in-unity/

My first post on this forum, please be gentle! Hopefully more to come

 

Hey Lukasz, could you maybe elaborate on the advantages of using this approach ? Performance ? Usability ?
I've been reading a lot about these things lately, but still I enjoy a bit more insight in how it works, how it performs before actually taking the next step and adapt the explained method.

It sounds cool with the onedrawcall thing, yet I think it might be even cooler if more people understand what's going on !
Maybe everyone knows and understands already, but me

 

Hi Acumen

There is actually a very good answer to your question on Stack Overflow.

As the answer says, if you make too many draw calls, you will spend a lot of CPU time making those calls, precious CPU time that could be spend on other parts of your game. You want the GPU to do all the heavy lifting when it comes to rendering.

The reason why I create this example is that currently Unity makes one draw call for every GUI.Label call you make, (maybe this will change in the future *hint* *hint*). I was already drawing 100s of sprites using Sprite Manager and it seemed kinda silly that I could draw all of those in one draw call, but not 10-20 GUI.Labels.

Bottom line is that there might not be a huge performance benefit from using this approach of rendering text. However I like to optimize where possible and you never know when you are gonna need those precious extra CPU cycles

Hope this answers your question.

 

Really fantastic initiative. There isn't actually a solution for simple robust text until now. I think however, using hiero is better than the method you propose above, because hiero allows you to have truly customisable font look rather than just white. I wonder if you are interested in supporting hiero output? The benefit of hiero having a gui is also very good

 

Thanks for pointing me to the Hiero Bitmap Font Tool, I was not aware that it existed. I'm a Mac user, so I used BMFontGen in a Windows XP guest OS in Virtualbox. I would rather use a cross platform tool for generating the bitmap font, I might actually look into supporting this at some point in the near future.

As for colors of the text, you can easily change the color of the individual characters through Sprite Manager. I've updated by blog post to include a screenshot that shows the text in many different colors along with simple instructions on how I made it.

 

I was quite aware of the performance issues with drawcalls and such.
What I'd like to know...
I always read how awesome and powerful Sprite Manager can be with the one drawcall only approach, however I didn't understand, for what situations could we apply your example for texts ?

Say, we have our project with 2 different fonts: gradients, outline, everything that Hiero can render out basically.
We'd need this for "dynamic" fonts like score and a timer ingame that adds the score and shows a 90 second timer.
Could we use and incorporate your example within Sprite Manager and have it all managed in one drawcall without a problem ?
Cause the actual usage of the timer and score system was something we hit the walls quite early in development. So for the next time we'll tackle something like this, we'd want to make sure we have the best performance possible

Maybe you could elaborate on the mentioned examples of score and timer in an actual game, e.g. whether this would be a good approach with your described method...
Thanks in advance

 

What are the advantages of Sprite Manager over the build in TextMesh component? I know sprite manager can size sprites to be pixel perfect etc... but surely a simple script could do this for TextMesh also?

 

Nice work! SpriteManager sort of cries out for being used in a manner like this. So much so that I implemented something somewhat similar in EZ GUI.

Regarding what the advantages are, well, for one, since you control the text mesh geometry, you have a lot more control over how it is used, and what you can do with it. Whereas TextMesh is completely black box and exposes almost nothing.

I can't speak for the solution mentioned here, but EZ GUI's SpriteText class supports color tags, so you can color individual portions of the text. It also supports automatic line wrapping with customizable width. And the big reason it was created for EZ GUI to replace TextMesh was to support clipping. SpriteText can be clipped to a rectangular area, thus allowing it to be clipped to the viewable area of an EZ GUI scroll list, etc.

Anyway, these are things you can't do with TextMesh, and why a solution like the one here is advantageous. Of course, it would be nice if Unity would just open up TextMesh, and then we could do all sorts of cool things under the hood there.

Also, while Hiero is a nice free tool, anyone considering using something like this should have a look at Glyph Designer. It's really polished and easy to use.

 

I made another minor update to original blog post with an example of how you could render dynamic text that is updated every frame using Sprite Manager.

The way the Sprite Manager works is that maintains a Unity Mesh object and provides you with an interface that makes it easy to update this Mesh update for the purpose of rendering 2D. The Mesh object is divided to many sprites that you can easily update individually.

In order to draw dynamic text you need to update (possibly add and remove) sprites that the Sprite Manager maintains. Since everything is in the same Mesh object and you are only updating part of it, but submitting the entire Mesh object to the GPU. It would probably be better to have 2 Sprite Manager running, one for static sprites and one for dynamic sprites, this way you do not upload unnecessary data to the GPU.

I think the bottom line is that it would always be better to use an an approach similar to this one where you batch all your rendering of 2D text instead of drawing the characters individually.

 

I think brady uses hiero in EZGUI for text support there. Does your system render reasonably fast? I will try it out tonight

There are some quirks with hiero, which are easy to spot. Sometimes it won't export the png the right way up, and this is easily fixed in a paint package.

Hm, I think I'll actually pass on that for now. $29.99 for almost identical functionality to hiero? hmph! While it is gorgeous it is also mac only, and I prefer to develop on my PC desktop

 

Hi there, I'm using SpriteManager for a project and I'd love to implement this bitmap font package into it, but it seems that both the BitmapFontDemo and BitmapFontDemo2 .unitypackage files I downloaded from your site are broken or not a valid format for the version of Unity I'm using (v. 3.3.0f4, the latest one). Could you please upload a fixed version of each file?

Thanks!

 

I just tried downloading the .unitypackages myself, I experienced no issues when importing into Unity 3.3.0f4.

I have upload a zip file which contains the two unitypackages, see if that works for you : BitmapFontDemoUnity.zip

 

Cool, it's working for me now, thank you! Not sure what was going wrong before.
By the away, thanks again for making this tool! I really appreciate it and your texture atlas program, they're invaluable assets for 2D game projects like the one I'm working on!

 

If some of you are looking for a solution to render dynamic truetype fonts in pixel-perfect way, you might want to check out this asset:

Dynamic Text in Asset Store.

The Dynamic Text component is used for displaying pixel-perfect camera-facing text. The size and position are defined in world units. If compared to Unity's built-in text components, Dynamic Text is sharp like built-in GUIText, but part of the scene like TextMesh.

The same dynamic fonts are used what you would use with TextMesh, and also the same standard font material and shader are in use. It works both with orthogonal and perspective cameras, and suits best for situations where font size on screen stays mostly static. Regardless of font's unit size on screen or camera distance, the text will be renderer pixel-perfect.

Check out the Dynamic Text website for more info (e.g. interactive demo for Unity web player or a YouTube video of the demo).