1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Copyright (C) 2017 David Thompson davet@gnu.org
Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.3
or any later version published by the Free Software Foundation;
with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
A copy of the license is included in the section entitled "GNU
Free Documentation License".
A copy of the license is also available from the Free Software
Foundation Web site at http://www.gnu.org/licenses/fdl.html.
The document was typeset with
http://www.texinfo.org/ (GNU Texinfo).
-->
<!-- Created by GNU Texinfo 6.3, http://www.gnu.org/software/texinfo/ -->
<head>
<title>The Chickadee Game Toolkit: Fonts</title>
<meta name="description" content="The Chickadee Game Toolkit: Fonts">
<meta name="keywords" content="The Chickadee Game Toolkit: Fonts">
<meta name="resource-type" content="document">
<meta name="distribution" content="global">
<meta name="Generator" content="makeinfo">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="index.html#Top" rel="start" title="Top">
<link href="Index.html#Index" rel="index" title="Index">
<link href="index.html#SEC_Contents" rel="contents" title="Table of Contents">
<link href="Graphics.html#Graphics" rel="up" title="Graphics">
<link href="Blending-and-Depth-Testing.html#Blending-and-Depth-Testing" rel="next" title="Blending and Depth Testing">
<link href="Lines-and-Shapes.html#Lines-and-Shapes" rel="prev" title="Lines and Shapes">
<style type="text/css">
<!--
a.summary-letter {text-decoration: none}
blockquote.indentedblock {margin-right: 0em}
blockquote.smallindentedblock {margin-right: 0em; font-size: smaller}
blockquote.smallquotation {font-size: smaller}
div.display {margin-left: 3.2em}
div.example {margin-left: 3.2em}
div.lisp {margin-left: 3.2em}
div.smalldisplay {margin-left: 3.2em}
div.smallexample {margin-left: 3.2em}
div.smalllisp {margin-left: 3.2em}
kbd {font-style: oblique}
pre.display {font-family: inherit}
pre.format {font-family: inherit}
pre.menu-comment {font-family: serif}
pre.menu-preformatted {font-family: serif}
pre.smalldisplay {font-family: inherit; font-size: smaller}
pre.smallexample {font-size: smaller}
pre.smallformat {font-family: inherit; font-size: smaller}
pre.smalllisp {font-size: smaller}
span.nolinebreak {white-space: nowrap}
span.roman {font-family: initial; font-weight: normal}
span.sansserif {font-family: sans-serif; font-weight: normal}
ul.no-bullet {list-style: none}
@media (min-width: 1140px) {
body {
margin-left: 14rem;
margin-right: 4rem;
max-width: 52rem;
}
}
@media (min-width: 800px) and (max-width: 1140px) {
body {
margin-left: 6rem;
margin-right: 4rem;
max-width: 52rem;
}
}
@media (max-width: 800px) {
body {
margin: 1rem;
}
}
-->
</style>
<link rel="stylesheet" type="text/css" href="https://dthompson.us/css/dthompson.css">
</head>
<body lang="en">
<a name="Fonts"></a>
<div class="header">
<p>
Next: <a href="Blending-and-Depth-Testing.html#Blending-and-Depth-Testing" accesskey="n" rel="next">Blending and Depth Testing</a>, Previous: <a href="Lines-and-Shapes.html#Lines-and-Shapes" accesskey="p" rel="prev">Lines and Shapes</a>, Up: <a href="Graphics.html#Graphics" accesskey="u" rel="up">Graphics</a> [<a href="index.html#SEC_Contents" title="Table of contents" rel="contents">Contents</a>][<a href="Index.html#Index" title="Index" rel="index">Index</a>]</p>
</div>
<hr>
<a name="Fonts-1"></a>
<h4 class="subsection">2.4.5 Fonts</h4>
<p>Unlike the traditional TrueType font format that many are accustomed
to, Chickadee loads and renders bitmap fonts in the
<a href="http://www.angelcode.com/products/bmfont/doc/file_format.html">Angel Code format</a>. But why use this seemingly obscure format? It’s
easy to find TTFs but not easy to find FNTs (the canonical file
extension used for Angel Code fonts) and bitmap fonts don’t scale
well. The reason is efficiency.
</p>
<p>If all of the glyphs of a font are pre-rendered and packed into an
image file then it becomes possible to use a texture atlas
(see <a href="Textures.html#Textures">Textures</a>) and a sprite batch (see <a href="Sprites.html#Sprites">Sprites</a>) when
rendering, which is a more efficient way to render fonts than using,
say, <a href="https://www.libsdl.org/projects/SDL_ttf/">SDL_ttf</a> or other
solutions that involve using the FreeType library directly.
</p>
<p>Now what about scaling? In libraries that use TTF fonts, one must
choose the size that the glyphs will be rasterized at up front. To
use <code>n</code> sizes of the same font, one must load <code>n</code> variants
of that font. If the size of the text is dynamic, some kind of
texture scaling algorithm must be used and the text will inevitably
look blurry. At first glance, using bitmap fonts seem to have an even
worse issue. Instead of just loading the same font <code>n</code> times at
different sizes, one would need to generate <code>n</code> image files for
each font size needed. This is where the “signed distance field”
rendering technique comes in. Introduced by
<a href="http://www.valvesoftware.com/.../2007/SIGGRAPH2007_AlphaTestedMagnification.pdf">Valve</a> in 2007, signed distance field fonts can be efficiently stored
in a bitmap and be rendered at arbitrary scale factors with good
results. Chickadee can render both traditional bitmap fonts and
signed distance field fonts. <em>Signed distance field font
rendering is not yet available, so be patient.</em>
</p>
<p>While Chickadee does not yet offer a tool for converting TTF fonts
into FNT fonts, tools such as
<a href="https://github.com/libgdx/libgdx/wiki/Hiero">Hiero</a> may be used
in the meantime.
</p>
<p>The following procedures can be found in the <code>(chickadee render
font)</code> module.
</p>
<dl>
<dt><a name="index-load_002dfont"></a>Scheme Procedure: <strong>load-font</strong> <em><var>file</var></em></dt>
<dd><p>Load the Angel Code formatted XML document in <var>file</var> and return a
new font object.
</p></dd></dl>
<dl>
<dt><a name="index-font_003f"></a>Scheme Procedure: <strong>font?</strong> <em><var>obj</var></em></dt>
<dd><p>Return <code>#t</code> if <var>obj</var> is a font object.
</p></dd></dl>
<dl>
<dt><a name="index-font_002dface"></a>Scheme Procedure: <strong>font-face</strong> <em><var>font</var></em></dt>
<dd><p>Return the name of <var>font</var>.
</p></dd></dl>
<dl>
<dt><a name="index-font_002dline_002dheight"></a>Scheme Procedure: <strong>font-line-height</strong> <em><var>font</var></em></dt>
<dd><p>Return the line height of <var>font</var>.
</p></dd></dl>
<dl>
<dt><a name="index-font_002dline_002dheight-1"></a>Scheme Procedure: <strong>font-line-height</strong> <em><var>font</var></em></dt>
<dd><p>Return the line height of <var>font</var>.
</p></dd></dl>
<dl>
<dt><a name="index-font_002dbold_003f"></a>Scheme Procedure: <strong>font-bold?</strong> <em><var>font</var></em></dt>
<dd><p>Return <code>#t</code> if <var>font</var> is a bold font.
</p></dd></dl>
<dl>
<dt><a name="index-font_002ditalic_003f"></a>Scheme Procedure: <strong>font-italic?</strong> <em><var>font</var></em></dt>
<dd><p>Return <code>#t</code> if <var>font</var> is an italicized font.
</p></dd></dl>
<dl>
<dt><a name="index-draw_002dtext"></a>Scheme Procedure: <strong>draw-text</strong> <em><var>font</var> <var>text</var> <var>position</var></em></dt>
<dd><p>[#:scale] [#:rotation] [#:blend-mode]
</p>
<p>Draw the string <var>text</var> with the first character starting at
<var>position</var> using <var>font</var>.
</p>
<div class="example">
<pre class="example">(draw-text font "Hello, world!" (vec2 128.0 128.0))
</pre></div>
<p>Refer to <code>draw-sprite</code> (see <a href="Sprites.html#Sprites">Sprites</a>) for information about
the other arguments.
</p></dd></dl>
<hr>
<div class="header">
<p>
Next: <a href="Blending-and-Depth-Testing.html#Blending-and-Depth-Testing" accesskey="n" rel="next">Blending and Depth Testing</a>, Previous: <a href="Lines-and-Shapes.html#Lines-and-Shapes" accesskey="p" rel="prev">Lines and Shapes</a>, Up: <a href="Graphics.html#Graphics" accesskey="u" rel="up">Graphics</a> [<a href="index.html#SEC_Contents" title="Table of contents" rel="contents">Contents</a>][<a href="Index.html#Index" title="Index" rel="index">Index</a>]</p>
</div>
</body>
</html>
|
