Mobile games development

After a MIDP 1.0 utility to rotate images now time has come for some image fun

When writing mobile applications, it’s always cool to add some effects or transitions. But, while for example FlashLite has a nice builtin support for them, with J2ME you have to hand-code even the simplest movement (and this is the main reason why most J2ME apps are all but attractive).

So, here’s a first class that you can use to add an “explode” effect to images in a straightforward way. How to do it? Here we come:

1. Download the ExplodingImage.java source code and put it straight in your project
2. Instantiate an ExplodingImage this way:

   //get your Image
   Image sourceImage = Image.createImage("/image.png");
   //and then use it in ExplodingImage constructor
   ExplodingImage image = new ExplodingImage(sourceImage , 5, 8, 8);

   The ExplodingImage constructor accepts the following arguments:

   • An Image instance
   • An int representing the “level” for the exploding effect, that is the strength of the effect itself (higher the level, stronger the effect).
   • The last 2 int arguments represent the horizontal and vertical pieces of the exploded image.
3. Start the explode effect with the explode() method, that will accept the effect duration as argument:

   image.explode(2000L);

4. To paint it, simply use its paint() method, very similary to the Graphics drawImage() one. For example, in a Canvas paint() method, you can do something like this:

   protected void paint(Graphics g)
   {
   	g.setColor(0xffffff);
   	g.fillRect(0, 0, width, height);
   	image.paint(g, getWidth() / 2, getHeight() / 2, Graphics.HCENTER | Graphics.VCENTER);
   }

   To give the effect a “smooth” animation, you should paint it quite frequently (let’s say, not once per second :)). So, always using Canvas, a sample code could be like this:

   public void run()
   {
   	while(true)
   	{
   		repaint();
    
   		try
   		{
   			synchronized(this)
   			{
   				wait(50L);
   			}
   		}
   		catch(Exception e)
   		{
   			e.printStackTrace();
   		}
   	}
   }

5. To test if the effect has ended, you can simply access your ExplodingImage ended instance variable:

   if(image.ended)
   {
   	//effect-end related code
   }

6. And you’re done! See it in action here: J2ME image explode effect in action

Sample source code is available here:

• ExplodingImage.java: main class
• ExplodingImageCanvas.java: sample usage of ExplodingImage within a Canvas

So you’re still using MIDP 1.0 uh? And maybe you need to rotate an image?

If this is your case, you could find useful this simple function:

public static Image rotateImage(Image image, int angle) throws Exception
{
	if(angle == 0)
	{
		return image; 
	}
	else if(angle != 180 && angle != 90 && angle != 270)
	{
		throw new Exception("Invalid angle");
	}
 
	int width = image.getWidth();
	int height = image.getHeight();
 
	int[] rowData = new int[width];
	int[] rotatedData = new int[width * height];
 
	int rotatedIndex = 0;
 
	for(int i = 0; i < height; i++)
	{
		image.getRGB(rowData, 0, width, 0, i, width, 1);
 
		for(int j = 0; j < width; j++)
		{
			rotatedIndex = 
				angle == 90 ? (height - i - 1) + j * height : 
				(angle == 270 ? i + height * (width - j - 1) : 
					width * height - (i * width + j) - 1
				);
 
			rotatedData[rotatedIndex] = rowData[j];
		}
	}
 
	if(angle == 90 || angle == 270)
	{
		return Image.createRGBImage(rotatedData, height, width, true);
	}
	else
	{
		return Image.createRGBImage(rotatedData, width, height, true);
	}
}

So, how can you use it? Nothing more than:

Image original = Image.createImage("/original_image.png");
 
Image rotated_image = rotateImage(original, 90);

You know that J2ME support for Canvas is quite ridiculous.. One list, some form items, and stop. Canvas is left to its terrible destiny, with nothing more than a couple of lines and circles.. isn’t it sad?
So, after this melodramatic introduction, we’re ready for today’s code: a fully featured, customizable, Canvas based calendar!

If you prefer a live demonstration rather than a simple screenshot, just go here: Canvas Calendar in action.

So, how to use it?

1. Download its source code (CalendarWidget.java) and put it straight in your project
2. Instantiate it within your Canvas with its plain-old-unique constructor:

   CalendarWidget calendar = new CalendarWidget(new Date());

