 
|
|
|
|
Working with SVGAlib Fonts One major facet of SVGAlib that continues to baffle programmers is the use of fonts. Not surprisingly, this innocuous subject has caused innumerable headaches around the world. Truth be known, many coders find that they're left with more questions than answers. How are SVGAlib fonts created? How are they displayed? Several programs (such as Sasteroids) clearly use lettering on the screen, yet there's no obvious explanation given. You won't find any tutorials on the 'Net (aside from this one), nor will you find any mention of fonts in the standard FAQs. It almost seems like there's been a deliberate omission -- it's a veritable conspiracy of silence. This article is designed to be the tutorial that everyone seems to have been working with -- the one that's eluded you up until now. It'll show you everything you ever wanted to know about programming SVGAlib fonts, from manipulating existing character sets to creating new ones. You'll learn where to download some good typefaces (hint: www.svgalib.org), and how to use a new external library to display TrueType fonts -- the visually superior, cross-platform standard. But, let's not get too far ahead of ourselves. For now, let's start at the beginning. What Is a Font? A font can be defined as a set of typewritten characters, all using a consistent style or design. You may be familiar with fonts from other operating systems, such as Arial or Helvetica. Perhaps you've used them on the web? Regardless, fonts are an integral part of today's computing environment. Fonts don't have the ability to display themselves. Most fonts are contained within data files, which are then called by executables. (These data files are often in binary format, which means that they can't be read by a text editor). Types of Fonts It's important to know that there are two types of fonts available: bitmapped and scalable. These two font types are nearly identical in concept to the bitmapped and vectored graphic files commonly available. A bitmapped font (the simpler of the two) is like a BMP or GIF image. It's stored as a matrix (or grid) of pixel values, and is displayed exactly as it's written -- no interpretation is involved. It's a perfect copy, but as a result, it can't be resized without a significant loss of quality. See the diagram below for an example.
A scalable font, on the other hand, is stored in the same manner as a vectored graphic. Rather than being mapped pixel by pixel, a scalable font's "stylistic information" is saved in its data file. This information includes the angles of each character's curves, and how they're proportioned. Because no actual picture exists, it's up to the program that reads in the font to construct it for display. This adds some processing overhead, but the end result is well worth it. Scalable fonts can be resized without losing any quality, and often have smooth (or antialiased) edges. Now, have a look at the next diagram for an example of a scalable font. It's quite nice, isn't it? This is Arial, a TrueType font.
Bitmapped Fonts Unfortunately, SVGAlib is only capable of displaying bitmapped fonts. (However, we can get around this later by using another library). The good news is that the code is fairly simple. To use it, you'll have to employ SVGAlib's sister library: vgagl. Here's how you prepare a bitmapped font for use, using gl_font8x8: void *font = malloc(256 * FONT_WIDTH * FONT_HEIGHT * BYTESPERPIXEL); gl_expandfont(FONT_WIDTH, FONT_HEIGHT, COLOR, gl_font8x8, font); gl_setfont(FONT_WIDTH, FONT_HEIGHT, font); This loads SVGAlib's one internal font, gl_font8x8, into memory. The "8x8" means that each character in the font is eight pixels high by eight pixels across. You'll therefore need to define FONT_HEIGHT and FONT_WIDTH as being 8, accordingly. COLOR can be any color value, so long as it's within the parameters of your chosen screen mode. Finally, BYTESPERPIXEL is defined in vgagl.h. The next step is to actually display your words on the screen. This is accomplished with gl_write(), like so: char text[] = "Hello, world!"; gl_write(10, 10, text); The first two arguments (10 and 10) place the words on the screen -- they refer to the x and y corrdinates of the upper left-hand corner of the first character. Here's a complete program, using the four commands you just learned:
#include <stdlib.h>
#include <vga.h>
#include <vgagl.h>
#define FONT_HEIGHT 8
#define FONT_WIDTH 8
void prepare_font(void);
int main(void)
{
int x = 10,
y = 10;
char text[] = "Hello, world!";
vga_init();
vga_setmode(G320x200x256);
gl_setcontextvga(G320x200x256);
prepare_font();
gl_write(x, y, text);
vga_getch();
vga_setmode(TEXT);
return 0;
}
void prepare_font(void)
{
int color = 15; /* white */
void *font = malloc(256 * FONT_WIDTH * FONT_HEIGHT * BYTESPERPIXEL);
gl_expandfont(FONT_WIDTH, FONT_HEIGHT, color, gl_font8x8, font);
gl_setfont(FONT_WIDTH, FONT_HEIGHT, font);
}
Upon running this program, you should see the words "Hello, world!" displayed in white at the top of the screen. Hooray! You've done it. Feel free to play around. Of course, you can vary the placement of your text by providing different x and y values to gl_write(). It's worth noting that gl_writen(int x, int y, int n, char *s) is identical to gl_write(), except that it only displays the first "n" characters of your string. Should you choose to include your string directly in gl_write() or gl_writen(), you'll have to terminate it with "\0" like so: gl_write(10, 10, "Hello, World!\0"); Otherwise, you won't see any results. Different Fonts After you've experimented with gl_font8x8, you'll probably want to try your hand with some other character sets. This, too, is easy. Other fonts are simply stored as "char" arrays, and look like this:
unsigned char font01[2048] =
{
124,130,186,162,186,130,124,0,126,129,165,129,165,153,129,126,
126,129,165,129,153,165,129,126,108,246,246,254,124,56,16,0,
16,56,124,254,124,56,16,0,16,56,84,254,84,16,56,0,
56,124,254,254,108,16,56,0,16,24,20,20,48,112,96,0,
254,254,254,238,254,254,254,0,236,138,138,170,170,170,236,0,
142,136,136,140,136,136,232,0,174,170,170,234,170,170,174,0,
238,136,136,204,136,136,136,0,238,138,138,142,140,138,234,0,
62,34,62,34,102,238,204,0,16,84,40,198,40,84,16,0,
240,248,252,254,252,248,240,0,30,62,126,254,126,62,30,0,
16,56,124,16,124,56,16,0,238,238,238,238,238,0,238,0,
...
48,48,48,240,0,0,0,0,0,0,0,255,0,0,0,0,
24,24,24,31,0,0,0,0,24,24,24,24,24,24,24,24,
136,34,136,34,136,34,136,34,85,170,85,170,85,170,85,170,
68,170,68,170,68,170,68,170,51,102,204,153,51,102,204,153,
204,102,51,153,204,102,51,153,199,143,31,62,124,248,241,227,
227,241,248,124,62,31,143,199,174,128,186,2,234,8,171,32
}
(I went ahead and eliminated some of the lines for brevity). A full font array will have information for 256 characters. Each character contained in an 8 x 8 font is comprised of eight numbers, which means that a complete 8 x 8 font has 2048 numeric values (256 * 8 = 2048). To use a "char" font, simply substitute "gl_font8x8" with the name of your char array, like so: gl_expandfont(WIDTH, HEIGHT, color, font01, font); Finding Bitmapped Fonts You can find this font, and more, at the official SVGAlib website: www.svgalib.org. Creating Bitmapped Fonts You now know that each character in an 8-pixel by 8-pixel bitmapped font is defined by eight values. This, in turn, means that a 256-character font requires 2048 numbers. That's fine, but what do those numbers mean? Would anything bad happen if you changed them? And how can you create your own fonts? Let's find out. Each character in an 8 x 8 font is actually comprised of eight horizontal lines, containing eight pixels apiece. Accordingly, each font number refers to one of the eight horizontal lines. The lines run from top to bottom, so the numbers refer to the lines in sequential order. For example, a capital "S" can be created with the numbers 126, 128, 128, 124, 2, 2, 252, and 0. (The 0 is to provide a buffer between multiple lines of text). See the illustration below for a better representation.
Did you see how the eight numbers made the letter "S"? Now, what would happen if you just used the number "124" for all eight lines? Here's how that would look:
So, as you can see, the numbers in the font's char array logically create each character in the font. That said, how do you know which numbers do what? Is it random? No -- it's organized rather well. As you know, each of the character's eight lines contains eight pixels. That means that there are 256 possible combinations of pixels in each line. (2 possible values [on or off] to the 8th power). So, the numbers 0 - 255 match the 256 possible horizontal lines. Further, far from being random values, they're instead ordered in a logical, binary sequence. The first number, 0, is an entirely blank line. If "0" equals a blank pixel, and "1" equals a painted pixel, line 0 would look like this: 00000000 The next line, 1, would look like this: 00000001 In turn, lines 2 - 10 would be as follows: 00000010 = 2 (compare this with the "2" lines in the letter "S" above) 00000011 = 3 00000100 = 4 00000101 = 5 00000110 = 6 00000111 = 7 00001000 = 8 00001001 = 9 00001010 = 10 Can you see the binary sequence? Of course, line 255 would be this: 11111111 = 255 Although I won't map out all of the 256 font "strips" for you, it would be trivial for you to do this on your own. And to create your own font, then, you would merely need to match the eight appropriate font strip numbers to the character you were creating. (Then, repeat for the other 255 characters). For more fun, you can even skip over the characters you won't be using by using eight zeros instead. Of course, this process can be somewhat time consuming. Therefore, you may find it useful to use a simple program called FontBuilder that I've developed. FontBuilder provides a basic graphical interface for drawing the characters for a new font. When you're finished, it figures out what font strips are needed, and it writes the font file (or char array) for you. See the SVGAlib website for a copy. What a relief! Scalable Fonts After all that effort, though, you still can't avoid the fact that bitmapped fonts are less than perfect. They *are* easy to use, but they just don't cut it, so far as serious presentations go. Wouldn't it be nice to be able to use regular fonts like those found in the Windows and Mac world? Finally, you can. Thanks to a fairly recent and highly successful project called FreeType (see www.freetype.org), TrueType fonts are now available for console graphics. The actual routines for screen rendering were ported from X11 to SVGAlib by the SVGAlib maintainer, Matan Ziv-Av. Thanks, Matan! The first step is to download, compile, and install the FreeType libraries. These go into the /usr/local/lib directory, so you'll probably need to run ldconfig afterwards to re-synch (re-cache) the libraries in your system. Note that you'll have to edit your Makefile if you don't have X11 installed on your system -- you'll need to remove all references to the X Windows test programs, or you'll get some compile-time errors. Next, you can download the SVGAlib demos from Matan Ziv-Av's site. This will show you how to integrate FreeType into your own programs. Before you can display anything, however, you'll need a TrueType font. I simply copied arial.ttf from my Windows machine. You'll find all your fonts in C:\WINDOWS\FONTS, assuming you have a standard install. Conclusion Hopefully this article helped to clear up the inadvertent air of mystery surrounding fonts and text in SVGAlib. Once you've written a program or two involving fonts, you'll find that they're just as easy to implement as anything else in console graphics. What's more, you might want to contribute your own bitmapped font to the SVGAlib site! Just send it to fonts@svgalib.org, and you'll get full credit. See, isn't Open Source fun? |
:: summary Help to get you started.
:: navigate
|
