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

One thought on “Vector Fonts in Flash

  1. God dag! Kan jag ladda ner en bild fran din blogg. Av sak med hanvisning till din webbplats!

Leave a Reply

Your email address will not be published.