Mobile Bitmap Fonts for J2ME

Why does I need it?

The Mobile Bitmap Fonts framework allows the developers of mobile applications to use their own fonts.

With Mobile Fonts you can...
...create your own fonts:	...draw a text in any color:	...draw a text in any style:	...format a long text with an image:

How is it used?

First you need to add the BitmapFont class to your project. It implements the text drawing methods (similar to the javax.microedition.lcdui.Graphics) and the text measurement methods (like the javax.microedition.lcdui.Font). In addition you need to add at least one file is containing a bitmap font. Then you just can do the following:

import javax.microedition.lcdui.*;
import net.sergetk.mobile.lcdui.BitmapFont;

public class MyCanvas extends Canvas {
	BitmapFont myFont;

	public MyCanvas() {
		myFont = new BitmapFont("myfont.fnt");
	}

	protected void paint(Graphics g) {
		g.setColor(0x00FF00); // green
		myFont.drawString(g, "Hello, world!", 0, 0, Graphics.LEFT | Graphics.TOP);
	}
}

If you need the font with a style that different than a plain, just create it from the base font:

myFont = new BitmapFont("myfont.fnt"); // load the base font
myBoldFont = myFont.getFont(Font.STYLE_BOLD); // create the bold font

If you need to select native or bitmap font usage in runtime the FontFacade is useful to you. It is possible to set it any font of any kind, and it will execute all drawing and measurement actions.

import javax.microedition.lcdui.*;
import net.sergetk.mobile.lcdui.*;

public class MyCanvas extends Canvas {
	FontFacade fontFacade;
	
	public MyCanvas(boolean useBitmapFonts) {
		if (useBitmapFonts) {
			BitmapFont bitmapFont = new BitmapFont("myfont.fnt");
			fontFacade = new FontFacade(bitmapFont);
		} else {
			Font nativeFont = Font.getDefaultFont();
			fontFacade = new FontFacade(nativeFont);
		}
	}

	protected void paint(Graphics g) {
		g.setColor(0x00FF00); // green
		fontFacade.drawString(g, "Hello, world!", 0, 0, Graphics.LEFT | Graphics.TOP);
	}
}

If you need to show long texts on the device screen, the MultiText helps you. MultiText formats by width and draws a complex long text. It supports three wrapping modes to fit the text to the given width: no wrapping, by words and by syllables. Also it allows to include one picture.

import javax.microedition.lcdui.*;
import net.sergetk.mobile.lcdui.*;

public class MyCanvas extends Canvas {
	MultiText text;
	
	public MyCanvas(boolean useBitmapFonts) {
		BitmapFont myFont = new BitmapFont("myfont.fnt");
		text = new MultiText(myFont, "very long text\nwith carriage returns", null);
		text.setWidth(this.getWidth()); //set width and automatic calling of format()
	}

	protected void paint(Graphics g) {
		text.draw(g, 0, 0); // draw the formatted text
	}
}

How to create the fonts?

The Bitmap Font Editor was developed especially for the font creation. Using it you can create your own fonts based on system fonts. Typical scenario is following:

Select type and size of the system font ("Arial,12" for example).
Create the font and add missing characters it is need
Edit drawing and size of the characters
Change properties if the font
Save the font

The Bitmap Font Editor was written on Java and uses SWT library. It is available in two types of packages: as Window Installer (in this case you need to have only installed JRE), and as crossplatform JAR (you need to download suitable SWT by yourself and place in one directory with editor JAR).

How does it work?

How does the characters draw?

When you create new fonts, all its characters are packed to one or more pictures. These images have PNG color and contain pixels of only two colors: black and transparent. When you draw the character on the screen, a corresponding rectangle part of the image is copied to the canvas.

How are styles make?

Different styles can be obtained from the base regular font. So, the bold font is obtained by two sequental drawing with one pixel offset in horizontal direction. This makes all vertical lines of the character is thicker.

An italic style is obtained by shifting right the upper half of the character. Finally, obtaining of the bold italic is combination of these two ways.

How are colors make?

Base images of the font contain only black characters, but what about other colors? This is not a problem. When you change color of the graphic context and then call one of text drawing methods of the font, the text color will be painted in this color.

If the color isn't a black (0x000000), the font creates new images by loading they and update their palette chunks. Since this is not very fast operation, the colorized images are put to the cache. Size of the cache is limited, and oldest colors is deleted when limit is exceeded.