Categories: Java | Java ME | Code Examples | UI

From Forum Nokia Wiki

Introduction

The following ExplodingImage class can be used to add an "explode" effect to J2ME Images.

You can see this effect in action here: J2ME Image explode effect in action.

Source code: ExplodingImage class

Let's start with our class!

import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;
 
public class ExplodingImage
{
}

We start definining some useful properties:

//effect strength
public static final int DEFAULT_LEVEL = 7;
public int level = 7;
	
//horizontal and vertical pieces of the exploded image
public int vPieces = 4;
public int hPieces = 8;
	
//the Image instance
Image image = null;
 
//Image properties
int imageWidth = 0;
int imageHeight = 0;
 
//effect duration and start time
long duration = 0;
long startTime = 0;
	
//effect state properties
public boolean exploding = false;
public boolean ended = false;

Now we can define the ExplodingImage constructor, that will accept the following arguments:

• an Image instance
• a level indicating the strength of the effect itself
• 2 ints indicating the horizontal and vertical pieces of the exploded image

public ExplodingImage(Image image, int level, int hPieces, int vPieces)
{
	this.level = level;
	this.hPieces = hPieces;
	this.vPieces = vPieces;
 
	this.image = image;
 
	this.imageWidth = image.getWidth();
	this.imageHeight = image.getHeight();
}

Now, we define the explode() method, that will be used to start the effect

public void explode(long duration)
{
	this.duration = duration;
	this.startTime = System.currentTimeMillis();
		
	ended = false;
	exploding = true;
}

Finally, we're ready to paint our image!

public void paint(Graphics g, int x, int y, int constraints)
{
	//if the image has exploded, just don't paint it
	if(ended)
	{
		return;
	}
	
	if(!exploding)
	{
		g.drawImage(image, x, y, constraints);
	}
	else
	{
		//cache previous clipping properties
		int cx, cy, cw, ch;
 
		cx = g.getClipX();
		cy = g.getClipY();
		cw = g.getClipWidth();
		ch = g.getClipHeight();
			
		//now we must normalize coordinates according to Graphics constraints
		int translateX = (constraints & Graphics.RIGHT) > 0 ? x - imageWidth :
				((constraints & Graphics.HCENTER) > 0 ? x - imageWidth / 2 :
					x);
		int translateY = (constraints & Graphics.BOTTOM) > 0 ? y - imageHeight :
				((constraints & Graphics.VCENTER) > 0 ? y - imageHeight / 2 :
					y);
			
		g.translate(translateX, translateY);
		
		//now we'll check now much time has passed from start
		long timeDiff = System.currentTimeMillis() - startTime;
 
		//and if effect has ended
		if(timeDiff > duration)
		{
		timeDiff = duration;
				
			ended = true;
				
			exploding = false;
		}
 
		//and let's paint single pieces!			
		int perc = (int)(100 * timeDiff / duration);
			
		int pieceEndX = 0;
		int pieceEndY = 0;
		int pieceX = 0;
		int pieceY = 0;
		int pieceWidth = imageWidth / hPieces;
		int pieceHeight = imageHeight / vPieces;
		
		int centerX = (imageWidth - pieceWidth) / 2;
		int centerY = (imageHeight - pieceHeight) / 2;
			
		for(int i = 0; i < hPieces; i++)
		{
			for(int j = 0; j < vPieces; j++)
			{
				pieceEndX = i * pieceWidth + (i * pieceWidth - centerX) * level;
				pieceEndY = j * pieceHeight + (j * pieceHeight - centerY) * level;
					
				pieceX = i * pieceWidth + (pieceEndX - i * pieceWidth) * perc / 100;
				pieceY = j * pieceHeight + (pieceEndY - j * pieceHeight) * perc / 100;
					
				g.setClip(pieceX, pieceY, pieceWidth, pieceHeight);
					
				g.drawImage(image, pieceX - i * pieceWidth, pieceY - j * pieceHeight, Graphics.TOP | Graphics.LEFT);
			}
		}
			
		//let's translate back and restore previous clipping
		g.translate(- translateX, - translateY);
		
		g.setClip(cx, cy, cw, ch);
	}
}

Source code: sample usage

You can start instantiating an ExplodingImage this way:

Image sourceImage = Image.createImage("/image.png");
 
ExplodingImage image = new ExplodingImage(sourceImage, 5, 8, 8);

Then start exploding with the explode() method:

image.explode(2000L);

And paint it with its paint() method:

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

And finally, to check if explode effect has ended, you can check its ended property:

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

Download

You can download full source code, together with a sample Canvas using ExplodingImage class, here: Image Explode Effect sources