Mobile games development

As told some days ago, MtvMobile launched 2 phones with its initial offer as virtual mobile operator. And, for these 2 phones (a Nokia 5320 and a SE W760), I had the chance to realize 2 applications. I’ve already talked about Mtv OnDemand, a FlashLite and Java ME streaming video player that allows users to view selected MTV videos, and download related content (like ringtones and wallpapers).

Now it’s time to view the other one: it’s called Mtv.it Blog, and it’s a simple and effective mobile blog uploader.

Using this app, users are able to upload contents (photos, videos, audio or simple text) from their mobile phone directly on their Mtv blog. As for Mtv OnDemand, there was the need to build both a Java ME and a Flash Lite version of this app, with KuneriLite pumping up the FlashLite one.

As for the other one, I’ll post complete videos of this app as soon as my test SIM work again

Last friday (July 11th) was a big mobile day here in Italy: apart from the worldwide release of iPhone 3G (sold in Italy at something like 3 times the USA price…), MTV became virtual mobile operator!

For its initial launch (you can see some photos of the launch event of Flickr) MTV released 2 phones: a Nokia 5320 Xpress Music and a Sony Ericsson W760, both heavily customized with special covers and themes.

But, what it’s really cool, is that I’ve made 2 applications for these phones!!

The first one is called Mtv On Demand, and it’s a streaming video player that allows to view selected videos from MTV programs. The interface is pretty slick, and allows users to navigate video galleries using LEFT/RIGHT keys, while with UP/DOWN they’ll scroll videos within a single category.

Since there were specific requests, there was the need to build both a FlashLite and a Java ME version of this app: the first one was released for Nokia 5320, while the other one was preloaded in SE W760. One of the hardest tasks was surely to make the 2 interfaces quite identical, creating animation effects that worked well both in FlashLite and Java ME. Also, since there was the need to access native phone functionalities (like local file writing), the FlashLite application was built upon KuneriLite, confirming once again how good it is.

Since I currently have not an MTV SIM (and the test SIM is officially not working ) I cannot currently make a video of the app itself, but I’ll post it (and also post about the 2nd application ) asap!

After an explosive J2ME class, now it’s the time for sliding transition effects. With the following SlidingImage class you’ll be able to seamlessly add both SlideIn and SlideOut effects to your toooo static apps!

As usual, take a look at how this would appear in a real phone, and then proceed with the simple these 1,2,3 steps

1. Download and include in your code the SlidingImage.java class
2. Instantiate a new SlidingImage:

   SlidingImage image = new SlidingImage(
   	Image.createImage("/image1.png"),
   	10,
   	SlidingImage.SLIDE_OUT);

   These are the constructor arguments:

   • An Image object to be slided
   • The number of pieces of the sliding image
   • The type of slide, can be SlidingImage.SLIDE_IN or SlidingImage.SLIDE_OUT
3. Start the sliding effect, specifying its direction and duration (in milliseconds):

   image.slide(Canvas.RIGHT, 3000);

   Direction can be one of Canvas properties UP, RIGHT, DOWN and LEFT.

4. Now you can paint it simply specifying coordinates and an anchor, as usual:

   image.paint(g,
   	100, 100,
   	Graphics.HCENTER | Graphics.VCENTER);

5. If you remember ExplodingImage class, you can check if effect is ended with the public ended property:

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

6. If you want to reset the effect, also changing the sliding image pieces and effect type (slide in or out), you can use the reset() method:

   //to reset changing also slides and type properties
   image.reset(12, SlidingImage.SLIDE_IN);
   //otherwise, to simply reset:
   image.reset();

You can download source code here:

• SlidingImage.java: main class source code
• SimpleSlidingCanvas.java: example of Canvas using SlidingImage

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);

Some days ago I’ve posted J2ME code to parse RSS feeds using kXML library. Today’s code is about parsing a generic XML, so you can use it to parse any XML document you want. Code is splitted in the following two classes.

XmlNode class

This is the class representing a single node. We’ll define 2 node types:

• Text nodes: nodes without a name, contanining only a textual value. For them we’ll define a TEXT_NODE final variable
• Element nodes: nodes with a tag name, that can have children nodes and/or attributes

XmlNode class source code is available here: XmlNode.java

GenericXmlParser class

This is the class that will actually do XML parsing. We’ll define only one public method, parseXML(), that will accept 2 arguments:

• a KXmlParser instance, that will be used to do XML parsing
• a boolean that will tell if whitespace-only text nodes must be ignored or not

and will return and XmlNode representing the root node of the parsed XML tree.

GenericXmlParser class source code is available here: GenericXmlParser.java

Sample usage

Let’s see how we can use the two classes above. First we must instantiate and initialize a KXmlParser, and then we can call our GenericXmlParser parseXML() method.

InputStreamReader reader = new InputStreamReader(getClass().getResourceAsStream("/test3.xml"));
 
KXmlParser parser = new KXmlParser();
 
parser.setInput(reader);
 
GenericXmlParser gParser = new GenericXmlParser();
 
XmlNode xml = gParser.parseXML(parser, true);

Now, we have our resulting XmlNode that will hold the whole XML tree. We can make a simple dump of it to check if it’s all ok, using this test function:

void dumpXML(XmlNode node, int deep)
{
	for(int i = 0; i < deep; i++)
	{
		System.out.print(" ");
	}
	System.out.print(node.nodeName + " - ");
 
	if(node.nodeValue != null)
	{
		System.out.print("(" + node.nodeValue + ") - ");
	}
	String[] attributes = node.getAttributeNames();
 
	for(int i = 0; i < attributes.length; i++)
	{
		System.out.print(attributes[i] + ": " + node.getAttribute(attributes[i]) + ", ");
	}
 
	System.out.println();
 
	for(int i = 0; i < node.children.size(); i++)
	{
		dumpXML((XmlNode)node.children.elementAt(i), deep + 1);
	}
}

Note: This article is available also on Forum Nokia Wiki: How to parse an XML file in J2ME with kXML

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.

Some days have passed since last J2ME tutorial, so here is a fresh new one!

Today we’ll see how parsing a RSS feed with J2me is easy using KXML library, a fast and small XML pull parser, expecially suited for constrained environments like mobile devices. A live sample, parsing the RSS feed of this blog, is available here.

The detailed explanation of source code is available on my Forum Nokia Wiki article: J2ME RSS Parser with KXml. If you’re interested only in plain source code, you can pick it up here (it includes also the sample midlet you find on the emulator page). To use KXmlRssParser class, you must simply do:

KXmlRssParser parser = new KXmlRssParser();
 
Vector rssItems = parser.parse(yourFeedURL);

and the parse() method will return the complete list of parsed Items, as instances of RssItem class. Source code is of course simplified, for the purpose of this tutorial, as it only considers title, link and description tags of each <item>, but once you understand KXml logic you can extend it, without much effort, to include other infos from RSS feed.

Other resources you might find useful:

• KXML JavaDocs: http://kxml.sourceforge.net/kxml2/javadoc/
• RSS 2.0 Specifications: http://cyber.law.harvard.edu/rss/rss.html

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.