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!

This news came to me like a wonderful surprise, and I’m totally happy to share it with you all: I was nominated June Poster of the Month on Forum Nokia! :)

Here’s an excerpt from the related thread on Forum Nokia Discussion Boards:

Forum Nokia and I appreciate that Jappit has shown the community spirit above the normal in his helping others on the Forum Nokia Discussion Boards. Jappit has been prolific in his posting in June but beyond that his answers have been helpful, considerate and generous. His spirit of help has earned him the respect of his peers.

Thanks to all Forum Nokia team!

Today, we’ll see how it’s possible to build a Flickr uploader in FlashLite using KuneriLite, geotagging our photos with the current GPS location.

You can download the current FliKun version (for FlashLite 3.0) here: FliKun_3rd_edition_unsigned.sis (please read the notes at the end of this article).

So, let’s start from the beginning.

Flickr API

To upload photos to Flickr we’ll need to use Flickr API: this way we’ll be able to authenticate the user and upload/geotag photos using its REST services, all from within our application.

First thing we should do is to setup an API key for our service, going on the request page. Here you have to fill out the application details, with special care to the authentication method we want to use: suitable choices for our needs would be both desktop and mobile application authentications:

• With the first option the user will be redirected to a Flickr page, from within our application, where he should authenticate and grant necessary permissions to our application.
• With the second option we can let the user generate a mini-token from a dedicated page, using his desktop browser, and then tell him to insert this mini-token within in our application.

In both cases, we will get a token that will be used for all future uses of our application, so there would be no more need to authenticate the user after the first time.

KuneriLite Plugins

In our application, we will need to access these functionalities:

• Retrieve photos stored in phone’s gallery
• Make thumbs to show them in our application
• Start the GPS and retrieve user’s current location
• Upload stored photo on Flickr server

So, we’ll need to use the following KuneriLite plugins:

• GPS: we’ll use the start command to start GPS, and the read command to read current location
• File: with dir command we’ll be able to list files in phone’s gallery folders. We’ll use this also to store textual infos, like the user token
• Upload/Download: with this plugin we’ll upload the photos to Flickr website, using its API, and create the thumbs (with the resize command) to show them within our application

Get a token

We’ll use the desktop authentication method, so these are the steps required to authenticate the user, and to get his token:

• Get a frob, with the Flickr flickr.auth.getFrob method
• Generate the desktop authentication URL with the given frob
• Send the user to the generated URL, using the phone browser, where he should authenticate and grand permissions to our application
• When the user is back to our application, we will finally get his authentication token with the flickr.auth.getToken Flickr method

All these Flickr API calls need to be signed with an api_sig parameter, that is explained here: Flickr Authentication API page (in the Signing paragraph). To generate it in our FlashLite application, we’ll use the following function:

function getApiSignature(args:Object)
{
	var authSig:Array = new Array();
 
	for(var key:String in args)
	{
		authSig.push(key + args[key]);
	}
	authSig = authSig.sort();
 
	var apiSig:String = this._md5.hash(<API_SECRET> + authSig.join(''));
 
	return apiSig;
}

where <API_SECRET> is the API Secret associated to your API Key (you can see both of them on Flickr API Keys page).

If all has gone well, we will finally get the user token, that we must store somewhere (for example using SharedObject, or within a local file using KuneriLite file plugin).

Show phone gallery photos

Since we’ll use S60 3rd edition phones, we’ll search for photos in these folders: “C:\Data\Images\” and “E:\Images\”. Since on these phones photos will be stored in many subfolders, we’ll search within them, using “/s” argument within KuneriLite dir call. Also, we should avoid listing photo thumbs, that are stored
in subfolders named “_PAlbTN”, so it’ll be easy to spot out and avoid to get them.

Once we have the photo paths, we can use the KuneriLite resize command to resize them to our preferred size, and use those thumbs within our application. In doing this, we should care for the following points:

