MMORPG programming in Silverlight Tutorial (13)Perfect moving mechanism

    Now it is time to resolve the issue left in chapter 8, when there are no obstructions between the distinction and original place, the sprite still use A* algorithm to find path, rather than moving between these 2 point directly, as follows:

    So we need to modify moving mechanism. When we click on the map, the sprite’ action is default to move in straight path. And we create a new thread to detect if the sprite meet obstruction during his moving all the time. This time we use CompositionTarget.Rendering, because we have used DispatcherTimer in the sprite’s own animation, we want to distinguish these 2 different threads.

    If the sprite find an obstruction during his moving, he will use A* algorithm until he walk around it. Then he will move straightly again. This process will last until the sprite arrive the distinction.

    All the analysis above can be divided into 3 steps in our demo:

    1st, pick the color of the sprite’s distinction, if it is not an obstruction, move in a straight way; otherwise, no actions.

//record the sprite's distination
Point target;

private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Point p = e.GetPosition(Carrier);

    //if the click point is not an obstruction
    if (PickColor(copyMap, (int)p.X, (int)p.Y, Carrier.ActualWidth) != Colors.Black)
    {
        target = p;

        //move in a straight path
        StraightMove(p); 
    }
}

    2nd, detect obstruction in a new thread all the time:

public MainPage()
{
    InitializeComponent();

    ……    

    CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
}

void CompositionTarget_Rendering(object sender, EventArgs e)
{
    int x = Convert.ToInt32(Canvas.GetLeft(sprite) + spriteCenterX);
    int y = Convert.ToInt32(Canvas.GetTop(sprite) + spriteCenterY);

    var color = PickColor(copyMap, x, y, Carrier.ActualWidth);

    //if meet obstruction, use A* algorithm
    if (color == Colors.Black)
    {
        AStarMove(target);
    }

    //trace the path in white, if not necessary, we need to mark them in our release version
    var rect = new Rectangle();
    rect.Fill = new SolidColorBrush(Colors.White);
    rect.Width = 5;
    rect.Height = 5;
    Carrier.Children.Add(rect);
    Canvas.SetLeft(rect, x);
    Canvas.SetTop(rect, y);
}

    The functions StraightMove and AStarMove are implemented as follows, please be careful the sprite’s coordinate when set Canvas’s Left and Top properties.

private void StraightMove(Point p)
{
    //create storyboard
    storyboard = new Storyboard();

    //create animation frame by frame in X-coordinate
    DoubleAnimation doubleAnimation = new DoubleAnimation()
    {
        From = Canvas.GetLeft(sprite),
        To = p.X - spriteCenterX,
        Duration = new Duration(TimeSpan.FromMilliseconds(1000)),
    };
    Storyboard.SetTarget(doubleAnimation, sprite);
    Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Left)"));
    storyboard.Children.Add(doubleAnimation);

    //create animation frame by frame in Y-coordinate
    doubleAnimation = new DoubleAnimation()
    {
        From = Canvas.GetTop(sprite),
        To = p.Y - spriteCenterY,
        Duration = new Duration(TimeSpan.FromMilliseconds(1000)),
    };
    Storyboard.SetTarget(doubleAnimation, sprite);
    Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));
    storyboard.Children.Add(doubleAnimation);

    //start the storyboard
    storyboard.Begin();
}

private void AStarMove(Point p)
{
    //scale down the coordinate of start and end
    int start_x = (int)(Canvas.GetLeft(sprite) + spriteCenterX) / gridSize;
    int start_y = (int)(Canvas.GetTop(sprite) + spriteCenterY) / gridSize;
    start = new Point(start_x, start_y);

    int end_x = (int)p.X / gridSize;
    int end_y = (int)p.Y / gridSize;
    end = new Point(end_x, end_y);

    //use A* algorithm
    IPathFinder pathFinder = new PathFinderFast(matrix);
    pathFinder.Formula = HeuristicFormula.Manhattan;
    pathFinder.HeavyDiagonals = true;
    pathFinder.HeuristicEstimate = 0;
    List<PathFinderNode> path = pathFinder.FindPath(start, end);

    //define keyframe array
    Point[] framePosition = new Point[path.Count];
    for (int i = path.Count - 1; i >= 0; i--)
    {
        //fill keyframe array from the start of the path array, and enlarge the coordinate
        framePosition[path.Count - 1 - i] = new Point(path[i].X * gridSize, path[i].Y * gridSize);
    }

    //create storyboard
    Storyboard storyboard = new Storyboard();
    int cost = 100; //spend 100ms per grid(20*20)            

    //create animation frame by frame in X-coordinate
    DoubleAnimationUsingKeyFrames keyFramesAnimationX = new DoubleAnimationUsingKeyFrames();
    keyFramesAnimationX.Duration = new Duration(TimeSpan.FromMilliseconds(path.Count * cost));  //all the spending time = path.Count * cost
    Storyboard.SetTarget(keyFramesAnimationX, sprite);
    Storyboard.SetTargetProperty(keyFramesAnimationX, new PropertyPath("(Canvas.Left)"));

    //create animation frame by frame in Y-coordinate
    DoubleAnimationUsingKeyFrames keyFramesAnimationY = new DoubleAnimationUsingKeyFrames();
    keyFramesAnimationY.Duration = new Duration(TimeSpan.FromMilliseconds(path.Count * cost));
    Storyboard.SetTarget(keyFramesAnimationY, sprite);
    Storyboard.SetTargetProperty(keyFramesAnimationY, new PropertyPath("(Canvas.Top)"));

    for (int i = 0; i < framePosition.Count(); i++)
    {
        //add keyframe in X-coordinate
        LinearDoubleKeyFrame keyFrame = new LinearDoubleKeyFrame();

        keyFrame.Value = i == 0 ? Canvas.GetLeft(sprite) : (framePosition[i].X - spriteCenterX);
        keyFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(cost * i));
        keyFramesAnimationX.KeyFrames.Add(keyFrame);

        //add keyframe in Y-coordinate
        keyFrame = new LinearDoubleKeyFrame();
        keyFrame.Value = i == 0 ? Canvas.GetTop(sprite) : (framePosition[i].Y - spriteCenterY);
        keyFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(cost * i));
        keyFramesAnimationY.KeyFrames.Add(keyFrame);
    }

    storyboard.Children.Add(keyFramesAnimationX);
    storyboard.Children.Add(keyFramesAnimationY);

    //start the storyboard
    storyboard.Begin();
}

    OK, press Ctrl+F5, we can see the effect as we expected before:

 

    Notice, to trace the sprite's moving, we add many white point in the canvas, which will reduce the performance of the game engine. So in the actual programming, please mark it if not necessary, you can find it in the method CompositionTarget_Rendering.

Summary: This chapter introduce a perfect moving animation. Our game engine is more and more robust.

    Next chapter, I will introduce how to Object-Oriented Programming in Silverlight. I will separate the sprite from the main logic. 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