Fonts: Difference between revisions

From Adventure Game Studio
Jump to navigation Jump to search
Line 178: Line 178:
::* Still a young tool.
::* Still a young tool.


=== Making fonts from bitmaps ===
=== Making bitmap fonts from TTF ===


==== Rulaman's TtfWfnSci ====
==== Rulaman's TtfWfnSci ====
Line 188: Line 188:
::'''Pros:'''
::'''Pros:'''
::* It has a '''very interesting feature''': in other tools, when you render from TTF to bitmap, you can get dirty pixels if some pixels are misaligned. In this tool you have extra options to refine the aligment of pixels.
::* It has a '''very interesting feature''': in other tools, when you render from TTF to bitmap, you can get dirty pixels if some pixels are misaligned. In this tool you have extra options to refine the aligment of pixels.
:::{| class="wikitable"
|-
| Pro-tip: Play around with the "TextRenderingHint" settings in the bottom-left-hand-corner to see the difference between each rendering method.
|}


::'''Cons:'''
::'''Cons:'''

Revision as of 13:33, 10 January 2014


Preliminary remark: for demonstration purposes, this page makes use of special characters. This wiki page is supposed to be encoded in Unicode (UTF-8), therefore, you should see all the special characters correctly.


Introduction


This page is meant to provide in-depth explanations about how AGS manages fonts, and how to create fonts for AGS.

If you only want to read the short version, read this.


The MOST IMPORTANT part: define your needs

Mostly, you need to answer these two questions :


>> Language

Do I want my game to be:
a. In English only?
b. In some language that uses a handful of special characters (for example: accented Latin letters, as in German, French, Spanish, Polish...)
c. In some language that uses slightly more special characters (for example: Cyrillic alphabet -- Russian, Bulgarian, etc.)
d. In an alphabet with much more letters? (Japanese, Chinese...)


  • If the answer is "a", then you're a happy-go-lucky selfish person. :) no need to worry any further. Just import into AGS any font you like, in any format you like, it will always work.
  • If the answer is "b", then you need to consider searching/creating fonts that will allow the special characters you need, such as : Spanish (áéíóúüñ, etc.), German (öäß, etc.), French (àâêéèëûîïç, etc.). BUT the good news is, those three common languages fit together in a character table of just 256 characters. This document will explain how to do.
  • If the answer is "c", then you need to consider searching/creating fonts that will allow the special characters you need. Unlike situation "b", Cyrillic alphabet needs the whole 256 characters page to fit in, so you'll need a font just for that alphabet. But still, it shouldn't be too hard.
  • If the answer is "d", then AGS wasn't really designed for your needs. There are workarounds, but they are outside of the scope of this document.


Read further to know how to create fonts.

>> Resolution

