Published: 07 Jun 2010
By: Xianzhong Zhu
Download Sample Code

As a powerful RIA development tool, Microsoft Silverlight is being more widely used to develop data-driven business and game applications. As a famous 2D game engine, the Farseer Physics Engine supports a wide range of platforms such as Microsoft's XNA, Silverlight, WPF, and Vanilla .NET. This article aims to serve as an elementary tutorial to Silverlight 2D beginners. Three demos are given to gradually lead you into a more and more complex and practical game environment.

Contents [hide]

Introduction

NOTE

The development environments we'll use in the sample application are:

1. Windows XP Professional (SP3);

2. .NET 3.5 (SP1);

3. Visual Studio 2008 Professional (SP1);

4. Microsoft Silverlight Tools for Visual Studio 2008 SP1;

5. Microsoft Expression Blend 3;

6. Farseer Physics 2.1.3 (http://farseerphysics.codeplex.com/);

The Farseer Physics Engine is an easy to use 2D physics engine written in C#. It is directed toward use with XNA, WPF, and Silverlight. In fact, it can also be used within any .NET application. The Farseer Physics Engine focuses on simplicity, useful features, and enabling the creation of fun, dynamic games.

In the real world, things move and spin due to applied forces and torques. In Farseer, it's the same. Objects called "Body" represent the real world things. As forces and torques are applied, the bodies react according to the laws of 2D physics. The position and rotation of these bodies are then used to update game entities.

In the very simplest yet typical form, the Farseer Physics Engine works in the following sequences:

1.Create "Body" objects (and possible Geom objects).

2.Add these Body objects (and possible Geom objects) to the Farseer Physics Engine simulator.

3.Begin game loop.

(1). Apply forces and torques to the Bodies.

(2). Update the simulator and all sprites (presented by Silverlight Usercontrols attached to Body objects).

4.End game loop.

It seems simple, doesn't it? However, to introduce the Farseer Physics Engine into your Silverlight 3 game application is not as simple as you image. In the next sections, we are going to develop three sample applications with complexity becoming higher and higher.

Prerequisites for the Demos

To start, we should make good preparation for the demo applications. For this, two steps are required: first, download the Farseer Physics 2.1.3; second, create a general Silverlight 3 application, and add the Farseer engine to the project.

Download Farseer Physics 2.1.3

Since the Farseer Physics 2.1.3 is an open sourced project, you can easily obtain it from http://farseerphysics.codeplex.com/releases/view/35490. I recommend you to download the whole source code (Farseer Physics 2.1.3 Silverlight with simple samples) and the related document (Farseer Physics 2.1.3 Manual) to give it a thorough examination. Figure 1 shows the download related stuffs. It's noticed that you can still easily add the Farseer engine into the Silverlight projects as described below.

Figure 1: Part of snapshot of the download page for the Farseer engine

Part of snapshot of the download page for the Farseer engine

Next, let's create the first Silverlight 3 game that uses the Farseer engine.

Create a Silverlight 3 Project to host the Farseer Physics

To do so, you are suggested to follow the listed steps below.

1. Start Visual Studio 2008, create a basic Silverlight 3 project, and name it SL3Farseer213Demo.

2. Copy the whole folder 'Farseer Physics 2.1.3 Silverlight' from the download folder to the Silverlight solution. In this case, we rename it FarseerPhysicsSilverlight.

3. Open the Project Dependencies dialog and build up proper dependencies between the projects (the demo project SL3Farseer213Demo upon the Farseer Physics project FarseerPhysicsSilverlight and the Silverlight host project SL3Farseer213Demo.Web upon the project SL3Farseer213Demo) in the whole solution.

4. Rebuild the Farseer Physics project FarseerPhysicsSilverlight and add reference to the demo project SL3Farseer213Demo.

Till now, the whole infrastructure for our three demos has been established.

Demo 1 – Say Hello to Farseer Physics 2.1.3

Starting from this section, we are going to create a 'Hello world!' classed demonstration. In detail, you will see a red ball in the game scene. When you press the button "Start", the ball will be thrown out horizontally, then do parabolic downward movement until off the grey canvas and further off the screen. Figure 2 gives one of the running-time snapshots of this demo.

Figure 2: One of the running-time snapshots of demo 1

One of the running-time snapshots of demo 1

Next, let's research into the inner how-toes.

Add a New and General Silverlight Usercontrol

Right click the project SL3Farseer213Demo and add a general Silverlight Usercontrol named Demo1.

Now, open the file Demo1.xaml, and create the following simple XAML markup code:

Listing 1: The XAML markups for demo 1

In the above XAML markup, we draw a small red ball. There is only one point worth stressing: we'd better set up the two kinds of RenderTransforms – RotateTransform and TranslateTransform (how to specify the related properties is not important) because the ball will later be attached to one Body object in the Farseer engine and further the object will probably move and rotate.

Next, let's take a look at the related programming:

Listing 2: The key behind code for Demo1.xaml

First, we should add necessary Farseer engine related namespace references. Second, we set up two important public properties – Size and Body. The Size property is used to remember the position, size, and transform related info; the Body is used to remember the attached Body object in the Farseer engine. And then, we create an override version of the Demo1 constructor passing the PhysicsSimulator and other related data as the parameters. Note in the constructor the ball related Body object is built up through a Factory class and the Size property is also specified. Last but not the least is the Update method, which is always a MUST HAVE to be used to update the ball and generally called explicitly by us.

For now, the game sprite (the ball in this case) has been established.

The next task should be set up the main game scene– the MainPage.xaml file.

Set up the main game scene - MainPage.xaml

Let's still look into the related XAML code first.

Listing 3: XAML code for MainPage.xaml

What you see above are still several pieces of common XAML code. The only point worthy to be noticed is the Canvas control named DrawingCanvas which will act as the container of the ball sprite.

Next, let's continue to look into the behind-code.

Listing 4: The key behind code for MainPage.xaml

In general, the following must be done to introduce Farseer into a Silverlight game application:

1. Instantiate and update a PhysicsSimulator - the PhysicsSimulator represents the Farseer engine with which the Silverlight application interact, which can be commonly created in the initialization of your game and updated by calling its the Update method. In this demo, the PhysicsSimulator instance is created using a Vector2(0, 150) as the only parameter. Here, the number 150 represents the gravity force in the y-axis direction, while in the x-axis direction the value is 0. This is the common case in the earth game; however, when you want to create a star war like game the gravity force in the x-axis direction is probably not equal to 0.

2. Create a Body/Geom pair - Body/Geom pairs are typically created through Farseer's Factory classes. The Body and Geom must both be added to the Physics Simulator. As you've seen, in the simplest demo 1 we've not even introduced the Geom object since we don't plan to consider the collision between sprites. In addition, in our case we've set up the Body object and attached it to the UserControl Demo1 in the Demo1.

3. Set properties for Body and Geom - you can set properties such as size, orientation, velocity, and how the bodies respond to collisions (inertia, elasticity, friction) – in our case all these collision related things are not considered. Obviously, here we set the two components of x-axis and y-axis of the LinearVelocity property to non-zero values. So, you will see the read ball do a parabolic movement – if you set the value of x-axis component to 0 you will see the ball doing free fall.

4. Note how the position of the ball is specified in the container control. Figure 3 below gives the intuitive illustration.

Figure 3: The ball position is relative to the center of the ball

The ball position is relative to the center of the ball

5. A game loop is set up generally using the Storyboard instance gameLoop. When you click button 'Start', the game loop begins. And, when the first loop ends, the Farseer Physics Simulator is (and must be) updated asynchronously, and the ball (the only sprite) is updated, too. Then, the next loop starts.

If you have grasped the main idea in demo 1, then you can go on to learn the next a bit complex sample – demo 2.

Demo 2 – Enhanced Demo 1 to let collision

In this section, I'll show you another sample which is an enhanced version of demo 1. In demo 2 (BallToGround.xaml), another sprite – ground will come into the scene which can collide with the red ball. As mentioned previously, to gain the collision effect, the Geom objects have to be introduced.

Figure 4 shows one of the running-time snapshots of this demo. When you press the button 'Start', the ball will do parabolic downward movement. When the ball hits the ground, it will collide with the ground and be bounced back. So, another hit and bounce happen on and on...

Figure 4: One of the running-time snapshots of demo 2

One of the running-time snapshots of demo 2

Let's next dig into how the demo 2 is implemented.

Create another Usercontrol - BallToGround.xaml

First of all, we add a new Usercontrol named BallToGround.xaml to the project.

Listing 5: The only XAML file (BallToGround.xaml) for demo 2

There is nothing special compared with the above XAML code, isn't it? So let's focus on look at the behind code.

Listing 6: The crucial behind code for demo 2

In the above code, the following points should be noticed:

1. To create a ground that can collide with the ball, two variables should be declared:

2. In relation to the Body object attached to the ball, a corresponding Geom object is created using the Factory method. And, at the same time, the related properties are specified:

3. Note that the ground is defined nearly the same as the above ball. However, the CollisionGroup property is not specified and the IsStatic property is set to true since the ground keeps static during the course of the collision.

4. As for how to add the ball and the ground sprites into the container control and how to update each sprite in the game scene, the general logics quite resemble the demo 1. Hence, we no more waste words about them.

Next, I'll show you a more complex sample than that presented in demo 2.

Demo 3 – an Enhanced Demo 2

Starting from this section, I'll show you a more complex and realistic sample – the ball is replaced with a basketball and another two walls are added into the scene. And further, when the ball hits the ground a sound is played. Figure 5 shows one of the running-time snapshots of demo 3.

Figure 5: One of the running-time snapshots of demo 3

One of the running-time snapshots of demo 3

Let's next create the sprites one by one.

Create the basketball and wall sprites

To create a vivid basketball using Microsoft Expression Blend 3 is just a piece of cake. Figure 4 shows the design-time snapshot of the basket-ball in Expression Blend 3.

Figure 6: The design-time snapshot of the basket-ball in Expression Blend 3

The design-time snapshot of the basket-ball in Expression Blend 3

As pointed out above, we should provide the following transformation related code to facilitate the translation and rotation of the basketball by Farseer engine:

Listing 7: The required transformation related code

Let's next research into the behind code, as shown in Listing 8.

Listing 8: The first part of the basketball sprite definition

In the above constructor, three points should be taken notice of:

1. We subscribed to the OnCollision event of the basketball related Geom object (this event is defined in the base class SpriteBase).

2. During the course of the initialization, we called the two methods – ClearForce and ClearTorque of the basketball related object to clear the force and torque, and then called another method –ApplyTorque to add a rotating force, so that when thrown out the basketball rotates; otherwise, the basketball itself does not rotate, but only does projectile motion.

3. To gain a more break-taking effect, we have added the sound support by introducing a helper class SoundHelper. You can refer to the source code to look into it yourself.

Lastly, let's look at the OnCollision event handler:

Listing 9: The OnCollision event handler

From the above demos we can conclude that to track the collision of the objects we just need to observe the following steps:

1. Add Tag values to each Geom object that participates in the collision for identification's aim.

2. Inside the OnCollision event handler compare the tag values to judge if a collision happens and then take corresponding actions. In our case, when we detect that the ball hits the ground the sound is played. In practical cases, you can add any fantastic effects that enforce your games.

To save time, we've just created two ugly walls shown in the above figure. This work is also easy to understand; we are to elide the related discussions.

Create the container for the Farseer simulator- MainPageForBasketball.xaml

To distinguish from the previous Mainform.xaml, we create another Usercontrol MainPageForBasketball.xaml to serve as the container for the Farseer simulator for the demo 3.

Since the XAML code is same as that in Mainform.xaml, we also select to omit its explanation but shift to see the behind code, as shown in Listing 10.

Listing 10: The crucial behind code for MainPageForBasketball.xaml

As you see, the code becomes more and more complex, while as the same time, more and more modular. Herein, we don't need to keep track of the details of the helper methods, such as LoadGround, LoadWalls, and LoadBasketball, since there is nothing peculiar deserved to be pointed out.

Well, how about the game loop? It's listed below:

Listing 11: The game loop for demo 3

Obviously, the physics simulator itself is updated asynchronously every 0.01 seconds. Also, through a foreach loop, each of the sprites in the game scene is tracked out and updated. As soon as the loop ends, another loop starts.

Summary

As the title hints, this article aims to serve as an elementary introduction to the Farseer engine in Silverlight 3 game apps for you. I'm sure it can help you understand how Silverlight and Farseer work together. For this, I've introduced three demos with one complex than another.

In my opinion, to make full use of the Farseer engine in your Silverlight game is not very easy. However, after studying these three demos, the Farseer related documents, and further researching into all the demos accompanying the engine, you will surely gradually reach the summit. Happy coding with the Farseer Physics engine!

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Xianzhong Zhu

I'm a college teacher and also a freelance developer and writer from WeiFang China, with more than fourteen years of experience in design, and development of various kinds of products and applications on Windows platform. My expertise is in Visual C++/Basic/C#, SQL Server 2000/2005/2008, PHP+MyS...

This author has published 81 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Displaying Notification Messages in a Silverlight Dashboard Application
In this article we will see how we could display a notification message and further a list of notifi...
Air Space Issue in Web Browser Control in Silverlight
Air Space issue is a common issue in Web Browser control in Silverlight and WPF. To explain the issu...
TextBox Row Filter in Telerik's RadGridView in Silverlight
If you have come across the JQGrid features, you might have seen the filter row available as the fir...
Widget Refresh Timer in MVVM in Silverlight
In this article we'll see how to refresh and disable widgets using the Model View View-Model pattern...
Develop a Flexible 2.5D Scene Editor Targeting Silverlight RPG Games - Part 2
In this article, I'm going to introduce to you how to construct such a 2.5D RPG game scene editor th...

You might also be interested in the following related blog posts


Silverlight MVP read more
In Response To DNR 476 read more
Silverlight Twitter Client with authentication read more
Silverlight 3 Multi-touch: The Basics read more
Why Embedded Silverlight Makes Sense read more
Welcome the Free Test Automation Solution for RadControls read more
Have I Missed The Bus? read more
Silverlight Get Color from Hex read more
Link Round up on .NET RIA Services (March 3rd) read more
A guide to Silverlight 3 new features read more
Top
 
 
 

Discussion


Subject Author Date
placeholder This looks familiar :) Andy Beaulieu 6/16/2010 7:46 AM

Please login to rate or to leave a comment.