While working on a bitmap sprite font for an upcoming Xbox 360 game that we’re working on here at Iron Star Media, I asked myself that question that makes us programmers what we are. “Surely, I can automate this…”. And thus was born the Fancy Bitmap Font Generator.
At the moment, this software is very much in it’s infancy. It’s possible to generate the odd italic font that goes outside of the boxes that I’ve made and it’s almost definitely more than possible to get an exception or two if you try hard enough. However, it works – and the output is pretty nice.
Screenshots
Here are some screen shots of the Fancy Bitmap Font Generator in action;
-
- Fancy Bitmap Font Generator Screenshot
Usage Notes
I intend to make the source code for this software available, as soon as I’ve tidied up the code that I hurried through to get our first version put together. I am working on a complete re-modelling of the code to allow for more dynamic implementation of effects (an effects stack if you will, instead of the predefined ones).
Note that this version of the software is very much an early testing build. Over the next couple of weeks I intend to improve the software, making the interface cleaner, and certainly make the whole thing a lot faster. It will go very slowly when you add the shine effect, it might crash. It almost definitely won’t to anything bad to your computer, but we accept no liability if it does.
Features already on the cards include; Support for Unicode characters, Support for an ‘Effects Stack’ so you add as many or few effects as you like to a font.
How to Use (Specifically in XNA Game Projects)
I won’t go into too much detail on how to use this version of the software, as there will be some major changes in the user interface for the next version that will be out in a couple of weeks. However, there are some basic instructions with the software if you click on the ‘info’ button which basically describes what every field on the left side controls. The only thing I’ll say is that it’s wise to leave the first character of the font as a space, unless you know what you’re doing with bitmap fonts.
Once you have generated a font from this piece of software, you will be presented with a large image that represents your sprite font texture. You can get this into your game very quickly with only a few lines of code;
1. Drag and Drop the texture onto your projects ‘Content’ directory.
2. Select Content Processor = Sprite Font Texture – XNA Framework. Make sure that the first character option is set to the first character in your image (leave it as a space if you used the default range). I find you get better fonts if you leave it in ‘colour’ mode, but DXT might work for you too.
3. Load the SpriteFont from your code in the regular way; SpriteFont font = Content.Load
4. Use it like you would a regular sprite font, through a SpriteBatch.DrawString() call.
Download
Before you download this software, be sure to read the Usage Notes and the License. We’ll still be here when you get back. Right. Now that you’ve had fun reading those, you can grab the initial testing version of this software here;
Download Iron Star Media’s Fancy Bitmap Font Generator Version 0.1.0.6
License
We’ve yet to apply a proper license to this software, so currently the terms of usage are; you can download and use this software indefinitely, free of charge. Any of the assets produced by this software are 100% yours to own (except for any other licenses or usage rights that apply to the font(s) that you’ve used). Use them in your XNA games, your iPhone projects or anything you like. If you use this software to generate sprites for your games, we’d appreciate a small mention somewhere in the credits / on the website (and a free copy of the game would be cool!).
Feedback and Questions
We’d love to hear from you what you think about this utility. Please feel free to drop us a comment using the form below. Alternatively, you can often find me on xnachat.com. My username is JohnWordsworth.
[...] read more about this free utility, please head over to the Iron Star Media Fancy Bitmap Font Generator [...]
Pingback by Free Game Dev Utility; Fancy Bitmap Font Generator | Game Programming and Design Blog — January 13, 2010 @ 2:27 pm
This is excellent, thanks for sharing it!
Comment by Paul — January 18, 2010 @ 5:35 pm
Hey Paul, thanks for the comment – it’s great to hear that you found the tool useful.
When I get another evening free I’m going to recode chunks of it to allow for any number of filters and also to accept icon files as inputs so you can easily make spriteFonts of a set of icons!
Best of luck!
Comment by John Wordsworth — January 18, 2010 @ 8:11 pm
Great piece of software!
I would like to have all available characters the font supplies. Like some language specific characters: ø ä ö ü.
That would be great.
Comment by Tim — January 21, 2010 @ 11:58 pm
Hey Tim,
Thanks for the positive comment – it’s always nice to know that people are downloading and using our tools and/or assets.
Thanks for the suggestion about the addition of extra characters. I’m working on putting Unicode support into the next version, so that you should be able to use absolutely any characters from within a font. The first version of pretty much a ‘proof-of-concept’ so it’s great to hear suggestions like these so that we can make the tool more useful to the community over the coming weeks.
Take care.
Comment by John Wordsworth — January 22, 2010 @ 10:07 am
Hi John!
I spent a couple of days last week searching for a good bitmap font creator. Of all the ones I tried, yours produces the best anti-aliased output for outlined fonts and hence gives me the best results. I’m a huge fan already!!!
After playing with the features of the various font generators, here’s my feedback on some features I’ve seen in others that I’d like to request/suggest for later versions :-
1) The big feature I found on others which I would love to see on this one is the ability to apply an image texture to the characters instead of a solid colour or gradient. This would allow me to do something like putting cow spots on letters, or having a rainbow gradient rather than just 2 colours.
If you add this feature at a later point (will grovelling help my case?
– the one thing that would really make your product stand out as I can’t find this on any font generator that supports textures, would be to be able to change the size of the texture when applyign it to the font. (e.g if you had a rainbow texture, it would be great to be able to resize it anywhere from applying a rainbow to each character, to applying the same single rainbow across the whole font).
2) Can we have the ability to change the grey colour that each letter is drawn on? (which then becomes white in the final outputted png file). If the font colour was white and the background was white, transparent drawing (without post processing the font) wouldn’t be possible.
3) My programming language’s (GLBasic) bitmap font implementation supports only fixed width fonts (which I then apply a kerning routine to). To save me having to take each font produced and move all the letters to line up with a grid, being able to generate each character with the same width/height would really be a timesaver.
4) And finally (I don’t want to push the friendship with too many suggestions off the bat *grin*), a font preview when you’re selecting your font to help you pick the right one would be handy too.
As I said at the start, this program is fantastic! Thanks for making it available!!
Regards
Shane
Comment by Shane — January 25, 2010 @ 12:38 am
Hi Shane,
Thanks for your feedback. This is just the sort of feedback I was hoping for before releasing our next version – perfect timing!
I hadn’t even thought about using an image texture for the characters, but with our new ‘modular FX’ system, that’s going to be an easy one to add – and it’s a great idea. We’ll make sure that there is a decent pile of options for each ‘layer’ too, so that we can include a ‘one texture per character’ or a ‘one texture for the sprite sheet’ option.
We’ll add options for the sprite-sheet layout too in the next version. So you can customise what the background is like, the padding for each character and whether or not it’s fixed width boxes. The font-preview also is a great idea – I have also just added that to my feature list
.
Thanks again for your post. It’s great to hear that people are using this little utility and I’m looking forward to adding all of the features you have suggested. I hope to get the next version out in a couple of weeks and I would love to hear what you think of it when it’s available.
Many thanks for getting in touch.
Comment by John Wordsworth — January 25, 2010 @ 2:59 pm
one thing I notcied from the screen shots is that if you want a character set of A-Z you have to select the next character after Z is that a bug or was it intended?
Comment by Scott — January 26, 2010 @ 12:40 am
Great to hear that the ideas will end up in a future version (and that it’s not likely to be too far away!)
Further requests (though the others were the primary ones!) / thoughts for later versions
1) Allow me to choose (a) whether I want a link in my start menu, and more particularly (b) where it goes on the start menu. I’d like to be able to put “Iron Star Media” under my “game development” subfolder to keep my start menu clean
Another feature I’ve seen on other programs – I don’t have any personal use for it myself but it’s an idea for you – is having a preview text box you can type something in to see how your text will look when you use the generated font.
2) Show the font changes automatically without having to click “generate” each time
3) An inner bevel on the font would be a nice effect
4) As would just an outline without the interior of the font
5) Possibly allowing you to point FBFG at a directory of non-installed fonts that it could use?
6) Instead of “start” and “end” characters, you might want to add some “common” options – eg. all lowercase, upper and lower, just the numbers, 0×20-0×7E.
7) This one gripe I have with the software :- I was trying to install it and was on a PC with a slow internet link. The program started pulling the latest .net off the web (without asking whether I even wanted to install it), as well as doing some other internet communication, though I’m not sure what.
I would really like to see a download that does a totally offline install. Not having the right .net version at the very least should ask me if I want to install it – or better yet, refuse to install FBFG until I have the right .net version.
It would also have been nice to have had a “requires .net version XYZ” (plus any other requirements) on the website at the download point.
If I come up with any other ideas I’ll let you know. Thanks for the great program!!!
Comment by Shane — January 26, 2010 @ 9:48 am
For the next version – can you produce a text file or similar that contains, for each character in your font, the (X,Y) coordinates of the letter and the size of the character? That will allow me to make my own proportional text output routines in GLBasic without needing fixed sized font output from FBFG or to kern it in my app (slowing it down). It would still be nice to have fixed sized output as an option though.
If needs be I’ll write something to manually parse the font image to “find” each character, but if you could produce it at font generation time then that would save me a lot of work.
One of these days I’ll stop bugging you with ideas and let you get on with coding *grin*
Comment by Shane — January 27, 2010 @ 4:19 am
Just wondering how the bitmap font generator is going – I can’t wait for the next version!
Comment by Shane — March 10, 2010 @ 11:13 pm
Very nice font tool, we are still hoping for a version with fixed positions of the characters or a textfile with all coordinates/widths of each character for including into our own font-routines
Would it also be possible to include all the characters up to 255, not just the ASCII range?
Comment by Moru — March 21, 2010 @ 8:56 am
Hey! The next version is coming along nicely – taking a lot longer than I thought it would though, as I’m building it in a modular fashion so that others can add plugins to it at a later date… Will try to post some screenshots of the new version over the next few days!
Comment by John Wordsworth — March 29, 2010 @ 6:18 pm
Great work John! I can´t wait for the new version too!
regards
Comment by Haplo — May 6, 2010 @ 11:11 pm
Hey Haplo,
I’d love to hear your feedback on the ideas for the new version that I’ve posted at; http://www.ironstarmedia.co.uk/blog/2010/05/fancy-bitmap-font-generator-development-preview/
We’ve made it a tad more complicated, but that should mean that you can use it for practically anything as it will be extensible with plugins that can be written by anyone!
Thanks for the comment – you inspired me to spend yesterday working on the new version.
Comment by John Wordsworth — May 16, 2010 @ 10:19 am
Hi, Great tool you made. The PNG transparency is great. I use your font on Google Earth plugin and javascript. Google Earth won’t render text to the screen but with the bitmap fonts generated by your program I can do it anyway.
Feature request:
Currently your program exports a single bitmap. I have to sit down with a graphics editor for ages to cut out every character rectangle and save each to an individual file. I wish your program could export each character as an individual character bitmap file.
Comment by Paul van Dinther — May 16, 2010 @ 11:35 am
Hey Paul, Great to hear that you’re using the tool in your projects. You’ll be glad to hear that the next version of the software will allow you to save each character as a separate tile (or compose them into a layer any way that you like).
I’m afraid that it’s not quite ready for release yet, but you can read a little about it here; http://www.ironstarmedia.co.uk/blog/2010/05/fancy-bitmap-font-generator-development-preview/
Comment by John Wordsworth — May 16, 2010 @ 3:56 pm