In this tutorial we will create an explosion by loading a series of frames and creating a class that plays them as an animation. To learn how we created the explosion frames for this tutorial check out Explosions in Studio Max Part 1.

Explosion.java 

import java.awt.*;
public class Explosion{
    private int numFrames = 25;
    private int currentFrame = 0;
    private int px = 0;
    private int py = 0;
    private int width = 100;
    public boolean active = true;   
    public void setPx(int x){
        this.px = x;
    }
    public void setPy(int y){
        this.py = y;
    }
    public void playExplosion(Graphics g, Image[] frames){
        g.drawImage(frames[currentFrame],px-(width/2),py-(width/2),null);
        currentFrame++;
        if(currentFrame >= numFrames){
            currentFrame = 0;
            active = false;
        }
    }
}

The playExplosion method of this class takes two parameters. The first is a Graphic object that will allow us to pass the Graphic object from our double buffer into the method and write to it. The second parameter is an array of Images. When the method is called it takes a frame from the Image array using the index currentFrame. When the current frame is equal to the last frame it is reset and the boolean active is set to false.

Animation.java

import java.applet.*;
import java.awt.*;
import java.awt.event.*;
public class Animation extends Applet{
    public static final int WIDTH = 250;
    public static final int HEIGHT = 250;
    Graphics backBuffer;
    Image frontBuffer;
    Image [] explosionFrames = new Image[25];
    Explosion explosion = new Explosion();
    Dimension appletSize;
    public void init(){
        this.setSize(WIDTH, HEIGHT);
        appletSize = getSize();
        addMouseListener(new MyMouseListener());
        frontBuffer = createImage(appletSize.width,appletSize.height);
        backBuffer = frontBuffer.getGraphics();
        for(int i = 0; i < 25; i++){
            explosionFrames[i] = getImage(getDocumentBase(), "frame"+ (i+1)+".png");
        }
        Thread t = new Thread(new MainLoop());
        t.start();
    }
    private class MyMouseListener extends MouseAdapter{
        public void mousePressed(MouseEvent evt){
            if(!explosion.active){
                explosion.setPx(evt.getX());
                explosion.setPy(evt.getY());
                explosion.active = true;
            }
        }
    }
    public class MainLoop implements Runnable{
        public MainLoop(){
        }
        public void run(){
            while(true){
                repaint();
                try {
                    Thread.sleep(20);
                }
                catch (InterruptedException ex){
                }
            }
        }
    }
    public void drawScreen(Graphics display){
        backBuffer.clearRect(0,0,appletSize.width,appletSize.height);
        if(explosion.active){
            explosion.playExplosion(backBuffer,explosionFrames);
        }
        backBuffer.drawString("***** Click anywhere to create explosion *****",0,240);
        display.drawImage(frontBuffer,0,0,this);
    }
    public void update(Graphics display){
        drawScreen(display);
    }
}

First we create an array of Images and an Explosion object that will handle the animation. Next, we load 25 images into the array using a for loop. We have a private class that extends mouseAdapter. This will allow us to execute a block of code each time the mouse is clicked.
When the mouse is clicked we first check to see if the animation is already playing. If it is not, we set the x and y position of our animation to the mouse's current x and y position. Finally, we activate the animation by setting the active boolean to true. Down in our drawScreen method, if the explosion's active boolean is true, we go ahead and play the current frame of the animation by calling the playExplosion method of the Explosion class.

You might also be interested in