On this page:
Designing Images
Geometric shapes
Text, images, composites
Managing the image location
Image Samples
Version: 5.2.1

Images

Designing Images

Designing images for the games

The images that comprise the game scene are drawn on Canvas. The programmer specifies the size of the Canvas when the game starts. Every image that the programmer defines has a pinhole typically the location of the center of the image, or some similar anchor point, using the actual coordinates of the target Canvas. So, for example, two rectangles of the same width, height, and color may differ in the location of their pinholes, and would be drawn at two different locations.

The color of the image can be specified in one of two ways. For the beginner, we supply the interface IColor and six classes that implement this interface: Black, White, Red, Blue, Green, and Yellow. To define the red color, the programmer just writes: new Red(). For more advanced programmers the library uses the java.awt.Color class with the predefined constants for some of the color shades (e.g. Color.red, Color.cyan, Color.orange, Color.magenta, Color.gray) as well as any constructors for the instances of the Color class (e.g. new Color(255, 0, 0, 155) that defines a semi-transparent red color).

All images extend the abstract class WorldImage. The following diagram describes the classes that represent the basic geometric shapes, and some additional ways of creating images:

         +-------------+

         | WorldImage  |

         +-------------+

         | int pinhole |

         | Color color |

         +-------------+

              / \

              ---

               |

------------------------------------------------------------------

|        |            | |        |       | |         |         | |

| +----------------+  | | +------------+ | | +--------------+  | |

| | RectangleImage |  | | | DiskImage  | | | | EllipseImage |  | |

| +----------------+  | | +------------+ | | +--------------+  | |

| | int width      |  | | | int radius | | | | int width    |  | |

| | int height     |  | | +------------+ | | | int height   |  | |

| +----------------+  | |                | | +--------------+  | |

|                     | |                | |                   | |

|         +-----------+ |       +--------+ |       +-----------+ |

|         |             |       |          |       |             |

|   +------------+      | +--------------+ |  +------------+   +-+

|   | FrameImage |      | | CircleImage  | |  | OvalImage  |   |

|   +------------+      | +--------------+ |  +------------+   |

|   | int width  |      | | int radius   | |  | int width  |   |

|   |int height  |      | +--------------+ |  | int height |   |

|   +------------+      |                  |  +------------+   |

|                   +-----------------+    |       +---------------+

+-----+             | LineImage       |    |       | TriangleImage |

      |             +-----------------+    |       +---------------+

+----------------+  | Posn startPoint |    |       | Posn p1       |

| OverlayXY      |  | Posn endPoint   |    |       | Posn p2       |

+----------------+  +-----------------+    |       | Posn p3       |

| WorldImage bot |                         |       +---------------+

| WorldImage top |                         |

| int dx         |               +-----------------+

| int dy         |               | FromFileImage   |

+----------------+               +-----------------+

     / \                         | String filename |

     ---                         +-----------------+

      |

+----------------+

| Overlay        |

+----------------+

| WorldImage bot |

| WorldImage top |

+----------------+

Every class includes two full constructors, one that takes the color defined as an instance of the java.awt.Color class, the other that uses our simplified colors as defined in the javalib.color library.

Every class also defines the toString() and the toIndentedString(String indent) methods that produce a formatted String that represents this object (possibly indented as desired).

Every class implements the methods getWidth() and getHeight() methods.

Every image has a pinhole that represents its current location on the Canvas. The methods that change the location of the image are described in Managing the image location

Geometric shapes

Here is a simple description of each class that represents a basic geometric shape.

Text, images, composites

The programmer may also display text, images from .png files, and combine several images into a composite as follows:

Additionally, the abstract WorldImage class includes the method

WorldImage overlay(WorldImage ...)

that overlays an arbitrary number of images on top of the bottom image that invokes the method without moving any of the images. The pinhole is computed to be the average of the pinholes of all combined images.

Managing the image location

The abstract WorldImage class also includes the methods that allow the programmer to change the location of the pinhole of an image as follows:

Image Samples

A sample of the image types:

and the code that generated the image:

package worldimagestests;

 

import javalib.colors.*;

import javalib.funworld.*;

import javalib.worldcanvas.WorldCanvas;

import javalib.worldimages.*;

 

import java.awt.*;

 

/**

 * Copyright 2012 Viera K. Proulx

 * This program is distributed under the terms of the

 * GNU Lesser General Public License (LGPL)

 */

 

