Bitmap
Font Creation Utility v1.0
Users'
Manual
Juicy
Fonts is an easy-to-use
utility that allows you to
create bitmap fonts for use in your own Blitz3D and BlitzPlus games and
applications.
Juicy Fonts features include:
- Intuitive GUI
(Graphical User Interface).
- Create fonts based on any of the TrueType
fonts installed on your computer.
- Create fonts that only contain the characters you need (no
wasted, unused characters - keeps the font image as small as possible).
- Fonts can be any size from 8pt. to 150pt.
- Export font images in .png, .tga or .bmp format (24-bit).
- Font images are optimally packed to keep them as small as
possible.
- Create hollow, outline-only fonts.
- Variable sized drop shadow effect, positioned at any angle.
- 10 outline styles available in 20 sizes each.
- All font previews have multi-level zoom capability (x2 to
x16).
- Interactive Color Picker: immediately see results
while choosing a new color.
- Full control over the kerning of individual characters.
- Negative kerning allows the creation of funky fonts with
overlapping characters.
- 'Test Font' dialog lets you check your font appears the way
you want.
- The provided User Function Library makes it easy to
incorporate fonts into your own programs.
The Main Editor - Designing a
Font |
When
Juicy Fonts has loaded,
you are presented with the Main Editor screen. This is where you design
your font before finalizing it,
ready for export.
In order to make designing a font as intuitive and easy as
possible, all related features are grouped together, under a
descriptive heading. In addition to these 'groups', the bottom half of
the screen contains two viewing panes: the Character Selection Pane
and
the Preview Pane.
All of the Main Editor's components are listed below, along
with a
full description and explanation of their functionality.
This group contains all the
buttons related to
the
reading,
writing and creation of files used by Juicy Fonts, as well as a button
to exit the program when you've finished working with Juicy Fonts.
Click this button when you want to load
a previously saved font design.
You are presented with a file dialog which
displays all the available settings (.jfs) files currently stored in
the
Juicy Fonts 'Settings' folder. If the file you want to load is located
elsewhere, you can type the path to it or navigate to it's folder by
double-clicking on folder names in the list box (the '..' item takes
you to the parent of the current folder).
Click this button when you want to save
the current font design.
You are presented with a file dialog which
displays all the settings (.jfs) files currently stored in
the
Juicy Fonts 'Settings' folder. If you want the settings file to be
saved
elsewhere, you can navigate to a different folder by
double-clicking on folder names in the list box (the '..' item takes
you to the parent of the current folder), or simply include a path when
entering a file name.
Note that you don't need to add the default .jfs extension
when entering a file name, as this will be
automatically appended if you omit it.
Click this button when you want to
import a previously exported font, so that you can make alterations to
it's kerning.
The font will be loaded directly into the
Kerning Editor. Making
alterations to the actual design of an imported font is not possible,
as the font image has already been created. If you do wish to make
design changes, you need to have previously
saved the design's editor
settings - load this instead by clicking on the
Load Settings button.
Click this button when you want to
convert your finished font design into an actual bitmap font, ready to
be
exported and used in your own programs.
Before the final font image is built, you are presented with a dialog
that allows you to specify an amount to increase each character's frame
size by.
This is useful if you plan to later apply an effect to the
font (
using image editor
software) that will expand each character's
image size. For example, applying a blur effect will expand each
character's image by several pixels (dependant on the strength of the
effect) in all directions.
Once the font image has been built, the
Main
Editor is replaced by the
Kerning Editor.
Click this button to quit Juicy Fonts
and return to the Windows desktop.
Before exiting, the current font design is automatically saved and then
re-loaded when you return to Juicy Fonts. This allows you to
immediately carry on designing the font you were
working on before quitting.
This group relates to the characters that have been selected
for inclusion in your font, as highlighted in the Character Selection
Pane. The buttons contained in this group provide a quick way
of
selecting specific sets of characters, instead of clicking on each
character individually.
Click this button to completely clear
the
Character Selection Pane
so that there are no selected characters.
This can be useful when you want to start designing a new font from
scratch as it saves you from having to individually de-select each
character individually.
Click this button to select the full ASCII set of 224
characters for inclusion in your font. You may also want to do this
when making a font that contains the majority of available characters
but not all of them, as you can then simply de-select the ones you
don't need.
Click this button to select the 10
characters that represent the numbers 0 through 9, inclusively.
Note that clicking this button will select the specified characters
in
addition to any that are already selected. If you wish to
select the number characters exclusively, simply
clear all selected
characters before clicking this button.
Click this button to select all 26
uppercase alphabet characters (capital letters A to Z).
Note that clicking this button will select the specified characters
in
addition
to any that are already selected. If you wish to select the uppercase
characters exclusively, simply
clear
all selected characters before
clicking this button.
Click this button to select all 26
lowercase alphabet characters (a to z).
Note that clicking this button will select the specified characters
in
addition
to any that are already selected. If you wish to select the lowercase
characters exclusively, simply
clear
all selected characters before
clicking this button.
Click this button to select all 95
characters comprising the standard ASCII set. This is all ASCII
characters from 32(space) to 126(tilde), inclusive. The standard set
contains all commonly used characters including lowercase, uppercase,
numeric, punctuation and common symbol characters.
Note that clicking this button will select the specified characters
in
addition
to any that are already selected. If you wish to select the standard
set of
characters exclusively, simply
clear
all selected characters before
clicking this button.
Click this button to automatically
select all characters contained in a given word or phrase.
You are presented with a dialog where you can enter a phrase. All
characters contained in this phrase are then selected in the
Character
Selection Pane. This is useful when creating a font that will
be
exclusively used to display certain text. For example, say you
want a font in your game dedicated to display the phrase "LEVEL UP!":
enter this phrase to select it's characters and thus create a font that
contains only L,E,V,U,P,! and the space character. Doing so
allows you to create a minimal font image that doesn't contain any
unused/wasted characters.
Note that clicking this button will select the specified characters
in
addition
to any that are already selected. If you wish to select the phrase's
characters exclusively, simply
clear
all selected characters before
clicking this button.
This field simply displays the total
amount of characters currently selected for inclusion in your font, as
highlighted in the
Character
Selection Pane.
This group relates to the font face currently being used for
your bitmap font design. Here, you can change the font and it's style,
set it's size, and change the font's face color.
Click this button to select a new font face to base your bitmap font
design on.
You are presented with the Select Font dialog. All available fonts are
listed in alphabetical order in the list box. Click on a font name to
view it in the sample pane.
These buttons are used to set the font's style to bold, italic,
underlined, or any combination of the three.
Note that the effectiveness of these styles is dependant on the
selected TrueType font (which is used to base your font
design on). For example, some will only allow your design to embolden a
small amount when selecting 'bold', while others (such as Verdana) will
give you a properly bold look. This is simply down to the quality of
the TrueType font you are using.
This field indicates the current point (pt.) size of your font design.
You can click the buttons on either side to alter the size to
anything from 8pt. to 150pt. However, when creating a very large font,
keep the amount of characters it contains to a minimum, else your final
font image could end up being huge!
This color swatch shows your font design's current face color, along
with the R(ed), G(reen) and B(lue) values that comprise it. To
change the face color, click on the swatch to display the
Interactive
Color Picker.
This group relates solely to the mask color to be used by your
bitmap font. This color will be treated as 'transparent' when
displaying the font in your own programs, i.e. any pixels of this color
will not be drawn. As such, it appears as the
background color of your font design while using Juicy Fonts,
as this will be the part of your bitmap font image you want
transparent, when displayed in your own programs.
This color swatch shows your font design's current mask (transparent)
color, along
with the R(ed), G(reen) and B(lue) values that comprise it. To
change the mask color, click on the swatch to display the
Interactive
Color Picker.
As the mask color represents the background color in Juicy Fonts, you
may like to alter it as an experiment to see how your font will look
when displayed on different colored backgrounds. However, ensure the
final mask color you have set before
finalizing
your font is not also
used elsewhere in the font's design, or those parts will also be
transparent when displayed in your own programs.
This group allows you to define a drop shadow effect to
apply to your
bitmap font design. Adding a shadow to your font can have a dramatic
affect on it's appearance, such as making it look as if it's 'hovering
above the page', or making it look 3D.
With this button pressed, the currently defined shadow is extruded so
that it connects solidly to the font face image. This will generally
give your font a fake 3D appearance.
With this button pressed, the usually solid shadow is dithered with the
mask color. This will give the shadow a fake, semi-transparent
appearance.
This field indicates the current distance (in pixels) that the shadow
is offset from the font face in your design.
You can click the buttons on either side to alter the offset
to
anything from 0 (no shadow) to 50.
This field indicates the current angle that the shadow is at in
relation to the font face in your design. You can click the buttons on
either side to alter the angle to anything in the full 360 degree
range. The double-arrow button can be used to change the angle in 45
degree increments, which are the most commonly used angles for font
shadows.
This color swatch shows your font design's current shadow
color, along
with the R(ed), G(reen) and B(lue) values that comprise it. To
change the shadow color, click on the swatch to display the
Interactive
Color Picker.
This color swatch shows your font design's current shadow gradient
color, along
with the R(ed), G(reen) and B(lue) values that comprise it. To
change the gradient color, click on the swatch to display the
Interactive
Color Picker.
This group allows you to define an outline effect to
apply to your
bitmap font design. Adding an outline can enhance your font's
appearance greatly.
With this button pressed, the font face is 'turned off' to give your
font a hollow, outline-only appearance. This is a great effect to give
your font an unusual, dramatic look.
This field indicates the current outline size (in pixels) of your font
design.
You can click the buttons on either side to alter the size to
anything from 0 (no outline) to 20.
This field indicates the style the current outline is being drawn with,
in your font design. You can click the buttons on either side to change
styles. There are 10 styles to choose from:
- Round
- Square
- Slash 1
- Slash 2
- Etch
- Cross
- Tall
- Wide
- Echo
- Angle
This color swatch shows your font design's current outline
color, along
with the R(ed), G(reen) and B(lue) values that comprise it. To
change the outline color, click on the swatch to display the
Interactive
Color Picker.
This group simply contains the Juicy Fonts logo. Click on it
to display a dialog containing various information about the Juicy
Fonts Bitmap Font Creation Utility.

