Java: Using image-based paths in two-dimensional animations

In two-dimensional (2D) animations, it is often necessary to move objects in a 2D region in a predefined pattern (sometimes called a control path). This animation needs to solve two problems:

How to specify the control path to follow for an object.

How to move an object along the selected path.

In this article we'll show you how to solve these problems with lossless images, Swing technology, and java-based animation engines. We will first draw the desired animation object orbit, and then use the animation engine to drive the object along the defined control path movement.

You can easily create and process lossless images (described below), and you can fine-tune the technologies that use them as needed. We'll take advantage of a sample animation sequence that describes how to create complex motion sequences with different sets of colors. We will also describe how to work with images to extract the desired control paths, layering control paths and background images, creating objects for animation sequences (Swing GUI components), and driving these objects along defined control paths to complete the animation process.

Note: This article assumes that readers have knowledge of Java general programming, especially Swing GUI constructs. It would be better if you had the experience of using Java 2D to manipulate images in the Java platform.

What is Non-destructive?

A lossless image (lossless image) is an image that retains all image pixels permanently. This image must be able to be stored or restored to the exact same copy as the original.

You can use different applications to initiate lossless images, including Microsoft Paint, Jasc Paint shop Pro, and some custom applications. You can store these images in a file, or you can create them only in memory. The image must be uncompressed, or compressed using a lossless compression algorithm such as zip compression. Typical lossless image formats include Microsoft's Bitmap (BMP) and Portable Network Graphics (PNG) format. lossy compression algorithms, such as those commonly used in GIF (Graphics interchange Format) and JPEG (Joint Photographic Experts Group) files, do not apply to the animation techniques described in this article.

It's all about control.

The most generalized definition of a control path is the behavior to be taken at a particular location and time through any n-dimensional space. We define the control path as the path that one or more objects take when they traverse a 2D space. Represents a control path by mapping the position of an object to the behavior of that location. The program then traverses the defined object, finds the object's behavior at that location in the map, and lets the object perform the specified action. It is time-consuming and error-prone to create such a mapping in code for all control paths-except the simplest-so it is more appropriate to use a drawing program.

The control path can be invariant (time variable), in which case it is static, or it can be changed over time, in which case it is dynamic. If the lossless image is contained in an image file, it is not changed over time, or static. If the lossless image is contained in RAM and is used directly, then it is changed over time, or dynamic. In this article we discuss the static control path. Using the correct editing program makes it easier to generate static images, although the type of behavior you define can affect the process in some way.

Let's get through a crazy night!

A good way to learn animation is to practice it yourself. We will use an animated example to illustrate the concepts discussed in the remainder of this article. Our example is an animated fire escape sequence, and we will generate a control path to represent the escape paths of several characters. We will use some of the floor plans in Figure 1 as background images. You can see the complete background image in Figure 6.

Figure 1. Part of the background image