Header Sep
print this page

Java Tips, Tricks & Code

My Rating Score
Login to rate page
Back

December 2006

System font effects for MIDP 2.0 phones

When working with system fonts on Sony Ericsson MIDP 2.0 mobile phones there are a few attributes in the font class that can be used to specify the font layout. 

Download MIDlet and source code here>>

The layout of the font is specified when creating the font. Note that currently on Sony Ericsson phones only the font face system is implemented. Specifying any of the other faces will still result in the system font face being used.
Font font = Font.createFont(FONT.FACE_SYSTEM, FONT.SIZE_MEDIUM, FONT.STYLE_PLAIN);

  • FACE_SYSTEM
  • SIZE_LARGE
  • SIZE_MEDIUM
  • SIZE_SMALL          
  • STYLE_BOLD
  • STYLE_ITALIC
  • STYLE_PLAIN
  • STYLE_UNDERLINED

In addition to the standard font attributes, font effects can be created when using the system font on a Canvas or in a CustomItem.

The effects that are shown in this example are:

  • Mono spaced font
  • Colored font
  • Masking

The effect is actually done on an image which the font is painted on.

graphics.drawString("my text", 0, 0, 0);

And of course other effects can be made on the font image like transparency and resizing but this will not be included in this example.

To create the image with the text we can do something like this:

Image fontImage = Image.createImage(width, height);
graphics = fontImage.getGraphics();
graphics.setFont(font);
graphics.setColor(0x00);
graphics.drawString("Hello World!", 0, 0, 0);

This will result in some black text drawn on a white background.

 

To change the look of this picture all pixels can be manipulated. For example, we can make all the white pixels transparent to mask out the background.

int []data = new int[fontImage.getWidth() * fontImage.getHeight()];
fontImage.getRGB(data, 0, fontImage.getWidth(), 0, 0, fontImage.getWidth(), fontImage.getHeight());

for(int i=0; i<data.length; i++){
    if(data[i]==backgroundColor){
        data[i] = (data[i]&0x00FFFFFF);
    }
}

The color of every pixel in the image is stored in the format ARGB (Alpha, Red, Green, Blue) where every color is 1 byte with the value 0-255. To make the pixel transparent the Alpha value is set to zero.

To add a nice color effect to the text and make the color fade from a selected color to black, we just loop thorough the pixels and change the color of all pixels with the text color. Here all pixels that are not the same color as the background are changed.

int []data = new int[fontImage.getWidth() * fontImage.getHeight()];
fontImage.getRGB(data, 0, fontImage.getWidth(), 0, 0, fontImage.getWidth(), fontImage.getHeight());
int newColor = fontColor;
int r = (fontColor & 0x00FF0000)>>16;
int g = (fontColor & 0x0000FF00)>>8;
int b = (fontColor & 0x000000FF);

int offsetR = r/fontImage.getHeight();
int offsetG = g/fontImage.getHeight();
int offsetB = b/fontImage.getHeight();
for(int i=0; i<data.length; i++){
    if(data[i] != backgroundColor){
        data[i] = newColor;
    }
    if(i%imageWidth == 0){ // subtract each color on every row.
        if(r>offsetR)
            r -= offsetR;
        if(g>offsetG)
            g -= offsetG;
        if(b>offsetB)
            b -= offsetB;

        newColor = 0xFF000000; // make the pixel opaque.
        newColor += (r<<16);
        newColor += (g<<8);
        newColor += b;
    }
}

Here the RGB values are subtracted individually to make the color fade to black.

 

It is also quite easy to make a mono spaced font where each character uses the same width.

int charWidth = font.charWidth('W');
textWidth = charWidth * text.length();
fontImage = Image.createImage(width, weight);

graphics = fontImage.getGraphics();
graphics.setFont(font);
graphics.setColor(0x00);

for(int i=0; i<chars.length; i++){
    graphics.drawChar(text.charAt(i),i*charWidth + charWidth/2, 0, Graphics.TOP | Graphics.HCENTER);
}

Each character is drawn individually on the image using a calculated value and the pixel width of the character 'W'.

Back
My Rating Score
Login to rate page

Copyright © 2001 - 2009 Sony Ericsson Mobile Communications AB. All Rights Reserved.