The Main Editor's
Character Selection Pane displays the
TrueType font your
design is currently based on, and shows which characters have
been
selected for inclusion in your bitmap font. Selected characters
are highlighted with a blue background.
You can select or de-select characters at any time by clicking
on
them: left-click to select; right-click to de-select. You can also use
the Select Group to
define which characters you want selected.
The character surrounded by a yellow box indicates the current
preview character. This is the character currently being displayed in
the Preview Pane. You
can simply point to any character to
make it
the temporary preview character, so that you can see what it looks
like.
When not pointing on the Character Selection Pane, the character most
recently selected/de-selected becomes the default preview character.
Note that you can also change the default preview
character by
pressing the left/right arrow keys on the keyboard. This will move the
preview character selector forwards/backwards through the font, from
where it currently is.

The Main Editor's
Preview Pane displays the currently selected
preview character (indicated in the Character
Selection Pane), rendered
precisely as it will look in the final
bitmap font image. This allows you to see exactly how your
font looks, while designing it. The preview character's
standard glyph and ASCII code are shown in brackets.
To inspect the previewed character image more closely, you can
zoom in on
it by clicking on the Preview Pane: left-click for normal zoom view;
right-click for zoom with pixel grid.
In zoom mode, you can use the
mouse to look around and use the mouse wheel to zoom in and out. In
case your mouse doesn't have a wheel, use can also use the up/down
arrow keys on
the keyboard, instead. You can view the preview character at any level
of zoom from x2 to x16 magnification. To exit zoom mode, simply click
the left/right mouse button, or press ESC.

