Polish 04 - Stat Numbers

Stat Numbers.

This is the fourth 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 updated the damage and heal numbers in combat. They’re now chunkier and easy to read.

This time we’ll add a new monospaced font to use when displaying stats. This font is used in:

The combat state on the bottom panel
The in-game menu
All the menus and shops were stat numbers are displayed

How the combat state looks with a different stat font.

There’s not a massive difference here but it is noticably better and that’s what polish is all about! Note that I’ve replaced the HP, MP (and Name) titles with smaller bitmap ones too.

Reference

In the last polish phase we looked at this screen shot from Final Fantasy 7 combat state.

Final Fantasy 7 Combat Font.

The ‘4’ glyph in the bottom panel is the type of font we’ll use for all the stats values. Our game’s combat panel isn’t quite as polished as FF7 but it’s getting closer. Future changes will deal with the HP and MP bars, tweak the placements and make everything more compact.

Stat Font

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

The font used for displaying fonts in our RPG.

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

Again, I made this font, heavily based on Final Fantasy 7’s stat font.

Adding the Font

In the last polish phase we created a table to store all the fonts. Let’s add the font to the table.

Here’s the code:

gGame =
{
    Font =
    {
        default = BitmapText:Create(NumberFontDef),
        damage = BitmapText:Create(DamageFontDef),
        damageSprite = CreateSpriteSet(DamageSpriteDef),
        stat = BitmapText:Create(StatFontDef)
    },

The stat font is now ready to use.

Updating Stats Numbers

These numbers are scatted all over the place. So I went through updated them and tweaked positions where appropriate.

During combat, stats are shown at the bottom of the screen. The numbers are drawn in the RenderPartyStats function of the CombatState class. Here’s the code:

function CombatState:RenderPartyStats(renderer, x, y, item)
    local font = gGame.Font.default

    local stats = item.mStats
    local barOffset = 130

    local bars = self.mBars[item]

    self:DrawHP(renderer, x, y,
                stats:Get('hp_now'),
                stats:Get('hp_max'))
    -- code omitted
end

Here and in a couple of other places I replace gGame.Font.default with gGame.Font.stat, tweaked the positioning and that’s it!

The End Result

Better stat font final result.

Here’s how it looks in the in-game menu. Things are looking better. The last big font related task is to replace all remaining true type text in the game with nice crisp bitmap fonts.

Source

There’s a github with an updated project here.