Friday, October 26, 2007

Adding an Icon to Your MIDlet or Game

I was looking at my blog's search statistics at Google Webmaster Tools when I found a few users using key words like "j2me icon MIDlet", "MIDP icon bit depth", "MIDlet icon transparency". So I decided to write this tutorial just for those ever late it might seem to be.

If you we're following the series of tutorials presented here, you would recall (or not) that in first part of the tutorial Creating a Basic MIDP 2.0 Game Template you were prompted for an icon to associate with your MIDlet.

Name and Location Screen

We chose to ignore the field because it seemed trivial at the time. But I bear great news to you! Because in NetBeans you can still add an icon to your MIDlet through the Project Properties window!!! Oh, so you knew that already. Well, for those of you who don't, you can access the Project Properties from the File Menu and choosing the menu item labeled with "Your-Project-Name" Properties, with the double quotes.

Project Properties via File Menu

You can also reach the Project Properties by right-clicking on the project name from the Projects Panel treeview and selecting Properties at the bottom of the context menu.

Project Properties via Projects Panel Context Menu

Before you go adding those uber cool icons one thing you have to remember is that size does matter when it comes to MIDlet icons. Meaning the width and height of the icon. If you also read the tutorial Loading Images Into Your Game, it was mentioned that the number of colors used should be kept at a minimum, preferably at the 8-bit depth of 256 colors max. You should also avoid anti-aliased icons because some phones don't support them and will display the anti-aliased icon with "dirty" edges or with random pixels around the edges that are supposed to be semi-transparent. The PNG format is also the preferred and widely used file format for a MIDlet icon.

Here are some icon sizes you may consider:
Nokia S4016x1618x18
Nokia S60
1st/2nd Edition
Nokia S60
3rd Edition
Sony Ericsson16x16
Note that most of the icon sizes for the Nokia mobile phones came from the Using Icons in Midlets technical note at Forum Nokia. Some of the additional sizes came from personally testing them on various phone models. The icon sizes for the other brands of mobile phones came from other developers experiences.

Mobile phones behave differently from one another on the way they try to display an incorrectly sized icon. Some phones will scale your icons to the right size. Other phones will display the icon as a small glyph at the upper-left corner of the area where the full sized icon should appear. The glyph displayed is so small you can barely see it. If that's the case, then you can try the next larger icon size. Some phones will also clip the icon to fit the area reserved for it like in the case of using 42x29 pixel icons on older Series 60 phones with a resolution of 176x208.

There are several ways to find out what icon size you can use. One sure way to find the size that fits your target phone is by extracting the contents of the jar file of a game or application designed for that phone. Somehow that didn't quite come out right...

If your phone supports themes or allows you to customize the skin, you can usually download a theme editor or supplemental documents for creating themes/skin for your phone and from there you can gather the information you need.

Here are some tools you can use to make the PNG images:

I won't go into details as to how to use those applications as such is beyond the scope of this tutorial. I'll just give you a screenshot of the settings I use in Fireworks. It should provide some insight on the settings you can use in other applications.

These are the settings I use on icons with a transparent background. Notice that there's only one transparent color in the pallet:

Settings for Icon with Alpha Transparency

These are the settings I use on icons with no transparency:

Settings for Icon with No Transparency

I have prepared a transparent icon for you to use in this tutorial. You can use your own work of art if you want to.

game icon
42x29 pixels

Firefox users can right-click on the image and choose Save Image As from the context menu while IE users can choose Save Picture As from the context menu. Save the PNG file inside the images folder inside the projects src. If you can't find the images folder then make one.

You can always just place the file inside the src folder and it will be listed under the Default package. But then again I find it easier to work on the game when all the images are kept inside a folder of their own.

Open the Project Properties in NetBeans and navigate your way to the MIDlets section which is listed under Application Descriptor. You will find your MIDlets listed here. Double-click on the MIDlet or select the MIDlet and click on the Edit button to the right of the list.

By now, NetBeans would have detected the new image you have saved earlier and you can simply choose it from the images listed in the combo box of the Edit MIDlet dialog box.

Edit MIDlet Dialog with Icons List

Click the "Ok" button on the Edit MIDlet dialog to confirm your selection then click the "Ok" button again in the Project Properties window to commit your changes. Press F6 to test your MIDlet in the emulator.

View of MIDlet with the Icon on the Emulator

When you run the emulator you will see the MIDlet brandishing your new icon. Hold on a second?!! Why does our 42x29 icon look squashed and squarish? That's only how the emulator displays your icon. You will only find out what it actually looks like once you have tested your MIDlet on a real phone.

I hope this tutorial have at least given you a clue of how to find your way through the murky world of MIDlet icons.

Some humble words from Forrest Grumpy:
My momma always said, "MIDlet Icons was like a box of chocolates. You never know what you're gonna get."

Was the read too long? You've got a question? Better yet, do you know a tight-fitting or well-tested MIDlet icon size that's not listed here? Don't hesitate to leave a comment.

Have fun!!!


erick said...

thx dude it's really help me nice tutorial i thought ^^

s said...

Very helpful ;) thanks!

nicky; said...

this post helped me a lot

Shyam Sunder said...

really very helpful. Thank you.

Tech Ranter said...

Cool 'n Simple... but thanks for the detailed dimension table...

taiyootech said...

very helpful! Thanks a lot!

hermojo said...

Very clear, precise and didactical your tutorial. It was very helpful to me. Thanks from Colombia

Josh said...
This comment has been removed by the author.