fonts
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:
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.
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.
A monospaced bitmap font is a font in which all characters have the same size. Example:
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
bitmapfont called small -
source_fileis the path to the file where the engine should grab the characters -
source_rectdescribes a rectangle in the image (respectively: x-position, y-position, width and height). The entire set of characters is contained in this rectangle -
frame_sizeis the size of each character in the rectangle above -
keymapis the association between the image and their respective characters (from left to right, top to bottom)
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.
In the example below, the parameters are as follows:
- This is a
bitmapfont called GoodNeighbors -
source_fileis the path to the file where the engine should grab the characters -
charis 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_rectdescribes the rectangle in the image associated to the character (respectively: x-position, y-position, width and height).
-
- Optionally,
spacingdescribes 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
}
}
}
OpenGameArt has many freely available Bitmap fonts that you can pick for your game.
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.
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
truetypefont called dejavu -
source_fileis the path to your .ttf file -
sizeis the size you want to pick. The higher this value, the larger the font. - Optionally, you may add the
antialiasproperty to thetruetypeblock to make the font antialiased. - Optionally, you may also add the
shadowproperty to thetruetypeblock. It will create a simple shadow effect.
Google Fonts has many freely available True-Type fonts that you can pick for your game.
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.
In order to add and modify text to your game, you should use language files. For more information, refer to the Translation Guide - particularly the language extensions section.