Explode effect for Java ME Images

Comments

25 Sep
2009

Article Review by Larry101 (20090925)

This article provides a code example for a nice “exploding image” effect in Java ME. The code example demonstrates how to create an animation which makes it appear as if an image is exploding, with the image splitting into pieces, which are shown to be “blown” outward from the image center. The effect makes use of the translate and setClip methods of the Graphics class to split images up into pieces and move these to create the desired effect.

While the code example probably doesn’t have very many potential use cases, it does nevertheless serve to show how to create impressive graphical effects using the low-level drawing operations provided by the Graphics object used by low-level drawing classes such as the Canvas. Using similar techniques, programmers can create all manner of interesting graphical effects for use in games or simply for creating impressive screen transitions.

The code example is nicely commented and clearly laid out, making it easy to understand and follow.

---

Log in or Join to leave comments.

Article Metadata

---

Code Example

Source file: Media:J2me_image_explode_effect.zip

---

Article

Created: jappit (20 May 2008)

Last edited: hamishwillee (07 Feb 2012)

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