Using images

So far in our games, we've just been painting blocks of color on the screen. This is fine for one unit on an open screen, but now we have two units and water squares as well all represented by different colored blocks. It would be helpful to use images to make it clearer what it is that we're moving around. In this lesson we'll introduce some new classes in the Java API, but other than that it will be pretty simple. Requires a browser that supports applets
This is meant to be a replacement when we do things (javascript menus) that might get hidden behind the applet.

Toolkits and Images

Before you do anything, first you will have to download the images and place them in a directory called "image" that is in the parent of the directory where your file resides. Here are the links to the images: unit1, unit2, land, water. Right click on these links and save them in that location. Using images instead of blocks of color will be a fairly straightforward task. We'll simply replace our calls to the fillRect function with calls to drawImage. But before we can do that we first need to load the images and store them for later use in the paint function. First we must define them. We place the following variable declarations after the 'map' declaration.
    public static Image unit1Image;
    public static Image unit2Image;
    public static Image landImage;
    public static Image waterImage;
The Image class will hold the data that is found in our image file. This is the object that we will paint on the screen. Now we have to initialize these objects by loading the data file. We do this by first getting the Toolkit that's associated with our StakeoutComponent and then using its createImage function to actualy load the file.
        Toolkit toolkit = getToolkit ();
        unit1Image = toolkit.createImage ("../image/unit1.png");
        unit2Image = toolkit.createImage ("../image/unit2.png");
        landImage = toolkit.createImage ("../image/land.png");
        waterImage = toolkit.createImage ("../image/water.png");
The ".." used in the image names signifies the parent directory. This is a convenient way of referring to the parent director without having to know its name. This is handy because our game could be installed anywhere on the system in any folder that the user wants to put it. By using ".." it doesn't matter where the user installs the game, it will still work. This also works in the command prompt. If you type "cd .." it will change the directory to the parent directory. Now all we have to do is to actually paint the images in the appropriate locations. All the code to traverse the map is already there, we just have to replace the fillRect calls with calls to the drawImage function.
    public void paint (Graphics canvas) {
        canvas.setColor (Color.BLACK);
        canvas.fillRect (0, 0, GRIDSIZE * MAPWIDTH, GRIDSIZE * MAPHEIGHT);

        int rowIndex = 0;
        while (rowIndex < map.length) {
            int columnIndex = 0;
            while (columnIndex < map [rowIndex].length) {
                if (map [rowIndex][columnIndex] == LAND) {
canvas.drawImage (landImage, UpperLeft (columnIndex + 1), UpperLeft (rowIndex + 1), this);
} else if (map [rowIndex][columnIndex] == WATER) {
canvas.drawImage (waterImage, UpperLeft (columnIndex + 1), UpperLeft (rowIndex + 1), this);
} else { assert (false); } columnIndex++; } rowIndex++; } // Paint the first unit
canvas.drawImage (unit1Image, UpperLeft (Stakeout.unit1Column), UpperLeft (Stakeout.unit1Row), this);
// Paint the second unit
canvas.drawImage (unit2Image, UpperLeft (Stakeout.unit2Column), UpperLeft (Stakeout.unit2Row), this);
The "this" in the code above is a Java keywork to refer to the current object that we are dealing with (in this case a StakeoutComponent).

Follow-up exercise

  • Use an image editing program like the Gimp to create your own images and incorporate them into the game.
  • Change the size of the map squares to accomodate larger images
  • Stretch the current images to fit a larger map

Rate this lesson: *****