Vector Fonts in Flash « Zach Archer Blog

2Jul/071

Vector Fonts in Flash

I've always liked the visual style of old vector games. I may integrate this style into my site, so I experimented with this tonight.

I borrowed the font used in Major Havoc and created several new classes to support this. First, here's how it looks:

Play with the .swf . Click the screen to set the keyboard focus (I'll debug Selection.setFocus() later.) Type letters. Press backspace to clear the screen.

Each letter is placed randomly, and has a GlowFilter applied (an attempt to simulate the look of old CRTs) with random colors and settings therein.

Here are the classes being used:

vector.ShapeSegment (either a single line segment, or a bezier curve)
vector.Shape (a continuous path of several ShapeSegments)
vector.Symbol (a collection of Shapes)
vector.font.Havoc defines the Symbols for each letter of the Havoc font, using delimited strings. Here's the string for the "A" character: "0,1; 0,0.5; 0.5,0; 1,0; 1,1 / 0,0.5; 1,0.5 ". Note that each letter is drawn on a coordinate space ranging from (0,0) to (1,1). The "/" character divides the coordinates into two Shapes (a separate Shape is needed to draw the bar through the center of the "A").
vector.font.BaseVectorFont parses the strings contained in Havoc, and returns Symbols.

Symbol, Shape, and ShapeSegment each have a draw() method that requires a MovieClip (to draw in), and a flash.geom.Matrix (to govern the position/size of each vector entity).

Currently this code is all locked down, not for any malicious reason... But I'd let my framework & libraries mature a bit before I start accepting feedback. If you'd like to poke through my code, then I can open up my SubVersion repository; let me know if there's interest.

Up next: 3D