How to do frame animation with the TImageList class

Problem/Question/Abstract:

How to do frame animation with the TImageList class

Answer:

As users become more savvy, they begin to expect more sophisticated features from every software package they buy. Accordingly, if the applications you produce don't seem up-to-date, users probably won't be satisfied with your software. One way to make your applications more visually appealing is by using attractive graphics, and even animation. Unfortunately, animation has become something of a black art within programming circles, and many competent programmers avoid it because the realm of motion graphics appears to be so complex.

Last month, we introduced you to the TImageList class and demonstrated how it can help display non-rectangular bitmaps ("Drawing Non-Rectangular Bitmaps with a TImageList"). Delphi 2.0 defines a new version of the TImageList class, which encapsulates behavior for the new windows Image List common control. In a future issue, we'll discuss the relative merits of the new TImageList class. In this article, we'll show how you can use the Delphi 1.0 TImageList class to perform a simple type of animation called frame animation.



Animation clarification:

There are two predominant forms of animation that most computer programs currently use - frame animation and cast animation. Of the two, cast animation is more complex, but also more flexible.

In frame animation, you prepare a series of entire scenes and show those scenes in quick succession to give the illusion of movement. This is how cartoon animation works and how videotape stores picture information.

In contrast, cast animation separates information about the background from the moveable elements. This arrangement allows you to create a small image (called a sprite) that moves around on a background, without recording in advance all of the possible positions, as you would do with frame animation.



Framed, and enjoying it

Delphi provides several types of components and objects that you'll commonly use to display and manipulate graphic images. As you might expect, some of these components and objects are very useful for displaying graphics, but most of them are inappropriate for such complex tasks as frame animation.

For example, Image components make it simple to display a single bitmap image. However, they're not necessarily better for animation than PaintBox components, which use the Canvas of their parent forms for drawing purposes.