The Interactive Color Picker is displayed when selecting a new
color
for any component of your font design, and works in much the same way
as color pickers found in any number of other applications. However,
this color picker is interactive, meaning that any color alteration you
make is immediately reflected in the Preview
Pane. This allows you to
experiment and choose colors more intuitively since you can see what
the new color looks like in context, before committing to selecting it.
Note that clicking on the color matrix (A) selects a base
color which specifies hue and saturation only. You may then want to set
the luminosity of the selected color by clicking on the luminosity bar (B). The small, black
arrow on the right side of the luminosity bar indicates the selected
color's current luminosity. The arrow on the left side indicates the
point of mid luminosity - click on this to reset the selected color to
mid luminosity.
The Kerning Editor - Finalizing
a
Font |
First of all, what is kerning? Simply put, it's the space
between
each character, when displayed on-screen. So, every character in your
font has an amount of space (in pixels) to the right and to the left of
it, which spaces it apart from the characters displayed directly before
and after.
By default, your bitmap font will have the same kerning as the
TrueType font you designed it around. This will often be fine for your
needs so you can then skip playing with the kerning and go straight to
exporting your
finished font. However, sometimes some tweaking
is needed to make things look 'just right'.
When importing
or finalizing a
font,
you are presented with the Kerning Editor screen. This is where you
'finalize' a font - by setting it's
kerning - and export it,
ready for use in your own programs.
In much the same way as the Main
Editor screen, all related
features
are grouped together, under a
descriptive heading. In addition to these 'groups', the Kerning Editor
also features a Character
Selection Pane and Preview
Pane.
All of the Kerning Editor's components are listed below, along
with a
full description and explanation of their functionality.
This group allows you to define the kerning for each character
in your
bitmap font. By altering the kerning, you can change the
visual impact your font has when displayed.
This field indicates the left kern (in pixels) of the current
preview character.
You can click the buttons on either side to alter the
value.
Negative values are allowed and will have the affect of 'pulling'
any character displayed to the left, closer. This technique can be used
to create fonts whose characters overlap each other, for a more funky
appearance.
Note that when the
Affect
All button is pressed,
all
characters in the
font are affected, not just the current preview character. To warn you
of this, the
value is displayed in red.
This field indicates the right kern (in pixels) of the current preview
character.
You can click the buttons on either side to alter the
value.
Negative values are allowed and will have the affect of 'pulling'
any character displayed to the right, closer. This technique can be
used
to create fonts whose characters overlap each other, for a more funky
appearance.
Note that when the
Affect
All button is pressed,
all
characters in the
font are affected, not just the current preview character. To warn you
of this, the
value is displayed in red.
This field allows you to shift the current preview character to the
left or right, by clicking the buttons on either side. The value
displayed simply shows how many pixels you've shifted the character,
from it's starting position. The value is reset when a new preview
character is selected.
Note that when the
Affect
All button is pressed,
all
characters in
the font are affected, not just the current preview character. To warn
you of this, the
value is displayed in red.
From left to right, these buttons allow you to left justify, center or
right justify the current preview character, within it's defined
kerning space. That is, the overall space on screen taken up by the
character remains the same, but the character image is justified within
that space.
Note that when the
Affect
All button is pressed, all
characters in the
font are affected, not just the current preview character.
With this button pressed, any alterations you make to kerning using the
Left,
Right,
Shift,
Justify or
Remove buttons will be
applied to all
characters in the font, not just the current preview character. This
allows you to make global changes to the font's kerning, without having
to go through each character, one at a time.
With this button pressed, all characters in the font are spaced apart
on-screen as if the shadow part of each character's image doesn't
exist. Note that this doesn't actually change the left/right kerning
values of any characters. The net result of this is that each character
will overlap the shadow of the character next to it, which often looks
better when displaying fonts that have a shadow extending to
the
left/right of the main font face image.
Click this button to remove (set to zero) both the left and right
kerning of the current preview character.
Note that when the
Affect
All button is pressed,
all
characters in the
font are affected, not just the current preview character.
Click this button to make the font fixed width. That is, the overall
width (including kerning) of
every character in
the font is set to
match the width of the widest character.
Click this button to make a backup copy (in memory) of the current
kerning of all the characters in the font. You may want to do this
before experimenting so that you can then
restore
the kerning, if you
so wish.
Click this button to restore all the font characters' kerning to the
state it was the last time the
Backup
button was pressed.
This group allows you to do various things with
the bitmap font, after you have finished kerning it.
Click this button when you want to test your font to see exactly how it
will look, when displaying text with it in your own programs.
You are presented with the Test
Font dialog. Simply type the text you
want to view and it will be displayed in the Preview Pane.
You can also specify how the preview text should be displayed by
clicking the buttons contained in the 'Alignment' group:
From left to right, these buttons allow you to left justify, center or
right justify the text within the Preview Pane.
With this button pressed, kerning will be taken into
account when
horizontally aligning each line of text. As an example, let's look at
some lines of left justified text displayed with 'Include Kerning' set
and not set:
 |
