Bitmap Font Creation Utility v1.0

Users' Manual



Contents

Introduction
The Main Editor - Designing a Font
'File' Group
'Load Settings' Button
'Save Settings' Button
'Import Font' Button
'Finalize Font' Button
'Exit' Button
'Select' Group
'None' Button
'All' Button
'Numbers' Button
'Uppercase' Button
'Lowercase' Button
'Standard Set' Button
'Specific' Button
'Total' Field
'Font' Group
'Select' Button
Font Style Buttons
'Size' Field
Face Color
'Mask' Group
Mask Color
'Shadow' Group
'Extrude' Button
'Dither' Button
'Offset' Field
'Angle' Field
Shadow Color
'Graduate' Button
Shadow Gradient Color
'Outline' Group
'Hollow' Button
'Size' Field
'Style' field
Outline Color
'About' Group
Character Selection Pane
Preview Pane
Interactive Color Picker
The Kerning Editor - Finalizing a Font
'Kerning' Group
'Left' field
'Right' Field
'Shift' Field
Justify Buttons
'Affect All' Button
'Ignore Shadow' Button
'Remove' Button
'Fixed Width' Button
'Backup' Button
'Restore' Button
'Final Font' Group
'Test' Button
'Export' Button
'Discard' Button
'Info' Group
'Char W' Field
'Frame W' Field
'Font W' Field
'Font H' Field
'Image W' Field
'Image H' Field
'Size (Kb)' Field
Character Selection Pane
Preview Pane
Enhancing Fonts with Image Editing Software
Using Fonts in Your Own Programs


Introduction

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:


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.


'File' Group

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.

'Load Settings' Button



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).

'Save Settings' Button



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.

'Import Font' Button



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.

'Finalize Font' 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.

'Exit' Button



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.


'Select' Group

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.

'None' Button



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.

'All' Button



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.

'Numbers' Button



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.

'Uppercase' 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.

'Lowercase' 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.

'Standard Set' 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.

'Specific' 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.

'Total' Field



This field simply displays the total amount of characters currently selected for inclusion in your font, as highlighted in the Character Selection Pane.


'Font' Group

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.

'Select' Button



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.


Font Style Buttons



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.

'Size' Field



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!

Face Color



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.


'Mask' Group

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.

Mask Color



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.


'Shadow' Group

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.

'Extrude' Button



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.

'Dither' Button



With this button pressed, the usually solid shadow is dithered with the mask color. This will give the shadow a fake, semi-transparent appearance.

'Offset' Field



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.

'Angle' Field



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.

Shadow Color



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.

'Graduate' Button



With this button pressed, the extruded shadow in you font design is colored with a gradient. This means the color will smoothly blend from the shadow color to the shadow gradient color.

Shadow Gradient Color



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.


'Outline' Group

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.

'Hollow' Button



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.

'Size' Field



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.

'Style' Field



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:
Outline Color



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.


'About' Group

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.


Character Selection Pane

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.


Preview Pane

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.


Interactive Color Picker

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.


'Kerning' Group

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.

'Left' Field



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.

'Right' Field



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.

'Shift' Field



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.

Justify Buttons



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.

'Affect All' Button



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.

'Ignore Shadow' Button



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.

'Remove' Button



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.

'Fixed Width' Button



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.

'Backup' Button



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.

'Restore' Button



Click this button to restore all the font characters' kerning to the state it was the last time the Backup button was pressed.


'Final Font' Group

This group allows you to do various things with the bitmap font, after you have finished kerning it.

'Test' Button



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.

'Export' Button



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.

'Discard' Button



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.


'Info' Group

This group simply displays various information about the current bitmap font.

'Char W' Field



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.

'Frame W' Field



This field displays the width (in pixels) of the current preview character's image frame, as defined in the bitmap font image.

'Font W' Field



This field displays the width (in pixels) of the font. This is the width of the widest character frame.

'Font H' Field



This field displays the height (in pixels) of the font. This is the frame height of every character in the font.

'Image W' Field



This field displays the width (in pixels) of the actual bitmap font image, which contains the frames of all the font's characters.

'Image H' Field



This field displays the height (in pixels) of the actual bitmap font image, which contains the frames of all the font's characters.

'Size (Kb)' Field



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.


Character Selection Pane

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.


Preview Pane

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