Similarly, a TBitmap object is useful for storing a single image, but you wouldn't want to create a separate TBitmap object for each frame of an animation sequence. If you did, you'd need to track every object, each of which requires its own color palette, thus wasting memory. (This is particularly true if you're displaying 256-color bitmaps on a system that has a Super VGA video adapter.)

The TImageList class provides a different set of benefits. Since it's designed to manage a set of identically-sized bitmap images, the TImageList class stores several images in an internal TBitmap object and, therefore, uses the same palette for all of them. As a result, the TImageList class is an ideal core element of frame- animation code. For more information on the internal workings of the TImageList class, see "How TImageList objects manage bitmaps".

To perform frame animation, you'll add each frame image to a TImageList object. Then, you'll use the TImageList object's Draw() method to draw one of the specific bitmaps the list contains.

The Draw() method accepts three parameters: the destination Canvas, the horizontal and vertical coordinates of the top-left corner within the source image, and the index of the source image within the list. By simply changing the value of the index parameter, you can choose to draw any of the images the TImageList object contains.

By the way, when you've finished using a TImageList object, you're responsible for releasing its memory by calling its Free method. The only remaining problem is how to eliminate some of the all-too-common flicker that sometimes occurs when you call the Repaint or Refresh methods.



My friend flicker

If you've ever considered animation programming, you're probably familiar with the term double-buffering. If you've never heard the term, don't worry; you're not alone.

Because it takes time to load an image from a file or compose an image by using various graphics operations, you don't want to perform these operations directly onscreen. If you do, you'll probably notice a significant amount of flicker in the displayed image, since Image and Bitmap components will automatically repaint themselves when you modify them.

In double-buffering, you maintain a temporary location - such as a TBitmap object that isn't visible - for building the new image you want to display. When you're ready to display the image, you can simply use the CopyRect() method of the TBitmap class to quickly transfer the information from the invisible TBitmap object (typically called an offscreen bitmap) to a PaintBox or Image component. Since the CopyRect() method is very fast (relatively speaking), you'll reduce or eliminate visible flicker when you update the image onscreen.

Since the TImageList class maintains its own internal TBitmap object (to store all the images), it has exactly what we need to store multiple images and double-buffer them! Since we'll probably want to use the TImageList class with a PaintBox component on a regular basis, let's consider what we'll need to do to combine these elements into a single new animation component.



The "Animator"

Since our animation component is primarily a device for displaying a series of bitmap images, we'll derive the TAnimator class from the TPaintBox class. By doing so, the TAnimator objects will automatically acquire the benefits of a PaintBox component, such as being able to use its owner's Canvas instead of having to create an additional Canvas of its own.

Within the TAnimator class, we'll need to create a TImageList object to contain all the animation images. To simplify the interface for this component, we'll assume that any programmer using this component will understand the basics of the TImageList class. Accordingly, we'll make this object accessible by creating a runtime, read- only property named ImageList, which you can use to access the methods of the internal TImageList object.

Since the size of the images you want to display may not be the same as the initial size of the animation component, we'll create a ResizeImageList() method. This method will destroy the current internal TImageList and create a new one based on the size parameters that you pass to the method.

Next, we'll provide a public method named Animate, which tells the animation component to advance to the next frame and draw it. When we do so, we must avoid embedding a Timer component or any other type of time-related interval code, because different applications will have different timing requirements.

For instance, if you're creating animation within an about box, you could place a simple timer in the code that counts the number of WM_IDLE messages the application receives. In contrast, if your application is a game that will run under Windows 95 or Windows NT, you may want to trigger the animation sequence using a thread and the SleepEx() function or the ThreadedTimer component we showed you how to build last month ("Creating a Threaded Timer for Delphi 2.0").

Appropriately, we've added some code that allows you to use this component under Delphi 2.0. In a future issue, we'll examine the full capabilities of the new TImageList class. For now, recognize that the new version provides all the capabilities of the old version if you configure it properly.

Last but not least, we'll provide a runtime, read-only property named CurrentIndex, which will identify the image the animation component is currently displaying. Now let's build the Animator component. Afterwards, we'll create a simple animation form that uses the Animator component to display a series of bitmaps.



Animation preparation

To begin, use the Component Expert dialog box to create a new component source file. Enter TAnimator as the Class Name, TPaintBox as the Ancestor Type, and DelphiJournal as the Palette Page. Click OK to create the new source file.

When the new source file appears, enter the appropriate code from Listing A. (For each listing in this article, we've highlighted in bold the code you'll need to enter.) When you finish entering the code, save the file as ANIMATOR.PAS.

{Listing A: ANIMATOR.PAS }

unit Animator;

interface

uses
  SysUtils, WinTypes, WinProcs, Messages, Classes, Graphics, Controls, Forms, Dialogs, ExtCtrls;

type
  TAnimator = class(TPaintBox)
  private
    { Private declarations }
    FImageList: TImageList;
    FCurrentIndex: Integer;
  protected
    { Protected declarations }
    procedure Paint; override;
  public
    { Public declarations }
    constructor Create(AOwner: TComponent); override;
    destructor Destroy; override;
    procedure Animate;
    procedure ResizeImageList(X, Y: Integer);
    property ImageList: TImageList
      read FImageList;
    property CurrentIndex: Integer
      read FCurrentIndex;
  published
    { Published declarations }
  end;

procedure Register;

implementation

constructor
  TAnimator.Create(AOwner: TComponent);
begin
  inherited Create(AOwner);
{$IFDEF VER80} {If Delphi 1.x}
  FImageList := TImageList.Create(Width, Height);
{$ELSE} {If Delphi 2.0}
  FImageList := TImageList.CreateSize(Width, Height);
  FImageList.Masked := False;
{$ENDIF}
  FCurrentIndex := 0;
end;

destructor
  TAnimator.Destroy;
begin
  FImageList.Free;
  inherited Destroy;
end;

procedure TAnimator.ResizeImageList(X, Y: Integer);
begin
  FImageList.Free;
{$IFDEF VER80} {If Delphi 1.x}
  FImageList := TImageList.Create(X, Y);
{$ELSE} {If Delphi 2.0}
  FImageList := TImageList.CreateSize(X, Y);
  FImageList.Masked := False;
{$ENDIF}
end;

procedure TAnimator.Animate;
begin
  Inc(FCurrentIndex);
  if FCurrentIndex >= FImageList.Count then
    FCurrentIndex := 0;
  Paint;
end;

procedure TAnimator.Paint;
begin
  if FImageList.Count > 0 then
    FImageList.Draw(Canvas, 0, 0, FCurrentIndex)
  else
    inherited Paint;
end;

procedure Register;
begin
  RegisterComponents(`Test', [TAnimator]);
end;

end.



Next, use the Install Components dialog box to add the ANIMATOR.PAS file to the list of Installed Units. Click OK to compile the ANIMATOR.PAS file and link it to the new version of the Component Library.



Animation demonstration

To see how the Animator component works, you must first create a new blank form project. Then, place a Timer component, an Image component, and an Animator component on the form.

Next, create event-handling methods for the form's OnCreate event property and the Timer component's OnTimer property. Now enter the appropriate source code from Listing B. When you finish, save the form file as ANIMATE.PAS, and save the project as ANIM_P.DPR.

{Listing B: ANIMATE.PAS }

unit Animate;

interface

uses
  SysUtils, WinTypes, WinProcs, Messages, Classes, Graphics, Controls, Forms,
  Dialogs, ExtCtrls, StdCtrls, Buttons, Animator;

type
  TForm1 = class(TForm)
    Timer1: TTimer;
    Image1: TImage;
    Animator1: TAnimator;
    procedure FormCreate(Sender: TObject);
    procedure Timer1Timer(Sender: TObject);
  private
    { Private declarations }
    MyList: TImageList;
    ImageIndex: Integer;
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.DFM}

procedure TForm1.FormCreate(Sender: TObject);
var
  WorkBmp: TBitmap;
  Offset: Integer;

  procedure AddImage;
  begin
    Image1.Picture.Bitmap.Width := WorkBmp.Width + Offset;
    Image1.Picture.Bitmap.Canvas.Draw(Offset, 0, WorkBmp);
    Animator1.ImageList.Add(WorkBmp, nil);
    Inc(Offset, WorkBmp.Width);
  end;

begin
  WorkBmp := TBitmap.Create;
  WorkBmp.LoadFromFile(`C: \delphi\images\buttons\arrow1d.bmp');
    Offset := 0;
    Animator1.ResizeImageList(WorkBmp.Width, WorkBmp.Height);
    AddImage;
    WorkBmp.LoadFromFile(`C: \delphi\images\buttons\arrow1dl.bmp');
    AddImage;
    WorkBmp.LoadFromFile(`C: \delphi\images\buttons\arrow1l.bmp');
    AddImage;
    WorkBmp.LoadFromFile(`C: \delphi\images\buttons\arrow1ul.bmp');
    AddImage;
    WorkBmp.LoadFromFile(`C: \delphi\images\buttons\arrow1u.bmp');
    AddImage;
    WorkBmp.LoadFromFile(`C: \delphi\images\buttons\arrow1ur.bmp');
    AddImage;
    WorkBmp.LoadFromFile(`C: \delphi\images\buttons\arrow1r.bmp');
    AddImage;
    WorkBmp.LoadFromFile(`C: \delphi\images\buttons\arrow1dr.bmp');
    AddImage;
    ImageIndex := 0;
    WorkBmp.Free;
end;

procedure TForm1.Timer1Timer(Sender: TObject);
begin
  Animator1.Animate;
end;

end.

Then, double-click on the Image component, and load one of the button bitmaps from the \DELPHI\IMAGES\BUTTONS directory. It doesn't matter which button, since we'll replace it with the images of several other button bitmaps.

Now, build and run the application. When the main form appears, you'll notice the arrow images spinning slowly in the Animator component's area. Immediately below, you'll notice that we display all the different button bitmaps in the Image component, as shown in Figure A.

In fact, this is the way the TImageList class stores the bitmap images that it draws in the Animator component's area. As the Timer component's interval expires, it calls the Animate method of the Animator com-ponent, which, in turn, draws the next image from its internal bitmap.



Conclusion

Even simple frame animation can be a complex undertaking if you manage all the display tasks yourself. Fortunately, the TImageList class takes care of many details for us, such as double-buffering image information and storing all the images in a single bitmap. By wrapping a TImageList object and the capabilities of the TPaintBox class together in a new component, as we've shown here, you can easily add an animation sequence to your next Delphi project.