|
 |
Including
kerning |
|
Ignoring
kerning |
As you can see, when kerning is included, the first character of each
line is offset from the margin by the left kerning of each character.
When kerning is not included, each character is aligned
exactly
with
the margin.
In
practical terms, you will probably only want to include kerning when
displaying lines of left/right justified text that use a
fixed width
font. Doing so will ensure that all characters are vertically aligned
with the characters in the lines above/below.
Click this button when you want to export your finished font, ready for
use in your own programs.
You are presented with a file dialog which
displays all the font image files currently stored in
the
Juicy Fonts 'Fonts' folder. If you want the font to be
saved
elsewhere, you can navigate to a different folder by
double-clicking on folder names in the list box (the '..' item takes
you to the parent of the current folder), or simply include a path when
entering a file name.
You have a choice of three different file formats to save your font
image in: .png, .tga and .bmp. To specify a format, simply append the
appropriate extension to the file name. If you omit a file extension,
the font will be saved in the default format, which is .png.
Note that exporting a font involves creating two files: the font image
itself, and a
separate metrics file (.jfm) which holds all the necessary information
needed to display the font. This metrics file will have the same file
name as the image file it relates to, except with a further .jfm
appended to it.
In order to
use an exported font
in your own programs (or Import it
back into Juicy Fonts), the metrics file must always reside in the same
folder as the font image file itself.
Click this button when you have finished with the font and want to
return to the
Main Editor
screen. You may want to do this after
exporting your finished font,
or when you decide you need to make
changes to the font's design.
This group simply displays various information about the
current bitmap font.
This field displays the overall width (in pixels) of the current
preview character. This is the width of the character including kerning
and so shows the total width the character will occupy when displayed
on-screen.
This field displays the width (in pixels) of the current preview
character's image frame, as defined in the bitmap font image.
This field displays the width (in pixels) of the font. This is the
width of the widest character frame.
This field displays the height (in pixels) of the font. This is the
frame height of
every character in the font.
This field displays the width (in pixels) of the actual bitmap font
image, which contains the frames of all the font's characters.
This field displays the height (in pixels) of the actual bitmap font
image, which contains the frames of all the font's characters.
This field displays the
approximate
amount (in kilobytes) of
video memory (VRAM) required to store the bitmap font image,
when loaded into your own program.
Note that the value displayed represents the
minimum
amount of memory
required for the font image, when used in a 32-bit graphics mode. If
you intend using the font in a 16-bit mode, halve the amount shown.
The actual amount of memory used may be greater than the value shown,
depending on how your graphics card's memory manager decides to
accommodate the image. This can vary from card-to-card, therefore, it's
not possible to calculate the exact amount of memory that will be used.

