Font rendering with the FP10 drawing API
December 15, 2009 on 1:09 am | In Actionscript | 33 CommentsAfter all the vector/font rendering library is done – the HaXe sources and SWC files for ActionScript 3.0 are available on the polygonal google code project page. As a reminder – the project started as an experiment if it’s possible to render fonts using the FP10 drawing API without loading or embedding any additional assets.
For obvious reasons, I can only include free fonts. At the moment the de.polygonal.graphics.text.fonts package contains Microsoft’s TrueType core fonts hosted on sourceforge, the Bitstream Vera fonts as well as the famous bitmap04 pixel fonts.
The pros and cons
Pros:
- No font embedding required :) Import a font class and you are ready to go
- Provides high quality font rendering; best used for extra smooth text animation
- Seriously fast!
- Seamless integration into the FP 10 drawing API
Cons:
- An ASCII set of printable characters adds about 20kb-30kb to the swf file – I’ll try to reduce this in a future release.
- Not very readable at small font sizes (except pixel fonts) because it does not include any hinting information for improving the quality – text remains legible down to about 12 points (viewed at 100%)
- You need a copy of Fontographer 4.1 to convert ttf files
- No text field functionality yet
- Only supports ASCII character (latin character set like ISO-8859 is planned)
Examples
Here are the ‘MS core fonts for the web’ rendered with the font library:
This also works amazingly well for pixel fonts (which I didn’t expect at all):
How it works
First a .ttf file is loaded into Fontographer and exported as a postscript file (I tried other methods but I stuck with this approach because postscript files are easy to understand). A parser reads this file and generates a HaXe class that contains the glyph data. The result is something like this: Arial.hx.
If using HaXe, the font_inline compiler flag gives you control over compilation time vs runtime performance. If omitted, compilation is fast so it’s best suited for frequent testing and debugging and the compiler-based auto-completion remains responsive. If compiled with -D font_inline, compilation is slow but results in the best performance.
The actual rendering is done by a class named de.polygonal.graphics.VectorRenderer. It uses the FP 10 drawing API in conjunction with ‘alchemy memory’ as a temporary buffer to gain some extra speed. At first all drawing commands are written into a chunk of memory, then copied into a vector and finally sent to the screen via graphics.drawGraphicsData(…). Depending on the CPU this is roughly 1.5-4x faster than using only vector. Note that this only accelerates the process of preparing the data, not the rendering itself (everything beyond drawGraphicsData())
ActionScript 3.0 usage
Grab the SWC file, add it to the library and the following code should (hopefully) compile fine:
package
{
import de.polygonal.ds.mem.MemoryManager;
import de.polygonal.graphics.text.fonts.coreweb.Arial;
import de.polygonal.graphics.VectorRenderer;
import flash.display.MovieClip;
import flash.Boot;
public class Main extends MovieClip
{
public function Main():void
{
new Boot(this);
MemoryManager.allocate(4096);
var vr:VectorRenderer = new VectorRenderer(512);
vr.setLineStyle(0, 1, 0);
var font:Arial = new Arial();
font.bezierThreshold = 0.001;
font.setPointSize(100);
font.setRenderer(vr);
font.write("Hello World!", 0, 100, false);
vr.flush(graphics);
}
}
}
The source code reads like this:
- initialize HaXe specific things
- allocate 4 megs of alchemy memory to be on the safe side
- create a vector renderer using a buffer size of 512kb
- assign a line style (rgb, alpha, thickness)
- create a font object
- define curve smoothness, the smaller, the better (0=linear approx. using 2 segments/curve)
- set the font size: 100 equals 72pt or one inch.
- assign a renderer so the font can send drawing commmands to it
- draw “Hello, World!” at the coordinates 0,100 (x,y), if the last parameter is true, the text will be centered around (x,y)
- flush the buffer which draws everything to the screen
Glyph and text bounds
You can compute axis aligned bounding boxes for the whole text block or individual characters using the getBounds() and getIndividualBounds() methods prior to drawing the text:
Creating font classes
Converting fonts can be done using de.polygonal.gl.text.util.EPSConvert.
Social comments and analytics for this post…
This post was mentioned on Twitter by polygonal: FP10 font rendering library released http://tiny.cc/CWizb...
Trackback by uberVU - social comments — December, 15 2009 #
Hey, did you know that as3swf can export font glyphs directly to drawing api code? You could generate the font .hx files directly from a swf (that has that font embedded) and skip the Fontographer/ps conversion:
http://wiki.github.com/claus/as3swf/shape-export
Comment by Claus Wahlers — December, 15 2009 #
I don’t understand why, but it doesn’t work with FP 10.1.51.45(prerelease version )
Comment by Andrew — December, 15 2009 #
Awesome stuff man. Look forward to playing with it.
Comment by John Stone — December, 15 2009 #
I’m aware of that – somehow the class name FloatMemory and ByteMemory which I’m using for the memory stuff collides with 10.1 player. As soon as adobe releases a final version I’l try to fix this.
Comment by Michael — December, 15 2009 #
good to know – very cool stuff. maybe I’ll write an as3swf to HaXe bridge in the future :)
Comment by Michael — December, 15 2009 #
Hi I have problem why
vectorRenderer.setFillColor(0xFF0000,1);
or
vectorRenderer.style.setFillColor(0xFF0000,1);
doesn’t work ?
How I can set fill color ?
peter.
Comment by peterQ — December, 16 2009 #
ok it was easy I needed apply “fillStart” method.
peter.
Comment by peterQ — December, 16 2009 #
[...] Font rendering with the FP10 drawing API [...]
Pingback by Weekly Shared Items – 22. December, 2009 | TOXIN LABS - weblog of a german design student from wuerzburg — December, 22 2009 #
Thank for this !!
Comment by font styles — December, 29 2009 #
thanks, really nice!
I have a question:
how can i replace text? i tried this way, but it does not work:
var vr:VectorRenderer = new VectorRenderer(512);
vr.setLineStyle(0, 1, 0);
var font:Arial = new Arial();
font.bezierThreshold = 0.001;
font.setPointSize(100);
font.setRenderer(vr);
font.write(“Hello World!”, 0, 100, false);
vr.flush(graphics);
font.write(“other text”, 0, 100, false);
vr.flush(graphics);
Comment by sydd — February, 13 2010 #
Downloaded polygonal_graphics_1.0.zip from repo and ….
cant import
de.polygonal.graphics.VectorRenderer;
any help?
Cheers
Comment by Zee — February, 21 2010 #
you can’t replace text, you have to redraw it: font.write(…) graphics.clear(); font.write(…)
Comment by Michael — February, 21 2010 #
have you followed this guide? http://code.google.com/p/polygonal/wiki/UsingActionScript3
Comment by Michael — February, 21 2010 #
actually I tried this as well and it didn’t work out for me. but I’ll definitely give that another shot … well, lets see if there is a happy end for my project, too. I’ll keep you posted about the result.
Comment by Mike Hunter — March, 1 2010 #
Hi Michael,
Yess I followed your guide. Is this might be cause I’m using FB? All libraries imported via swc. Still cant import VectorRenderer..
Comment by Zee — March, 3 2010 #
Hi I’ve got this compiler error:
Error: Assertation “invalid size (524288 bytes)” failed in file MemoryManager.hx, line 233, de.polygonal.ds.mem.MemoryManager::getFloatMemory
at de.polygonal.core.util::Assert$/assert()[src/lib/de/polygonal/core/util/Assert.hx:52]
at de.polygonal.ds.mem::MemoryManager$/getFloatMemory()[src/lib/de/polygonal/ds/mem/MemoryManager.hx:233]
at de.polygonal.graphics::VectorRenderer()[src/lib/de/polygonal/graphics/VectorRenderer.hx:79]
at Test()[/Users/byniutek/Documents/Flex Builder 3/polygonalTest/src/Test.as:17]
Comment by Zee — March, 3 2010 #
You have to call MemoryManager.allocate(…). I’m working on an update to make it easier to use.
Comment by Michael — March, 4 2010 #
Hi Michael!
This is great stuff, very much longed for! Same problem as Zee, though. A working code example would be very much appreciated!
Comment by Jonas Nyström — April, 8 2010 #
Hi again, Michael!
A minute after the post above, I found your brand new gl_1_01 release! Works like a charm this far! No need for MemoryManager as it seems…
Thanx!
Comment by Jonas Nyström — April, 8 2010 #
actually I tried this as well and it didn’t work out for me. but I’ll definitely give that another shot … well, lets see if there is a happy end for my project, too. I’ll keep you posted about the result.
Comment by cadomax — May, 9 2010 #
Thanks Michael, Ihad the same problem I resolve it right now
Comment by bacgammon jeu — May, 17 2010 #
A working code example would be very much appreciated!
Comment by batterie — June, 24 2010 #
I’m working on an update to make it easier to use.
Comment by labatterie — June, 24 2010 #
Hi, thanks for the great code. Except I’m also having trouble re-writing. It’s not clear whether you should re-use the renderer or Font object. If I try reusing it, no text is shown. I suspect it’s a memory issue, but I don’t really know. A Haxe example where you rewrite text would be really useful.
Comment by dion — June, 28 2010 #
The VectorRender class is not inside the package.
Imported the SWC into Flashdevelop, using AS3 only.
Please help !
Comment by antonio brandao — June, 29 2010 #
I realized that I could find the VectorRenderer inside the SVN, but in .HX format.
Does it not exist in .AS format?
It leaves me with a question: It this implementation possible in pure AS3 projects ? Even though HaXe is faster, the community would make great use of a pure AS3 implementation.
I’d like to use it in my actual project, but I have no time to convert it all to HaXe…
Finally, and this is not of your responsability, I found a few tutorials on how to use HaXe in FlashDevelop, but none of them good / simple enough to actually work here. I always get this error:
Object reference not set to an instance of an object.
at Duplicate.PluginMain.HandleEvent(Object sender, NotifyEvent e, HandlingPriority prority)
at PluginCore.Managers.EventManager.DispatchEvent(Object sender, NotifyEvent e)
Comment by antonio brandao — June, 30 2010 #
as3 library: http://code.google.com/p/polygonal/downloads/detail?name=polygonal_gl_1.01.zip
using AS3: http://code.google.com/p/polygonal/wiki/UsingActionScript3
Comment by Michael — July, 2 2010 #
thanks but that reply didn’t help much :P
note: in flashdevelop, if one clicks the “+” button to collapse th contents of the SWC, it says “Object reference not set to an instance of an object.”
Comment by antonio brandao — July, 5 2010 #
I am unable to see any effect from using bezierThreshold. Is there something special to do in order to specify the threshold. Does it affect the rendering speed?
Comment by Scott — July, 14 2010 #
there is a noticeable difference for big fonts. try this:
var font = new de.polygonal.gl.text.fonts.coreweb.Arial();
var vr = new VectorRenderer();
font.setRenderer(vr);
vr.setFillColor(0, 1);
vr.fillStart();
font.size = 200;
font.bezierThreshold = 0.01; //or 0.0
font.write(‘Hello, World’, 100, 200);
vr.fillEnd();
vr.flush(someGraphicsObject);
most of the time the visual difference is negligible, and setting the threshold to 0 improves performance.
Comment by Michael — July, 14 2010 #
I can’t reproduce this. Make sure you are using the latest FD version (former versions had some problems parsing swc files generated with HaXe).
Comment by Michael — July, 14 2010 #
anyone noticed ? clicking the link above
“converting fonts can be done using http://www.polygonal.de/doc/types/de/polygonal/graphics/text/util/EPSConvert.html”
Land on a 404 error page
“Sehr geehrter Besucher,
leider ist ein Fehler aufgetreten: Die gewünschte Seite wurde nicht gefunden (…)”
Comment by antonio brandao — July, 15 2010 #