Fonts: Difference between revisions

Jump to navigation Jump to search

Fonts (view source)

Revision as of 08:13, 3 February 2019

1,117 bytes added ,  3 February 2019
Fix manual link
(Fix manual link)
(7 intermediate revisions by 3 users not shown)
Line 7: Line 7:
This page is meant to provide '''in-depth explanations''' about how AGS manages fonts, and how to create fonts for AGS.
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, then read [[Tutorial_Part_9_-_Cursors_and_fonts#Fonts|this]].
* If you only want to read the ''short'' version, then read [https://www.adventuregamestudio.co.uk/manual/index.html?page=acintro9.htm this].
* There is a ''much more complicated'' version of this article [[Fonts_deprecated_methods|here]]. It was written ''before'' AGS 3.4 was available. If you want to dig into ''old'' tricks to use 256 characters in games, or maybe adapt them to use much more characters, then that article might be useful.
* There is a ''much more complicated'' version of this article [[Fonts_deprecated_methods|here]]. It was written ''before'' AGS 3.4 was available. If you want to dig into ''old'' tricks to use 256 characters in games, or maybe adapt them to use much more characters, then that article might be useful.


Line 44: Line 44:
* If the answer is '''"d"''', then you need to consider searching/creating fonts that will allow the special characters you need. Unlike situation "b" and "c", Cyrillic alphabet does not only fill the "unused" extra 128 characters while leaving the first 128 characters untouched. It needs the whole 256 characters page to fit in, so you'll need a font just for the cyrillic alphabet. But still, it works fundamentally the same way as other 256-characters fonts.
* If the answer is '''"d"''', then you need to consider searching/creating fonts that will allow the special characters you need. Unlike situation "b" and "c", Cyrillic alphabet does not only fill the "unused" extra 128 characters while leaving the first 128 characters untouched. It needs the whole 256 characters page to fit in, so you'll need a font just for the cyrillic alphabet. But still, it works fundamentally the same way as other 256-characters fonts.


* If the answer is '''"e"''', then this alphabet is a bit peculiar because there are thousands of kanjis BUT Japanese also has a basic set of about 60 to 200 characters that lets you write in phonetic syllables. The basic 50-something characters are the "katanaka" (see a pixel font here : https://www.colourbox.com/vector/pixel-japanese-katakana-vector-18520378 ). You'd be probbaly more comfortable with some extra characters, that make it up to about 200. It means it all fits in a 256-characters font, just like cyrillic alphabet (above). PLEASE NOTE: the author of this article is not an expert on the topic. Please feel free to correct me [[http://www.adventuregamestudio.co.uk/forums/index.php?topic=55022.msg636566116#msg636566116|here]]
* If the answer is '''"e"''', then this alphabet is a bit peculiar because there are thousands of kanjis BUT Japanese also has a basic set of about 60 to 200 characters that lets you write in phonetic syllables. The basic 50-something characters are the "katakana" (see a pixel font here : https://www.colourbox.com/vector/pixel-japanese-katakana-vector-18520378 ). You'd be probbaly more comfortable with some extra characters, that make it up to about 200. It means it all fits in a 256-characters font, just like cyrillic alphabet (above). PLEASE NOTE: the author of this article is not an expert on the topic. Please feel free to correct me [[http://www.adventuregamestudio.co.uk/forums/index.php?topic=55022.msg636566116#msg636566116|here]]


* If the answer is '''"f"''', then AGS wasn't really designed for your needs. There are (probably) workarounds, but they are outside of the scope of this document. You can try the engine plugin "[http://www.adventuregamestudio.co.uk/forums/index.php?topic=52207.msg636514064#msg636514064 AGSBMFontRenderer]" (not tested). You might find some clues [https://www.adventuregamestudio.co.uk/forums/index.php?topic=54570.msg636555760 here] if you're targetting '''Farsi/Persian'''.  
* If the answer is '''"f"''', then AGS wasn't really designed for your needs. There are (probably) workarounds, but they are outside of the scope of this document. You can try the engine plugin "[http://www.adventuregamestudio.co.uk/forums/index.php?topic=52207.msg636514064#msg636514064 AGSBMFontRenderer]" (not tested). You might find some clues [https://www.adventuregamestudio.co.uk/forums/index.php?topic=54570.msg636555760 here] if you're targetting '''Farsi/Persian'''.  
Line 65: Line 65:
::- Either you use a "real" pixel font, in SCI of WFN format (read below), OR
::- Either you use a "real" pixel font, in SCI of WFN format (read below), OR
::- you use a TTF font that looks like a pixel font. You can even convert that pixel-looking TTF font into an actual pixel font (SCI or WFN) with a few easy steps.
::- you use a TTF font that looks like a pixel font. You can even convert that pixel-looking TTF font into an actual pixel font (SCI or WFN) with a few easy steps.


== More about the formats ==
== More about the formats ==
Line 150: Line 147:




== How can I ''make'' fonts? ==
== How can I ''make'' (or edit) fonts? ==


'''Summary'''
'''Summary'''


4 important questions to ask yourself:  
<span style="font-size:100%; color:red;">4 important questions to ask yourself: </span>
 
# Do you want to make a '''pixel''' font, OR a TTF (i.e. '''vector''') font?  
# Do you want to make a '''pixel''' font, OR a TTF (i.e. '''vector''') font?  
# If you want to make a pixel font: do you want to draw it/edit it '''manually''', OR do you want to '''start off from a TTF font''' (by rendereding into pixels first)?  
# If you want to make a pixel font: do you want to draw it/edit it '''manually''', OR do you want to '''start off from a TTF font''' (by rendereding into pixels first)?  
Line 170: Line 168:


As written above, we won't help you for that. Creating "real" fonts is an incredibly complex task. But in case you really want to create your own font [http://fontforge.org/ Font Forge] is a good tool to start with.
As written above, we won't help you for that. Creating "real" fonts is an incredibly complex task. But in case you really want to create your own font [http://fontforge.org/ Font Forge] is a good tool to start with.
However, if you only want to create a TTF (vector) font that ''looks'' like a pixels font, there's an easy solution for you : read the process explained by '''Zoo977'''. Read [http://www.adventuregamestudio.co.uk/forums/index.php?topic=53390.msg636534667#msg636534667 here]. A very comprehensive tutorial.
However, if you only want to create a TTF (vector) font that ''looks'' like a pixels font, there's an easy solution for you : read the process explained by '''Zoo977'''. Read [http://www.adventuregamestudio.co.uk/forums/index.php?topic=53390.msg636534667#msg636534667 here]. A very comprehensive tutorial.


Tools mentionned in this section: <span style="font-size:100%; color:mediumorchid; font-weight:bold;">BitFont Maker 2</span>, <span style="font-size:100%; color:mediumorchid; font-weight:bold;">Type Light</span>
Tools mentionned in this section: <span style="font-size:100%; color:mediumorchid; font-weight:bold;">BitFont Maker 2</span>, <span style="font-size:100%; color:mediumorchid; font-weight:bold;">Type Light</span>, <span style="font-size:100%; color:mediumorchid; font-weight:bold;">Font Forge</span>
 
=== How to create a 128-characters font from scratch? ===
 
<span style="font-size:120%; color:mediumorchid; font-weight:bold;">Radiant's Font Editor</span>


That's the simplest scenario :
=== How can I understand the principles of fonts making? ===
# <span style="color: blue; font-size:150%;">Download</span> '''[http://www.adventuregamestudio.co.uk/forums/index.php?topic=23521.0 Radiant's Font Editor]'''
# Potentially start from one of the WFN fonts provided, then save. (watch out! this tool does not know how to handle 256-characters WFN fonts)
# 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 (128 characters)
::* Can save as BMP sprite table
::'''Cons:'''
::* Limited to 128 characters
::* Oh noes! I'm still using the archaic SCI format!  http://www.barnrunner.com/OSD/Roger-Dennis-Wink.gif
::* That tool is not maintained (not that it's been an issue so far, since it works as expected)
 
=== But... I'm very bad at drawing fonts! ===
   
   
If you have no artistic sense, then fear not. Simply follow [http://www.adventuregamestudio.co.uk/forums/index.php?topic=53390.msg636534667#msg636534667 these guidelines].
If you have no artistic sense, then fear not. Simply follow [http://www.adventuregamestudio.co.uk/forums/index.php?topic=53390.msg636534667#msg636534667 zoo977's guidelines].
 
=== A more versatile AGS-dedicated tool : Rulaman's WFN-FontEditor ===
 
<span style="font-size:120%; color:mediumorchid; font-weight:bold;">Rulaman's WFN-FontEditor</span>


[[image:Font_Editor_Plugin_Rulaman.png|thumb|right|320px|Rulaman's WFN-FontEditor as plugin in the AGS Editor]]


That tool comes in two flavours:
* as standalone (a .exe file that you can run outside of AGS), or
* as an AGS-Editor plugin (a new tool pane directly in AGS).
Either way, it works the same way.


<span style="color: blue; font-size:150%;">Download</span> [http://www.adventuregamestudio.co.uk/forums/index.php?topic=48527.0 '''here'''].
=== Making bitmap fonts based off a TTF font ===


The advantage over Radiant's editor is that it allows 256-characters fonts. That's not immediately obvious, so the easiest way to start is to open [http://www.adventuregamestudio.co.uk/forums/index.php?topic=48798.msg636465473#msg636465473 an existing 256-characters font] and work with it.


::'''Pro-tips:'''
'''Most users won't choose to do this,''' because a TTF (vector font), by design, is usually made to be rendered onto the screen in a high resolution. With nice curves and all.  
::* If you start from a 128-characters font, then click on "Extend to 256" (just above the top-right corner of the characters table).  
You can see the awkwardess here:
::* If you don't know what characters to draw in the extra 128 special characters, then open the basic 256-characters font of AGS in another tab, and copy-paste the missing characters.
* If you're making a game in high resolution (800x600 or more), then why going through the troble of rendering TTF into pixels first, as the font can be used directly by AGS?
::* You can copy-paste a character by right-clicking on the character in the table
* If your game is in old-school style, with very low resolution (320x200), then resolution is definitely too small to get any advantage from the TTF font. You're better off drawing the font manually directly.
::* Make sure that all characters have the same height (use the "height" text box to adjust it or click on "all height to current"). If you're worried that some characters will be cropped, then simply open them and move the character nside its box using the U(p), L(eft), D(own), R(ight) buttons.
::* If you plan on using this font as a dialogs font, then keep a blank pixel on the left and on the right of each letter, so that you can then apply an outline.




::'''Pros:'''
'''There are a handful of exceptions though :'''  
::* Convenient features such as '''outline''' (if you want to draw it manually)
* If you're using a medium resolution (640x480). Your font might still have curves or small details BUT the low resolution requires you to push a few pixels around here and there in the font.
::* If used as a plugin, integrated directly in your AGS editor
* You want to add some special effects in the font. AGS only manages monochrome fonts (one color), and if you want to add a drop-shadow or a second color to the font, then you need to work on your font at pixels level (see section "How can I add special effects to the font?). the only exception is for outline. Because AGS can manage that automatically if you enable it in the font's settings.
::* Converts from WFN to SCI and back
* If you want the font to have "real" anti-aliasing, with some semi-transparent pixels.
::* '''Handles 256 characters'''
 
::'''Cons:'''
::* A rather rudimentary interface.
 
=== Making bitmap fonts from TTF ===


The idea here is simple yet powerful: you have a tool that will render the characters of the TTF font at the desired size (usually rather small, if your goal is to make a pixel font). Then each rendered character is saved as a small image and the tool generates an entire pixel font out of them. Then you import and use that pixel font in your game.
The idea here is simple yet powerful: you have a tool that will render the characters of the TTF font at the desired size (usually rather small, if your goal is to make a pixel font). Then each rendered character is saved as a small image and the tool generates an entire pixel font out of them. Then you import and use that pixel font in your game.


Line 245: Line 208:
So, here are tools to do all this:
So, here are tools to do all this:


==== zoo977's process using 'BitFont Maker 2' ====
<span style="font-size:120%; color:mediumorchid; font-weight:bold;">BitFont Maker 2</span>


Read [http://www.adventuregamestudio.co.uk/forums/index.php?topic=53390.msg636534667#msg636534667 here]. A very comprehensive tutorial.


==== Rulaman's TtfWfnSci ====
==== Rulaman's TtfWfnSci ====
Line 318: Line 277:
That tools was not designed for AGS but it might be a nice alternative to manipulate sprites tables generated from TTF fonts.
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.
You must consider it an additional tool to Calin Leafshade's SpriteFont renderer.
=== How to create a 128-characters font from scratch? ===
<span style="font-size:120%; color:mediumorchid; font-weight:bold;">Radiant's Font Editor</span>
That's the simplest scenario :
# <span style="color: blue; font-size:150%;">Download</span> '''[http://www.adventuregamestudio.co.uk/forums/index.php?topic=23521.0 Radiant's Font Editor]'''
# Potentially start from one of the WFN fonts provided, then save. (watch out! this tool does not know how to handle 256-characters WFN fonts)
# 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 (128 characters)
::* Can save as BMP sprite table
::'''Cons:'''
::* Limited to 128 characters
::* Oh noes! I'm still using the archaic SCI format!  http://www.barnrunner.com/OSD/Roger-Dennis-Wink.gif
::* That tool is not maintained (not that it's been an issue so far, since it works as expected)
=== A more versatile AGS-dedicated tool : Rulaman's WFN-FontEditor ===
<span style="font-size:120%; color:mediumorchid; font-weight:bold;">Rulaman's WFN-FontEditor</span>
[[image:Font_Editor_Plugin_Rulaman.png|thumb|right|320px|Rulaman's WFN-FontEditor as plugin in the AGS Editor]]
That tool comes in two flavours:
* as standalone (a .exe file that you can run outside of AGS), or
* as an AGS-Editor plugin (a new tool pane directly in AGS).
Either way, it works the same way.
<span style="color: blue; font-size:150%;">Download</span> [http://www.adventuregamestudio.co.uk/forums/index.php?topic=48527.0 '''here'''].
The advantage over Radiant's editor is that it allows 256-characters fonts. That's not immediately obvious, so the easiest way to start is to open [http://www.adventuregamestudio.co.uk/forums/index.php?topic=48798.msg636465473#msg636465473 an existing 256-characters font] and work with it.
::'''Pro-tips:'''
::* If you start from a 128-characters font, then click on "Extend to 256" (just above the top-right corner of the characters table).
::* If you don't know what characters to draw in the extra 128 special characters, then open the basic 256-characters font of AGS in another tab, and copy-paste the missing characters.
::* You can copy-paste a character by right-clicking on the character in the table
::* Make sure that all characters have the same height (use the "height" text box to adjust it or click on "all height to current"). If you're worried that some characters will be cropped, then simply open them and move the character nside its box using the U(p), L(eft), D(own), R(ight) buttons.
::* If you plan on using this font as a dialogs font, then keep a blank pixel on the left and on the right of each letter, so that you can then apply an outline.
::'''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'''
::'''Cons:'''
::* A rather rudimentary interface.


== What's all the fuss about 256 characters? ==
== What's all the fuss about 256 characters? ==
Line 411: Line 423:
== CONCLUSION ==
== CONCLUSION ==


Let's recap: the main strategies regarding fonts in an AGS game are:
In AGS, using fonts depends only on your '''needs'''. Your needs will decide of your '''process''' and which '''tools''' you should use.
* For a hi-resolution game, use a TTF fonts used "as-is" (not converted to bitmap). Make sure it has all Western Europe 256 characters (read section "How can I find fonts?")
 
* For a low-resolution game, use a bitmap/pixels font. Two solutions:
* In doubt, always restart your read from section "define your needs".
: - Draw it from scratch, or extend it from an existing 128-characters font. In both cases, use Rulaman's WFN-FontEditor for drawing the characters and saving in the proper format (and use Radiant's Font Editor for the first 128 characters if you really need it).
* If possible, have the courtesy to make your game support the basic Western-Europe characters set.
: OR
* Then decide if you want a TTF font involved in the process, or not (either to use it as-is, or as a work base). If yes, then find a good one on the Internet. Then learn to master the tools to render it nicely.
: - Create it by rendering a TTF font into bitmap (see section "how can I make fonts?")
* Master the tools to draw pixel fonts.
* Understand how to apply special effects on fonts (cast shadow, outline...) in AGS.
* Learn to import fonts into AGS.
 
Thanks for reading!


Regardless of the resolution of your game, if you want to use anti-aliasing with your font, then use Calin Leafshade's SpriteFont renderer plugin (described earlier).




[[Category:Intermediate Tutorials]]
[[Category:Intermediate Tutorials]]
Retrieved from ‘https://www.adventuregamestudio.co.uk/wiki/Special:MobileDiff/10906...11164’

Navigation menu