The Kerning Editor's
Character Selection Pane displays all
the characters contained in the font. The value in
brackets
indicates the total number of characters contained in the font.
You can click on any character to select it to work
on or view
in the Preview Pane.
The character surrounded by a yellow box indicates
the current
preview character. This is the character currently being displayed in
the middle of the Preview
Pane. You can simply point to any
character to
make it
the temporary preview character, so that you can see what it looks
like.
When not pointing on the Character Selection Pane, the character most
recently selected becomes the default preview character.
Note that you can also change the default preview
character by
pressing the left/right arrow keys on the keyboard. This will move the
preview character selector forwards/backwards through the font, from
where it currently is.

The Kerning Editor's
Preview Pane displays the bitmap font
characters in ASCII order, with the currently selected
preview character (indicated in the Character
Selection Pane) in the
middle. The preview character's standard glyph and ASCII code
are shown in brackets.
The bars above and below the preview character are a visual
representation of the character's metrics. The white bar is the width
of the character's image frame, as indicated in the 'Info' Frame W
field.
The bars on either side represent the left and right kerning,
as
indicated by the 'Kerning' Left
and Right fields. These
kerning
bars are
colored green for positive kerning, or red for negative kerning.
To inspect any of the previewed character images more closely,
you can
zoom in on them by clicking on the Preview Pane: left-click for normal
zoom view;
right-click for zoom with pixel grid.
In zoom mode, you can use the
mouse to look around and use the mouse wheel to zoom in and out. In
case your mouse doesn't have a wheel, use can also use the up/down
arrow keys on
the keyboard, instead. You can view the preview character at any level
of zoom from x2 to x16 magnification. To exit zoom mode, simply click
the left/right mouse button, or press ESC.
Enhancing a Font With Image
Editing Software |
After exporting your
bitmap font from Juicy Fonts, you may
want to further enhance it's appearance by editing the font
image in your preferred image editing application. Doing so gives you
the opportunity to add a multitude of cool effects to your font, such
as gradient fills, bevel effects etc.
Because using existing image editing software to enhance your
font is so easy, there seemed little reason to incorporate any of these
effects into Juicy Fonts itself. Also, most modern image editors
provide a huge array of tools and effects - far more than Juicy Fonts
could ever provide.
However, Juicy Fonts does provide a gradient fill effect for
extruded shadows. This is because adding such an effect in a
separate
image editor would actually be difficult and time consuming.
Note that if you plan on adding an effect that will increase the size
of each character frame (such as blur effects), you'll need to increase
the size of all frames appropriately when first building the
font in
Juicy Fonts. The amount you'll need to increase each frame by will
depend on the effect you plan to use. Some experimentation may be
needed
to determine this. Suffice to say, each character frame must contain
the character's image totally and exactly.
If pixels of one character image 'bleed' into the frame of an adjacent
character, the font will not display correctly.
Using Fonts In Your Own
Programs |
Using your bitmap fonts in your own Blitz3D/BlitzPlus programs
is easily achieved by utilizing the provided User Function Library.
This is a source code file (LIB_juicy_fonts.bb)
containing
ready-written functions to load, display and manage your fonts. All
functions in the library have a jf_
prefix so that they can be easily
identified in your code, and also to avoid clashing with any other
similarly named functions you may be using.
There now follows a simple, bare bones tutorial on how to use
fonts in your own programs. For a more detailed explanation on using
the Juicy Fonts User Function Library, please study the provided demo
program (juicy_fonts_demo.bb)
and Command
Reference.
So, first of all, place a copy of the LIB_juicy_fonts.bb
file into
the same folder as your program, and then add the following line to
your
code:
Include "LIB_juicy_fonts.bb"
Your program can now access the Juicy Fonts User Functions.
The next thing to do is load a font into your program. Here's an
example of a line of code to achieve this:
Global my_font =
jf_load_font("cool_font.png")
This would load the font named cool_font.png
and store it's handle in the variable my_font.
This font handle is needed to specify the font to the other
user functions. The handle variable is declared as Global
so that it can be used anywhere in your code.
Note that in the above example, the specified font file must
reside in the same folder as your program file. If the font you want to
load is situated in another folder, you'll need to include the path to
it when specifying the font name in the call to jf_load_font.
Also, you must make sure the font file's associated metrics file (named
cool_font.png.jfm
in the example) resides in the same folder.
OK, now that we have loaded a font, we can display some text
using it:
jf_text(my_font,10,10,"Hello World!")
The jf_text
function works in much the same way as the native Blitz Text command.
You may use it anywhere in your program to replace the standard Text command,
to have your font text drawn to the currently set drawing buffer.
The jf_text
function
also takes optional parameters to vertically/horizontally align and
word wrap lines of text. Consult the Command
Reference
for further
details.
Note that if any characters in the string to be displayed are
not
present in the specified font, they will simply be ignored, rather than
cause an error.
Finally, when you've finished using a font, you can 'unload'
it to free all the resources it uses:
jf_free_font(my_font)
Note that once a font has been freed, it can no longer be used
in your program. However, you are free to re-load the font
again at any time.
Copyright © Chris Chadwick 2006