Do I want my game to be:
a. high-resolution?
b. low-resolution?


  • If the answer is "a", then just import into AGS any TTF font you'll find on the Interwebs. It will be rendered smoothly, and if you're not happy with the quality of the rendering, you can use Calin Leafshade's plugin (2011) to enhance it even more.
  • If the answer is "b", then you need a font that looks good in low resolution. That is, a pixelated font similar to this. These fonts will be referred to as "pixel-art fonts", or "bitmap fonts" (because they're nothing more than a tiny set of pixelly drawings).
Of course, there are the fonts shipped with AGS or with any of the additional templates. But if you're not satisfied with those, then you now need to lurk on the AGS forums, looking for one of those 3 items:
- Either an archaic SCI font (see the "more about the formats" section of this document) that would still be around in year 201x, and would fit perfectly into your game (you like old things, don't you?) ,
- or an existing WFN font (AGS' internal font format) also floating around somewhere on the forums,
- or an actual TTF font, but designed to look like pixel-art (for example this one).


Read further to know where to find fonts of each type.

More about the formats

Just an overview of the terms we're going to use.


SCI

Historically, this format is inherited from Sierra's video games, but it doesn't matter here. What does matter is that the SCI format is a very, very old format. It's kept only for legacy reasons, mostly because it used to be a convenient format to manipulate pixel-based fonts (as opposed to vector-based fonts, such as TTF).

The main issue is that it's tricky to extend it to 256 characters (read further to know why).

Q: Does it support 256 characters?
A: No, with a twist. There is "fake" SCI file format that was introduced around 2013 with more recent versions of AGS, and with more recent font-editing tools. This fake SCI format supports 256 characters. See the "how can I make fonts" section.

WFN

Historically, WFN used to be an actual font file format from an MS-DOS third-party tool in the mid-90's. But it's not relevant at all anymore. You may instead consider it the official AGS font format.

More specifically, you could see WFN fonts as SCI fonts turned "AGS-ready". Most of them are probably SCI fonts that were imported into AGS at least once.

Q: Does it support 256 characters?
A: No, with a twist. There is "fake" WFN file format that was introduced around 2013 with experimental versions of AGS, and with more recent font-editing tools. This fake WFN format supports 256 characters. As for now, it is only supported by experimental versions of AGS. See the "how can I make fonts" section.

TTF

TTF is the official Microsoft Windows font file format. It is vectorial, which means it's better at handling normal-sized curved fonts than tiny, pixelly fonts like the ones you usually see in old-school point-n-click games.

Q: Does it support 256 characters?
A: Normally yes, but be careful. TTF fonts rely on the Unicode standard (see the "understanding character encoding" section), which means they can virtually represent any character in the entire universe. BUT it depends if the graphic designer who created the font went into the trouble of drawing the characters that you're interested in. Chances are, if you download an English TTF font, open (for example) MS Word, and type any character outside of the 127 standard characters, your text editor will rollback to Times New Roman for those characters. Because that font has them. And your cheap font doesn't.

At least try to find a TTF font that has the 256 characters from the Latin-1 characters set (see "understanding character encoding").

Bitmap

By "bitmap", we mean any sprites table that you will later use to create a font. It's not a font format in itself and needs work. Read more about that further below.


Where can I find fonts?

We suppose that you want to use fonts that already exist.


SCI fonts

A good place to start is on the AGS website "resources" page.


WFN fonts

If you search the AGS forums properly, you will find resources of WFN fonts collections. Don't forget that WFN fonts are virtually the same thing as SCI fonts, so you can switch from one format tot he other with the correct tool (see section "how can I make fonts?")

Attention: there is a catch to import WFN fonts into AGS. See the "How to import fonts into AGS?" section of this document.

TTF fonts

There are plenty of sites providing free fonts. The only catch is that you should make sure that the fonts are free to use (Respect the work of other people! Always check the fonts' licence!)


An example of fonts website: dafont.com


How to import fonts into AGS?

SCI fonts

AGS expects to find SCI files with the following naming convention : FONT.0, FONT.1, etc. Therefore, if you want to import fonts made with Radiant's Font Editor (see corresponding section), you need to rename the file you created:

  1. inside the font editor, save as SCI (the file will be named something like "0.sci", or "1.sci", etc.)
  2. rename the file to "font.0", or "font.1", etc.
  3. import from within AGS

Note: if you import a "fake" SCI font (256 characters instead of 128, see section "more about the formats"), then the import might fail with an error. Or it could work, but obviously AGS will use only the first 128 characters, and you will lose the benefit of the extended font.

WFN fonts

WFN is AGS' internal font format. The only (very) weird thing is that (as of 2013, AGS 3.2.x) there is a bug preventing AGS from importing its own format! The only way to import a WFN font is :

  1. in AGS, create a new font. Note down its number (e.g. "I just created font number 4"),
  2. close AGS,
  3. replace file agsfnt4.wfn with your font (and rename your font "agsfnt4.wfn")
  4. re-open AGS. Font number 4 should now be your font.

Note: if you import a "fake" WFN font (256 characters instead of 128, see section "more about the formats"), then the import should work, but obviously AGS will use only the first 128 characters, and you will lose the benefit of the extended font.


How can I make fonts?

How to create a 128-characters font from scratch?

That's the simplest scenario :

  1. Download Radiant's Font Editor
  2. Potentially start from one of the WFN fonts provided, then save.
  3. Import the font into AGS, following the tips given in the "How to import fonts into AGS?" section of this document.


Pros:
  • Very simple
  • Can save as SCI or WFN
  • Can save as BMP sprite table
Cons:


A more versatile AGS-dedicated tool : Rulaman's WFN-FontEditor

That tool comes in two flavours: either as standalone, or as an AGS-Editor plugin. Either way, it works the same way.

Get the tool here.

The advantage over Rulaman's editor is that it allows 256-characters fonts. That's not immediately obvious, so the easiest way to start is to open an existing 256-characters font and work with it. (reminder: this "fake" 256-characters SCI/WFN format is not the standard AGS format. Handle with care.) EDIT: in the latest version, Rulaman made the switch between 128 and 256 characters more natural.


Pros:
  • Convenient features such as outline (if you want to draw it manually)
  • If used as a plugin, integrated directly in your AGS editor
  • Converts from WFN to SCI and back
  • Handles 256 characters (but, then again, AGS might not! See "more about the file formats")
Cons:
  • Still a young tool.

Making bitmap fonts from TTF

Rulaman's TtfWfnSci

If can be found here.

That's the most handy convertor to date, between the 3 formats : TTF, WFN and SCI.

Pros:
  • It has a very interesting feature: in other tools, when you render from TTF to bitmap, you can get dirty pixels if some pixels are misaligned. In this tool you have extra options to refine the aligment of pixels.
Pro-tip: Play around with the "TextRenderingHint" settings in the bottom-left-hand-corner to see the difference between each rendering method.
Cons:
  • It's young and might be buggy.

Calin Leafshade's SpriteFont renderer

It can be found

Pros:
  • Allows very fancy fonts, including pixel-art fonts (outlines are also not too complicated to generate with that tool -- then again don't forget that AGS can also generate outlines automatically)
  • Enables 256-characters fonts in the least hacky way to-date.
  • Directly converts from TTF to pixel-ready.
Cons:
  • It's a plugin. Some people hate to have plugins in their games.
  • It requires some thinking with the mapping of extended characters slots with sprites. Overall, your font is not "out of the box".


Pro-tip: the most important part is to understand the "characters selection" tab of SpriteFont 2.0. The characters "keys" are the code in the ANSI table. Just lookup your own local codes page (e.g. iso-8859-1 to know which characters you want to use.

Nirogen's FontStudio

It can be found here. That tools was not designed for AGS but it might be a nice alternative to manipulate sprites tables generated from TTF fonts. You must consider it an additional tool to Calin Leafshade's SpriteFont renderer.

Making TTF Fonts

That's outside of the scope of this document. Creating "real" fonts is a rather difficult task.


how to surf from 128 to 256 characters, and back

Understanding characters encoding

Before you go further, you need to read this : "The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)" This way you'll know what ASCII, ANSI, "Latin" ISO-8859-1, Unicode and UTF-8 mean.

Use a GOOD text editor

Do yourself a favour. Never EVER use Notepad to open a text file. Instead, use an editor that won't silently mess with the current encoding when you save.

My favourite one is Notepad++ (notice the "++" at the end). You can switch between encodings (ANSI to UTF-8 and back) and you can switch between rendering codepages (ANSI: Western Europe, ANSI:Central Europe, etc.)


How does it apply to AGS?

You must make the difference between :

  • The scripting window (and the dialog editor) of the AGS Editor
  • The "Fonts" resources folder of the AGS Editor
  • The AGS engine when it uses WFN or SCI fonts
  • The AGS engine when it uses TTF fonts


  • The scripting window of the AGS Editor works in 256 characters. As you know, that doesn't mean much (the characters from 128 to 255 could be anything). The AGS Editor being based on the .Net Framework, it will use your local Windows codepage (that is, your regional settings) to display the text you typed into the scripting window. If you're a Western European or an American, it's most likely to be Windows-1252.
For example, it means that symbol "153" is the trademark symbol (™). Go on, you try and type it (or copy and paste it) into AGS. If your Windows is using Windows-1252, you'll see it appear correctly. Otherwise you might see something else being rendered in place of it.
Why is it interesting? Because the Windows-1252 has the exact same mapping as iso-8859-1 (a.k.a "Latin-1"), except for characters 128 to 159. I chose the TM symbol on purpose because it's within that range, to show you that sometimes that slight difference can cause an issue. But in 99.9% cases, you won't care, because all the important characters (especially the funny French/Spanish/German characters) will be the same in Windows-1252 (in your script editor) as in iso-8859-1 (in your external text editor or in your browser).
Let's take a concrete situation: You're programming your game in French, and you want an in-game dialog to contain character "é". That means you either typed "é" into the dialogs editor, or into the script editor (e.g. "player.Say("ééééé");). Well, because Windows-1252 is the same as iso-8859-1, that means you can copy and paste any text generated externally to AGS (with any good text editor or browser) as long as it was displayed using iso-8859-1. In the same fashion, if you export translation files outside of AGS, they will be encoded in ANSI, and if you watch them with code page iso-8859-1, then every character will appear correctly. Immediate characters matching = less mistakes!
  • The "Fonts" resources folder of the AGS Editor only ever displays 128 characters. But don't forget that if you use TTF fonts, the engine will then be able to display all 256 characters in-game. They're here, you just don't see them in the Editor.
Note: Don't forget either that some experimental versions of AGS can use 256-characters WFN or SCI fonts. Read further to learn more about that.
  • The AGS engine (when it uses WFN or SCI fonts) can display only 128 characters.
Note: Don't forget that some experimental versions of AGS can use 256-characters WFN or SCI fonts. Read further to learn more about that.
  • The AGS engine (when it uses TTF fonts) can display 256 characters. Let's say you typed "é" in the script editor. That's character number 233. In-game, the engine will simply render it with the font character number 233 from your TTF font. If your TTF font has a drawing for that character, and if the drawing is correct, it will display an "é" in-game.

AND FINALLY, CHOOSE YOUR DESTINY (how to have 256 characters in your game)

Note: With the release of AGS 3.4 and Rulaman's TtfWfnSci tool, the most reliable (and convenient) solution will become more and more the Lucky Guy's strategy.

A. The hacker's strategy

People used to do this :

  1. Stick to 128-chars SCI or WFN font
  2. Pick a handful of rarely-used characters within the 128 characters. For example, ASCII characters 92 to 96, and 123 to 127. (Note: Don't pick 91 ( "[" ) as it's a special character for AGS).
  3. Decide that these characters will be used for something completely different. For example: "_" won't be "_" anymore, but instead it will be "é".
  4. Edit your font and replace "_" with a nice drawing of a "é".
  5. Export the translation files and make your translator(s) translate it --> The resulting file is likely to contain some "é". (reminder: Make them use a good text editor! Not notepad!)
  6. Do a "replace all" in the file, and replace every "é" with "_".
  7. Import the translation file back into AGS.
  8. Play the game. With your custom, every "_" appears as a "é", and everything looks fine.
Pros:
  • Quick hack
Cons:
  • You might run out of special characters.
  • If you translate into several languages, you'll need several fonts for sure...
  • You might make human mistakes with all those "replace all"

B. The lucky guy's strategy

1. Find one (or several similar-looking) TTF font(s) that has(have) all the special characters you need. As said before, many of them even mimic the pixel-art style. (see section "how can I find fonts?"
Pro-tip: Search free fonts in websites of the targeted country. For example, if you need French characters, then search this one, type "pixel" in the search box, and download only the fonts that have the "accents" flag on the left-hand side.
2. Import the font into your game. Special characters should be rendered correctly.
Pro-tip: When you import the font into AGS, it will ask you to choose the font's height. That's because TTF fonts are vectorial, which means they don't have an actual "size" in pixels; you must choose the size that AGS will use to render them on-screen. However, if your TTF font mimics pixel-art, you need to find an import height that will make them look fine: that is, the height in actual pixels, once rendered, will be the same as the font was in "fake" vectorial pixels. If you don't know what height to pick, try every value between 5 and 20, that does the trick for most fonts (especially 10,11 or 12).

But this has a major inconvenience: if the fake pixels of the TTF font are slightly off, then some rendered pixels (once the font is converted to real pixels) might get anti-aliased... Which means dirty... A complete disaster. If that happens, you just can't use that font, unless you use one of the other strategies.

EDIT: this issue no longer exists of you use Rulaman's TtfWfnSci tool (see corresponding section of this document)


Pros:
  • Simplest and most elegant solution.
Cons:
  • Lots of hazard...
    • If you don't find the TTF font with the special characters you need, you're done for.
    • If you need a font with a special outline (like this one), you're done for! (but if you can just stick to AGS' automated outline, you're good) EDIT: this issue no longer exists of you use Rulaman's TtfWfnSci tool (see corresponding section of this document)
    • As explained above, some fake pixel-art fonts will look dirty once converted from TTF to real pixels. EDIT: this issue no longer exists of you use Rulaman's TtfWfnSci tool

C. The mad scientist's strategy

  1. Use "AGS Draconian", the experimental AGS that enables 256-characters SCI or WFN fonts.
  2. Use Rulaman's WFN-FontEditor (see corresponding section in this document)
  3. If you're European, directly edit an existing 256-char SCI or WFN font (see corresponding section in this document) -- this way you already know what slots match what characters in that code page (Reminder: 256-char SCI or WFN are "fake" formats that can be used only in that context. Regular SCI or WFN allow only 128 characters).
  4. Save it as your own font, import it into AGS Draconian.
  5. Run the game. All characters should be displayed correctly.


Pros:
  • Very convenient solution.
  • Outlined fonts made very easy.
Cons:
  • You're using an experimental AGS with a non-standard font format... BUT the Draconian edition is very reliable, and an important part of its tweaks are later on merged into the regular AGS. There's a good chance that this becomes AGS standard at some point.

D. The brute force strategy

  1. Create a bitmap font from any TTF font using Calin Leafshade's SpriteFont renderer (see corresponding section of this document)
  2. Follow the steps to integrate it into your game
Pros:
  • Prettier rendering of the fonts
  • You gain in compatibility with vanilla AGS, because you use only standard AGS tech
Cons:
  • You lose in compatibility with less-used Operating Systems, as plugins work only on Windows.