[well, it’s been sometime since I wrote a technical blog post, hope you like it]

Today I tried to find out how to animate a spritesheet in a Windows Store app. Turns out that it was much easier than expected! I used the spritesheet found here http://stackoverflow.com/questions/5812752/spritesheet-in-silverlight and some ObjectAnimationUsingKeyFrames code and it worked like a charm.

Some explaining regarding the attached code

1. We’re using a Rectangle and an ImageBrush to display the spritesheet’s data

2. Each “frame” in the spritesheet has a width of 240 pixels and a height of 296 pixels

3. Remember that Storyboards in XAML act as threads that modify a value in a specific amount of time

4. We’re using CompositeTransform (and TranslateX, TranslateY) to “move” the image and “crop” the portion we wish to display. Practically, we’re animating the ((Rectangle.Fill as ImageBrush).Transform as CompositeTransform).TranslateX and TranslateY properties

5. Each value alteration is happening in a DiscreteObjectKeyFrame

6. Iterations of DiscreteObjectKeyFrames take place each 100ms (yes, it can run faster of course)

7. App was tested on ARM device with awesome performance

8. It’s better to include a single image with all the “frames” than each image separately

Feel free to download and play with the source code, don’t hesitate to shoot your questions!