HTML5 Bitmap Font Generator

This is a very basic script to eport images with pre-rendered characters in the look of the old arcade games. Only tested in chrome (and a bit in Firefox), because it's mainly meant to be used by me, but maybe it's useful for others as well.

The basic idea is simple: create a gradient for each character and render it.
If you have any comments (besides how messy the code is :)), you can contact me on twitter ( @iSpellcaster ) or in #bbg on freenode irc, my nickname there is cptFoo
To download the code, simly save this page. It's all in one messy file. I'll add support for proportional fonts in the next update (which also means you need some extra code to blit it. Then you'll get a nicer download including this "editor" and a simple lib with examaple on how to use it. Until then, if you have any questions, just contact me.



Test Text:

Font:
Droid Sans Mono
Nova Mono
Anonymous Pro
VT323
Press Start 2P


Gradient:
Banded

Color 1:
Color 2:
Color 3:

You can also use the Ultimate CSS Gradient Generator to create your gradient.
To use that, copy the "unique link" that the editor gives you into this text field:

(example: http://www.colorzilla.com/gradient-editor/#f0b7a1+0,8c3310+50,752201+51,bf6e4e+100;Brown+Gloss )
Clear CSS Gradient (and use color values above instead )


Outline Color

Preview BG-Color:
Preview scale: ( Seems like there is a bug with the gradient fill if the scale is set. In this case the first row has the wrong color, works fine if not scaled)




Export Font