Using Farseer Physics Engine in Silverlight

Today I will show you how you can quite easily add physics to a Silverlight project. Consider this on a small example using the physics engine Farseer Physics , distributed completely free of charge.



Before we start creating the application, we will need to download the Farseer Physics Silverlight engine, available on Codeplex. In this example, I will use version 2.1.3 — the most recent version available. We also need the Physics Helper , which greatly simplifies adding physical objects to a project with Farseer Physics.

For the development itself, we need the following tools:
')

• Visual Studio 2008 SP1 or Visual Studio 2010 Beta 2
• Silverlight 3 Tools or Silverlight 4 Beta Tools

All the DLL files you need for our project can be downloaded in one archive here .

So let's get started. We will do everything in 7 simple steps.

1. Open Visual Studio and create a new Silverlight project. I have it called SilverlightPhysics:
   
   
2. We copy 3 necessary DLL files in any folder. Now you need to connect these files to the project. In the Solution Explorer window, right-click on the References folder and select “Add reference”:
   
   
   
   Select our files on the Browse tab and click OK:
   
   
   
   Similarly, add System.Windows.Interactivity from Expression Blend 3 SDK . Checking:
   
   
3. Open the file MainPage.xaml. In this example, it will be more convenient to use Canvas instead of a Grid, so replace the <Grid> tag with <Canvas>. Add the necessary objects using XAML code:
   < UserControl <br> x:Class ="SilverlightPhysics.MainPage" <br> xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" <br> xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" <br> xmlns:d ="http://schemas.microsoft.com/expression/blend/2008" <br> xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006" <br> mc:Ignorable ="d" d:DesignWidth ="640" d:DesignHeight ="480" > <br> < Canvas x:Name ="LayoutRoot" Background ="Black" > <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="215" Canvas . Top ="433" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="245" Canvas . Top ="433" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="275" Canvas . Top ="433" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="305" Canvas . Top ="433" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="335" Canvas . Top ="433" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="365" Canvas . Top ="433" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="230" Canvas . Top ="403" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="290" Canvas . Top ="283" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="305" Canvas . Top ="313" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="275" Canvas . Top ="313" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="320" Canvas . Top ="343" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="290" Canvas . Top ="343" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="260" Canvas . Top ="343" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="335" Canvas . Top ="373" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="305" Canvas . Top ="373" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="275" Canvas . Top ="373" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="245" Canvas . Top ="373" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="350" Canvas . Top ="403" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="320" Canvas . Top ="403" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="290" Canvas . Top ="403" /> <br> < Rectangle Fill ="White" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Left ="260" Canvas . Top ="403" /> <br> < Rectangle Fill ="White" StrokeThickness ="2" Height ="29" Width ="640" Canvas . Left ="0" Canvas . Top ="475" /> <br> < Ellipse Fill ="Red" Stroke ="#FFB9B9B9" StrokeThickness ="2" Height ="25" Width ="25" Canvas . Top ="173" Canvas . Left ="255" /> <br> </ Canvas > <br> </ UserControl >
   If you start the project at this stage, you will see a large rectangle for the future platform, a small pyramid of white cubes and a red ball. Objects have no physics yet:
   
   
   
4. Add two namespaces for easy reference to the physics engine and System.Windows.Interactivity:
   xmlns:i ="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"<br> xmlns:pb ="clr-namespace:Spritehand.PhysicsBehaviors;assembly=Spritehand.PhysicsBehaviors"<br>
   
   Now we need to define a PhysicsController, which can be made from any XAML container. In our example, this will be a Canvas, since it contains all the objects we need - cubes and a ball. To do this, add the corresponding node of behavior to the Canvas XAML code (how terrible it sounds in Russian :)). We will also enable the MousePickEnabled property so that you can drag and drop any object with the mouse:
   < Canvas x:Name ="LayoutRoot" Background ="Black" > <br> < i:Interaction.Behaviors > <br> < pb:PhysicsControllerBehavior MousePickEnabled ="True" /> <br> </ i:Interaction.Behaviors > <br>
   
   Making a platform. First we need to add a closing tag for the lowest rectangle. Our platform should be static and not fall anywhere, so we will add the corresponding IsStatic property and set its value to True. The code for this rectangle will look like this:
   < Rectangle Fill ="White" StrokeThickness ="2" Height ="29" Width ="640" Canvas . Left ="0" Canvas . Top ="475" > <br> < i:Interaction.Behaviors > <br> < pb:PhysicsObjectBehavior IsStatic ="True" /> <br> </ i:Interaction.Behaviors > <br> </ Rectangle >
   
   Change the code accordingly for all small rectangles and a circle. Only now the IsStatic property should not be added, because these objects must be dynamic and subject to the laws of physics. The final code can be viewed in the finished project.
   
   
   Yes, this engine is not perfect:
   
   
   
   But it’s free, fairly easy to use, and makes it easy to add physics even to Xbox 360 games (made on XNA).
   
   This example was quite simple. If you show imagination and make a little effort, then you can do something much more impressive. For example, add fluid physics, explosions, etc. I will wait for your projects;)