Bitmap Text.

This is the fifth article in a series that takes the RPG from the "How to Make an RPG" project and adds a little more polish to one element.

In the previous polish phase we added a new font for stat numbers. This time we'll replace all the true-type text in the game with a nice bitmap font. At low-resolutions, bitmap fonts hold up a lot better than true-type fonts. The text will become nice, crisp and a lot easier to read.

The number text already uses bitmap fonts. This new text font includes the numbers we added in section 2. This means we'll be retiring the old number font and replacing it with the a more general text font.

Here's how the changes look:

The title screen looking less blurry.

A lot crisper!

Reference

As with the other fonts I've used Final Fantasy 7 as a reference because it uses a resolution somewhat similar to our mini-RPG.

I hand-pixelled this font. If anyone, who has some pixelart talent has a better one; then I'm more than happy to use it!

If you spend time studying the FF7 font and you'll notice how cleverly rendered it is. It's a similar size to FF6 but it's easier to read. There's a drop-shadow that helps reenforce the letter shapes.

Stat Font

Here's the font we're going to use.

The default font used for displaying text in our RPG.

It looks a bit odd but all the spacing information is stored in its accompanying definition file.

As with all the other fonts this is made up of two files.

Adding the Font

Here's the current font table.

gGame =
{
    Font =
    {
        default = BitmapText:Create(NumberFontDef),

We're already using the id default for the font, which is great. The def needs updating and the NumberFontDef.lua and number_font.png files removing from the project.

Here's the updated code:

gGame =
{
    Font =
    {
        default = BitmapText:Create(DefaultFontDef),

Updating All Text

There's still a lot text using renderer:DrawText2d each of these places needs updating. Then once that's done the positions need updating a little to make everything nice.

Below is the title screen stats with the updated font changes.

function TitleScreenState:Render(renderer)

    local font = gGame.Font.default

    renderer:DrawRect2d(
        -System.ScreenWidth()/2,
        -System.ScreenHeight()/2,
        System.ScreenWidth()/2,
        System.ScreenHeight()/2,
        Vector.Create(0, 0, 0, 1)
    )

    renderer:DrawSprite(self.mTitleBanner)
    font:AlignText("center", "center")
    font:DrawText2d(renderer, 0, 0, "A mini-rpg adventure.")
    font:AlignText("left", "center")
    self.mMenu:Render(renderer)
end

The changes mostly consist of transforming renderer:DrawText2d( to font:DrawText2d(renderer,. In a few places two different fonts are used - one for the stats and one for the general text, so changes there need a little more care!

Note: Bitmap fonts don't support scaling and scaling is used for the textbox transitions. Now, one way to fix this would be to add scaling support to bitmap fonts but I'm not going to, because I don't think it looks nice. Bitmap fonts are crisp and scaling them loses that crispness. Instead I've modified the textboxes to prevent text being shown while the transitions occurs. This looks acceptable.

Textboxes are something that will be getting more polish in the future.

The End Result

Better stat font final result.

The actor summary is shown above from the in-game menu. (see a fullsize image here). The text is looking far better. I'm not sure what I'll polish next but there's certainly plenty to choose from!

Source

There's a github with an updated project here.