×
Namespaces

Variants
Actions
Revision as of 10:24, 15 September 2009 by valderind4 (Talk | contribs)

Explode effect for Java ME Images

From Nokia Developer Wiki
Jump to: navigation, search

Contents

Introduction

The following ExplodingImage class can be used to add an "explode" effect to J2ME Images.
J2me image explode.png
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

203 page views in the last 30 days.