Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

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

Explode effect for Java ME Images

From 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

118 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×