Working with Graphics

Moving an Image Across the Screen

This page features an example applet that moves one image (a rocketship that currently looks like a slice of pizza) in front of a background image (a field of stars). This page shows only applet code. The code for an application would be similar, except you would use different code to load the images, as described in Loading Images.

Below are the two images this applet uses.

rocketship.gif:

starfield.gif:

Note: The rocketship image has a transparent background. The transparent background makes the rocketship image appear to have a rocketship shape, no matter what color background it's drawn on top of. If the rocketship background weren't transparent, then instead of the illusion of a rocketship moving through space, you'd see a rocketship on top of a rectangle moving through space.

Here's the applet in action. Remember that you can click on the applet to stop or start the animation.

---

Your browser can't run 1.0 Java applets, so here is a snapshot of what you'd see.

---

The code for performing this animation isn't complex. Essentially, it's the applet animation template, plus the double buffering code you saw on the previous page, plus a few additional lines of code. The additional code loads the images, draws the background image, and then uses a simple algorithm to determine where to draw the moving image. Here is the additional code:

...//Where instance variables are declared:
Image stars;
Image rocket;

...//In the init() method:
stars = getImage(getCodeBase(), "../images/starfield.gif");
rocket = getImage(getCodeBase(), "../images/rocketship.gif");

...//In the update() method:
//Paint the frame into the image.
paintFrame(offGraphics);

...//A new method:
void paintFrame(Graphics g) {
    Dimension d = size();
    int w;
    int h;

    //If we have a valid width and height for the background image,
    //draw it.
    w = stars.getWidth(this);
    h = stars.getHeight(this);
    if ((w > 0) && (h > 0)) {
        g.drawImage(stars, (d.width - w)/2,
                    (d.height - h)/2, this);
    }

    //If we have a valid width and height for the background image,
    //draw it.
    w = rocket.getWidth(this);
    h = rocket.getHeight(this);
    if ((w > 0) && (h > 0)) {
        g.drawImage(rocket, ((frameNumber*5) % (w + d.width)) - w,
                    (d.height - h)/2, this);
    }
}

You might think that this program doesn't need to clear the background, since it uses a background image. However, clearing the background is still necessary. One reason is that the applet usually starts drawing before the images are fully loaded. If the rocketship image loaded before the background image, you would see parts of multiple rocketship until the background image loaded. Another reason is that if the applet drawing area were wider than the background image, for some reason, then you'd see multiple rocketships to either side of the background image.

You could solve the first problem by delaying all drawing until both images are fully loaded. The second problem could be solved by scaling the background image to fit the entire applet area. You'll learn how to wait for images to be fully loaded in Improving the Appearance and Performance of Image Animation, later in this lesson. Scaling is described in Displaying Images.

Working with Graphics