Silverlight how to: Frame-by-Frame Animation

January 9, 2008 @ 8:28 pm in Microsoft, Silverlight

For the past few weeks, Terralever has been developing our second game using the Silverlight framework. Our first, Zero Gravity was a great success and highlighted the power that Silverlight can bring to casual gaming development. For years, Terralever has been developing games in Flash and is very fortunate to have some incredible flash interactive developers.

One of the essential elements found in all interactive games is frame-by-frame animations. When a character moves across the screen that movement is a combination of repositioning the character as an element, combined with a sequence of character movements (the animation).

Now I don’t pretend to be a Flash developer, but what I have been told is that creating Frame-by-Frame animations in flash is very easy. You simply create a key frame and insert an object on to that frame. The combination of all key frames produces the animation sequence.

In Silverlight / Blend 2 December Preview creating this type of animation sequence is more difficult. Storyboards in Silverlight are independent of any canvases that will contain the individual animation sequences. Creating a key frame in Silverlight, does not generate a new canvas. In our first Silverlight game we achieved frame-by-frame animations by stacking a series of frames (canvases) and modifying the objects opacity property to appears as if we moved through the sequence. This technique was extremely difficult to work with in blend.

We figured there had to be a easier way. Instead of stacking the frames on top of themselves and using opacity, I decided to position them adjacent to each other and discreetly move the parent canvas from right to left. Think of it like an image strip when the first image starts at X=0 and each adjacent frame is positioned (X+FrameWidth). The result was the canvas shown in Figure 1.

Once the frames are positioned in the correct sequence, I created a Canvas.Clip to clip the main canvas at position 0,0 with a width and height equal to the size of each frame. This clip will mask all of the adjacent frames when we play the animation.

The next step was to create the animation storyboard. For my “less than” creative animation I generated 8 frames, each with a very simple vector. My storyboard will require 1 key frames per frame of the sequence, plus one additional key frame to get back to the starting position. By default, Blend will “tween ” between each key frame. To achieve a discrete transition, you must right click on the frame and select “Hold In “. This selection will change the xaml to a “DiscreteDoubleKeyFrame ” from a “SplineDoubleKeyFrame “. Once you have created a key frame you must move the strip “canvas” to its desired position. Figure 2 shows what the completed animation sequence looks like in the designer.