/**

 * A complete set of images displayed in the Canvas

 *

 * author Viera K. Proulx

 * since 5 February 2012

 */

public class ExamplesImageDrawings  {

 

  public ExamplesImageDrawings() {}

 

  // support for the regression tests

  public static ExamplesImageDrawings examplesInstance =

      new ExamplesImageDrawings();

 

  // a text inside a red rectangle with a yellow dot in its pinhole location

  public static WorldImage makeText(Posn pos, int size){

    WorldImage hello =

      new TextImage(pos, "quickbrownfoxjumpedoveralazydog", size, 3, new Blue());

 

    WorldImage helloRed =

        new OverlayImages(

            new RectangleImage(pos,

                hello.getWidth(), hello.getHeight(),

                new Red()),

                hello);

    return

        new OverlayImages(helloRed,

            new DiskImage(hello.pinhole, 2, new Yellow()));

  }

 

  WorldImage circleText =

      new TextImage(new Posn(200, 20),

          "CircleImage(new Posn(200, 60), 10, new Red())", Color.red);

  WorldImage circle = new CircleImage(new Posn(200, 60), 10, new Red());

 

 

  WorldImage diskText =

      new TextImage(new Posn(200, 100),

          "DiskImage(new Posn(200, 140), 10, new Red())", Color.red);

  WorldImage disk = new DiskImage(new Posn(200, 140), 10, new Red());

 

 

  WorldImage lineText =

      new TextImage(new Posn(220, 180),

          "LineImage(new Posn(200, 220), new Posn(280, 230), Color.green)", Color.green);

  WorldImage line =

      new LineImage(new Posn(200, 220), new Posn(280, 230), Color.green);

 

 

  WorldImage triangleText =

      new TextImage(new Posn(280, 260),

      "TriangleImage(new Posn(250, 300), new Posn(200, 340), new Posn(150, 310), Color.cyan)",

      Color.cyan);

  WorldImage triangle =

      new TriangleImage(new Posn(250, 300), new Posn(200, 340), new Posn(150, 310), Color.cyan);

 

 

  WorldImage ellipseText =

      new TextImage(new Posn(600, 20),

          "EllipseImage(new Posn(600, 60), 60, 20, new Blue())", new Blue());

  WorldImage ellipse = new EllipseImage(new Posn(600, 60), 60, 20, new Blue());

 

  WorldImage frameText =

      new TextImage(new Posn(600, 100),

          "FrameImage(new Posn(600, 120), 60, 20, new Black())", new Black());

  WorldImage frame = new FrameImage(new Posn(600, 120), 60, 20, new Black());

 

  WorldImage ovalText =

      new TextImage(new Posn(600, 180),

          "OvalImage(new Posn(600, 220), 60, 20, new Yellow())", new Yellow());

  WorldImage oval = new OvalImage(new Posn(600, 220), 60, 20, new Yellow());

 

  WorldImage rectangleText =

      new TextImage(new Posn(600, 300),

          "RectangleImage(new Posn(600, 330), 60, 20, Color.orange)", Color.orange);

  WorldImage rectangle = new RectangleImage(new Posn(600, 330), 60, 20, Color.orange);

 

  WorldImage fromFileText =

      new TextImage(new Posn(600, 420),

          "FromFileImage(new Posn(600, 480), fish.png)", Color.black);

  WorldImage fish = new FromFileImage(new Posn(600, 480), "fish.png");

 

  WorldImage combined =

      this.circleText.overlayImages(

          this.circle,

          this.diskText,

          this.disk,

          this.lineText,

          this.line,

          this.triangleText,

          this.triangle,

          this.ellipseText,

          this.ellipse,

          this.frameText,

          this.frame,

          this.ovalText,

          this.oval,

          this.rectangleText,

          this.rectangle,

          this.fromFileText,

          this.fish);

 

 

  public static void main(String[] args) {

 

    WorldCanvas c = new WorldCanvas(800, 600);

 

    WorldImage pic = ExamplesImageDrawings.makeText(new Posn(300, 400), 15);

 

    ExamplesImageDrawings e = new ExamplesImageDrawings();

 

    // show several images in the canvas

    boolean makeDrawing =

        c.show() &&

        c.drawImage(e.combined) &&

        c.drawImage(pic);

  }

}