Form-free Desktop Animation

• Download classAnimationForm - 20.46 KB
• Download SmurfWalk - 1.07 MB
• Download floodfill - 35.93 KB

The Illusion

This class uses a borderless form to create animation similar to the popular eSheep desktop pet. The background image of the form camouflages it to blend into the user's desktop so that whatever transparent image you place in front of it appears to stand on the screen without a form.

Background

I got the idea when I read the Awesome Form article a few days ago. Yesterday I started working on it and put Papa-Smurf on the screen. Then this morning I downloaded a Smurfs video off of YouTube and screen-captured what I needed to make an animation out of it. The first implementation used the "opacity =0, copy image behind form, opacity =1" line of attack to grab the background image but though I was using two separate forms and alternating between them, the flickering was unacceptable. So I tried capturing the background image one step ahead by grabbing the screen where the animated character will be after the next move and did this while switching between forms but that didn't resolve the flickering issue much either. Finally I stuck with a single form, captured an initial background image before putting it to the screen and then I started grabbing the edges towards which the character moves and adding them to a bitmap I keep just for the purpose. This required a bit of work to get it to cut just the edge I needed and then paste the portion I wanted to keep next to the newly clipped edge and use that for my next background image to camouflage the form and make it blend into your desktop, but after a bit of trial and error I finally banged it out.

Make Your Own Animation

Like I mentioned above, I downloaded a YouTube video thinking that since the Smurfs all look the same I ought to be able to get enough screen captures to put together a simple animation sequence and I found a four second clip of Papa-Smurf walking from right to left. Using the screen-capture tool that came with my Windows OS along with the WMP to view and pause the video, I captured seven images that made up a decent start and began to cut them out. Cutting them out wasn't too bad because I wrote a FloodFill.cs program that uses a breadth-first-search algorithm to convert a map of Italy into a potential game-map(a separate project) so I merely outlined Papa-Smurf in the seven screen captures and then used the FloodFill.cs program included in this article to get rid of everything around him. The Microsoft-Paint program allows you to flood-fill any region of uniform color but video screen-captures are rarely of uniform color so cleaning up all the junk around the image you want to keep can be a hassle if you don't have this flood-fill program which is less discerning than Microsoft-Paint and just bull-dozes through whatever you don't want. You just define a border to limit the flood using the same color you want that region to be and then set the (0,0) pixel of your image to that color using Microsoft-Paint or whatever other graphics editor you're using. Then load the image into the FloodFill program and click on the area you want to seed the flood-fill algorithm. Unfortunately I haven't bothered figuring out how to save the image once its repainted like this, so you'll either have to write that yourself or just use another screen capture to save the output, like I did.

Once you have your animation images and the region outside your character is set to the clear color which Microsoft-Paint's eraser gives you, then you're all set and ready to go. The sample program I wrote 'SmurfWalk' shows you how to get Papa-Smurf to walk across your screen but you can animate your character anyway you like.

There are a few steps to take before your animation will be up and running. You'll need your images and they'll look best if you surround your character with transparency pixels. Then you instantiate yourself one classAnimationForm object for each character you want on your screen, load the images and you're ready to launch an animation. The animation parameters need to be defined before you tell your dude to go because these hokey cartoon characters are used to taking orders so ya gotta tell'em the where and when of things or else their agents get on the phone and you'll have a problem.

Here's the code I used to put Papa Smurf on the right track :

void startRandomAnimation()
{
    int intXLimit = 0;
    int intYLimit = -SmurfWalk.Properties.Resources.PapaSmurf_Left00.Height;

    if ((int)(10000 * rnd.NextDouble()) % 2 == 0 )
    { // walk left
        Bitmap[] bmpArray = {SmurfWalk.Properties.Resources.PapaSmurf_Left00,
                             SmurfWalk.Properties.Resources.PapaSmurf_Left01,
                             SmurfWalk.Properties.Resources.PapaSmurf_Left02,
                             SmurfWalk.Properties.Resources.PapaSmurf_Left03,
                             SmurfWalk.Properties.Resources.PapaSmurf_Left04,
                             SmurfWalk.Properties.Resources.PapaSmurf_Left05,
                             SmurfWalk.Properties.Resources.PapaSmurf_Left06
                             };
        cLibAnimator.loadImages(bmpArray);
        cLibAnimator.startPosition 
          = new Point(Screen.PrimaryScreen.WorkingArea.Width - 100,
                      Screen.PrimaryScreen.WorkingArea.Height 
                    - SmurfWalk.Properties.Resources.PapaSmurf_Left00.Height);
        int intXStep = -10;
        cLibAnimator.stepSize 
          = new Point(intXStep, 
                     (int)(intXStep * rnd.NextDouble() * 2 - intXStep));
        intYLimit = -bmpArray[0].Height;
        intXLimit = -SmurfWalk.Properties.Resources.PapaSmurf_Left00.Width;
    }
    else
    { // walk right
      // see source code
    }

    if (cLibAnimator.stepSize.Y > 0)
        intYLimit = Screen.PrimaryScreen.WorkingArea.Height;

    cLibAnimator.stepLimitPosition = new Point(intXLimit, intYLimit);
    cLibAnimator.animationDelay = 200;
    cLibAnimator.ImageWidth = (int)(175 * rnd.NextDouble()) + 25;
    cLibAnimator.startAnimation();

    setTimerLaunchRndAnimation_Interval();
}

It's really not that bad. There are the images, of course, then a start location, and a stepSize, an end limit beyond which the animation stops and the timer interval for the delay between steps. Simply said: you tell your actor where to stand (startPosition), you give him directions telling him which way to walk(stepSize) and then you cue your stage crew to stop the take when your star has reached the limit (stepLimitPosition). You can speed things up or slow them down with the animationDelay setting and set the size you want your character to be on the screen. Images, Start location, direction, walking limit and speed and that's it. "Action!" or as we like to say here in the Form-Animation Cartoon Stage Performers Guild "StartAnimation." (Action does sound better but we just don't want to pay their union fees and Melissa Gilbert hasn't returned my calls!)

The setTimerLaunchRndAnimation_Interval() function sets a separate timer which tests if the scene has been completed yet. If it hasn't, then it waits for another 'tick' event handler before testing it again, and when the scene is finally over, it launches Papa-Smurf out for another take. See below:

void tmrLaunchRndAnimation_Tick(object sender, EventArgs e)
  {
    if (!cLibAnimator.animating)
       startRandomAnimation();
  }

There it is: lights, camera!

History

• 27^th November, 2009: Initial post