Font Tool

Discussion in 'Game Development (Technical)' started by Jamie W, May 6, 2011.

  1. Jamie W

    Original Member Indie Author

    Joined:
    Apr 16, 2006
    Messages:
    1,211
    Likes Received:
    0
    Looking for something to render out ASCII characters for a font, to a BITMAP; where all the characters are arranged in to a grid on the bitmap. Anyone know of anything like that?

    Cheers,
    Jamie
     
  2. voodooshaman

    Original Member

    Joined:
    Mar 9, 2006
    Messages:
    45
    Likes Received:
    0
    I use Bitmap Font Generator. Generates bitmaps and outputs xml/txt/binary file with coords for each page. And it's free (or donation-ware).
     
  3. Jamie W

    Original Member Indie Author

    Joined:
    Apr 16, 2006
    Messages:
    1,211
    Likes Received:
    0
    Thanks for the link. Looks ok, but I'm on a Mac; also, want it to go in to a grid (rather than optimally positioning the characters itself). Think I may be struggling to be honest, google hasn't turned up anything, imagine this kind may not exist for Macs.
     
  4. barrygamer

    Original Member

    Joined:
    Apr 10, 2006
    Messages:
    490
    Likes Received:
    0
    I use Hiero Font Editor (java, free). Its a bit buggy, but usually works.

    Theres also glyph designer (http://glyphdesigner.71squared.com/), which looks pretty slick.

    ( Edit - glyph designer has a banner ad on the Bitmap Font Generator website :D )
     
  5. oNyx

    Original Member

    Joined:
    Jul 26, 2004
    Messages:
    1,212
    Likes Received:
    0
    >I use Bitmap Font Generator.

    So do I.

    > want it to go in to a grid (rather than optimally positioning the characters itself)

    Naaah... it's super simple, really.

    Code:
    draw: function (ctx, text, x, y) {
    	var i, len, c, xpos = x, code, prev;
    	for (i = 0, len = text.length; i < len; i++) {
    		code = text.charCodeAt(i);
    		c = font[co---de]; // --- for ubb code :f
    		if (c) {
    			if (prev && c.k[prev]) {
    				xpos += c.k[prev];
    			}
    			ctx.drawImage(fontImage, c.x, c.y, c.w, c.h, xpos + c.xo, y + c.yo, c.w, c.h);
    			xpos += c.a;
    		}
    		prev = code;
    	}
    }
    
    That's my whole drawing code. It even does kerning.
     
  6. Michael Flad

    Indie Author

    Joined:
    Aug 4, 2004
    Messages:
    190
    Likes Received:
    0
    I have a Python script for this, just send me a message and I'll mail it to you.

    It doesn't do optimized packing (as requested) but not even on a grid level size because, further down my build/tool pipeline I do the "real" packing of my sprites, fonts etc.
     
  7. Grey Alien

    Indie Author

    Joined:
    Nov 29, 2005
    Messages:
    2,797
    Likes Received:
    0
    I use Bitmap Font Generator too. shame it is not available on Mac.
     
  8. Desktop Gaming

    Moderator Original Member Indie Author

    Joined:
    Feb 24, 2005
    Messages:
    2,296
    Likes Received:
    12
    I tried that recently and couldn't get it to graft. The blitzmax demo (thats linked to off the Bitmap Font generator site) throws an 'error reading from stream' error and I'd no idea why. Went with FontMachine in the end.
     
  9. Grey Alien

    Indie Author

    Joined:
    Nov 29, 2005
    Messages:
    2,797
    Likes Received:
    0
    @Desktop Gaming: You bought my framework off someone right? Well the TBitmapFont reads in files made from Bitmap Font Generator and displays them.
     
  10. Jamie W

    Original Member Indie Author

    Joined:
    Apr 16, 2006
    Messages:
    1,211
    Likes Received:
    0
    Me too. I just channel my fonts through my own sprite grabber tool, and they get put in to texture atlases with all my other sprites; and coords, offsets, sizes etc; all get stored too.

    One issue I'm having with this 'render system fonts to bitmap' thing, is the left-most and right-most pixel column of any given character, may contain pixels with alpha values anywhere between 1 and 255. So, when you string characters together and render to the screen, you end up with un-even spacing between the characters (even though you just have a one pixel gap, if the edge pixels of 2 adjoined characers are low in alpha, the gap looks wider, than if they were high in alpha etc). It's esp. noticable with smaller bitmap fonts.

    I want to render them big to a bitmap, then I'll do more processing on the bitmap, shifting characters left or right, by a few pixels, so as to get optimal left and right coloumn edge alpha. Later on, I can then shrink the bitmap by a power of 2 (I have this phase available for all my sprites that go through my pipeline). The idea being that this will give me best fit edges on all characters.

    So, that's my plan. My alternative plan, is to just hand draw my own fonts.

    I'm also pondering over this thing of shrinking the bitmaps down before grabbing fonts, to get optimal RGB pixel values for font left and right edges (i.e. optimal for LCD displays). Probably, that kind of thing would be more trouble than it's worth; unless for text intensive apps etc.

    Anyhoo. I'm not so good with Python; but if it's not so complex and the scprit can run on a Mac, and exports ascii characters in to a grid on a bitmap (just like bitmap font generator), that'd be awesome Michael. :)
     
  11. Michael Flad

    Indie Author

    Joined:
    Aug 4, 2004
    Messages:
    190
    Likes Received:
    0
    Sent by mail.

    With regards to the spacing - I guess there's no easy solution - even without alphablended pixels you'd need a kerning table for a perfect result.

    For a basic/generic solution I'd add an option to your font/sprite grabber to add a deltaX value for each glyph and base the value on the alphavalues of the leftmost pixelcolumn of each glyph (i.e. -1 if there are only almost transparent pixels). Wouldn't be a perfect solution but it should fix the most obvious cases. In addition you could add a deltaW value to fix the issue on the right side of the glyphs too (worst case glyphs like I, O, U ...)
     
  12. Mattias Gustavsson

    Original Member

    Joined:
    Aug 10, 2005
    Messages:
    669
    Likes Received:
    0
    I have my own tool for generating fonts like this, and it supports kerning.
    The source code is public domain, and you can download source and exe, and read more about it, here:

    http://mattiasgustavsson.com/Blog/font-generation-tool/

    So, if anyone finds it useful, maybe as a starting point if nothing else, then help yourself to it :)
     
  13. Jamie W

    Original Member Indie Author

    Joined:
    Apr 16, 2006
    Messages:
    1,211
    Likes Received:
    0
    Thanks Chaps;

    Just responded to your mail Micheal, and waffled on a bit (thinking as I typed); I'll post the most of it here..

    ---

    I'm using pretty much the same process, examine each 16x16 pixel (or whatever size) box area on a bitmap, then 'shrink-wrap' around the edges to cut out empty pixels etc. Sprites are all grabbed from these boxes and packed in to atlases, with the offset and size info gets stored in a table, which I can then later use in game, to access each sprite.

    I made a video on the subject ... http://vimeo.com/8618902 (around 6 minutes).

    The fonts had a kerning of sorts, in that the use the width and x offset var in the sprites table (all sprites have this), so 'i' takes less space than a 'w' etc..

    The following, illustrates the problem I'm having..

    If you have an 'a' and a 'b' next to each other (with 1 pixel gap between), and they both have horizontal border pixels of alpha=4; the gap between the 'a' and 'b' looks like 3 pixels (i.e. you can hardly see the alpha=4 pixels). Next, if you have the same thing for 'c' and 'd', but this time with alpha=240; then the gap looks like 1 pixel. So it can look like inconsistent gaps when you render out strings using bitmap fonts. Problem gets worse, the smaller the font is.

    So what's the solution?

    I guess there's several approaches.

    Option 1. Use the existing method, as described above; but also store an alpha value for left most and right most column of each character. Then when rendering your fonts in game; you can add up the alpha values for adjoining characters, and depending on the value; insert a gap of 0,1 or 2 pixels between characters in your string. Does that make sense? I believe it's what you were describing previously, if I understood you correctly. :)

    Option 2. Render out system fonts much bigger than needed, say 8 x bigger on both x and y axis, rendering them in to bitmap grid. Process this bitmap, positioning each character so that it aligns with an 8 pixel horizontal boundary (will mean moving it left or right a bit). Next, shrink the bitmap, back down to it's intended size...

    The left most pixel of each character should now be high in alpha. This doesn't account for the right most pixel though. I'd need to give this option for more thought, and see if it's possible to shave bits off or something.

    Maybe the best possible way would be to use something along the lines of 2) ... and end up with 4 versions of each character, each version representing a shift of 0.25 pixels right, from the previous version of the same character. Kinda sub-pixel positioned characters. Also would need to acquire kerning information from the big version of the bitmap.

    Could also take this idea a step further, and as you process and reduce in size, the big characters (on the over sized bitmap), actually build in RGB values for added clarity on LCD displays.

    http://en.wikipedia.org/wiki/Subpixel_rendering
    http://alienryderflex.com/sub_pixel/

    Option 3. Draw your own fonts. Possible to draw them a lot bigger, and then scale them down with imagemajick or something (which will also create smooth anti-aliased edges, to your pixel art).

    Option 2 is where I would need some way to render out system fonts, to say, 2048x2048 or 4096x4096 bitmaps. I'll take a look at your Python scrip for this and see how I get on. Completely new to Python though!

    I may just end up going with option 3 for now; and come back to this at later date (after current game has shipped). Would be really nice to have clear type style bitmap fonts on games!
     
  14. oNyx

    Original Member

    Joined:
    Jul 26, 2004
    Messages:
    1,212
    Likes Received:
    0
    >The fonts had a kerning of sorts, in that the use the width and x offset var in the
    >sprites table (all sprites have this), so 'i' takes less space than a 'w' etc..

    That's proportional (instead of fixed pitch). Using kerning means doing that proportional stuff and using some lookup table to reduce the space between specific pairs even further. E.g. 'W' and 'o' or 'W' and 'A'.

    http://en.wikipedia.org/wiki/Kerning
     
  15. Desktop Gaming

    Moderator Original Member Indie Author

    Joined:
    Feb 24, 2005
    Messages:
    2,296
    Likes Received:
    12
    Yeah its kicking about some place - I only use it for reference on some bits. I'm 99% through my current project so I'll stick with FontMachine for now and look at alternatives next time.

    Ta for the info.
     
  16. luggage

    Moderator Original Member Indie Author

    Joined:
    Jul 27, 2004
    Messages:
    2,132
    Likes Received:
    0
    We use a tool to generate the bitmap. Take it into Photoshop and tweak it until we're happy. Then a seperate tool handles the kerning so WA fit neatly. In the example above where you have slightly different alpha in the outside edge we let the kerning tool handle it. It autogenerates a set of kerning values but then lets you tweak letters seperately or character pairs.
     
  17. Mattias Gustavsson

    Original Member

    Joined:
    Aug 10, 2005
    Messages:
    669
    Likes Received:
    0
    I use the windows API function GetKerningPairs to get the kerning information for the font - seems to work pretty well
     
  18. luggage

    Moderator Original Member Indie Author

    Joined:
    Jul 27, 2004
    Messages:
    2,132
    Likes Received:
    0
    I tried that, it worked great right up until our artists started to play around with the look of the font.
     
  19. Jamie W

    Original Member Indie Author

    Joined:
    Apr 16, 2006
    Messages:
    1,211
    Likes Received:
    0
    Putting this on pause for a while, at least until I've finished my current project. :S
     

Share This Page

  • About Indie Gamer

    When the original Dexterity Forums closed in 2004, Indie Gamer was born and a diverse community has grown out of a passion for creating great games. Here you will find over 10 years of in-depth discussion on game design, the business of game development, and marketing/sales. Indie Gamer also provides a friendly place to meet up with other Developers, Artists, Composers and Writers.
  • Buy us a beer!

    Indie Gamer is delicately held together by a single poor bastard who thankfully gets help from various community volunteers. If you frequent this site or have found value in something you've learned here, help keep the site running by donating a few dollars (for beer of course)!

    Sure, I'll Buy You a Beer