Home > Client Technologies, Tutorials > BugCamSmash Dissected part 2 – Make the Bugs Crawl

BugCamSmash Dissected part 2 – Make the Bugs Crawl

December 5, 2009

In part 1 of this series, explaining how BugCamSmash we walked through the creating the bug sprite, placing the bug at a random position on the screen and triggering a Smash animation when a rock sprite collides with the bug sprite.

In this part we will cover creating the Walk animation, rotating the bug towards and walking to a point clicked with the mouse.

Creating the Walk Animation

Blend makes creating new Storyboards for animations very simple, in the Objects Panel click the “+” button, provide a name and you’re in record mode. Creating a walk cycle for a six-legged creature is not so easy. Not until the final step of this project did I go back and refine the Walk animation. If you download the source for this part you will see seem awkward six-legged limp action.

Regardless, I have a few tips on creating this type of animation:

  • When dealing with short keyframe increments, use the Timeline Zoom (small slider below the storyboard editor) to make frame selection easier.
  • Adjust the Center Point of the Transform to make rotations act more like joints rather than rotating from the default center.
  • Hold the Ctrl key down while click and dragging a selection box to select multiple keyframes at a once.
  • Edit with AutoReverse off, this way the when adding new keyframes the position will be held from the last keyframe rather than the first.

Moving the Bug towards the Destination

To make the leg-flopping animation worth it we need to move the bug across the screen to the point that the mouse is clicked. The following code was added to the Bug class providing a public method MoveTo to pass the mouse click point to the bug sprite and a new Storyboard moveTimer was added to ease the bug towards that new point.

Since this is a lengthy bit of code, I’ve added comments inline to explain what is going on.

public void MoveTo(Point pt)
   //save the destination location
   destX = pt.X;
   destY = pt.Y;
   //lower the acceleration because the bug is heading to a new location
   curAcceleration = acceleration; 
   //start the moveTimer and walk cycle animation

//this fires every 17 milliseconds
void moveTimer_Completed(object sender, EventArgs e)

   //get the current position of the bug
   curX = Canvas.GetLeft(this);
   curY = Canvas.GetTop(this);

   //check if the bug needs to move
   if (curX != destX && curX != destY)
      //determine the distance to the destination
      deltaX = curX – destX;
      deltaY = curY – destY; 
      dist = Math.Sqrt((deltaX * deltaX) + (deltaY * deltaY));

      //if the bug is close enough, snap to the destination
      if (speed >= dist)
         curAcceleration = acceleration;
         Canvas.SetLeft(this, destX);
         Canvas.SetTop(this, destY);
         //ease the bug closer to its destination using walking speed and acceleration
         curX -= speed * (deltaX / dist) * curAcceleration;
         curY -= speed * (deltaY / dist) * curAcceleration;
         Canvas.SetLeft(this, curX);
         Canvas.SetTop(this, curY);

         //increase acceleration
         if (curAcceleration < 1)
            curAcceleration += acceleration;

         //begin the timer again to move closer to destination over time


Rotating the Bug towards the Destination

With the movement in place, rotating towards the point was simple. The current bit of code was added right before the “//ease the bug closer to its destination…” code in the moveTimer_Completed method.

The Atan2 function is used to determine the angle using the delta Point and an angle offset.  The offset of 90 degrees was used due to the original orientation of the bug artwork.

void moveTimer_Completed(object sender, EventArgs e)
   if (speed >= dist)
      //rotate towards destination
      destAngle = (Math.Atan2(-deltaY, -deltaX) * radiansFactor / Math.PI) + angleOffset;
      curAngle = rotation.Angle;
      curAngle += (destAngle – curAngle) * curAcceleration;
      rotation.Angle = curAngle;


Now the bug will crawl and rotate towards the point clicked with the mouse and still smashable with the rock from part 1.

The next part will cover empowering the bugs to choose their own destination

  1. February 8, 2010 at 9:15 am

    OP: I might be slow (lord knows I have been told lol) but that made totally no sense what so ever…

    • February 8, 2010 at 5:09 pm

      Hi Rejser,

      I tried to break it into 3 parts: creating a walk cycle animation, the code for moving the bug and then the code to rotate the bug towards the destination.

      Are you confused with a single part or the whole thing?

  1. December 5, 2009 at 11:49 pm
  2. December 6, 2009 at 2:35 am
  3. December 6, 2009 at 2:45 am
  4. December 7, 2009 at 12:41 am
  5. December 7, 2009 at 5:03 am
  6. December 7, 2009 at 8:44 am
  7. December 7, 2009 at 11:16 am
Comments are closed.
%d bloggers like this: