Published: 26 Jul 2010
By: Xianzhong Zhu
Download Sample Code

In this series of articles we will develop an online basketball game using the famous two-dimensional physics engine - Farseer (mainly PhysicsHelper 3.0) under Visual Studio 2010 and Silverlight 4.0 environments.

Contents [hide]

The Write an Online Basketball Shooting Game Using Silverlight 4 and Farseer Engine Series

  • Part 1 In this series of articles we will develop an online basketball game using the famous two-dimensional physics engine - Farseer (mainly PhysicsHelper 3.0) under Visual Studio 2010 and Silverlight 4.0 environments.
  • Part 2 In the first article of this series, you’ve learned the fundamentals in using Farseer Engine and its enhanced buddy - PhysicsHelper. Starting from this installment, we are going to develop the online basketball shoot game itself.
  • Part 3 In the previous article, you've learned all the elementary work in writing the ball shooting game. And also, we've made clear the loop principle under the PhysicsHelper environment. In this article we will study the rest and more interesting parts.
  • Introduction

    In particular, we will use the PhysicsHelper kit to help to achieve the goal of basketball moving and collision detection as well as other functions. In this installment, we are mainly going to make preparation work for using Physics Helper. Please note that because there are numerous new characteristics and somewhat traps in using the PhysicsHelper API compared with (and different from) the initial Farseer Engine API we plan to use more space to discuss these questions.

    In addition, due to the novelty and difficulty of PhysicsHelper, I suggest entry-level readers to read the first two sections, skip the rest, and continue to read from the second article. When you will be studying the source code later you can go back to read the unread sections in this article to gain a better understanding. Anyway, all the notes put forward in this article deserves your close attention when you use PhysicsHelper.


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

    Windows XP Professional (SP3);

    .NET 4.0;

    Visual Studio 2010

    Silverlight 4

    Microsoft Silverlight 4 Tools for Visual Studio 2010

    PhysicsHelper 3.0

    Microsoft Expression Blend 3;

    Introduction to PhysicsHelper 3.0

    Farseer physics engine, as a two-dimensional game engine, plays a decisive role in Silverlight based game development. First, two-dimensional physics engines that aim at the current popular Silverlight game development are extremely rare. Second, the author of Farseer physics engine has devoted many years of hard work insisting to maintain the engine, so that the engine has provided the typical functions of a two-dimensional physics engine. Third, Farseer is an open-sourced two-dimensional physics engine (the support site is, which are extremely beneficial for developers to deeply study the API even for secondary development. Although the latest version of Farseer physics engine is 3.0, it is not the official release.

    So, in this series we will choose to base on the mature Physics Helper for Blend, Silverlight and WPF ( to develop our game. Moreover, it is worth noting that PhysicsHelper depends on FarseerPhysics.2.1.1 (which is also a very popular and stable version), which provides a set of assistant classes and behavior components, greatly simplifying the application of Farseer API. However, to fully grasp the depth or the use of the PhysicsHelper API still requires developers to understand the underlying Farseer API. So, to gain a full understanding with the game developing principle you are highly suggested to own some skills of using Farseer API and had better first read related articles, such as Get started with Farseer Physics 2.1.3 in Silverlight 3 and Adding Behaviors Programmatically.

    Components in PhysicsHelper

    Specifically, the PhysicsHelper kit provides two forms of Farseer engine class package:

    1. A group of helper classes, as follows:

    • CameraController
    • CameraLayer
    • PhysicsController
    • PhysicsJoint
    • PhysicsSprite
    • PhysicsStaticHolder

    2. Another form is a group of behavior components that are supported by Silverlight 3 and later versions:

    • PhysicsApplyForceBehavior
    • PhysicsApplyRotationBehavior
    • PhysicsApplyTorqueBehavior
    • PhysicsCameraBehavior
    • PhysicsCollisionTrigger
    • PhysicsControllerBehavior
    • PhysicsDestroyObjectBehavior
    • PhysicsExplodeBehavior
    • PhysicsFluidContainerBehavior
    • PhysicsJointBehavior
    • PhysicsKeyTrigger
    • PhysicsMagnetBehavior
    • PhysicsObjectBehavior
    • PhysicsSoundBehavior

    Moreover, there is also an extremely useful user control with which you can easily achieve the particle explosion effect in your Silverlight game.

    Since this is not an elementary tutorial towards PhysicsHelper, we are not going to detail into each of the above APIs.

    What deserves another special attention is the PhysicsHelper kit is not only shipped with all the newer versions of the original demos packaged inside the early Farseer Physics Engine API, but also provides several other interesting demos. This is extremely beneficial to beginners to grasp the PhysicsHelper kit.


    To be honest, one of the deficiencies of the PhysicsHelper kit is it has not provided enough materials introducing the usage of each API except for some basic demo apps, which in some degree increases the threshold of learning the kit. Anyway, the Farseer Engine, especially the PhysicsHelper kit, is a powerful 2D engine for your Silverlight game applications.

    Set up the Developing Environment

    In this section, we are going to introduce the necessary installing and developing environment for PhysicsHelper.

    1. After you download PhysicsHelper., you will notice under the root folder there is a file named install.bat. Using the application notepad.exe to open it, you will find the following lines:

    Listing 1: The installer will copy required assemblies to corresponding Expression blend 3 folders

    So, after you double-click the file install.bat under Windows Explorer and if the paths are correct, related assemblies will be copied to the corresponding Expression blend 3 folders. As soon as this is finished, you can use the behaviors in PhysicsHelper in the same way as the common ones in Expression blend 3.

    2. Start Visual Studio 2010 and create a common Silverlight 4 solution named BallShooter. Add reference to C:\Program Files\Microsoft SDKs\Expression\Blend 3\Interactivity\Libraries\Silverlight\System.Windows.Interactivity.dll because the two classes BehaviorCollection, Interaction related stuffs are defined in it which are required in our game.

    3. To use PhysicsHelper to strengthen our Silverlight game application, you are suggested also do the following:

    (1) Copy the three projects, PhysicsBehaviors, PhysicsBehaviors.Design, and PhysicsHelper under the folder Common to the root folder of the solution BallShooter.

    (2) Right click the solution to select "Add" – "existing project..." to add the above three projects.

    (3) Right click the project BallShooter to add references to the above two projects - PhysicsBehaviors and PhysicsHelper.

    (4) At last, copy the assembly FarseerPhysics.dll (version 2.1.1) under the folder Common\FarseerPhysics.2.1.1\Silverlight to the Bin folder of the project BallShooter. Note PhysicsHelper depends upon FarseerPhysics.2.1.1 rather than FarseerPhysics.2.1.3.

    Again, in this article, we are not going to introduce elementary samples related to PhysicsHelper. You can refer to the downloadable PhysicsHelper kit to find more. Instead, we will shift our attention to some of the problems that must be tackled before really starting our game development.

    Notes When Using PhysicsHelper

    What deserves noticing is that although several basic examples are given with the release of PhysicsHelper. there are still quite a few problems that none of these demos point out. So, from the point of view of me, seemingly easy and clear, PhysicsHelper is not as simple as you image. The subsequent sections will list some of these questions (and even traps) and bring forth related solutions in using PhysicsHelper to develop our Silverlight game application.

    The Supporting Environment

    Currently the PhysicsHelper kit only provides direct support towards Visual Studio 2010, so readers that have not installed Visual Studio 2010 may meet some trouble. After downloading the PhysicsHelper kit they need to manually use the helper classes and behavior components.

    In addition, in terms of using the above components behavior, PhysicsHelper has not currently provided support for Blend 4, but only for Blend 3. On the other hand, to use the behaviors provided by PhysicsHelper (except for the helper classes, such as PhysicsController and PhysicsJoint ) in Visual Studio 2010 (without Blend), you have to manually manipulate them. Nevertheless, you can take apart the demos that are shipped with the PhysicsHelper kit and copy many ready code in them to simplify your manual coding. Anyway, thanks to the PhysicsHelper toolkit, the Farseer physics engine based Silverlight game development will get greatly simplified.

    PhysicsObjectBehavior can not be attached to container controls like Canvas

    As for container controls such as Canvas, you can not use the code like this:

    Listing 2: One of the improper usages of the PhysicsObjectBehavior behavior

    On the contrary, it should be modified like the following:

    Listing 3: The proper usage of the PhysicsObjectBehavior behavior

    Such a typical example is placing an image into a Canvas control while this image wants to have the value of the property IsStatic set to true. This is required, for example, when the image serves as a ground sprite to collide with a ball. Note in such a scenario the Image control itself can not be attached to a PhysicsObjectBehavior behavior like the following:

    Listing 4: The improper usage of the image control

    Therefore, when the above requirement is met we'd better embed the Image control inside a Canvas control. And then, use the right way introduced above to set the value of the IsStatic property of the corresponding physical body of the Canvas control to static.

    Avoid using the same name for sub controls when the PhysicsObjectBehavior behavior is attached to the related parent controls

    For example, you want to two user controls, ucNetBack and unNetFront, in the file MainPage.xaml. If there is markup code like the following in these two sub controls, then the running-time system will fail - losing some functions.

    In the user control ucNetBack, there is the following code:

    While in another user control unNetFront there is the following code:

    Note that the two Rectangles inside the above two sub controls own the same name rectShape. After the two sub controls are bound to a PhysicsObjectBehavior behavior respectively and when the application runs the system will run into trouble – sprites lose their physical characteristics.

    For now, I've not dug out the how-to. It's estimated that when at last the MainPage.xaml control integrates the above sub controls, the system determine that there are two same components associated with the PhysicsObjectBehavior behavior. However, the system has not given friendly hints. In my opinion, the main responsibility for this situation should be ascribed to the incomplete debug support of the PhysicsHelper Kit.

    The solution for the above awkwardness is: make the above two Rectangle use the different name.

    The PhysicsSoundBehavior behavior needs to be used together with PhysicsControllerBehavior

    For example, the following XAML fragment will not generate the playback of sound effects:

    Instead, to produce required sound effects you should use following XAML scraps:

    To dissect the source code of the PhysicsHelper Kit, we can easily find out how. In detail, by tracking code of the PhysicsSoundBehavior behavior, we can find the following:

    Till now, things become clear: only is the PhysicsSoundBehavior behavior used together with PhysicsControllerBehavior can it perform the correct action.

    Composite UI controls that have invisible sub controls cannot be converted into a PhysicsBody

    When you develop games using the PhysicsHelper kit you have to bear in mind that the PhysicsBody is a bit different from ordinary XAML UI elements or controls. The former is the XAML UI controls adding the physical characteristics. Therefore, during the process of programming the games it is common to frequently convert XAML UI controls into PhysicsBody objects. However, in the conversion process, if the XAML UI controls (often composite controls) have embedded invisible sub controls (i.e. the value of their Visibility property set to Invisible), then these controls can not be converted to a PhysicsBody object. For example, consider the following XAML code:

    Herein, ucBackboard is a user control. In the main interface, we want to convert it to a PhysicsBody object by trying to associate the PhysicsObjectBehavior behavior with it. However, because there is a child control with the value of its Visibility property set to Invisible within the ucBackboard control you can not achieve the purpose of conversion – in this case if you start up your game you will not get the sprite working as usual.

    However, in some cases there really exists the need, what shall we do? Fortunately, there is an indirect way - you can set the Opacity property value of the child controls that you do not want to show to 0. In this way, we can not only achieve the purpose of hiding the sub controls but also accomplish the target of converting the user control ucBackboard into a PhysicsBody object.

    How to attach a PhysicsObjectBehavior behavior to dynamically generated controls?

    When you develop applications under Silverlight plus Farseer physics engine environment there exists a very significant problem with actual sense: how to attach a PhysicsObjectBehavior behavior to dynamically generated controls to convert a normal Silverlight UserControl into a PhysicsSprite?

    First, let's look at FarseerHelper's answer. Checking out the limited example apps shipped with FarseerHelper, you will find a similar demo named DemoBehaviors2.

    In the DemoBehaviors2 app, the following code is used to dynamically add a new doll:

    But according to the result of my experiment, the premise of implementing the above code is: there is having to be an instance of the ucRagDoll control in the Mainpage.xaml file. Otherwise, the newly-added dolls will not have PhysicsSprite function - falling onto the ground and behaves with the animation effect in the demo.

    What will happen for our own custom controls that need to be dynamically generated?

    I have a user control (which is nearly the same as the ball control in our ball shooting game) like this:

    I, too, want to dynamically generate a number of these controls with the PhysicsSprite function. For this, I used the similar idea given in the above DemoBehaviors2 demo, like the following code:

    The result is unsuccessful. If I adopt the solution to use the original author provided AddPhysicsBodyForCanvasWithBehaviors method, all normal sprite functions will disappear.

    However, there is no problem in the following solution. Note, the XAML code is the same.

    Just look at the behind code:

    The above code works well.

    Finally, I reach such a conclusion: if there are a limited number of (possibly many) of user controls to be created dynamically onto the screen, we can assign different name attributes to them, and then use the above solution to dynamically add PhysicsHelper specific behaviors to them.


    In conclusion, my overall impression on PhysicsHelper is it is not as easy as imagined, especially when you are not familiar with the initial Farseer engine API and have not firmly grasped the various techniques in relation to Silverlight. However, you can not deny the power of PhysicsHelper. In this installment, we've only touched upon the prerequisites of using PhysicsHelper to develop our game application. In the next article, we'll start the real work.

    <<  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

    The BlogML plan read more


    Subject Author Date
    placeholder Thanks for the Write up Raghuraman Kanchi 7/27/2010 10:32 PM

    Please login to rate or to leave a comment.