Goodbye, TextField!

Working with text in Flash can be a painstaking procedure, especially if you just want to quickly draw and animate some simple characters on screen using ActionScript. It usually takes many lines of codes to setup and adjust the appearance and alignment of text fields and you need to take care of other little annoying details like the whole font embedding procedure.

Lately I was working on a new interactive testbed for the motor physics engine where I’m solely using the new flash player 10 vector drawing API, but I needed to add some text. I was curious about how hard it would be to add text rendering capabilities to the drawing API and after some investigation I found an easy way using an old copy of Fontographer to extract the necessary data from a true type font file (much easier than trying to parse a .ttf file directly):

  1. Export the font data as an EPS postscript file.
  2. Write a parser to transform each glyph into a bunch of lineTo, moveTo and curveTo commands.
  3. Export and parse the spacing and kerning table (proportional fonts only).
  4. Write a method for drawing cubic bézier curves.

Following these steps I ended up with a simple text rendering engine. Here my result:

Monospace/Proportional font rendering (Consolas/Arial)

As you see small font sizes won’t be that sharp and readable as a TextField set to “Anti-alias for readability” but on the other hand the results are very smooth and perfect for animation. Placing and aligning text blocks is also much easier since it’s straightforward to compute bounding boxes for glyphs and text blocks.

So now drawing a text is a matter of writing:

...
graphics.beginFill(0, 1);
new Arial(10.0).print("Hello World", 100, 100);
graphics.endFill();
...

This will draw “Hello World” at x,y=100,100 and a font size of 10 points. KISS!
An exciting thing is that the FP10 drawing API is actually very fast; the following demo scrolls all ASCII characters back and forth. Press space to toggle between regular text field and vector rendering. In the first case a TextField object is created once and then moved by adjusting its position, whereas in the second case the whole text is redrawn in every frame at a new position:

TextField vs. Graphics

If (hopefully) more people besides me find this useful I would invest some extra time to polish the code and publish it as open source. It made my coding life simpler :-)

47 thoughts on “Goodbye, TextField!”

  1. Five3D has a font exporter that does pretty much the same thing you did, but all within Flash. He uses a JSFL script to export a font into an as file with simple drawing API commands. The Five3D engine contains a script to interpret this as file.

    I’ve created a simplified version of this method in the past but only to vectorize simple logos, not to render full paragraphs of text :)

  2. One thing is this sidesteps the Five3D issue where there is a conflict with the z property that flash 10 has. I have not seen an update to deal with that yet.

  3. That is really nice, and it’d be great if you choose to release it for public use.

    I’ve definately had my battles with Flash’s TextField myself, and been considering if something like this would be effective – but I hadn’t imagined the difference would be this big.

  4. I’d certainly be interested in this code since I’m about to work on a very text-heavy project to get my hands dirty in 10’s new text engine. Strange that TextFields aren’t that fast…

  5. in my example the TextField is slow because I’m moving a really huge bitmap. splitting the text into single characters and moving them individually would be much faster, but then you have the problem to get the spacing and kerning right.

  6. Woo! Brilliant. I was busy writing an entirely custom textField as the built in one is severely limited and broken in so many ways. This is perfect for that, thanks so much.

  7. Great stuff.

    This inspired me to write my own over the weekend And the results are promising.

    I am using a different approach for the fonts. I’m extracting embedded fonts in the swf. This way you’re reusing the fonts already used by flash which will save some file size and also eliminates the extra step of having to create a font file/class.

    I have the font extraction and text rendering logic done and it looks good. I want to add a couple features (mainly for styling) and clean up the code and i might release it later.

    thanks for the inspiration ;)

  8. Dude. Hook a brother up :)
    I think the problem of temporary UI for prototypes and the like gets nowhere near enough attention. I’m working on a set of classes for handling this myself, and text fields are *always* a bitch.

    If you’d open this i’d be eager to contribute

  9. I wonder if you could take advantage of some of the code used in the Cufón JavaScript font rendering library?

    http://wiki.github.com/sorccu/cufon/about

    Cufón includes a generator (written in PHP) which converts TTF and OTF files into a similar file format to the one you mentioned.

    http://cufon.shoqolate.com/generate/

    Data ends up in JavaScript, looking something like this:

    http://github.com/sorccu/cufon/blob/master/fonts/Frutiger_LT_Std.font.js

    That even looks ActionScript compatible! :)

  10. I will be releasing my version in the next couple of days. With five3D and PV3D samples. With font extraction from the same swf you’re running or from a loaded swf.

  11. great stuff! a solid font-reader/renderer (ttf/otf) for as3 could make life easier! font embedding requires workarounds since flash 4 (1999) and it still does – what a sad anniversary..
    would be great to get the sources of the glyph rendering!

  12. Hi,
    i like that demo very much but on my computer the TextField (72fps) runs 2 times faster than the drawingAPI (29fps).

  13. great stuff!! i hate embedding fonts it becomes a headache stumbling up my coding sessions spending 15 minutes to figure out why embed isn’t working to find out it is not in the precise order :P

    keep it at it!

  14. Was wondering if there was any news on this code being open sourced or distributed as is. I’ve been looking for this exact thing, so far this is the only place I’ve found anything.

    Great work
    Rob

  15. Thanks for all the comments and suggestions. I haven’t found enough time to work on it yet. Another problem is that it’s currently not possible to create a swc file from the haXe source code due to some bugs. Rob, have you looked at the link posted by Guojian ? From what I’ve read it offers the same functionality…

  16. Thanks Michael, have just checked out the code Guojian has open sourced. Looks like it will do the trick.

    Rob

  17. hi, I’m beginning to write an OS and with no built in text drawing this would be seriously useful. Definiteley interested in the polished source ;)

  18. That’s really awesome. I’m not nearly that advanced with my coding yet, but I followed everything you said and it’s very impressive. The fps difference was incredible as well. Great work, you should definitely work on refining it.

  19. I have been looking for logic to do some line hatching inside TTF Fonts. This line hatching needs to be done in vector format i.e. i am required to draw line by line and fill the hollow characters drawn.
    ANyone who can guide on logic of doing this?

  20. Nice work…

    In the demo has the textfield got the autoSize property set? I ask because this makes a big difference in drawing performance.

  21. Wow, that’s awesome! Can’t wait to see this as well as the haXe version of motor2. Keep up the good work!

  22. Omg, the TextField really sucks in about x3 times.
    Thx for sharing this performance test. I knew the TextField was slow but not that slow.

  23. On my machine, the FP10 version seems to average around 43 FPS, while the TextField version is around 55 FPS.

    Am I missing something here?

Comments are closed.