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 people...how 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:
Phone/
Model
Resolution
128x128128x160176x208208x176208x208240x320320x240352x416416x352
BlackBerry45x45
Motorola15x15
16x16
32x32
Nokia S4016x1618x18
24x24
29x29
n/an/a46x4646x48
42x29
n/an/an/a
Nokia S60
1st/2nd Edition
n/an/a42x29
29x29
n/an/an/an/a76x76n/a
Nokia S60
3rd Edition
n/an/a31x31
42x29
37x3737x3753x53
55x55
64x64
52x52
54x54
64x6476x76
84x58
Sagem18x18
Samsung16x16
29x29
32x32
Sanyo24x24
Sharp27x27
Siemens18x18
Sony Ericsson16x16
32x32
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!!!


8 comments   |   post a comment
said...
thx dude it's really help me nice tutorial i thought ^^
said...
Very helpful ;) thanks!
said...
this post helped me a lot
really very helpful. Thank you.
Cool 'n Simple... but thanks for the detailed dimension table...
very helpful! Thanks a lot!
said...
Very clear, precise and didactical your tutorial. It was very helpful to me. Thanks from Colombia
said...
This comment has been removed by the author.