• It’s not possible to load more than 5 resources at once, so we should generate and load thumbs in a progressive manner, otherwise we will have lost calls (without any feedback or exception) within our application
• While loading a thumb in a MovieClip, we should take care not to remove the Clip while it’s loading (for example, because the user has navigated to another screen). Doing this we’ll avoid the issue described here.

Enter photo details and upload it!

Once the user has selected a photo, we should let him enter photo data (title, description and tags), and then let him choose if he wants to tag with his location the photo itself.

In this case, we can use the approach described in this other article to retrieve the current GPS location: Displaying gps position in flashlite using google static maps and kunerilite.

Once we have the GPS location coordinates, we can finally upload the photo to Flickr website with the upload API. Since the upload API itself requires, apart from the file itself, to send the other params within the POST body, we should use some sort of server proxy, since KuneriLite upload command does not allow to post them this way. What we could do is to send the textual parameters within the upload URL, and then let our proxy POST them to Flickr server.

Get FliKun!

This first release of FliKun is very (very!) alpha, so try it at your own risk jokes apart, there are still many points open (like the horrible graphics!), so expect new versions as soon as I’ve got the time to work more on it!

Download FliKun_3rd_edition_unsigned.sis (for FlashLite 3.0).

Currently known issues/bugs are:

• Sometimes upload fails, especially when using some special characters
• There is no upload progress bar (but will be added very soon)
• File upload fails (with error code -4) when photo size is bigger than approx 450 Kb (I’m currently working to solve this)

For any other bugs you may encounter, please leave comment on this post! Thanks

Finally note that, to use the GPS feature, you’ll need to sign the SIS file with a valid certificate.

Today we’ll see a simple way to add sliding transition between Canvas in a Java ME application. Just take a look at it in the emulator page to see how it performs: Canvas sliding transitions in action!

The source code

FxBaseCanvas

First of all, we know that Canvas paint() method is protected, so, to access it from the class we’ll build, we must extend its visibility by extending Canvas class itself. We’ll do it by defining our FxBaseClass in this simple way:

import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;
 
public class FxBaseCanvas extends Canvas
{
	public void paint(Graphics g)
	{
	}
}

CanvasSlideFx

Now, we start building our CanvasSlideFx class, that will extend Canvas itself. We start defining some useful properties:

// time related properties
long startTime = 0;
long duration = 0;
 
// current state of the transition
boolean running = false;
 
// direction of sliding
int direction = LEFT;
 
// the previous and next Canvas instances
FxBaseCanvas fromCanvas = null;
FxBaseCanvas toCanvas = null;
 
// the current Display object
Display display = null;
 
// properties used to correctly place the 2 Canvas
int deltaX = 0;
int deltaY = 0;

Now, we define our class constructor, that will initialize coordinate properties according to the specified transition direction. The detailed argument list is:

• The current Display object, that will be used to retrieve the current displayed Canvas, and to set the next one
• The destination Canvas, that will extend the previously defined FxBaseCanvas class
• The transition direction (one of Canvas.UP, RIGHT, DOWN or LEFT)
• The transition duration, in milliseconds

public CanvasSlideFx(Display display, FxBaseCanvas toCanvas, int direction, long duration)
{
	this.display = display;
	this.fromCanvas = (FxBaseCanvas)display.getCurrent();
	this.toCanvas = toCanvas;
	this.direction = direction;
	this.duration = duration;
 
	switch(direction)
	{
	case UP:
		deltaY = - getHeight(); break;
	case RIGHT:
		deltaX = getWidth(); break;
	case DOWN:
		deltaY = getHeight(); break;
	case LEFT:
		deltaX = - getWidth(); break;
	}
}

Now, we define a startTransition() method, that will actually start the animation. To implement the animation itself, we let our class implement Runnable.

void startTransition()
{
	this.startTime = System.currentTimeMillis();
 
	running = true;
 
	new Thread(this).start();
}

And here’s the run() method implementation, that we must implement from Runnable interface. As long as the animation is running, we will repaint our animated Canvas, with a given interval of 50 milliseconds (but you can freely change this). When it finishes (so, running is false), we will exit the main loop and set the current Displayable to our toCanvas.

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

