Goodbye, TextField!
April 26, 2009 on 1:00 pm | In Actionscript, Miscellaneous |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):
- Export the font data as an EPS postscript file.
- Write a parser to transform each glyph into a bunch of lineTo, moveTo and curveTo commands.
- Export and parse the spacing and kerning table (proportional fonts only).
- Write a method for drawing cubic bézier curves.
Following these steps I ended up with a simple text rendering engine. Here my result:
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:
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 :-)
Wow! Excellent work.
Having fought my own battles with text in Flash, this is refreshing to see.
Well done!!
Comment by Phil Peron — April, 26 2009 #
I was just looking for something like this as well… please when you have the time publish this!
Comment by Jonathan @ JADBOX.com — April, 26 2009 #
nice one
Comment by Valentin — April, 26 2009 #
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 :)
Comment by qbix — April, 26 2009 #
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.
Comment by Ethan — April, 26 2009 #
this is awesome!
Comment by igor — April, 26 2009 #
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.
Comment by Ben — April, 26 2009 #
Looks great - can’t wait to have a play.
Also looking forward to being able to produce work targeted at FP10.
Comment by Michael — April, 27 2009 #
I’d be interested in checking out the source code :)
Did you see fontpark? http://fontpark.morisawa.co.jp/
It’s by Yugo Nakamura, I’m guessing he’s doing the same thing with loading ttf characters, it’s really impressive.
Comment by sakri — April, 27 2009 #
Exxxcellent job!
Comment by z — April, 27 2009 #
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…
Comment by Corey — April, 27 2009 #
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.
Comment by Michael — April, 27 2009 #
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.
Comment by stringycustard — April, 30 2009 #
Fantastic! I would absolutely love the code for this.
Great work as always.
Comment by Sash — May, 2 2009 #
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 ;)
Comment by Guojian — May, 4 2009 #
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
Comment by Andreas Rønning — May, 4 2009 #
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! :)
Comment by Eric — May, 5 2009 #
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.
Comment by Guojian — May, 6 2009 #
Sorry for the delay. I wanted to add a couple of features before releasing the code.
http://wu-media.com/2009/05/extracting-font-glyphs-from-swf-and-drawing-with-them/
If anybody has suggestion for making it better, optimizations, bug fixes, let me know. thanks
Comment by Guojian — May, 8 2009 #
this is just wicked. Imagine the possibilities in terms of text effects !
Comment by pol — May, 25 2009 #
Incredibly cool. I believe I’ll be using the hell of it when you release it.
Comment by Lee Felarca — June, 10 2009 #
[...] via polygonal labs » Goodbye, TextField!. [...]
Pingback by Unterbahn » Blog Archive » polygonal labs » Goodbye, TextField! — June, 12 2009 #
[...] ????? ? ????????. ????????? ?? ?????????? ???? ?? labs.polygonal.de. ??? ??????? ?????????? ????? ?????: 1) ?????????? ???? [...]
Pingback by ???????? TextField! « Flastar — June, 18 2009 #
It would be awesome if you’d take your time and open source this!
Comment by Trikke — June, 22 2009 #
Can’t wait for the code! Holding my breath… :-)
J
Comment by Jonas Nyström — June, 27 2009 #
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!
Comment by mickey — July, 1 2009 #
So cool :)
How will you handle font bold or underline/italic capabilities ?
Comment by y_nk — July, 1 2009 #
dude, this is real cool. can’t wait to see it opensource.
Comment by fuzz — July, 5 2009 #
Hi,
i like that demo very much but on my computer the TextField (72fps) runs 2 times faster than the drawingAPI (29fps).
Comment by Carsten — July, 7 2009 #
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!
Comment by cmoore — July, 7 2009 #
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
Comment by Rob — July, 14 2009 #
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…
Comment by Michael — July, 15 2009 #
Thanks Michael, have just checked out the code Guojian has open sourced. Looks like it will do the trick.
Rob
Comment by Rob — July, 16 2009 #
Please don´t use this for real homepages, I´d miss copy paste
Comment by Cornelius — July, 20 2009 #
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 ;)
Comment by patrick — July, 22 2009 #
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.
Comment by Porter — August, 19 2009 #
Please make it open source :)
Comment by Viniciu Ramires Leite — August, 20 2009 #
You are genius, it is cool :D
Pls make it open source :)
Comment by luke — August, 23 2009 #
Impressive! :D
Comment by Val — August, 31 2009 #
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?
Comment by Kaushik — September, 6 2009 #
Nice work…
In the demo has the textfield got the autoSize property set? I ask because this makes a big difference in drawing performance.
Comment by Vlakken — September, 17 2009 #
Even after all that trouble, you should *definitely* check out TTX: http://www.letterror.com/code/ttx/
Comment by Jon Williams — September, 18 2009 #
Wow, that’s awesome! Can’t wait to see this as well as the haXe version of motor2. Keep up the good work!
Comment by Jonanin — September, 26 2009 #
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.
Comment by Jloa — November, 17 2009 #
empty screen on 10.1 prerelease : (
Comment by miles — November, 17 2009 #
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?
Comment by Partap — November, 27 2009 #