MMORPG programming in Silverlight Tutorial (6)Implement the sprite's 2D animation (Part III)

   In Chapter 5, We study how to use Image’s Clip and RenderTransform to create animation for sprite.

   Now, I will introduce a new method base on WriteableBitmap to cut the image. You can use it as follows:

BitmapImage bitmap = newBitmapImage(newUri(@"/Images/Role/sprite.png", UriKind.Relative));

Imageimage = newImage();
image.Source = bitmap;

WriteableBitmap wb = newWriteableBitmap(150, 150);

wb.Render(image, newTranslateTransform() { X = -150 * j });
wb.Invalidate();

sprite.Source = wb;

    The code snippet above show the simplest syntax how to use WriteableBitmap to get part of the large picture. But in our project, we always find this snippet will throw an exception because the large picture still not be loaded when we invoke WriteableBitmap’s Render method. The solution is that we register bitmap_ImageOpened method to Image’s ImageOpened event, and invoke wb.Render() in this method. We refract the code as follows:

public partial class MainPage : UserControl
{
    private int count = 1;
    private Image sprite;
    ImageSource[] frames = new ImageSource[10];

    public MainPage()
    {
        InitializeComponent();

        sprite = new Image();
        BitmapImage bitmap = new BitmapImage(new Uri(@"/Images/Role/sprite.png", UriKind.Relative));
        bitmap.ImageOpened += new EventHandler<RoutedEventArgs>(bitmap_ImageOpened);

        Carrier.Children.Add(sprite);

        sprite.Visibility = Visibility.Collapsed;
        sprite.Source = bitmap;
    }

    void dispatcherTimer_Tick(object sender, EventArgs e)
    {
        sprite.Source = frames[count];
        count = count == 7 ? 0 : count + 1;
    }

    void bitmap_ImageOpened(object sender, RoutedEventArgs e)
    {
        sprite.Source = sender as BitmapImage;

        for (int j = 0; j < 10; j++)
        {
            WriteableBitmap wb = new WriteableBitmap(150, 150);
            wb.Render(sprite, new TranslateTransform() { X = -150 * j });
            wb.Invalidate();

            frames[j] = (ImageSource)wb;
        }

        DispatcherTimer dispatcherTimer = new DispatcherTimer();
        dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);
        dispatcherTimer.Interval = TimeSpan.FromMilliseconds(150); 
         dispatcherTimer.Start();

        sprite.Source = frames[count];
        sprite.Visibility = Visibility.Visible;
    }
}

 

    You can also find I set up an array to store all the small pictures.

ImageSource[] frames = new ImageSource[10];

It is convenient for you to reuse them in the animation again and again.

    Maybe you want to know when Image’s ImageOpened event was fired. I have tried, and find it occurs when you set Image’s Source property:

sprite.Source = bitmap;

    If you don’t believe it, please mark this sentence, and check if the method bitmap_ImageOpened will be executed.   

    The other code above is the same as last chapter, so I won’t spend time on it. Please refer to (5)Implement the sprite’s 2D animation (Part II) for details.   

    OK, press Ctrl+F5, you will find the sprite can run now, the effect is the same as the previous chapter.

    Now, let us compare these 2 techniques, Clip and WriteableBitmap. The former I introduced in the last chapter, is easy to use, but I am not sure if you have found, each time the sprite change to next frame, we must do the same Clip action on the large picture. The performance is low.

    The latter, WriteableBitmap, because I store all the small image into the memory, so we don’t need to do the same action on the large picture again and again. Although it is not convenient in coding, it is more flexible.

 

Summary: This chapter introduce the 3rd method to control object’s own animation. WriteableBitmap is so powerful that, it is widely used in animation, I will introduce this technique in the following chapters.

    Next chapter, I will implement sprite’s animation, both moving in distance and its own animation. Please focus on it.

    Chinese friend, you can also visit this Chinese blog if you feel difficult to read English, http://www.cnblogs.com/alamiye010/archive/2009/06/17/1505346.html, part of my article is base on it.

    Demo download: http://silverlightrpg.codeplex.com/releases/view/40978