Silverlight Games 101

Write games in Silverlight 2 using C# by Bill Reiss
Our upcoming Silverlight book for beginners (includes a great chapter on game development in Silverlight!) Hello! Silverlight 2 with Dave Campbell, available online now!



Pages

    Recent posts

    Navigation

    Archive

    Blogroll

      Tampa Divorce Lawyer

      North of Tampa in Lutz, Florida. A Tampa Divorce Lawyer focusing on family, divorce, and real estate law.

      Disclaimer

      The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

      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:

      wokka

      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:

      wokkacanvas

      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);
              }
          }
      }
      Posted: Jan 10 2009, 05:57 by Bill Reiss | Comments (76) RSS comment feed |
      • Currently 1/5 Stars.
      • 1
      • 2
      • 3
      • 4
      • 5
      Filed under:

      Comments

      Comments are closed