Drawing Graphics Primitives

Graphics primitives consist of lines, rectangles, circles, polygons, ovals, and arcs. You can create pretty impressive graphics by using these primitives in conjunction with each other; the Graphics class provides methods for drawing these primitives. Certain methods also act on primitives that form closed regions. You can use these methods to erase the area defined by a primitive or fill it with a particular color.

Closed regions are graphical elements with a clearly distinctive inside and outside. For example, circles and rectangles are closed regions, whereas lines and points are not.

I'm not going to go through an exhaustive explanation of how to draw each type of primitive, because they don't usually impact game graphics that much. Most games rely more on images, which you learn about later toChapter in the "Drawing Images" section. Nevertheless, look at a few of the primitives just so you can see how they work.

Lines

Lines are the simplest of the graphics primitives and are therefore the easiest to draw. The drawLine method handles drawing lines, and is defined as follows:

void drawLine(int x1, int y1, int x2, int y2)

The first two parameters, x1 and y1, specify the starting point for the line, and the x2 and y2 parameters specify the ending point. To draw a line in an applet, call drawLine in the applet's paint method, as in the following:

public void paint(Graphics g) {
  g.drawLine(5, 10, 15, 55);
}

The results of this code are shown in Figure 5.4.

Figure 5.4 : A line drawn using the drawLine method.

Rectangles

Rectangles are also very easy to draw. The drawRect method enables you to draw rectangles by specifying the upper-left corner and the width and height of the rectangle. The drawRect method is defined in Graphics as follows:

void drawRect(int x, int y, int width, int height)

The x and y parameters specify the location of the upper-left corner of the rectangle, whereas the width and height parameters specify their namesakes. To draw a rectangle using drawRect, just call it from the paint method like this:

public void paint(Graphics g) {
  g.drawRect(5, 10, 15, 55);
}

The results of this code are shown in Figure 5.5.

Figure 5.5 : A rectangle drawn using the drawRect method.

You can also use a drawRoundRect method, which allows you to draw rectangles with rounded corners.

Other Primitives

The other graphics primitives (circles, polygons, ovals, and arcs) are drawn in a very similar fashion to lines and rectangles. Because you won't actually be using graphics primitives much throughout this guide, there's no need to go into any more detail with them. If you're curious, feel free to check out the documentation that comes with the Java Developer's Kit. I'm not trying to lessen the importance of graphics primitives, because they are very useful in many situations. It's just that the game graphics throughout this guide are more dependent on images, with a little text sprinkled in.

Drawing Text

Because Java applets are entirely graphical in nature, you must use the Graphics object even when you want to draw text. Fortunately, drawing text is very easy and yields very nice results. You will typically create a font for the text and select it as the font to be used by the graphics context before actually drawing any text. As you learned earlier, the setFont method selects a font into the current graphics context. This method is defined as follows:

void setFont(Font font)

The Font object models a textual font, and includes the name, point size, and style of the font. The Font object supports three different font styles, which are implemented as the following constant members: BOLD, ITALIC, and PLAIN. These styles are really just constant numbers, and can be added together to yield a combined effect. The constructor for the Font object is defined as follows:

public Font(String name, int style, int size)

As you can see, the constructor takes as parameters the name, style, and point size of the font. You might be wondering exactly how the font names work; you simply provide the string name of the font you want to use. The names of the most common fonts supported by Java are Times Roman, Courier, and Helvetica. Therefore, to create a bold, italic, Helvetica, 22-point font, you would use the following code:

Font f = new Font("Helvetica", Font.BOLD + Font.ITALIC, 22);

After you've created a font, you will often want to create a FontMetric object to find out the details of the font's size. The FontMetric class models very specific placement information about a font, such as the ascent, descent, leading, and total height of the font. Figure 5.6 shows what each of these font metric attributes represent.

Figure 5.6 : The different font metric attributes.

You can use the font metrics to precisely control the location of text you are drawing. After you have the metrics under control, you just need to select the original Font object into the Graphics object using the setFont method, as in the following:

g.setFont(f);

Now you're ready to draw some text using the font you've created, sized up, and selected. The drawString method, defined in the Graphics class, is exactly what you need. drawString is defined as follows:

void drawString(String str, int x, int y)

drawString takes a String object as its first parameter, which determines the text that is drawn. The last two parameters specify the location in which the string is drawn; x specifies the left edge of the text and y specifies the baseline of the text. The baseline of the text is the bottom of the text, not including the descent. Refer to Figure 5.6 if you are having trouble visualizing this.

The Drawtext sample applet demonstrates drawing a string centered in the applet window. Figure 5.7 shows the Drawtext applet in action.

Figure 5.7 : The Draw Text sample applet.

The source code for the Drawtext sample applet is shown in Listing 5.1.

Listing 5.1. The Drawtext sample applet.

// Drawtext Class
// Drawtext.java

// Imports
import java.applet.*;
import java.awt.*;

public class Drawtext extends Applet {
  public void paint(Graphics g) {
    Font        font = new Font("Helvetica", Font.BOLD +
      Font.ITALIC, 22);
    FontMetrics fm = g.getFontMetrics(font);
    String      str = new
      String("It's just a mere shadow of itself.");

    g.setFont(font);
    g.drawString(str, (size().width - fm.stringWidth(str)) / 2,
      ((size().height - fm.getHeight()) / 2) + fm.getAscent());
  }
}

Drawtext uses the font-related methods you just learned to draw a string centered in the applet window. You might be wondering about the calls to the size method when the location to draw the string is being calculated. The size method is a member of Component and returns a Dimension object specifying the width and height of the applet window.

That sums up the basics of drawing text using the Graphics object. Now it's time to move on to the most important aspect of Java graphics in regard to games: images.

Drawing Images

