MMORPG programming in Silverlight tutorial (7) Perfect Animation

In the last 6 chapters, we cover your techniques, including the object moving from one place to another one, and the sprite's own animation. this chapter I will merge both of them, to implement sprite's animation perfectly.

Let's merge the code from Chapter 1 and chapter 4, as follows:

 Public partial class  Mainpage : Usercontrol { Private int Count = 1; Private  Image Sprite; Private  Storyboard Storyboard;Public Mainpage () {initializecomponent (); sprite = New  Image () {Width = 150, Height = 150}; carrier. Children. Add (sprite ); Canvas . Setleft (sprite, 0 ); Canvas . Settop (sprite, 0 ); Dispatchertimer Dispatchertimer = New  Dispatchertimer (); Dispatchertimer. Tick + = dispatchertimer_tick; dispatchertimer. interval = Timespan . Frommilliseconds (200); dispatchertimer. Start ();} Void Dispatchertimer_tick ( Object Sender, Eventargs E) {Sprite. Source = New  Bitmapimage (( New  Uri ( @ "/Images/role /" + Count + ". PNG" , Urikind . Relative); Count = COUNT = 7? 0: Count + 1 ;} Private void Carrier_mouseleftbuttondown (Object Sender, Mousebuttoneventargs E ){ Point P = E. getposition (carrier); move (p );} Private void Move ( Point P) {storyboard = New  Storyboard (); // Create Animation in X coordinate  Doubleanimation Doubleanimation = New  Doubleanimation () {From =Canvas . Getleft (sprite), to = p. x, duration = New  Duration ( Timespan . Fromseconds (1 ))}; Storyboard . Settarget (doubleanimation, Sprite ); Storyboard . Settargetproperty (doubleanimation, New  Propertypath ( "(Canvas. Left )" ); Storyboard. Children. Add (doubleanimation ); // Create Animation in Y coordinate Doubleanimation =New  Doubleanimation () {From = Canvas . Gettop (sprite), to = P. Y, duration = New  Duration ( Timespan . Fromseconds (1 ))}; Storyboard . Settarget (doubleanimation, Sprite ); Storyboard . Settargetproperty (doubleanimation, New  Propertypath ( "(Canvas. Top )" ); Storyboard. Children. Add (doubleanimation ); If (! Resources. Contains ( "Rectanimation" ) {Resources. Add ( "Rectanimation" , Storyboard );} // Play the animation Storyboard. Begin ();}}

Press Ctrl + F5, we can see the Sprite is running when we click on somewhere in the canvas. but there is still a flaw, when the sprite arrived the distinction, the sprite's own animation doesn't stop. so does the init of the game. we must modify dispatchertimer_tick method to prevent these 2 scenarios, as follows:

 Void Dispatchertimer_tick (Object Sender, Eventargs E ){ If (Storyboard = Null | Storyboard. getcurrenttime () = Timespan . Fromseconds (1) {Sprite. Source = New  Bitmapimage (( New  Uri ( @ "/Images/role/1.png" , Urikind . Relative )));} Else {Sprite. Source =New  Bitmapimage (( New  Uri ( @ "/Images/role /" + Count + ". PNG" , Urikind . Relative);} COUNT = 7? 0: Count + 1 ;}

In the first condition, we judge if it is the init of the game. In this stage, the storyboard is null.

 
If(Storyboard =Null|
 

 

In the second condition, we judge if the sprite arrive the distinction. We compare the interval of the animation in the method move, if it is equal to 1 second, it means the animation stopped.

 
(Storyboard! =Null& Amp; storyboard. getcurrenttime () =Timespan. Fromseconds (1 )))
 

 

In both of these 2 scenarios above, we set the sprite's image to 1.png. It is the sprite's standing state in all the 8 pictures:

 

OK, let's press Ctrl + F5 again, this time the effect is better than before, but still exists 2 problems.

1. when we click on the canvas, supposed the point is (300,200), we find the sprite doesn't arrive this point, we set the top left corner of the picture to the point (300,200 ). there is still a distance from the root of the sprite. how to position accurately in the game? I will resolve it in the following chapters.

2. now the animation is only suitable for the sprite to move from left to right. if the sprite to move from right to left, the animation is the same, it looks like unreasonable, so does the scenario in other directions ctions. so we must add more pictures in 8 directions ctions to simulate all the case. I will introduce how to design this effect.

 

 

Summary: This chapter introduce a perfect animation by merging 2 sub animation.

Next chapter, I will introduce a * algorithm to find the shortest path in the RPG Game. 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