MMORPG programming in Silverlight tutorial (4) Implement the sprite's 2D animation (part I)

By studying the first 3 chapters, we master how to create the object's moving animation dynamically. In this chapter, I will introduce how to implement object's own animation.

First of all, I need to replace the object with a living Sprite. I prepare some pictures made up of a coherent running animation, as follows:

Alert, all these pictures above come from network, I only use them to show how to programming in Silverlight games. please don't use in business; otherwise, all have nothing to do with me.

All the 8 pictures shoshould be the same dimension, 150*150. because all the pictures 'background shoshould be transparent, but Silverlight doesn' t support GIF image format, we have to use PNG format instead. we named them from 0 to 7, this naming mechanic make us convenient to control animation.

 

After preparing all the pictures, copy them into the project and set theirBuild actionTo"Content", And set theirCopy to output directoryTo "copy If newer ".

 

Now we can write some code to make the sprite running, as follows:

 Public partial class  Mainpage : Usercontrol { Private int Count = 1; Private  Image Sprite; Public Mainpage () {initializecomponent (); sprite =New  Image () {Width = 150, Height = 150}; carrier. Children. Add (sprite ); // Init dispatchertimer  Dispatchertimer Dispatchertimer = New  Dispatchertimer (); Dispatchertimer. Tick + = dispatchertimer_tick; dispatchertimer. interval = Timespan . Frommilliseconds (150); 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 ;}}

 

 

In the code above, I declare a variable namedCount, To save the current frame showing which picture. Then I create an image control named Sprite and throw it in the carrier as a child control. Up to now, the leader is coming.

In the sprite's 2D animation, we always use dispatchertimer to control the sprite's action. we implement the picture switching in the function dispatchertimer_tick: change the picture index per 150 ms, if the count equals to 7, it means the animation has arrived the last frame, it need to go to the first frame, so we set COUNT = 0; otherwise, Count increase by 1. so the animation will be a circle.

OK, press Ctrl + F5, you will find the Sprite can run now, although without no moving, we have achieved great success.

Summary: This chapter introduce how to implement object's own animation.

Next chapter, I will introduce another method to implement the same animation effect as the one in this chapter. 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/1505335.html, part of my article is base on it.

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