IPT - A Virtual Approach IPT A Virtual Approach by Peter Whitehouse
Quick Links:
Information and Intelligent Systems Social and Ethical Implications Human Computer Interaction Software and Systems Engineering eXercise Files Course Outline and Assessment A-Z of Geeky Acronyms Terrace Work Program 2004 Sillybus FAQ = Frequently Asked Questions Help

a wobble-botThe Wobble-Bot

One approach to SPRITE-BASED Animation

the wobblebot form

Using a number of 'frames', animation is achieved by sequentially swapping these frames into a target TImage using a timer, giving the illusion of cell-based animation.

When you combine this with timer based movement across the form, the 'wobble-bot' appears to walk along.

This technique has many advantages over the 'LOADFROMFILE' method used in previous projects including smoother/faster refresh rates. You also no longer need to store the frames in the same directory as your project as they are are actually compiled INTO the .exe

This project relies on an ordered naming convention for the individual frames, and uses a STRING to store the frame order

The Components:


You must 'harvest' the graphics (windows .bmp files) needed for this project, to do this, follow each of the following links, saving them AS IS into your working directory...

a.bmp | b.bmp | c.bmp | d.bmp | e.bmp | f.bmp | g.bmp | h.bmp | i.bmp | j.bmp

What follows is a list of components needed for this application, along with some properties that need to be set for those components. Be systematic and TIDY placing your components.

  • Change the NAME of the form to BackGround, change it's AUTOSCROLL property to False
  • From the ADDITIONAL VCL, place an IMAGE on the form, change it's NAME to a, shrink it a bit, double-l-click on it and load a.bmp into it.
  • Do the same thing for images b to j. Note: their position on the form and their size is largely irrelevant, I suggest you order them and place them out of the way.
  • Place one final Image on the form, change it's NAME to Robot, STRETCH property to True and load a.bmp into it (just so you don't misplace it later). This image is the one that will appear to 'walk' later.
  • From the SYSTEM VCL, place a TIMER, change it's NAME to AnimTimer, change the INTERVAL to 10
  • From the SYSTEM VCL, place another TIMER, change it's NAME to WalkTimer, change the INTERVAL to 50
  • From the STANDARD VCL, place a BUTTON, change it's NAME to Quit and position it conveniently on the form.
  • From the STANDARD VCL, place a SCROLLBAR, change it's NAME to walkSpeed, it's MAX to 1000, it's MIN to 10 - this component will eventually control how quickly the image is moved across the form
  • From the STANDARD VCL, place a SCROLLBAR, change it's NAME to refreshRate, it's MAX to 1000, it's MIN to 10 - this component will enventually control the frame rate

Other Objects

For this project, I have chosen a TYPED CONSTANT (although this is essentially the same as a VAR and corresponding assignment statement, it is more compact). We also need a 'counter' variable that can be used as the string index (allowing us to access each letter of the string in turn). Notice the string characters correspond to the NAME and ORDER of frames placed on the form earlier.


	{$R *.DFM}
	const place: string = 'abcdefghij';
	var   counter : byte;

The Event Handlers

There are a number of simple event handlers that are necessary for the successful operation of this project.

Control Name Event Event Handler Code
Quit onClick
BackGround onCreate
  counter := 1
AnimTimer onTimer
var loop : byte;
  for loop := 0 to componentCount-1 do
      if components[loop] is TImage 
         then if (components[loop] as TImage).name =place[counter]
                 then robot.picture := (components[loop] as TImage).picture;
    counter := counter + 1;
    if counter > 10
      then counter := 1
WalkTimer onTimer
  robot.left := robot.left + 5 {pixels};
  if robot.left > clientWidth {then the robot has left the screen}
    then robot.left := -robot.width {so send it back to the start again}
walkSpeed onChange
  walktimer.interval := walkSpeed.position
refreshRate onChange
  animtimer.interval := refreshRate.position

Each 'tick' of the AnimTimer causes the handler to scan all components on the form, looking for the image that has a name the same as the next letter in the string. When it finds it, it simply copies that image.picture into robot.picture

Final Touches

COMPILE the program to check for errors of 'SYNTAX', fix any that show, then RUN it to check it works correctly.

You can then change the VISIBLE property of each of the stored frames to FALSE, or move them to some unused section of the form (remember NOT to delete them though)

You will find that the animation is more convincing if the BACKGROUND is set to match the colour of the sprite background (ie. clBlack).

This technique is suited to WMF's also, with the advantages of transparent background and (in some cases) display performance enhancement.

A completed Screensaver version of the Wobblebot is available for downloading from wOnKoSOFT.


©Copyright t 1992..2018+. Edition 26.150117
Creative Commons License
This work is licensed under a
Creative Commons Attribution-NonCommercial-ShareAlike 2.1 Australia License