Author Topic: FlxBitmapFont released  (Read 3376 times)

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
FlxBitmapFont released
« on: Thu, May 20, 2010 »
Hi all,

I've released my Bitmap Font class for Flixel 2. It allows you to easily use proper bitmap fonts in your games. Implementation is pretty easy, and the fonts extend an FlxSprite meaning you can throw them around, collide with them, etc. To change the text on display just use: fb.text = "new text"



You can find full details on my blog, including a link to Google Code project where there is a download containing example code and pretty comprehensive documentation.

http://www.photonstorm.com/archives/860/flxbitmapfont-a-bitmap-font-class-for-flixel-2-released

Cheers,

Rich
http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius

cai

  • Contributor
  • ****
  • Posts: 465
  • Karma: +0/-0
  • the illest of villains
    • View Profile
    • Brandon Cash
Re: FlxBitmapFont released
« Reply #1 on: Thu, May 20, 2010 »
I think for consolidation/ease-of-discovery, it's good to link to and outline the differences between my bitmap font class here, as well.

The most important difference is that my class does not require fixed-width fonts; instead it gets the width of each character from the font image.  Additionally, I've split up the font storage class and text display classes into two separate classes, titled FlxBitmapFont and FlxBitmapText, respectively.

Also, your note in the text setter got me thinking that both our classes could use a simple check on if the old text matches the text passed.  That should help avoid over-updating as per your score updating example.
Follow me on Twitter | Come join us at #flixel on irc.freenode.net!

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
Re: FlxBitmapFont released
« Reply #2 on: Fri, May 21, 2010 »
Hey cai - I hadn't actually seen your font class before, this was just a rewrite of the one I created for Pixel Blitz. I would have picked a slightly different name had I know :)

I originally had FlxBitmapFont as a font "library" class, the way you've got it - so you could create multiple "texts" from the one parent (as it just returned FlxSprites) but I changed my mind when it came to implement it in my recent game, and went for a single instance version. I still have the old build in svn, but prefer it this way :)

I'm curious how you get the width of each character accurately? I'm at work so will download your class to test on some of the more messed-up font sets I've got kicking around! It's certainly not something that can be calculated mathmatically, so I'm guessing you are scanning for pixels or similar?

I like your idea of adding a simple "previous text" check to avoid update lag :) That will be easy to implement. I want to use a proper reg exp so I only update different characters, but am not sure about the trade-off in terms of speed of performing that every loop vs. simply just copying pixels!
http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius

cai

  • Contributor
  • ****
  • Posts: 465
  • Karma: +0/-0
  • the illest of villains
    • View Profile
    • Brandon Cash
Re: FlxBitmapFont released
« Reply #3 on: Fri, May 21, 2010 »
I originally had FlxBitmapFont as a font "library" class, the way you've got it - so you could create multiple "texts" from the one parent (as it just returned FlxSprites) but I changed my mind when it came to implement it in my recent game, and went for a single instance version. I still have the old build in svn, but prefer it this way :)
Heh, bizarrely enough, I started out with how it is right now, but changed.  It's certainly more efficient to store the font in a separate class, though.  That way, you don't read the font every time you make a new text box.

Quote
I'm curious how you get the width of each character accurately?
There's actually just a row of pixels above each character, like so:

The red (or whatever color it may be) pixel in the top left corner denotes the pixel which separates characters.  Each character is then stored as a Rectangle for easy lookup.  It's pretty easy to add to existing fonts, and certainly makes it more reliable than searching for pixel breaks (which would likely break in some fonts).

Quote
I like your idea of adding a simple "previous text" check to avoid update lag :) That will be easy to implement. I want to use a proper reg exp so I only update different characters, but am not sure about the trade-off in terms of speed of performing that every loop vs. simply just copying pixels!
Using a regular expression wouldn't work for mine, since changing a character at the beginning is likely to change everything after it... but for yours it would definitely make sense.  It's pretty quick to blit onto a BitmapData, but it's probably quicker to do some simple string checks.  Not even sure if you'd need a regular expression, actually; instead, just loop through each character and see what's different.  If you broke the update string into an array, like "string" to "StrINg" (where capital letters are "different"):
0 => "S"
3 => "I"
4 => "N"
Then just update the characters at 0, 3, and 4.  Should be pretty efficient that way.
Follow me on Twitter | Come join us at #flixel on irc.freenode.net!

photonstorm

  • Administrator
  • Key Contributor
  • *****
  • Posts: 1502
  • Karma: +1/-0
    • View Profile
    • Photon Storm
Re: FlxBitmapFont released
« Reply #4 on: Sun, May 23, 2010 »
Ahh I see how you do it (with the red pixels). Yes, that's totally different to the way my class handles it thankfully. I aimed mine at using the fonts of old, which would require hours of boring editing to space out properly and add red pixels to! Yours would be much more useful for RPG style games, or anything needing a proportional font. I'm kind of glad they are so different to be honest.
http://www.photonstorm.com



"Tell me and I will forget, show me and I might remember, involve me and I will understand" - Confucius