Finally, we have our paint() method, that will actually paint our transition. It will do this by painting both the source and the destination Canvas, translating them according to the transition direction, and to the elapsed time.

protected void paint(Graphics g)
{
	if(!running)
		startTransition();
 
	long diff = System.currentTimeMillis() - startTime;
 
	if(diff >= duration)
	{
		running = false;
 
		diff = duration;
	}
 
	int perc = (int)(100 * diff / duration);
 
	int dx = deltaX * perc / 100;
	int dy = deltaY * perc / 100;
 
	g.translate(dx, dy);
 
	fromCanvas.paint(g);
 
	g.translate(- deltaX, - deltaY);
 
	toCanvas.paint(g);
 
	g.translate(deltaX - dx, deltaY - dy);
}

How to use it?

Now we’ll see how to integrate the CanvasSlideFx within an existing code that already uses Canvas.
So, let’s assume that our application currently has, somewhere in its code, these lines:

MyCanvas firstCanvas = new MyCanvas();
 
Display.getDisplay(myMidlet).setCurrent(firstCanvas);
...
//and somewhere else
MyOtherCanvas secondCanvas = new MyOtherCanvas();
 
Display.getDisplay(myMidlet).setCurrent(secondCanvas);

where MyCanvas and MyOtherCanvas will likely extend Canvas.

Now here are the required steps to integrate transitions in our code:

1. First of all, we must make MyCanvas and MyOtherCanvas extend FxBaseCanvas instead of directly Canvas. So, we’ll have:

   public class MyCanvas extend FxBaseCanvas ...

2. Then, let’s say we want to animate the transition between firstCanvas and secondCanvas, we will remove the code:

   Display.getDisplay(myMidlet).setCurrent(secondCanvas);

   and replace it with:

   CanvasSlideFx fxCanvas = new CanvasSlideFx(
   	Display.getDisplay(myMidlet),
   	secondCanvas,
   	Canvas.LEFT,
   	500L
   );
    
   Display.getDisplay(myMidlet).setCurrent(fxCanvas);

3. and we’ve done it!

Resources and download

You can download the code explained in this article with the following links:

• FxBaseCanvas.java: our base class extending Canvas
• CanvasSlideFx.java: the class used to implement the sliding transition

I’m really honored that another article, published on Forum Nokia Wiki, has been selected as Article of the Month!

As the previous one, this also is related to Google Maps usage in mobile applications, and you can read it here: How to use Google Maps data in mobile applications.

As its name says, It’s an introductory article on how to use Google Maps services, in particular the geocoding and static maps ones, from a mobile application, where standard Google Maps API code is not suitable (since it is thought for web based and Ajax’d apps). Its content does not focus on any particular programming language, but gives base guidelines to use those services using REST.

So… any kind of feedbacks is welcome!

I’m really happy to announce that my J2ME Google Maps API article on Forum Nokia Wiki has been selected as Article of the Week!

And, to celebrate this event, I’ve added a brand new feature to my article that will allow you to:

• create larger tiled maps
• support map scrolling

How does it work?

You start instantiating a GoogleMaps object as usual:

GoogleMaps gMap = new GoogleMaps("API_KEY");

Then you get your map, for example geocoding a given address:

double[] coords = gMap.geocodeAddress("Leicester square, London");
 
Image mapImage = gMap.retrieveStaticImage(
	150, 150,
	coords[0], coords[1],
	12, "png"
);

Then, let’s say you want to scroll your map 100 pixels up, what you’ll do is:

double[] newCoords = gMap.adjust(
	coords[0], coords[1],
	0, -100, 12
);
 
Image newMapImage = gMap.retrieveStaticImage(
	150, 150,
	newCoords[0], newCoords[1],
	12, "png"
);

As you’ve seen, the adjust method takes these arguments:

• the current latitude and longitude
• the deltaX and deltaY, in pixels
• the current zoom level

