So my real problem is trying to find a tool that can create a bitmap font that I can use with Game Maker. So for I have not had any luck.

There are many tools that generate a *.png and *.fnt file, but Game Maker can't split these, either because I don't know how, or I have yet to find an exported *png without the *.fnt file. But if you've got each font in a separate file, it works just fine.

So I think to myself, "It's a wonderful world. I'll just parse the *.fnt file, split the png into separate files, and done."

Except, at least with the current font, the baseline doesn't seem to actually match the real baseline. I'm just using the default export from http://kvazars.com/littera/ if you want to try it out.

Am I right that adding the base to the y doesn't really give you the baseline for the font?

Edit:

It seems that the base line is what it is, but for the adjusted glyph, not the current glyph. But I still haven't figured out how the padding fits into it all...

Here is what I've figured out so far using these docs http://www.angelcode.com/products/bmfont/doc/file_format.html

Also, some experimentation...

1. The padding value is used to surround all the individual glyphs in the single *.png file, but those values seem to be included in the *.fnt metadata, so nothing needs to be done with the padding.

2. The rectangle formed by (x,y) and (x+w,y+h) contains the actual glyph value.

3. The lineHeight attribute is the distance from the very top of the font to the very bottom, for all letters. Using FreeType language: lineHeight = ascent + descent + linegap

4. The base attribute is the base line. This value is added to the (x,y) coordinate of each glyph. This value is NOT adjusted with the x-offset or y-offset. This was the source of most of my confusion.

5. The xadvance value is the distance to move to the next letter. It can be used as the width, but some fonts have an advance that is less than the width of the letter. If the correct advance is used, some glyph pixels will be cutoff. I'm just using whichever value is bigger: width or xadvance.

6. The xoffset and yoffset are used to position the (x,y,w,h) glyph rectangle on the screen (or in my case, on the single png image).

A rough idea of the code needed to split each glyph into its own png:

  make png file with height = lineHeight and width = max( xadvance, width );
  glyph image = (x,y,w,h) sub-image from the source image;
  draw glyph image onto new png file at (xoffset, yoffset, w, h);

I still haven't had any luck with the export because there is something funky with the original png file's alpha value. Once I've got it working I'll post an update.

If anyone is interested in this code I'll put it on github. Currently it's a Java GUI that let's you drag and drop the *.png and *.fnt file just like the ShoeBox util.

I didn't even know of the Littera web app, much less that it exported fonts in the same format that I came up with for BMFont long back.

I'll gladly link to your project for converting the png+fnt BMFont format into the Game Maker format from my site. I'm sure others will be interested in using it too.

Does the xadvance get added to the x coordinate, or the xoffset value? Still can't seem to get these images to split. Of course, there way be differences with the way BMFont does it and the way littera does it.

xadvance is how much the cursor should be advanced after rendering the character before rendering the next character. It is unrelated to the xoffset, x and width values. Note, that kerning pairs alter this value for specific combinations of characters as determined by the font designer.

xoffset and yoffset are the offsets from the current position where the character quad should be rendered. xoffset is usually near 0, unless the character is designed to have an overlap with previous character (negative xoffset) or have extra spacing between previous character (positive xoffset). As yoffset is the distance from the top of the line to the top of the quad, it will have a higher value for smaller characters, e.g. capital A (id 65) has a small yoffset, and small a (id 97) has a larger yoffset, underline _ (id 95) has an even larger yoffset.

width and height give the size of the quad that should be rendered.

x and y show the position in the texture where the character should be copied from when rendering it.

I'm not sure what format and layout that Game Maker requires for its bitmap fonts, so I can't say what you need to do to transform the BMFont format into the Game Maker format.

I think you would benefit from taking a look at how fonts are actually rendered directly from the BMFont format. Take a look at the various tutorials and resouces that I link to from my site. Hopefully by seeing the code it will be easier for you to figure what needs to be done to transform the format.

Thank you so much for your help. I see there is a section on your site about rendering the font that I completely missed, and it contains most of the information I need. It will help to look at the code. I should have thought of that.

Here's a post from a long time ago that explains this very thing:

http://www.gamedev.net/topic/330742-quick-tutorial-variable-width-bitmap-fonts/

Thanks Promit!