Fonts

From Open Surge Wiki
Jump to: navigation, search

Overview

Fonts are used to display texts in Open Surge. They are described by .fnt scripts located in the fonts/ folder and they can be classified in two types:

  • Bitmap fonts
  • True-Type fonts

Open Surge comes with predefined fonts that you can use (check the fonts/ folder). Also, you can add your own fonts. Font scripts (.fnt) are human-readable: they can be opened with any simple text editor like Notepad or gedit.

Font types

Bitmap

Bitmap fonts have their characters extracted from an image. Essentially, you provide an image containing lots of characters and tell the engine which characters correspond to which blocks in the image. Working that way, whenever you want the engine to display some text, it will read your font definition and copy the correct blocks of your image to the screen, hence drawing the text you need.

There are two kinds of bitmap fonts: monospaced and flexible.

Monospaced fonts

A monospaced bitmap font is a font in which all characters have the same size. Example:

Smallfont.png

You may then open a simple text editor and save the following script to fonts/small.fnt (this file name doesn't affect the font):

font "small"
{
    bitmap
    {
        source_file             "fonts/smallfont.png"
        source_rect             0 0 128 72
        frame_size              8 12
        keymap                  " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_\x60abcdefghijklmnopqrstuvwxyz{|}~"
    }
}
  • This is a bitmap font called small
  • source_file is the path to the file where the engine should grab the characters
  • source_rect describes a rectangle in the image (respectively: x-position, y-position, width and height). The entire set of characters is contained in this rectangle
  • frame_size is the size of each character in the rectangle above
  • keymap is the association between the image and their respective characters (from left to right, top to bottom)

Flexible fonts

Since Open Surge 0.5.0, you may also work with flexible fonts: bitmap fonts having characters of different sizes. You must specify the rectangle of each character individually. Although these fonts require a denser definition script, they usually provide more aesthetically pleasing results.

Good neighbors.png

In the example below, the parameters are as follows:

  • This is a bitmap font called GoodNeighbors
  • source_file is the path to the file where the engine should grab the characters
  • char is a block that describes the configuration of each character. You may specify the character directly or use its hex code (e.g., char "\x7f").
    • source_rect describes the rectangle in the image associated to the character (respectively: x-position, y-position, width and height).
  • Optionally, spacing describes the pixel spacing between characters (respectively: x and y spacing), defaulting to 1 pixel on both axis.
    • This parameter can also be used on monospaced fonts.
font "GoodNeighbors"
{
    bitmap
    {
        source_file             "fonts/good_neighbors.png"
        spacing                 -1 1
        
        char " " {
            source_rect         1 1 8 16
        }
        char "!" {
            source_rect         10 1 6 16
        }
        char "\"" {
            source_rect         17 1 7 16
        }
        char "#" {
            source_rect         25 1 10 16
        }
        char "$" {
            source_rect         36 1 10 16
        }
        char "%" {
            source_rect         47 1 11 16
        }
        char "&" {
            source_rect         59 1 11 16
        }
        char "'" {
            source_rect         71 1 4 16
        }
        char "(" {
            source_rect         76 1 6 16
        }
        char ")" {
            source_rect         83 1 6 16
        }
        char "*" {
            source_rect         90 1 10 16
        }
        char "+" {
            source_rect         101 1 8 16
        }
        char "," {
            source_rect         110 1 4 16
        }
        char "-" {
            source_rect         115 1 9 16
        }
        char "." {
            source_rect         125 1 4 16
        }
        char "/" {
            source_rect         130 1 8 16
        }
        char "0" {
            source_rect         139 1 8 16
        }
        char "1" {
            source_rect         148 1 6 16
        }
        char "2" {
            source_rect         155 1 8 16
        }
        char "3" {
            source_rect         164 1 8 16
        }
        char "4" {
            source_rect         173 1 9 16
        }
        char "5" {
            source_rect         183 1 8 16
        }
        char "6" {
            source_rect         192 1 8 16
        }
        char "7" {
            source_rect         201 1 8 16
        }
        char "8" {
            source_rect         210 1 8 16
        }
        char "9" {
            source_rect         219 1 8 16
        }
        char ":" {
            source_rect         228 1 4 16
        }
        char ";" {
            source_rect         233 1 4 16
        }
        char "<" {
            source_rect         238 1 9 16
        }
        char "=" {
            source_rect         248 1 7 16
        }
        char ">" {
            source_rect         256 1 9 16
        }
        char "?" {
            source_rect         266 1 8 16
        }
        char "@" {
            source_rect         275 1 10 16
        }
        char "A" {
            source_rect         286 1 8 16
        }
        char "B" {
            source_rect         295 1 8 16
        }
        char "C" {
            source_rect         304 1 8 16
        }
        char "D" {
            source_rect         313 1 9 16
        }
        char "E" {
            source_rect         323 1 8 16
        }
        char "F" {
            source_rect         332 1 8 16
        }
        char "G" {
            source_rect         341 1 8 16
        }
        char "H" {
            source_rect         350 1 8 16
        }
        char "I" {
            source_rect         359 1 6 16
        }
        char "J" {
            source_rect         366 1 9 16
        }
        char "K" {
            source_rect         376 1 8 16
        }
        char "L" {
            source_rect         385 1 8 16
        }
        char "M" {
            source_rect         394 1 10 16
        }
        char "N" {
            source_rect         405 1 9 16
        }
        char "O" {
            source_rect         415 1 8 16
        }
        char "P" {
            source_rect         424 1 8 16
        }
        char "Q" {
            source_rect         433 1 9 16
        }
        char "R" {
            source_rect         443 1 9 16
        }
        char "S" {
            source_rect         453 1 8 16
        }
        char "T" {
            source_rect         462 1 8 16
        }
        char "U" {
            source_rect         471 1 8 16
        }
        char "V" {
            source_rect         480 1 8 16
        }
        char "W" {
            source_rect         489 1 10 16
        }
        char "X" {
            source_rect         500 1 9 16
        }
        char "Y" {
            source_rect         510 1 8 16
        }
        char "Z" {
            source_rect         519 1 8 16
        }
        char "[" {
            source_rect         528 1 6 16
        }
        char "\\" {
            source_rect         535 1 8 16
        }
        char "]" {
            source_rect         544 1 6 16
        }
        char "^" {
            source_rect         551 1 11 16
        }
        char "_" {
            source_rect         563 1 8 16
        }
        char "`" {
            source_rect         572 1 8 16
        }
        char "a" {
            source_rect         579 1 8 16
        }
        char "b" {
            source_rect         588 1 8 16
        }
        char "c" {
            source_rect         597 1 8 16
        }
        char "d" {
            source_rect         606 1 8 16
        }
        char "e" {
            source_rect         615 1 8 16
        }
        char "f" {
            source_rect         624 1 7 16
        }
        char "g" {
            source_rect         632 1 8 16
        }
        char "h" {
            source_rect         641 1 8 16
        }
        char "i" {
            source_rect         650 1 6 16
        }
        char "j" {
            source_rect         657 1 6 16
        }
        char "k" {
            source_rect         664 1 8 16
        }
        char "l" {
            source_rect         673 1 5 16
        }
        char "m" {
            source_rect         679 1 10 16
        }
        char "n" {
            source_rect         690 1 8 16
        }
        char "o" {
            source_rect         699 1 8 16
        }
        char "p" {
            source_rect         708 1 8 16
        }
        char "q" {
            source_rect         717 1 9 16
        }
        char "r" {
            source_rect         727 1 8 16
        }
        char "s" {
            source_rect         736 1 8 16
        }
        char "t" {
            source_rect         745 1 8 16
        }
        char "u" {
            source_rect         754 1 8 16
        }
        char "v" {
            source_rect         763 1 8 16
        }
        char "w" {
            source_rect         772 1 10 16
        }
        char "x" {
            source_rect         783 1 8 16
        }
        char "y" {
            source_rect         792 1 8 16
        }
        char "z" {
            source_rect         801 1 8 16
        }
        char "{" {
            source_rect         810 1 7 16
        }
        char "|" {
            source_rect         818 1 4 16
        }
        char "}" {
            source_rect         823 1 7 16
        }
        char "~" {
            source_rect         831 1 9 16
        }
        char "\x7f" {
            source_rect         841 1 10 16
        }
    }
}

Where to find

OpenGameArt has many freely available Bitmap fonts that you can pick for your game.

True-Type

Open Surge supports True-Type fonts since version 0.2.0. True-Type fonts are the ones one usually uses in modern text editors: DejaVu Sans, DejaVu Serif, Helvetica, Arial, etc.

Where to find

Google Fonts has many freely available True-Type fonts that you can pick for your game.

Example script

Creating a .fnt script for True-Type fonts is super easy. Say you want to add fonts/DejaVuSans.ttf to the engine (make sure the file exists). Save the following to fonts/dejavu.fnt:

font "dejavu"
{
    truetype
    {
        source_file             "fonts/DejaVuSans.ttf"
        size                    13
    }
}
  • This is a font called dejavu
  • source_file is the path to your .ttf file
  • size is the size you want to pick. The higher this value, the larger the font.
  • Optionally, you may add the antialias keyword inside the truetype block to make the font antialiased.
  • Optionally, you may also add the shadow keyword inside the truetype block. It will create a simple shadow effect.

Multilingual support

Game menu in Korean

Some languages use glyphs that are not available in generic True-Type fonts. For example, there are languages spoken in Asian countries that fit this category. Open Surge can change the fonts dynamically, so it renders different fonts for different languages.

Each language has an ID defined at the LANG_ID entry in the language file. For example, "ko_KR" stands for Korean. The script below defines a font called multilang that loads GothicA1-Bold.ttf for Korean, or Ubuntu-B.ttf for any other language.

// General definition
font "multilang"
{
    truetype
    {
        source_file             "fonts/Ubuntu-B.ttf"
        size                    24
        antialias
        shadow
    }
}

// Font definition for Korean
font "multilang" for "ko_KR"
{
    truetype
    {
        source_file             "fonts/GothicA1-Bold.ttf"
        size                    24
        antialias
        shadow
    }
}

In addition, you may set different font sizes for different languages. This may be useful when translating the game.

Multilingual support is available since Open Surge 0.5.1.