Game Development Community

Adding a new font

by Alpha-Kand · in Torque 2D Beginner · 03/03/2013 (12:31 pm) · 18 replies

So I am simply trying to add a font to use in my game and I ran into a few snags.

1. I get the impression you need an image file like png (NOT ttf) to hold all of the individual characters and them to be in a nice perfect grid right? Or the painfully referencing each letter separately in the image file.

2. The console also says you need at least 96 frames which I am assuming are characters to make the font but which ones? These are all the visible characters I have on my keyboard (I think).

abcdefghijklmnopqrstuvwxyz (26)
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26)
0123456789 (10)
_-=+{}[]() (10)
~!@#$%^&*` (10)
|;:'",<.>/? (12)
' ' (space 1)

26+26+10+10+10+12+1 = 95!

The rest of my problems might go away if I can get these solved.

About the author

I have always loved video games and computer games so decided to try making my own. Spent a little more than a year on a program simply named Game Maker which really got me interested. Finally decided to get "professional" by getting Torque 2D.


#1
03/03/2013 (6:38 pm)
It depends on what object you're using to draw text.

If you're using the 'old' GUI controls, they support TTF fonts. The engine will also internally convert the TTF to a .uft file which contains a bitmap of all of the characters sized to the specified font size as well as data that maps each glyph to a specific sector within the bitmap. Essentially a .uft file is the result of the engine automatically creating a "bitmap font" for you. These .uft files can be exported to wherever $GUI::fontCacheDirectory points by calling writeFontCache(). From then on, the engine will load the .uft file rather than the TTF. You can release your game with these .uft files instead of TTF files as well so that your fonts will work across platforms.

The new ImageFont object is a different story. It appears to require a "bitmap font" (meaning an image that contains all of the glyphs) and likely expects them to be in a certain order. There are a number of programs that create bitmap fonts but I don't have any experience with any of them.

It might be possible with some source code changes to 'short circuit' the .uft creation process so that it simply spits out the bitmap file. You could then use the bitmap file with the ImageFont object. I haven't looked into this at all, though.
#2
03/04/2013 (12:44 am)
Have a look at font.png in the ToyAssets module. It shows the layout of all 96 characters.
#3
03/04/2013 (1:57 am)
I'm surprised you didn't recognize the 96 as being related to the printable ASCII set. :)

It's simply the characters 32-127 as shown here.

The "ImageFont" is a pretty basic way of rendering stuff but it can be useful. It's certainly not limited to basic white text which you then blend, you can obviously generate pretty funky multi-coloured characters.

You can also just populate the characters you're interested in such as just the alpha-numeric ones and set the other frames to an empty region or you can even set all the other frames to the same empty region if you like so save space.

It wouldn't be difficult to create something that rendered the cache UFT font files I guess.

There's also bitmap font generators like this if it helps.
#4
03/04/2013 (6:50 am)
Would you believe I actually have that ASCII chart on my computer?
Looking at the font.png in the asset folder helped.

I found out something about bitmap font generators before but I didn't look deep enough into it.

No excuse, just ineptitude on my part. :)

Thanks for the help.
#5
03/04/2013 (8:10 am)
No problem, couldn't resist. :)
#6
03/16/2013 (11:54 pm)
Shoebox renderhjs.net/shoebox is good @ generating bitmap fonts!
#7
03/17/2013 (3:28 am)
I just found a bitmap font tool called Font Studio! I had generated a font using it and but the output was unexpected! Does anyone know how to do that!
My output was this
https://dl.dropbox.com/u/63779595/Capture.PNGBitmap Font used was this
https://dl.dropbox.com/u/63779595/font.png
#8
03/17/2013 (9:42 am)
... and I guess you've set-up your image-asset and configured the cell sizes etc?
#9
03/17/2013 (10:01 am)
Yeah! But this was my taml!
<ImageAsset
    AssetName="Font"
    ImageFile="font.png"
	CellOffsetY="1"
    CellCountX="12"
    CellCountY="8"
    CellWidth="36"
    CellHeight="38" />
:(
#10
03/17/2013 (10:12 am)
SOrry! It's was due to the wrong cellwidth and height! My partner messed with my font bitmap! He solved it though! :P
The working taml is
<ImageAsset
    AssetName="Font"
    ImageFile="font.png"
	CellOffsetY="1"
    CellCountX="12"
    CellCountY="8"
    CellWidth="42"
    CellHeight="56" />
#11
03/17/2013 (10:30 am)
I used a different program and it messed up my font kinda like that. It shoved characters too close together for a proper cell grid to work so I had to take it into my own hands and trim letter pieces that showed up in other letter's spaces.

I will definitely check out Font Studio if it puts characters into a good grid.
#12
11/14/2013 (11:03 pm)
I am looking for a tool to convert a TrueType TTF font file to a bitmap format used by Torque2D. Any recommendations?
#13
11/15/2013 (2:02 am)
I spent a couple days trying to get a new font working to line up correctly with those generators, haven't found a good one yet. Very curious to see if you are successful in this. T2D could really benefit from a better font that isn't as wide.
#14
11/15/2013 (7:30 am)
@Pedro - I haven't personally used either one yet but there's BMFont for Windows or bmGlyph for OSX.

@Christian - Are you referring to the example font in the ToyAssets folder? For its default use in the ImageFontToy it is ok, but yeah, the spacing between characters is too much for any other practical use that involves putting actual words together. We can certainly consider replacing it if someone in the community submits a new image as a pull request.
#15
11/15/2013 (9:45 am)
Mike yeah, both the default and fancy are rarely useable for anything past 2 letters (I resorted to images of the words instead of font). If a less wide font is ever created, it wouldn't have to replace the default, just having another option available on here would be helpful to a lot of people I think.
#16
11/25/2013 (1:05 am)
@Christian
I am trying BMFont for Windows. I am only interested in letters A to Z, with a image letter size same as the render size. Only individual characters, not words.

Do you recommend any export format settings for this image, like width, height, bit depth?

Same for the import settings of T2D for the image taml asset.

I guess this is just a matter of trial and error, maybe generate a map with 1 or 2 characters, if possible?



#17
11/25/2013 (9:50 am)
Hi Pedro,

I never got it to work or export correctly. The only reference I had was looking at the current font png in the game assets and making the width / spacing between each letter less than it.
#18
11/25/2013 (12:51 pm)
'Watch This Thread' Email told me somebody resurrected this thread. Ugh, it feels like forever since I dealt with Torque2D because of life stuff...

Anyway, I never found a good font exporter. I wish I could make one myself but I don't have the time.
However, I got a font to work somewhat decently by using the default font file as reference.

I opened up my favorite image editor and made two layers. The top one was a grid for all 96 or so characters at the size I wanted. The bottom layer was where I lined up my letters for my new font in the top layers grid. I might have left some spaces blank but the characters were in the same order the default characters where in.
Remove the grid, save the bottom layer and you should be left with a font file, acceptable by Torque.
It wont by super-pretty but it might be all you need.