You can see the final effect, as usual, on the emulator page: J2ME Image reflection in action.

Source code

1. Method declaration

Let’s start by our method declaration:

public static Image createReflectedImage(Image image, int bgColor, int reflectionHeight)
{
}

We have 3 arguments:

• the original image that we want to reflect
• the background color (used for transparent images)
• the height of the reflection effect

2. The mutable Image

Now, let’s create the mutable Image that will hold the resulting effect:

int w = image.getWidth();
 
int h = image.getHeight();
 
Image reflectedImage = Image.createImage(w, h + reflectionHeight);

We store the original image width and height into 2 int variables, and then create the mutable image with the same width, but with an height equal to h (the original image) plus the specified reflection height.

3. Copy the original Image

Now, first drawing steps are:

1. Getting the Graphics object of our mutable image
2. Filling the image with the background color
3. Drawing the original image on the upper part of the mutable one

Graphics g = reflectedImage.getGraphics();
 
g.setColor(bgColor);
 
g.fillRect(0, 0, w, h + reflectionHeight);
 
g.drawImage(image, 0, 0, Graphics.TOP | Graphics.LEFT);

4. Create the reflection effect

Now, let’s get to the important part of this tutorial, that is the reflection effect itself:

• for each horizontal line of the reflected image part, take the corresponding vertical coordinate of the original image
• get the RGBA data of the corresponding horizontal line of the original image
• calculate the alpha to be applied to this line, and apply it to each element of the RGB data array
• draw the RGB data into the reflected image, by using its Graphics object

And here is the source code:

int[] rgba = new int[w];
int currentY = -1;
 
for(int i = 0; i < reflectionHeight; i++)
{
	int y = (h - 1) - (i * h / reflectionHeight);
 
	if(y != currentY)
		image.getRGB(rgba, 0, w, 0, y, w, 1);
 
	int alpha = 0xff - (i * 0xff / reflectionHeight);
 
	for(int j = 0; j < w; j++)
	{
		int origAlpha = (rgba[j] >> 24);
		int newAlpha = (alpha & origAlpha) * alpha / 0xff;
 
		rgba[j] = (rgba[j] & 0x00ffffff);
		rgba[j] = (rgba[j] | (newAlpha << 24));
	}
 
	g.drawRGB(rgba, 0, w, 0, h + i, w, 1, true);
}

as you can see, the rgba[] int array holds the current pixel row data, and will be refreshed only when necessary (so, when the y coordinate of the original image changes).

Sample usage

Using the above method is really simple, since it’s only necessary to:

1. Create the original Image
2. Call createReflectedImage() method by passing the original Image as argument, together with the background color and the reflection effect height

Image originalImage = Image.createImage("/cap_man1.png");
 
Image reflectedImage = ReflectedImage.create(originalImage, bgColor, 64);

Downloads

You can download the complete source code of this article here:

• ReflectedImage.java

Vote this article!

If you liked this tutorial, feel free to vote it on Forum Nokia Wiki: How to create an image reflection effect in Java ME

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.