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