3. Customize it with the colors/fonts/padding you prefer:

   calendar.headerFont = Font.getFont(Font.FACE_PROPORTIONAL, Font.STYLE_BOLD, Font.SIZE_LARGE);
   calendar.weekdayFont = Font.getFont(Font.FACE_PROPORTIONAL, Font.STYLE_BOLD, Font.SIZE_MEDIUM);
   calendar.weekdayBgColor = 0xccccff;
   calendar.weekdayColor = 0x0000ff;
   calendar.headerColor = 0xffffff;

4. After you’ve customized it, remember to always call its initialize() method:

   calendar.initialize();

5. Now, to paint it, you can simply call its paint() method from your Canvas paint(), like this:

   protected void paint(Graphics g)
   {
       g.setColor(0xffffff);
       g.fillRect(0, 0, getWidth(), getHeight());
       calendar.paint(g);
   }

6. Now you must allow users to interact with it, so you can, for example, use Canvas keyPressed() method to interact with calendar:

   protected void keyPressed(int key)
   {
       int keyCode = getGameAction(key);
       if(keyCode == FIRE)
       {
           Display.getDisplay(midlet).setCurrent(
               new Alert("Selected date", calendar.getSelectedDate().toString(), null, AlertType.CONFIRMATION)
           );
       }
       else
       {
           calendar.keyPressed(keyCode);
           repaint();
       }
   }

   As you see, what we do is this:

   • if the user press FIRE button, we alert the current selected date
   • otherwise we call calendar keyPressed() method, to make it behave accordingly
7. Other customizable properties include:
   • MONTH_LABELS: change this to customize month labels in your own language
   • WEEKDAY_LABELS: as above, change this to customize weekday labels
   • startWeekday: this represents the week starting day, and its values range goes from 0 (for Monday) to 6 (for Sunday)

You can download source code of the example described above here: CalendarCanvas.java.

To get some more details about CalendarWidget source code, you can take a look at my article on Forum Nokia Wiki: Building a J2ME Canvas based Calendar / Date picker.

Today’s code is related to file uploads using J2ME. We’ll use Http POST MultiPart requests to handle and transfer data from J2ME application to server; since there is no builtin support for MultiPart, we’ll have to build the request body by hand.

Code is limited to 1 class only (HttpMultipartRequest), that will be easy to include and easy in your code, just instatiate it with its constructor:

HttpMultipartRequest(String url, Hashtable params,
String fileField, String fileName,
String fileType, byte[] fileBytes)

and then send data to server (and get response) with its send() method. As you can see from the constructor, this implementation support also parameter passing, that will be posted to server together with the file bytes.

Detailed and explained code (with sample client and server code) is available here: HTTP Post multipart file upload with J2ME Wiki article. To directly download source code, click here.

Darts is an ideal game for mobile users, since it does only require few seconds for a match, and could be really helpful while waiting for a bus.. (If you must wait a bus in Rome, it’s easy you’ll become a Darts champion within a day :))

This simple game was originally included, as easter egg, in the midlet built for 2007 Edition of Rome JavaDay, to help folks being awake during long talks For a live test you can go directly to the emulator page.

Now, It’s source code is fully available to everyone to (ab)use, and please be kind with me for the total lack of comments…

Here is the source code, and the full sample midlet if you want to try it out on your phone.

Do you need a simple, effective j2me loading bar for your long-running operations? And would you like to avoid using (horrible) forms and gauges? Here’s a simple component you can freely use, modify or even ignore

You can see a live preview on the emulator. To use it, you’ll simply instantiate and start it, like this:

LoadingBar bar = new LoadingBar(100, 40, 5, 10, 0xff0000);
bar.start();

For an explanation of source code you can go to my Forum Nokia Article: J2ME Canvas Loading Bar. If you simply want rude code, here it is: LoadingBar.java, and here is a sample Canvas using it: LoadingBarCanvas.java.

I’ve always loved fisheye menus but, while there are quite a lot of ready-to-use components for web applications, when it comes to mobile it’s hard to find something. What better reason to build one?

Since we’ll have dynamically resizable icons, a natural choice to build one with J2ME is JSR 226, that give us full support of SVG Tiny. This will limit portability of code, since this JSR is not supported on all J2me phones, but support is rapidly growing with latest generation phones.

As you’ll see, code is quite straightforward, and great part of it is dedicated to coordinates/size calculations, to create that “slide/resize” effect that is soooooo cool

You can find menu source code on my Forum Nokia Wiki article: J2ME Fisheye Menu with JSR 226, or download sample midlet here (and source code here).