Allegro.cc - Online Community

Allegro.cc Forums » Game Design & Concepts » [A5] Truetype Fonts with a black outline

This thread is locked; no one can reply to it. rss feed Print
[A5] Truetype Fonts with a black outline
NiteHackr
Member #2,229
April 2002

I've been working on a game for a while now and while I love truetype fonts, I would like to be able to have a font with a black outline around it. This would be nice to use against a graphic background so the characters stand out and are easier to read. Does anyone have any ideas on how this could be done without creating a bitmap font? I have created an Allegro 4 style bitmap font that works well, but I would prefer it if I could load in any font and not be limited on which characters I can use so I could use accented characters etc.

Here's the A4 style font (Verdana 12, bold) I created so you can see what I mean (feel free to use this if you wish, it looks nice):

{"name":"608260","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/b\/8\/b87fe08bc1bbcd554ab0b933ca0b3aab.png","w":545,"h":146,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/b\/8\/b87fe08bc1bbcd554ab0b933ca0b3aab"}608260

jmasterx
Member #11,410
October 2009

There was a patch for A5 at some point, not sure why it never made it into the api https://www.allegro.cc/forums/thread/611384

NiteHackr
Member #2,229
April 2002

Looks like Trent seen some problems with that patch and wanted to go over it first, which I understand. It would be a very nice addition to be sure!

In the meantime, the way I made this was I used a normal bitmap font creation program, the type that makes bitmap fonts 256x256 or 512x512 etc... for use with 3D software. I generated a font without a grid, I set the generator to put a 3 pixel empty border around the font (not the grid, just empty space to make room for the outline). Then I generated a font WITH a yellow grid, only I set the font colour to the same as the background so you couldn't see the font and saved it. So now I have two bitmaps, one is the font, one is a grid for it. I loaded them into photoshop (or you use GIMP etc) and each bitmap in a layer. On photoshop you just go to blender options and use the STOKE, make it black. In this case I made it 3 pixels wide.

I then manually edited each character to fill in the horizontal space. It's a lot of work, but I couldn't think of an easier way of doing it.

I am tempted to try my hand at making my own outline font generator.

Edgar Reynaldo
Major Reynaldo
May 2007
avatar

One of my major complaints about movie subtitles is that they end up blending with the background. Outlined fonts would sure be nice in allegro. Apparently it is possible with freetype to do so. Aaron Bolyard has done it.

There was another thread around here but I can't find it, with another patch by someone else that also didn't get included. This looks interesting, but wasn't what I was looking for.

jmasterx
Member #11,410
October 2009

Your Aaron link is not working for me.

Edgar Reynaldo
Major Reynaldo
May 2007
avatar

Kris Asick
Member #1,424
July 2001

You might be able to pull this off with Pixel Shaders, though a simpler option is to have two different True Type fonts: One that represents the white part, and one that represents the black part. Then, every time you draw text to the screen, you first draw all the solid-filled outlines, then draw all the inner parts overtop. ;)

--- Kris Asick (Gemini)
--- http://www.pixelships.com

Edgar Reynaldo
Major Reynaldo
May 2007
avatar

Your simpler option probably won't look so good, as if the background font is expanded or loaded in a larger size then it will also spread out horizontally, ruining the alignment with the text on top in the smaller font. Not sure how much work it would take to create your own true type font for an outline for another font.

Kris Asick
Member #1,424
July 2001

Ultimately though, it's bad practice to rely on an end-user to have a particular TrueType font already, and it's usually illegal to distribute the ones you may already have, depending on the licensing of each specific font you want to use. To that end, I've avoided TTF like the plague and always make my own bitmapped fonts. :P

--- Kris Asick (Gemini)
--- http://www.pixelships.com

Elias
Member #358
May 2000

There's lots of nice free to use fonts, for example Google offers 1000ds of completely free open source fonts. [1]

--
"Either help out or stop whining" - Evert

Edgar Reynaldo
Major Reynaldo
May 2007
avatar

Elias
Member #358
May 2000

Needs JavaScript.

--
"Either help out or stop whining" - Evert

Edgar Reynaldo
Major Reynaldo
May 2007
avatar

Huh. I've got most javascript enabled, but it shows a blank page. The only javascript disabled on my browser is context menu and status bar changes.

Thomas Fjellstrom
Member #476
June 2000
avatar

It works fine here.

--
Thomas Fjellstrom - [website] - [email] - [Allegro Wiki] - [Allegro TODO]
"If you can't think of a better solution, don't try to make a better solution." -- weapon_S
"The less evidence we have for what we believe is certain, the more violently we defend beliefs against those who don't agree" -- https://twitter.com/neiltyson/status/592870205409353730

Kris Asick
Member #1,424
July 2001

...I still prefer to make my own fonts for my games. ;D

--- Kris Asick (Gemini)
--- http://www.pixelships.com

Elias
Member #358
May 2000

Own fonts are hard if you want to translate your game.

--
"Either help out or stop whining" - Evert

NiteHackr
Member #2,229
April 2002

Elias said:

Own fonts are hard if you want to translate your game.

That is my main concern. I would like to translate my game into different languages in the future and so I am designing it with that in mind. So, while this bitmap font I created works okay with English, it won't with other languages so an Allegro option would be much appreciated.

Edgar Reynaldo
Major Reynaldo
May 2007
avatar

Go to: