Frame Based Sprite Animation in Silverlight

Frame Based Sprite Animation in Silverlight

Code for this sample: http://www.bluerosegames.com/silverlight-games-101/samples/wokka.zip

There is more than one way to skin a cat. In Silverlight, many time there are several, with many being bad, and a couple being good. Sometimes there is no clear cut winner as to the best way to do something. This is one of those cases, and I'm presenting one out of many ways of potentially doing frame based sprite animation. Some other ways would be to use an ImageBrush or single images. The technique I have chosen is a combination of a "sprite strip" and a clipping region.

Frame based animation is what they use to develop cartoons, it's been a part of video games since the days of Donkey Kong and earlier. The basic idea is that you flip through a series of images to produce the illusion of motion.

For this sample, let's create a new Silverlight Application called WokkaAnimation, and add the BlueRoseGames.Helpers project to the solution. This is the same one that we used in the previous SpaceRocks sample, or get it from the sample zip file at the top of this post. Then in the WokkaAnimation project, add a reference to BlueRoseGames.Helpers.

Modify the Page.xaml to be 640x480 with a Black background:

<UserControl x:Class="WokkaAnimation.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    Width="640" Height="480">

    <Canvas x:Name="LayoutRoot" Background="Black">

    </Canvas>

</UserControl>

Now create a new UserControl called WokkaSpriteContent.xaml. We need an image to animate, so here it is:

Any resemblance to a certain Atari character is strictly coincidental. Add this image to the project as wokka.png

This image is 500x100, and we'll want the sprite to be 100x100. Change the WokkaSpriteContent.xaml as follows:

<UserControl x:Class="WokkaAnimation.WokkaSpriteContent"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    Width="100" Height="100">

    <Canvas x:Name="LayoutRoot">

        <Image x:Name="image" Source="wokka.png"/>

    </Canvas>

</UserControl>

Then to create this sprite on our main canvas. Here's the Page.xaml.cs:

using System.Windows.Controls;

using BlueRoseGames.Helpers.Sprites;

namespace WokkaAnimation

{

    public partial class Page : UserControl

    {

        WokkaSpriteContent spriteContent;

        Sprite wokka;

        public Page()

        {

            InitializeComponent();

            spriteContent = new WokkaSpriteContent();

            wokka = new Sprite(spriteContent);

            LayoutRoot.Children.Add(wokka);

        }

    }

}

This should look as follows:

Now we need to hide the images that we don't want to see for the current frame. This is done with the Clip property. Most elements accept a Clip property, in our case we'll clip the Canvas that is the parent of the Image in our WokkaSpriteContent.xaml:

<UserControl x:Class="WokkaAnimation.WokkaSpriteContent"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    Width="100" Height="100">

    <Canvas x:Name="LayoutRoot">

        <Canvas.Clip>

            <RectangleGeometry Rect="0,0,100,100"/>

        </Canvas.Clip>

        <Image x:Name="image" Source="wokka.png"/>

    </Canvas>

</UserControl>

There are other options for the Clip property besides a RectangleGeometry, like an Ellipse, Path, or Line.

Now you should only see one frame of the sprite.

For the animation, we can reposition the Image so that the part we want is showing through the Clip region. The formula for the value of the Canvas.Left property is:

left = - (frame index * frame width)

Here's WokkaSpriteContent.xaml.cs after adding an Update method to do this:

using System;

using System.Windows.Controls;

namespace WokkaAnimation

{

    public partial class WokkaSpriteContent : UserControl

    {

        TimeSpan animationDelay = TimeSpan.FromSeconds(.05);

        TimeSpan timeSinceLast = TimeSpan.Zero;

        int currentFrame = 0;

        int delta = 1;

        public WokkaSpriteContent()

        {

            InitializeComponent();

        }

        public void Update(TimeSpan elapsed)

        {

            timeSinceLast += elapsed;

            if (timeSinceLast > animationDelay)

            {

                timeSinceLast -= animationDelay;

                currentFrame+=delta;

                if (currentFrame == 4) delta = -1;

                if (currentFrame == 0) delta = 1;

                image.SetValue(Canvas.LeftProperty, currentFrame * -100d);

            }

        }

    }

}

In this case, we'll cycle from frame 0 to frame 4 then go back to 0, and repeat. The changing of frame will happen every .05 seconds. Now all we have to do is call the WokkaSpriteContent's from a game loop. Here is the finished Page.xaml.cs:

using System.Windows.Controls;

using BlueRoseGames.Helpers.Sprites;

using BlueRoseGames.Helpers.Timers;

namespace WokkaAnimation

{

    public partial class Page : UserControl

    {

        WokkaSpriteContent spriteContent;

        Sprite wokka;

        CompositionTargetGameLoop gameLoop;

        public Page()

        {

            InitializeComponent();

            spriteContent = new WokkaSpriteContent();

            wokka = new Sprite(spriteContent);

            LayoutRoot.Children.Add(wokka);

            gameLoop = new CompositionTargetGameLoop();

            gameLoop.Update += new GameLoop.UpdateHandler(gameLoop_Update);

            gameLoop.Start();

        }

        void gameLoop_Update(object sender, System.TimeSpan elapsed)

        {

            spriteContent.Update(elapsed);

        }

    }

}