Motion Blur, Part I: Multiple Sprites

March 1, 2001
by Andy Purviance

Inspiration

With the addition of Imaging Lingo in Director 8 a whole new world of possibilities has opened up. So, what better way to explore those possibilities than to attempt to duplicate something found in that familiar, decade-old Photoshop filter called Motion Blur. Sure it's been done before, but now it can be done in Director, and not just with Imaging Lingo.

Demo Movie

The following experiment has three examples:

A typical bouncing sprite for reference,
A motion blur technique using multiple transparent sprites, and
Motion blur using imaging lingo which will be covered in part 2.

Follow the Leader

The first blur trick (using multiple sprites) is the easier of the two possible solutions presented above, and can be done in Director 7 and up. The recipe calls for one sprite to be the leader, followed by at least four partially transparent sprites to create the blur effect. The lead (or center) sprite only needs a script to make it move, I used a modified version of the "Random Movement and Rotation" library behavior.

To start, put all the follower sprites in score channels above their leader so that when spread out they blend to each other and their leader. To determine the blend values I used the scientific method of trial and error: 20% blend for the outside sprites and 50% for the in-betweens.

While the leader is in motion, half the transparent sprites must precede the moving sprite and the other half should trail behind. The distance between the moving sprite and the two farthest blend sprites should increase or decrease with the leader's speed. A basic way to get a speed value is to subtract the current sprite loc from the previous loc; this implies that your unit of time is 1 frame.

speed = prevLoc - sprite (1).loc

But having the speed independent of the frame rate gave better results, so I used the following to get pixels traveled per 1/15 second.

speed = (prevLoc - sprite (1).loc) * the frameTempo / 15.0

You may have noticed in the demo that this doesn't work very well at very high frame rates. This is because at 100 fps the sprite may only move 1 pixel every other frame. In this case you may want to average the difference between several previous positions, this could also be used to correctly blur curved motion.

To space out the transparent sprites you'll need to get a percent of the speed (horizontal and vertical change in pixels) and spread out the sprites along the line of motion. Each transparent sprite can be positioned with something like:

sprite (2).loc = sprite (1).loc + ( 40 * speed) / 100.0
sprite (3).loc = sprite (1).loc + ( 20 * speed) / 100.0
sprite (4).loc = sprite (1).loc + (-20 * speed) / 100.0
sprite (5).loc = sprite (1).loc + (-40 * speed) / 100.0

Of course, having a single sprite behavior that can be dropped onto the leader to control a variable number of followers would be nice. If you make one let me know. In the mean time you can play around with the behavior in the example above, which must be placed on each follower and define the blend and percent of speed. The core of the script goes something like this:

on updateMotion me

  newLoc = sprite (pLeader).loc
  speed = float (leaderPrevLoc - newLoc) * the frameTempo / 15
  case pPosition of
    #leading: newLoc = newLoc - (speed * pDistance) / 100.0
    #following: newLoc = newLoc + (speed * pDistance) / 100.0
  end case
  mySp.loc = newLoc
  mySp.rotation = sprite (pLeader).rotation
  leaderPrevLoc = sprite (pLeader).loc

end

In a future article, I'll show how to use similar techniques with Imaging Lingo to create the same effect.

A sample Director 7 movie is available for download in Mac or Windows format.

Andy Purviance is a freelance game designer, developer, artist and hack animator, specializing in children's interactive content. In a past life he worked for Living Books, Bröderbund, The Learning Co., and Mattel without changing jobs. Since no one else seems to want the domain, he can be reached at www.purviance.com.