Images are rectangular graphical objects composed of colored pixels.

Each pixel in an image describes the color at that particular location of the image. Pixels can have unique colors that are usually described using the RGB color system. Java provides support for working with 32-bit images, which means that each pixel in an image is described using 32 bits. The red, green, and blue components of a pixel's color are stored in these 32 bits, along with an alpha component.

The alpha component of a pixel refers to the transparency or opaqueness of the pixel.

Before getting into the details of how to draw an image, you first need to learn how to load images. The getImage method, defined in the Applet class, is used to load an image from a URL. getImage comes in two versions, which are defined as follows:

Image getImage(URL url)
Image getImage(URL url, String name)

These two versions essentially perform the same function; the only difference is that the first version expects a fully qualified URL, including the name of the image, and the second version enables you to specify a separate URL and image name.

You probably noticed that both versions of getImage return an object of type Image. The Image class represents a graphical image, such as a GIF or JPEG file image, and provides a few methods for finding out the width and height of the image. Image also includes a method for retrieving a graphics context for the image, which enables you to draw directly onto an image.

The Graphics class provides a handful of methods for drawing images, which follow:

boolean drawImage(Image img, int x, int y, ImageObserver observer)
boolean drawImage(Image img, int x, int y, int width, int height,
  ImageObserver observer)
boolean drawImage(Image img, int x, int y, Color bgcolor, ImageObserver
  observer)
boolean drawImage(Image img, int x, int y, int width, int height, Color
  bgcolor, ImageObserver observer)

All these methods are variants on the same theme: they all draw an image at a certain location as defined by the parameters x and y. The last parameter in each method is an object of type ImageObserver, which is used internally by drawImage to get information about the image.

The first version of drawImage draws the image at the specified x and y location-x and y represent the upper-left corner of the image. The second version draws the image inside the rectangle formed by x, y, width, and height. If this rectangle is different than the image rectangle, the image will be scaled to fit. The third version of drawImage draws the image with transparent areas filled in with the background color specified in the bgcolor parameter. The last version of drawImage combines the capabilities in the first three, enabling you to draw an image within a given rectangle and with a background color.

The process of drawing an image involves calling the getImage method to load the image, followed by a call to drawImage, which actually draws the image on a graphics context. The DrawImage sample applet shows how easy it is to draw an image (see Figure 5.8).

Figure 5.8 : The DrawImage sample applet.

The source code for the DrawImage sample applet is shown in Listing 5.2.

Listing 5.2. The DrawImage sample applet.

// DrawImage Class
// DrawImage.java

// Imports
import java.applet.*;
import java.awt.*;

public class DrawImage extends Applet {
  public void paint(Graphics g) {
    Image img = getImage(getCodeBase(), "Res/Ride.gif");

    g.drawImage(img, (size().width - img.getWidth(this)) / 2,
      (size().height - img.getHeight(this)) / 2, this);
  }
}

The DrawImage sample applet loads an image in the paint method using getImage. The getCodeBase method is used to specify the applet directory where applet resources are usually located, while the image name itself is simply given as a string. The image is actually stored in the Res subdirectory beneath the applet directory, as evident by the image name ("Res/Ride.gif") passed into getImage. The image is then drawn centered in the applet window using the drawImage method. It's as simple as that!

Tracking Images

Even though images are a very neat way of displaying high-quality graphics within a Java applet, they aren't without their drawbacks. The biggest problem with using images is the fact that they must be transmitted over the Web as needed, which brings up the issue of transmitting multimedia content over a limited bandwidth. This means that the speed at which images are transferred over a Web connection will often cause a noticeable delay in a Java applet reliant on them, such as games.

There is a standard technique for dealing with transmission delay as it affects static images. You've no doubt seen this technique at work in your Web browser when you've viewed images in Web pages. The technique is known as interlacing, and it makes images appear blurry until they have been completely transferred. To use interlacing, images must be stored in an interlaced format (usually GIF version 89a), which means that the image data is arranged in a way so that the image can be displayed before it is completely transmitted. Interlacing is a good approach to dealing with transmission delays for static images because it enables you to see the image as it is being transferred. Without interlacing, you have to wait until the entire image has been transferred before seeing it at all.

Before you get too excited about interlacing, keep in mind that it is useful only for static images. You're probably wondering why this is the case. It has to do with the fact that animations (dynamic images) rely on rapidly displaying a sequence of images over time, all of which must be readily available to successfully create the effect of movement.

An animation sequence wouldn't look right using interlacing, because some of the images would be transferred before others. A good solution would be to just wait until all the images have been transferred before displaying the animation. That's fine, but how do you know when the images have all been transferred? Enter the Java media tracker.

The Java media tracker is an object that tracks when media objects, such as images, have been successfully transferred. Using the media tracker, you can keep track of any number of media objects and query to see when they have finished being transmitted. For example, suppose you have an animation with four images. Using the media tracker, you would register each of these images and then wait until they have all been transferred before displaying the animation. The media tracker keeps up with the load status of each image. When the media tracker reports that all the images have been successfully loaded, you are guaranteed that your animation has all the necessary images to display correctly.

The MediaTracker Class

The Java MediaTracker class is part of the awt package and contains a variety of members and methods for tracking media objects. Unfortunately, the MediaTracker class that ships with release 1.0 of the Java development kit supports only image tracking. Future versions of Java are expected to add support for other types of media objects such as sound and music.

The MediaTracker class provides member flags for representing various states associated with tracked media objects. These flags are returned by many of the member functions of MediaTracker and are as follows:

• LOADING: Indicates that a media object is currently in the process of being loaded.
• ABORTED: Indicates that the loading of a media object has been aborted.
• ERRORED: Indicates that some type of error occurred while loading a media object.
• COMPLETE: Indicates that a media object has been successfully loaded.