PixelBlitz: BlitzFont is live :)

Tonight I created and finished BlitzFont. BlitzFont is a bitmap font handling class. Most Flash games use True Type fonts for their text, or “bitmap True Type fonts”, where the font was specially designed to be used at a small resolution. This is all well and good, but what if you want to design a custom font? Something with some graphical flair that can’t be achieved via True Type. Enter BlitzFont 🙂

BlitzFont allows you to use pass in any bitmap from your library, tell it how the font characters are arranged, and then it grabs it all for you. Once grabbed you can ask it for text back again, and it’ll return bitmapData for ever more!

If this sounds a bit strange, take a look at this font here:

In this example the characters have between drawn in a grid and they are 32×32 pixels in size. Using them in your game requires just one call:

[as]
font.init(new tbjFontBD(0, 0), 32, 32, BlitzFont.SET10 + ” 1234567890,.:’-<>!”, 9, 2, 2, 1, 1);
[/as]

All this does is give the name of the bitmap in your Flash library, the width and height of each character, the characters and the order in which they appear (SET10 is a built-in character sequence that you can extend), the 9 value is the number of characters per row, 2 + 2 is the distance (x and y) between each character and finally 1,1 are x/y offsets to start grabbing from.

Phew sounds quite a lot, but if you’ve got a well arranged font with no spaces, no offset and a standard ASCII ordering, then you only need to use 5 parameters!

Once you’ve initiated the font that’s it – you can use it. BlitzFont has 3 methods for this:

getLine()
getMultiLine()
getCharacter()

getLine is ideal if you only need to get back 1 lines worth of text.
getMultiLine can be given as much text as you want (that will fit onto a bitmap) and supports carriage-returns.
getCharacter simply returns 1 character.

Each of the functions above all return bitmapData objects. You have alignment support, so you can left align, right align or center each line perfectly. You can also control the x/y spacing between characters!

[as]
var bd:BitmapData = font.getMultiLine(“welcome to thenpixelblitznblitzfont demo”, 1, 16, BlitzFont.ALIGN_CENTER);
[/as]

The class does all the dirty work for you, like removing un-supported characters from your input string, making sure it deals with spaces efficiently, and wrapping text on carriage returns.

But wait, there’s more! You can also create scrolling text messages with 1 line of code 🙂

[as]
defineScroller(width:uint, speed:uint, text:String, autoUpperCase:Boolean = true, wrap:Boolean = true, spacing:uint = 0):BitmapData
[/as]

Ok I know, scrollers are old-hat now.. but sometimes in a game you want a little scrolling message, or status update or something, and with this you can easily create it 🙂 You just define the scroll settings, and then call updateScroller() every loop. You can even set custom events to fire if a certain character scrolls on! and the scroller will fire events on text complete and text wrap too.

Here’s a demo of this in action (refresh this blog entry if you didn’t get to see it from the start!)

[swfobj src=”http://sandbox.photonstorm.com/fontDemo.swf” width=”550″ height=”400″]

Again this is all now in Google code, and i’ll upload example source when I update the examples packages in the coming days. If you are in need of some great bitmap fonts, here’s a good resource.

Posted on September 4th 2008 at 2:19 am by Rich.
View more posts in PixelBlitz. Follow responses via the RSS 2.0 feed.