Font in a PNG

Question

hi!
i'm currently developing a game in J2ME .... i wanted to use my own font, so i created a PNG file with all my characters. after, i wrote my "BitmapFont"-class
here it is:
* Created on 23.12.2004
package sokodeluxe.util.bitmapfont;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;
import sokodeluxe.util.QuickList;
* AbstractBitmapFont ist eine Vorlage f�r Klassen, welche Texte mit Buchstaben
* aus einer Grafikdatei zeichnen k�nnen.
* @author Manuel Alabor
* @version 1.0
public abstract class AbstractBitmapFont {
    /* Objekte: */
    private QuickList characters;
     * Standartkonstruktor
    public AbstractBitmapFont() {
        characters = new QuickList();
     * Muss von jeder BitmapFont-Klasse implementiert werden und dient dazu,
     * die entsprechende Grafikdatei mit den Zeichen zu laden und mit den
     * entsprechenden Zeichen zu verkn�pfen.
    public abstract void loadFont();
     * Schreibt/zeichnet einen String mit den geladenen Bitmap-Zeichen.
     * @param g
     * @param string
    public void drawString(Graphics g, String string, int x, int y) {
        char[] chars = string.toCharArray();
        int currentPos = x;
        for (int i = 0; i < chars.length; i++) {
            BitmapCharacter bitmapCharacter = getBitmapCharacter(chars);
if(bitmapCharacter != null) {
bitmapCharacter.drawChar(g, x, y);
x += bitmapCharacter.getWidth()+1;
* Gibt ein BitmapCharacter-Objekt aus der QuickList characters zur�ck.<br>
* Wird das gew�nschte Zeichen nicht gefunden, wird null zur�ckgegeben.
* @param character
* @return
private BitmapCharacter getBitmapCharacter(char character) {
for (int i = 0; i < characters.size(); i++) {
BitmapCharacter bitmapCharacter = (BitmapCharacter) characters.elementAt(i);
if(bitmapCharacter.getChar() == character) {
return bitmapCharacter;
return null;
* Schneidet aus einer FontMap einen Buchstaben aus und gibt diesen zur�ck.
* @param fontMap
* @param x
* @param y
* @param width
* @param height
* @return
protected Image cutBitmapFont(Image fontMap, int x, int y, int width, int height) {
Image target = Image.createImage(width, height);
Graphics targetGraphics = target.getGraphics();
// targetGraphics.drawImage(fontMap, x, y, 0);
targetGraphics.setClip(x,y, width, height);
targetGraphics.drawImage(fontMap,0,0,0);
return target;
protected void addBitmapCharacter(Image bitmapCharacter, char textCharacter, int width) {
characters.add(new BitmapCharacter(bitmapCharacter, textCharacter, width));
* Diese Klasse wird als Datenstruktur f�r ein Bitmap-Zeichen verwendet.<br>
* Sie verkn�pft ein Bild mit einem Charakter-Zeichen.
* @author Manuel Alabor
* @version 1.0
protected class BitmapCharacter {
/* Eigenschaften: */
private Image bitmapChar;     // Bitmap-Zeichen
private char textChar;          // Zeichen
private int width;               // Zeichenbreite
* Standartkonstruktor.
* @param bitmapChar
* @param textChar
public BitmapCharacter(Image bitmapChar, char textChar, int width) {
this.bitmapChar = bitmapChar;
this.textChar = textChar;
this.width = width;
* Zeichnet dieses Bitmap-Zeichen.
* @param g
* @param x
* @param y
public void drawChar(Graphics g, int x, int y) {
System.out.println(textChar);
g.drawImage(bitmapChar, x,y, Graphics.TOP|Graphics.LEFT);
public char getChar() {
return textChar;
public int getWidth() {
return width;
from this class, i extend the font-class, in example this one:
* Created on 23.12.2004
package sokodeluxe.util.bitmapfont;
import java.io.IOException;
import javax.microedition.lcdui.Image;
* @author Manuel Alabor
* @version 1.0
public class NovaBitmapFont extends AbstractBitmapFont {
    public NovaBitmapFont() {
        super();
        loadFont();
    public void loadFont() {
        try {
            /* Datei mit Buchstaben laden: */
            Image imgFont = Image.createImage("/images/font_nova.png");
            // Grossbuchstaben:
            addBitmapCharacter(cutBitmapFont(imgFont, 0,0,   5,9), 'A', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 5,0,   5,9), 'B', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 10,0,  5,9), 'C', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 15,0,  5,9), 'D', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 20,0,  5,9), 'E', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 25,0,  5,9), 'F', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 30,0,  5,9), 'G', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 35,0,  5,9), 'H', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 40,0,  2,9), 'I', 2);
            addBitmapCharacter(cutBitmapFont(imgFont, 42,0,  5,9), 'J', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 47,0,  5,9), 'K', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 52,0,  5,9), 'L', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 57,0,  9,9), 'M',95);
            addBitmapCharacter(cutBitmapFont(imgFont, 66,0,  5,9), 'N', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 71,0,  5,9), 'O', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 76,0,  5,9), 'P', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 81,0,  5,9), 'Q', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 86,0,  5,9), 'R', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 91,0,  5,9), 'S', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 96,0,  5,9), 'T', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 103,0, 5,9), 'U', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 108,0, 5,9), 'V', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 113,0, 9,9), 'W', 9);
            addBitmapCharacter(cutBitmapFont(imgFont, 122,0, 5,9), 'X', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 127,0, 5,9), 'Y', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 132,0, 5,9), 'Z', 5);
            /* Kleinbuchstaben: */
            addBitmapCharacter(cutBitmapFont(imgFont, 0,9,   5,9), 'a', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 5,9,   5,9), 'b', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 10,9,  4,9), 'c', 4);
            addBitmapCharacter(cutBitmapFont(imgFont, 14,9,  5,9), 'd', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 19,9,  5,9), 'e', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 24,9,  3,9), 'f', 3);
            addBitmapCharacter(cutBitmapFont(imgFont, 27,9,  5,9), 'g', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 32,9,  5,9), 'h', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 37,9,  1,9), 'i', 1);
            addBitmapCharacter(cutBitmapFont(imgFont, 38,9,  3,9), 'j', 3);
            addBitmapCharacter(cutBitmapFont(imgFont, 41,9,  5,9), 'k', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 46,9,  1,9), 'l', 1);
            addBitmapCharacter(cutBitmapFont(imgFont, 47,9,  9,9), 'm', 9);
            addBitmapCharacter(cutBitmapFont(imgFont, 56,9,  5,9), 'n', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 61,9,  5,9), 'o', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 66,9,  5,9), 'p', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 71,9,  5,9), 'q', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 76,9,  5,9), 'r', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 81,9,  5,9), 's', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 86,9,  3,9), 't', 3);
            addBitmapCharacter(cutBitmapFont(imgFont, 89,9,  5,9), 'u', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 94,9,  5,9), 'v', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 99,9,  7,9), 'w', 7);
            addBitmapCharacter(cutBitmapFont(imgFont, 106,9, 5,9), 'x', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 111,9, 5,9), 'y', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 116,9, 5,9), 'z', 5);
            /* Zahlen & Spezialzeichen: */
            addBitmapCharacter(cutBitmapFont(imgFont, 0,18,  3,9), '1', 3);
            addBitmapCharacter(cutBitmapFont(imgFont, 3,18,  5,9), '2', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 8,18,  5,9), '3', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 13,18, 6,9), '4', 6);
            addBitmapCharacter(cutBitmapFont(imgFont, 19,18, 5,9), '5', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 24,18, 5,9), '6', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 29,18, 6,9), '7', 6);
            addBitmapCharacter(cutBitmapFont(imgFont, 35,18, 5,9), '8', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 40,18, 5,9), '9', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 45,18, 5,9), '0', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 50,18, 1,9), '!', 1);
            addBitmapCharacter(cutBitmapFont(imgFont, 51,18, 3,9), '"', 3);
            addBitmapCharacter(cutBitmapFont(imgFont, 54,18, 6,9), '#', 6);
            addBitmapCharacter(cutBitmapFont(imgFont, 60,18, 5,9), '$', 5);
            addBitmapCharacter(cutBitmapFont(imgFont, 65,18, 10,9), '%', 10);
            addBitmapCharacter(cutBitmapFont(imgFont, 75,18, 6,9), '&', 6);
            addBitmapCharacter(cutBitmapFont(imgFont, 81,18, 4,9), '/', 4);
            addBitmapCharacter(cutBitmapFont(imgFont, 85,18, 2,9), '(', 2);
            addBitmapCharacter(cutBitmapFont(imgFont, 87,18, 2,9), ')', 2);
            addBitmapCharacter(cutBitmapFont(imgFont, 89,18, 3,9), '=', 3);
            addBitmapCharacter(cutBitmapFont(imgFont, 92,18, 4,9), '?', 4);
            imgFont = null;
        } catch (IOException e) {
            e.printStackTrace();
}then, i create an instance of NovaBitmapFont and call the drawString method...
so far so good... there arent any runtime errors, but instead of the letters, i got only white boxes on my outputcanvas ....
could anybody help me?
thx a lot!! :)
greetz
manu

Answer 1

Your problem seems to be here:
targetGraphics.setClip(x,y, width, height);You are setting the clipping region outside of the actual image. The target image is one you created of size width*height. If you set the clipping region to x > width or y > height then nothing will appear on the picture. That line is completely unnecessary.
But even like this, the moment you create the target image, you are creating a completely opaque image, so you are losing any transparency you might have had in your png. If you need to keep transparency you need to keep all the characters in the original image, and draw it with clipping regions directly onto the canvas.
shmoove