and returns the new map center latitude and longitude coordinates.

You can check the full updated source code on Forum Nokia Wiki article: J2ME Google Maps API, and a full-featured example, with the scrolling feature, on the emulator page: J2ME Google Maps API in action.

After two tutorials on Image animations in J2ME, I’ve finally decided to put together a library to easily integrate Image effects in a Java ME application. This first release is very very early, and is intended to be tested and to allow developers to give their feedbacks about it, so It’d be possible to modify and improve it.

Currently supported effects are visible on the emulator page, and are:

• BlindsFx
• ExplodeFx
• PuzzleFx
• ShakeFx
• SlideFx
• SpiralFx
• WaveFx
• WipeFx

How to use it?

Let’s start from a simple usage example. We start creating an Image, and then using it to create an AnimatedImage instance:

Image baseImage = Image.createImage("/base.png");
 
AnimatedImage animated = new AnimatedImage(baseImage);

Now, we have created an AnimatedImage, that is the base class that will allow us to apply effects to Images.

Now, we can create an effect (that will be a subclass of ImageFx) and apply it to our AnimatedImage:

ImageFx fx = new PuzzleFx(8, 8, ImageFx.TYPE_IN);
 
animated.setFx(fx);

In this example, we have chosen a PuzzleFx effect, that will show (or hide, depending on Fx type) our image piece by piece. As you can check on JavaDocs page for PuzzleFx class, first 2 arguments represent the horizontal and vertical pieces to split the Image into, while the last one is the type of the Fx itself.

Now, our AnimatedImage is ready to be animated. To start the animation, simply call the AnimatedImage start() method, passing as argument the effect duration in milliseconds:

animated.start(3000L);

About painting, you’ll simply have to call the paint() method, in a way that is really similar to Graphics drawImage():

animated.paint(g, 100, 100, Graphics.TOP | Graphics.LEFT);

Now, to begin using this library, you don’t really need any more infos. Just to point out some methods you can find useful in your app:

//stop() method will immediatly stop the FX
fx.stop();
 
//isRunning() method tells if the FX is running or not
fx.isRunning();
 
//isEnded() method tells if the FX animation is ended
fx.isEnded()
 
//and, if you want a looping effect, you can use
fx.setLooping(true);

Further information

You can library JAR file here: ImageFx.jar. Current version requires MIDP 2.0 and CLDC 1.1 to be used (a version compatible with CLDC 1.0 will be released as soon as I’ve got time :)).

Full API JavaDocs (still in early phase too :)) are also available here.

After a busy period, I finally got some time to come back to Jappit blog, just in time to announce…

Forum Nokia Code Champ Winners!

This competition, launched by Nokia to promote the development of WebRuntime and Flash-based applications has finally announced his winners, and there are really cool applications!

CityLite of IdeasLite is a guide to night life in Latin American capitals, with informations about events, theaters, and a lot more. Really cool interface!

KuneriLite team also won the award for Europe/Middle East/Africa with their one-button voting system: Kuneri Easy Vote! Congratulations for their good work!

For the full list of winners, you can look here.

iPhone 3G is finally here!

After months of guessing and posting, Apple will finally announce, during San Francisco Apple WorldWide Developers Conference of June 9th, the 3G version of its iPhone. And it seems that it’ll arrive in Italy before the end of June branded by the two Carriers Tim and Vofafone.

While it’s definitely a good news that it’ll support HSDPA, it seems that we’ll not have a builtin GPS… too bad for all location-fanatics!

Jarpa, source code is out!

Jarpa is an absolutely interesting project aiming to extend FlashLite and Java ME feature by allowing them to intercommunicate, and so allowing developers to create hybrid applications that can take the best of both worlds.

Some days ago, Felipe Andrade has finally released Jarpa sourcecode, so developers can finally start to benefit of this framework, and for J2ME and FL-addicted like me, this is a GREAT news!

And, if you need one more reason to congratulate with Felipe for its great and extensive work, here is its Nokia Championship award!

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