MMORPG programming in Silverlight Tutorial (1)Animate the object (Part I)

    Now, there are so many articles to introduce how to create animation in XAML by Blend, so I don’t plan to say more on this topic. It make many people puzzled “Silverlight is just Microsoft’s Flash, no difference”. If you follow this style, it will make no sense.
    We must do something to show all the potential of the Silverlight in game domain. So in my tutorial, I will use C# rather than XAML as possible as I can. It is more flexible in game architecture than Flash; at last, all the tutorials will make up a game engineer, which is my purpose that I want to achieve.

    Let’s return to the topic of this article, “How to create animation on object?”

    In Silverlight, there are 3 methods to create animation.

    1) Storyboard
    This method is recommended by Microsoft, so I introduce it at first.
    Now I will do a demo to show how to use Storyboard in C#.

    1st, create a Silverlight project, open the MainPage.xaml, modify the xaml file as follows:

<UserControl x:Class="SilverlightTutorialApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    >
    <Canvas x:Name="Carrier" Width="800" Height="600" Background="Silver" MouseLeftButtonDown="Carrier_MouseLeftButtonDown" />
</UserControl>

    In this snippet code, I create a canvas named Carrier, and set its dimension to 800 * 600. I set its background to Silver, donot remove the background color, otherwise, if there is nothing in the canvas, it’s MouseLeftButtonDown event won’t be hired.

    Why I use Canvas as my container? Because canvas can do absolute positioning, it is convenient to handle object’s moving on it.

    2nd, create dynamic object in the code-behind file MainPage.xaml:

private Rectangle rect;
public MainPage()
{
    InitializeComponent();
    rect = new Rectangle()
    {
        Fill = new SolidColorBrush(Colors.Red),
        Width = 50,
        Height = 50,
        RadiusX = 5,
        RadiusY = 5
    };
    Carrier.Children.Add(rect);
    Canvas.SetLeft(rect, 0);
    Canvas.SetTop(rect, 0);
}

    Here I create a 50*50 pixels rectangle with 5*5 round angle, and add it in the Carrier as its child control. I use Canvas.SetLeft and Canvas.SetTop to init its position in the Carrier.

    3rd, I create animation in the MouseLeftButtonDown event, the effect is the rectangle will move to wherever we click on the canvas:

private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    //get the position where mouse click
    Point p = e.GetPosition(Carrier);
    //create storyboard 
    Storyboard storyboard = new Storyboard();
    //create animation in X direction
    DoubleAnimation doubleAnimation = new DoubleAnimation()
    {
        From = Canvas.GetLeft(rect),
        To = p.X,
        Duration = new Duration(TimeSpan.FromMilliseconds(500))
    };
    Storyboard.SetTarget(doubleAnimation, rect);
    Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(@"(Canvas.Left)"));
    storyboard.Children.Add(doubleAnimation);

    //create animation in Y direction
    doubleAnimation = new DoubleAnimation()
    {
        From = Canvas.GetTop(rect),
        To = p.Y,
        Duration = new Duration(TimeSpan.FromMilliseconds(500))
    };
    Storyboard.SetTarget(doubleAnimation, rect);
    Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));
    storyboard.Children.Add(doubleAnimation);
    //start the animation
    storyboard.Begin();
}

    From the code above, I get the mouse click position in the Carrier, and assign it to the variable p. Then I create a storyboard and 2 DoubleAnimation objects, one is the animation in X direction, the other is in Y direction. And then I add these 2 DoubleAnimation objects into the storyboard. Finally, I use the storyboard’s Begin method to make the rectangle moving from its original position to the mouse click position.

    Please press Ctrl+F5 to run the project, click anywhere in the window, you will find the rectangle move as we expected before.

    Summary: Storyboard is the Vector animation base on timeline, it is different from the traditional animation by switching pictures. Its principle is base on change the object’s property all the time.

    Next chapter, I will introduce the 2nd method to create 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/1505332.html, part of my article is base on it.

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