physicshelperxaml Wiki Rss Feed

New Comment on "Documentation"

dingxiaohu2009 — Wed, 17 Apr 2013 14:14:09 GMT

I want use this with my monogame aplication. I would be grateful If you could publish a monogame-compatible version.

New Comment on "Documentation"

SQLDBATX — Wed, 07 Nov 2012 15:07:46 GMT

Windows 8, VS 2012. Can't compile Demo.Simple or Demo.Advanced due to error 9009. Error 2 The command "C:\Users\user123\Documents\Visual Studio 2012\Projects\PhysicsHelper\Demos.Metro\Demo.Simple.Metro\..\..\CleanUsingXmlns\bin\Debug\CleanUsingXmlns addusing C:\Users\user123\Documents\Visual Studio 2012\Projects\PhysicsHelper\Demos.Metro\Demo.Simple.Metro\..\..\Demos.Metro\Demo.Simple.Metro\ Demo.Simple,Spritehand " exited with code 9009. Demo.Simple

Updated Wiki: Home

AndyBeaulieu — Mon, 27 Aug 2012 19:53:37 GMT

Project Description
Physics Helper XAML allows you to easily create 2D physics based games and simulations for Windows 8, Windows Phone 7 and Silverlight 5 using C# or VB. It is a port of the Physics Helper and uses the Farseer Physics Engine.

Why a Separate Version?
When I began porting the Physics Helper project to Windows 8, I realized that there were many breaking changes in WinRT and missing functionality such as Behaviors. It was much simpler to create a new version for Metro/WinRT and then port that new version to Windows Phone and other platforms. I think that the end result is much simpler and cleaner, as an added bonus!

For more details and how to get started, see the Documentation page.

Launch in another window

New Comment on "Documentation"

coton61 — Fri, 30 Mar 2012 18:23:22 GMT

This is great! I wonder, how can you add a camera controller to this?

Updated Wiki: Home

AndyBeaulieu — Wed, 07 Mar 2012 14:01:33 GMT

Project Description
Physics Helper XAML allows you to easily create 2D physics based games and simulations for Windows 8 Metro and Windows Phone 7 using C# or VB. It is a port of the Physics Helper and uses the Farseer Physics Engine.

Why a Separate Version?
When I began porting the Physics Helper project to WinRT/Metro, I realized that there were many breaking changes in WinRT and missing functionality such as Behaviors. It was much simpler to create a new version for Metro/WinRT and then port that new version to Windows Phone and other platforms. I think that the end result is much simpler and cleaner, as an added bonus!

For more details and how to get started, see the Documentation page.

Launch in another window

Updated Wiki: Home

AndyBeaulieu — Wed, 07 Mar 2012 14:01:06 GMT

Project Description
Physics Helper XAML allows you to easily create 2D physics based games and simulations for Windows 8 Metro and Windows Phone 7 using C# or VB. It is a port of the Physics Helper and uses the Farseer Physics Engine.

Why a Separate Version?
When I began porting the Physics Helper project to WinRT/Metro, I realized that there were many breaking changes in XAML and missing functionality such as Behaviors. It was much simpler to create a new version for Metro/WinRT and then port that new version to Windows Phone and other platforms. I think that the end result is much simpler and cleaner, as an added bonus!

For more details and how to get started, see the Documentation page.

Launch in another window

New Comment on "Documentation"

GrobotoX — Sat, 10 Dec 2011 13:14:19 GMT

Can be used with visual studio 2010? I want use this with my touch wpf aplication. Hoppe can be possible. If possible please can publish a guide? Best regards.

New Comment on "Documentation"

GrobotoX — Sat, 10 Dec 2011 13:14:03 GMT

Can be used with visual studio 2010? I want use this with my toch wpf aplication. Hoppe can be possible. If possible please can publish a guide? Best regards.

Updated Wiki: Documentation

AndyBeaulieu — Sun, 06 Nov 2011 21:04:31 GMT

Windows 8 Metro Getting Started

The current release was created using the Windows 8 Developer Preview Bits and Visual Studio 11 Express. Currently the easiest way to get these tools is to download the ISO and create a bootable VHD.

While you do not need tablet hardware for development (you can use a PC and a mouse), you may wish to obtain a tablet because multitouch is more fun than a mouse :) Here are a couple of posts to help you with get started with tablet hardware:

Sample Projects

Once you have a development environment and hardware setup, you can download the source code and check out the sample projects inside the VS11 solution.

Demo.Simple

Set Demo.Simple as your startup project and run the solution. This shows a no-code scenario with a ragdoll and stack of blocks. Here are the main parts of the simple demo:

ucBlock.xaml defines the Block sprite.
ucRagDoll.xaml defines a rag doll with appendages and joints bringing them together.
MainPage.xaml creates instances of ucBlock and ucRagDoll. There is one line of code in MainPage.xaml.cs which calls ScaleToObject. This allows the game canvas to scale to full screen.

Demo.Advanced

Set Demo.Advanced as your startup project and run the solution. This shows how to dynamically add and delete user controls, track performance, and use nested Storyboard animations inside physics objects. Here are the main highlights of the advanced demo:

the code-beind file MainPage.xaml.cs shows how to handle the TimerLoop and Collision events raised by the PhysicsCanvas.
The AddAnItem method shows how to dynamically add a complex UserControl containing multiple sprites and joints.

Using Expression Blend

Please note that at the time of this writing, Blend 5 for Metro App Development has not been released - there is only a preliminary version supporting HTML development. When Blend 5 is released with XAML support, this section will be updated with a design-time walkthrough inside Blend.

Using Visual Studio

Let's walk through creating a simple physics simulation using XAML inside Visual Studio.

Creating the Solution

Create a new "Windows Metro Style" project in VS11

Right-click the solution and select "Add Existing Project".
- Browse to \PhysicsHelperXaml\Farseer Physics Engine Metro\Farseer Physics Engine Metro.csproj in the Physics Helper XAML ZIP download.
Right-click the solution and select "Add Existing Project".
- Browse to \PhysicsHelperXaml\Spritehand.PhysicsHelper.Metro\Spritehand.PhysicsHelper.Metro.csproj in the Physics Helper XAML ZIP download.
From your main project, add References to the Farseer Physics Engine Metro and Spritehand.PhysicsHelper.Metro projects.

Adding a Simple Physics Object

Lets create a simple rectangle object for the "ground" of our simulation. Open MainPage.xaml and add the following namespace imports to the XAML at the top, replacing My.Project.Here with your project name:

    xmlns:ph="using:Spritehand.FarseerHelper"
    xmlns:local="using:*My.Project.Here*"

Now let's add in a canvas named cnvGameOuter to handle the outside of our simulation. By doing this, we can overlay text like score and lives on top of our game.

<Canvas x:Name="cnvGameOuter"  >

</Canvas>

Within cnvGameOuter, we add in our PhysicsCanvas which you can think of as the Window into our Game or Simulation. We can set MousePickEnabled="true" so that the user can move things around with gestures or the mouse.

<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

    </ph:PhysicsCanvas>

</Canvas>

Now we can add our sprites (physics objects) into the Physics Canvas using the PhysicsSprite object. We'll add in a large block for the ground and a small block to fall. To keep the "ground" sprite in place, we can set the IsStatic property to True.

<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

        <ph:PhysicsSprite x:Name="block" Canvas.Left="200" Canvas.Top="0"  Width="100" Height="100" >
            <Rectangle Width="100" Height="100" Fill="LightBlue" />
        </ph:PhysicsSprite>

        <ph:PhysicsSprite x:Name="ground" Background="DarkGreen"  Canvas.Left="0" Canvas.Top="648"  Width="1366" Height="120" IsStatic="True" />

    </ph:PhysicsCanvas>

</Canvas>

Run the project and try moving the "block" sprite around with your finger (or mouse).

Shape Types

For the two simple PhysicsSprite objects we added above named "ground" and "block" we ended up with Rectangular shapes - because this is the default ShapeType for a PhysicsSprite. But what if we needed a circular or polygon shape? We can control this with ShapeType.

Add the following PhysicsSprite definition inside the PhysicsCanvas. This defines a "ball" which has a ShapeType of Ellipse, and adds some "bounce" to the ball using RestitutionCoefficient.

<ph:PhysicsSprite x:Name="ball" Canvas.Left="350" Width="100" Height="100" ShapeType="Ellipse" RestitutionCoefficient="0.8">
    <Ellipse Width="100" Height="100" Fill="LightYellow"/>
</ph:PhysicsSprite>

Run the project and try moving the "ball" sprite with the mouse. Note that it is round.
What if we need a more exact (polygon) shape? We can accomplish complex shapes by defining a Path element as the first element in our PhysicsSprite, and setting the ShapeType to Polygon. Note that you could set the Visibility of this boundary sprite to Collapsed if you have a complex design inside the PhysicsSprite that you are defining the basic boundary for.

<ph:PhysicsSprite Height="78.667" x:Name="cnvBody" Width="197" Canvas.Left="10" Canvas.Top="0" ShapeType="Polygon">
    <Path x:Name="bodyBoundary"  Fill="Red" Data="M2,72 L196,76 L190,43 L136,28 L123,2 L84,2 L83,28 L2,32 z" Height="75" 
             Canvas.Left="1.5" Stretch="Fill" Stroke="#FF000000" Canvas.Top="1.5" UseLayoutRounding="False" Width="195">
    </Path>
</ph:PhysicsSprite>

To debug shape types that the simulation is using visually, we can set DebugMode="true" on the PhysicsCanvas. This draws a handy outline on top of each physics element and is handy when you are seeing collision problems.

Accessing Farseer Objects

Under every PhysicsSprite is a Farseer Body and Fixture elements (to learn more about Farseer and see docs please visit farseerphysics.codeplex.com).

All PhysicsSprites defined inside the PhysicsCanvas are accessible through the PhysicsCanvas.PhysicsObjects dictionary. We can get to the Farseer BodyObject to change things such as Mass, Restitution, and even the shape (Fixtures) of the object.

PhysicsSprite spr = cnvGame.PhysicsObjects["ball"];
spr.BodyObject.Restitution = 0;

Updated Wiki: Home

AndyBeaulieu — Sun, 06 Nov 2011 21:03:46 GMT

Launch in another window

Updated Wiki: Home

AndyBeaulieu — Sun, 06 Nov 2011 21:03:12 GMT

Project Description
Physics Helper XAML allows you to easily create 2D physics based games and simulations for Windows 8 Metro Apps using C# or VB. It is a port of the Physics Helper and uses the Farseer Physics Engine.

For more details and how to get started, see the Documentation page.

Launch in another window

Updated Wiki: Documentation

AndyBeaulieu — Mon, 26 Sep 2011 11:45:10 GMT

Environment Setup

Sample Projects

Once you have a development environment and hardware setup, you can download the source code and check out the sample projects inside the VS11 solution.

Demo.Simple

Set Demo.Simple as your startup project and run the solution. This shows a no-code scenario with a ragdoll and stack of blocks. Here are the main parts of the simple demo:

ucBlock.xaml defines the Block sprite.
ucRagDoll.xaml defines a rag doll with appendages and joints bringing them together.
MainPage.xaml creates instances of ucBlock and ucRagDoll. There is one line of code in MainPage.xaml.cs which calls ScaleToObject. This allows the game canvas to scale to full screen.

Demo.Advanced

the code-beind file MainPage.xaml.cs shows how to handle the TimerLoop and Collision events raised by the PhysicsCanvas.
The AddAnItem method shows how to dynamically add a complex UserControl containing multiple sprites and joints.

Using Expression Blend

Using Visual Studio

Let's walk through creating a simple physics simulation using XAML inside Visual Studio.

Creating the Solution

Create a new "Windows Metro Style" project in VS11

Right-click the solution and select "Add Existing Project".
- Browse to \PhysicsHelperXaml\Farseer Physics Engine Metro\Farseer Physics Engine Metro.csproj in the Physics Helper XAML ZIP download.
Right-click the solution and select "Add Existing Project".
- Browse to \PhysicsHelperXaml\Spritehand.PhysicsHelper.Metro\Spritehand.PhysicsHelper.Metro.csproj in the Physics Helper XAML ZIP download.
From your main project, add References to the Farseer Physics Engine Metro and Spritehand.PhysicsHelper.Metro projects.

Adding a Simple Physics Object

Lets create a simple rectangle object for the "ground" of our simulation. Open MainPage.xaml and add the following namespace imports to the XAML at the top, replacing My.Project.Here with your project name:

    xmlns:ph="using:Spritehand.FarseerHelper"
    xmlns:local="using:*My.Project.Here*"

Now let's add in a canvas named cnvGameOuter to handle the outside of our simulation. By doing this, we can overlay text like score and lives on top of our game.

<Canvas x:Name="cnvGameOuter"  >

</Canvas>

Within cnvGameOuter, we add in our PhysicsCanvas which you can think of as the Window into our Game or Simulation. We can set MousePickEnabled="true" so that the user can move things around with gestures or the mouse.

<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

    </ph:PhysicsCanvas>

</Canvas>

Now we can add our sprites (physics objects) into the Physics Canvas using the PhysicsSprite object. We'll add in a large block for the ground and a small block to fall. To keep the "ground" sprite in place, we can set the IsStatic property to True.

<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

        <ph:PhysicsSprite x:Name="block" Canvas.Left="200" Canvas.Top="0"  Width="100" Height="100" >
            <Rectangle Width="100" Height="100" Fill="LightBlue" />
        </ph:PhysicsSprite>

        <ph:PhysicsSprite x:Name="ground" Background="DarkGreen"  Canvas.Left="0" Canvas.Top="648"  Width="1366" Height="120" IsStatic="True" />

    </ph:PhysicsCanvas>

</Canvas>

Run the project and try moving the "block" sprite around with your finger (or mouse).

Shape Types

Add the following PhysicsSprite definition inside the PhysicsCanvas. This defines a "ball" which has a ShapeType of Ellipse, and adds some "bounce" to the ball using RestitutionCoefficient.

<ph:PhysicsSprite x:Name="ball" Canvas.Left="350" Width="100" Height="100" ShapeType="Ellipse" RestitutionCoefficient="0.8">
    <Ellipse Width="100" Height="100" Fill="LightYellow"/>
</ph:PhysicsSprite>

Run the project and try moving the "ball" sprite with the mouse. Note that it is round.
What if we need a more exact (polygon) shape? We can accomplish complex shapes by defining a Path element as the first element in our PhysicsSprite, and setting the ShapeType to Polygon. Note that you could set the Visibility of this boundary sprite to Collapsed if you have a complex design inside the PhysicsSprite that you are defining the basic boundary for.

<ph:PhysicsSprite Height="78.667" x:Name="cnvBody" Width="197" Canvas.Left="10" Canvas.Top="0" ShapeType="Polygon">
    <Path x:Name="bodyBoundary"  Fill="Red" Data="M2,72 L196,76 L190,43 L136,28 L123,2 L84,2 L83,28 L2,32 z" Height="75" 
             Canvas.Left="1.5" Stretch="Fill" Stroke="#FF000000" Canvas.Top="1.5" UseLayoutRounding="False" Width="195">
    </Path>
</ph:PhysicsSprite>

To debug shape types that the simulation is using visually, we can set DebugMode="true" on the PhysicsCanvas. This draws a handy outline on top of each physics element and is handy when you are seeing collision problems.

Accessing Farseer Objects

Under every PhysicsSprite is a Farseer Body and Fixture elements (to learn more about Farseer and see docs please visit farseerphysics.codeplex.com).

All PhysicsSprites defined inside the PhysicsCanvas are accessible through the PhysicsCanvas.PhysicsObjects dictionary. We can get to the Farseer BodyObject to change things such as Mass, Restitution, and even the shape (Fixtures) of the object.

PhysicsSprite spr = cnvGame.PhysicsObjects["ball"];
spr.BodyObject.Restitution = 0;

Updated Wiki: Documentation

AndyBeaulieu — Mon, 26 Sep 2011 11:43:56 GMT

Environment Setup

Sample Projects

Once you have a development environment and hardware setup, you can download the source code and check out the sample projects inside the VS11 solution.

Demo.Simple

Set Demo.Simple as your startup project and run the solution. This shows a no-code scenario with a ragdoll and stack of blocks. Here are the main parts of the simple demo:

ucBlock.xaml defines the Block sprite.
ucRagDoll.xaml defines a rag doll with appendages and joints bringing them together.
MainPage.xaml creates instances of ucBlock and ucRagDoll. There is one line of code in MainPage.xaml.cs which calls ScaleToObject. This allows the game canvas to scale to full screen.

Demo.Advanced

the code-beind file MainPage.xaml.cs shows how to handle the TimerLoop and Collision events raised by the PhysicsCanvas.
The AddAnItem method shows how to dynamically add a complex UserControl containing multiple sprites and joints.

Using Expression Blend

Using Visual Studio

Let's walk through creating a simple physics simulation using XAML inside Visual Studio.

Creating the Solution

Create a new "Windows Metro Style" project in VS11

Right-click the solution and select "Add Existing Project".
- Browse to \PhysicsHelperXaml\Farseer Physics Engine Metro\Farseer Physics Engine Metro.csproj in the Physics Helper XAML ZIP download.
Right-click the solution and select "Add Existing Project".
- Browse to \PhysicsHelperXaml\Spritehand.PhysicsHelper.Metro\Spritehand.PhysicsHelper.Metro.csproj in the Physics Helper XAML ZIP download.
From your main project, add References to the Farseer Physics Engine Metro and Spritehand.PhysicsHelper.Metro projects.

Adding a Simple Physics Object

Lets create a simple rectangle object for the "ground" of our simulation. Open MainPage.xaml and add the following namespace imports to the XAML at the top, replacing My.Project.Here with your project name:

    xmlns:ph="using:Spritehand.FarseerHelper"
    xmlns:local="using:*My.Project.Here*"

Now let's add in a canvas named cnvGameOuter to handle the outside of our simulation. By doing this, we can overlay text like score and lives on top of our game.

<Canvas x:Name="cnvGameOuter"  >

</Canvas>

Within cnvGameOuter, we add in our PhysicsCanvas which you can think of as the Window into our Game or Simulation. We can set MousePickEnabled="true" so that the user can move things around with gestures or the mouse.

<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

    </ph:PhysicsCanvas>

</Canvas>

Now we can add our sprites (physics objects) into the Physics Canvas using the PhysicsSprite object. We'll add in a large block for the ground and a small block to fall. To keep the "ground" sprite in place, we can set the IsStatic property to True.

<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

        <ph:PhysicsSprite x:Name="block" Canvas.Left="200" Canvas.Top="0"  Width="100" Height="100" >
            <Rectangle Width="100" Height="100" Fill="LightBlue" />
        </ph:PhysicsSprite>

        <ph:PhysicsSprite x:Name="ground" Background="DarkGreen"  Canvas.Left="0" Canvas.Top="648"  Width="1366" Height="120" IsStatic="True" />

    </ph:PhysicsCanvas>

</Canvas>

Run the project and try moving the "block" sprite around with your finger (or mouse).

Shape Types

Add the following PhysicsSprite definition inside the PhysicsCanvas. This defines a "ball" which has a ShapeType of Ellipse, and adds some "bounce" to the ball using RestitutionCoefficient.

<ph:PhysicsSprite x:Name="ball" Canvas.Left="350" Width="100" Height="100" ShapeType="Ellipse" RestitutionCoefficient="0.8">
    <Ellipse Width="100" Height="100" Fill="LightYellow"/>
</ph:PhysicsSprite>

Run the project and try moving the "ball" sprite with the mouse. Note that it is round.
What if we need a more exact (polygon) shape? We can accomplish complex shapes by defining a Path element as the first element in our PhysicsSprite, and setting the ShapeType to Polygon. Note that you could set the Visibility of this boundary sprite to Collapsed if you have a complex design inside the PhysicsSprite that you are defining the basic boundary for.

<ph:PhysicsSprite Height="78.667" x:Name="cnvBody" Width="197" Canvas.Left="10" Canvas.Top="0" ShapeType="Polygon">
    <Path x:Name="bodyBoundary"  Fill="Red" Data="M2,72 L196,76 L190,43 L136,28 L123,2 L84,2 L83,28 L2,32 z" Height="75" 
             Canvas.Left="1.5" Stretch="Fill" Stroke="#FF000000" Canvas.Top="1.5" UseLayoutRounding="False" Width="195">
    </Path>
</ph:PhysicsSprite>

To debug shape types that the simulation is using visually, we can set DebugMode="true" on the PhysicsCanvas. This draws a handy outline on top of each physics element and is handy when you are seeing collision problems.

Accessing Farseer Objects

Under every PhysicsSprite is a Farseer Body and Fixture elements (to learn more about Farseer and see docs please visit farseerphysics.codeplex.com).

All PhysicsSprites defined inside the PhysicsCanvas are accessible through the PhysicsCanvas.PhysicsObjects dictionary. We can get to the Farseer BodyObject to change things such as Mass, Restitution, and even the shape (Fixtures) of the object.

PhysicsSprite spr = cnvGame.PhysicsObjects["ball"];
spr.BodyObject.Restitution = 0;

Updated Wiki: Documentation

AndyBeaulieu — Sat, 24 Sep 2011 15:36:31 GMT

Environment Setup

Sample Projects

Once you have a development environment and hardware setup, you can download the source code and check out the sample projects inside the VS11 solution.

Demo.Simple

Set Demo.Simple as your startup project and run the solution. This shows a no-code scenario with a ragdoll and stack of blocks. Here are the main parts of the simple demo:

ucBlock.xaml defines the Block sprite.
ucRagDoll.xaml defines a rag doll with appendages and joints bringing them together.
MainPage.xaml creates instances of ucBlock and ucRagDoll. There is one line of code in MainPage.xaml.cs which calls ScaleToObject. This allows the game canvas to scale to full screen.

Demo.Advanced

the code-beind file MainPage.xaml.cs shows how to handle the TimerLoop and Collision events raised by the PhysicsCanvas.
The AddAnItem method shows how to dynamically add a complex UserControl containing multiple sprites and joints.

Using Expression Blend

Using Visual Studio

Let's walk through creating a simple physics simulation using XAML inside Visual Studio.

Creating the Solution

Create a new "Windows Metro Style" project in VS11

Right-click the solution and select "Add Existing Project".
- Browse to \PhysicsHelperXaml\Farseer Physics Engine Metro\Farseer Physics Engine Metro.csproj in the Physics Helper XAML ZIP download.
Right-click the solution and select "Add Existing Project".
- Browse to \PhysicsHelperXaml\Spritehand.PhysicsHelper.Metro\Spritehand.PhysicsHelper.Metro.csproj in the Physics Helper XAML ZIP download.
From your main project, add References to the Farseer Physics Engine Metro and Spritehand.PhysicsHelper.Metro projects.

Adding a Simple Physics Object

Lets create a simple rectangle object for the "ground" of our simulation. Open MainPage.xaml and add the following namespace imports to the XAML at the top, replacing My.Project.Here with your project name:

    xmlns:ph="using:Spritehand.FarseerHelper"
    xmlns:local="using:*My.Project.Here*"

Now let's add in a canvas named cnvGameOuter to handle the outside of our simulation. By doing this, we can overlay text like score and lives on top of our game.

<Canvas x:Name="cnvGameOuter"  >

</Canvas>

Within cnvGameOuter, we add in our PhysicsCanvas which you can think of as the Window into our Game or Simulation. We can set MousePickEnabled="true" so that the user can move things around with gestures or the mouse.

<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

    </ph:PhysicsCanvas>

</Canvas>

Now we can add our sprites (physics objects) into the Physics Canvas using the PhysicsSprite object. We'll add in a large block for the ground and a small block to fall. To keep the "ground" sprite in place, we can set the IsStatic property to True.

<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

        <ph:PhysicsSprite x:Name="block" Canvas.Left="200" Canvas.Top="0"  Width="100" Height="100" >
            <Rectangle Width="100" Height="100" Fill="LightBlue" />
        </ph:PhysicsSprite>

        <ph:PhysicsSprite x:Name="ground" Background="DarkGreen"  Canvas.Left="0" Canvas.Top="648"  Width="1366" Height="120" IsStatic="True" />

    </ph:PhysicsCanvas>

</Canvas>

Run the project and try moving the "block" sprite around with your finger (or mouse).

Shape Types

Add the following PhysicsSprite definition inside the PhysicsCanvas. This defines a "ball" which has a ShapeType of Ellipse, and adds some "bounce" to the ball using RestitutionCoefficient.

<ph:PhysicsSprite x:Name="ball" Canvas.Left="350" Width="100" Height="100" ShapeType="Ellipse" RestitutionCoefficient="0.8">
    <Ellipse Width="100" Height="100" Fill="LightYellow"/>
</ph:PhysicsSprite>

Run the project and try moving the "ball" sprite with the mouse. Note that it is round.
What if we need a more exact (polygon) shape? We can accomplish complex shapes by defining a Path element as the first element in our PhysicsSprite, and setting the ShapeType to Polygon. Note that you could set the Visibility of this boundary sprite to Collapsed if you have a complex design inside the PhysicsSprite that you are defining the basic boundary for.

ph:PhysicsSprite Height="78.667" x:Name="cnvBody" Width="197" Canvas.Left="10" Canvas.Top="0" ShapeType="Polygon">
    <Path x:Name="bodyBoundary"  Fill="Red" Data="M2,72 L196,76 L190,43 L136,28 L123,2 L84,2 L83,28 L2,32 z" Height="75" Canvas.Left="1.5" Stretch="Fill" Stroke="#FF000000" Canvas.Top="1.5" UseLayoutRounding="False" Width="195">
    </Path>
</ph:PhysicsSprite>

To debug shape types that the simulation is using visually, we can set DebugMode="true" on the PhysicsCanvas. This draws a handy outline on top of each physics element and is handy when you are seeing collision problems.

Accessing Farseer Objects

Under every PhysicsSprite is a Farseer Body and Fixture elements (to learn more about Farseer and see docs please visit farseerphysics.codeplex.com).

All PhysicsSprites defined inside the PhysicsCanvas are accessible through the PhysicsCanvas.PhysicsObjects dictionary. We can get to the Farseer BodyObject to change things such as Mass, Restitution, and even the shape (Fixtures) of the object.

PhysicsSprite spr = cnvGame.PhysicsObjects["ball"];
spr.BodyObject.Restitution = 0;

Updated Wiki: Documentation

AndyBeaulieu — Sat, 24 Sep 2011 15:36:20 GMT

Environment Setup

Sample Projects

Once you have a development environment and hardware setup, you can download the source code and check out the sample projects inside the VS11 solution.

Demo.Simple

Set Demo.Simple as your startup project and run the solution. This shows a no-code scenario with a ragdoll and stack of blocks. Here are the main parts of the simple demo:

ucBlock.xaml defines the Block sprite.
ucRagDoll.xaml defines a rag doll with appendages and joints bringing them together.
MainPage.xaml creates instances of ucBlock and ucRagDoll. There is one line of code in MainPage.xaml.cs which calls ScaleToObject. This allows the game canvas to scale to full screen.

Demo.Advanced

the code-beind file MainPage.xaml.cs shows how to handle the TimerLoop and Collision events raised by the PhysicsCanvas.
The AddAnItem method shows how to dynamically add a complex UserControl containing multiple sprites and joints.

Using Expression Blend

Using Visual Studio

Let's walkthrough creating a simple physics simulation using XAML inside Visual Studio.

Creating the Solution

Create a new "Windows Metro Style" project in VS11

Right-click the solution and select "Add Existing Project".
- Browse to \PhysicsHelperXaml\Farseer Physics Engine Metro\Farseer Physics Engine Metro.csproj in the Physics Helper XAML ZIP download.
Right-click the solution and select "Add Existing Project".
- Browse to \PhysicsHelperXaml\Spritehand.PhysicsHelper.Metro\Spritehand.PhysicsHelper.Metro.csproj in the Physics Helper XAML ZIP download.
From your main project, add References to the Farseer Physics Engine Metro and Spritehand.PhysicsHelper.Metro projects.

Adding a Simple Physics Object

Lets create a simple rectangle object for the "ground" of our simulation. Open MainPage.xaml and add the following namespace imports to the XAML at the top, replacing My.Project.Here with your project name:

    xmlns:ph="using:Spritehand.FarseerHelper"
    xmlns:local="using:*My.Project.Here*"

Now let's add in a canvas named cnvGameOuter to handle the outside of our simulation. By doing this, we can overlay text like score and lives on top of our game.

<Canvas x:Name="cnvGameOuter"  >

</Canvas>

Within cnvGameOuter, we add in our PhysicsCanvas which you can think of as the Window into our Game or Simulation. We can set MousePickEnabled="true" so that the user can move things around with gestures or the mouse.

<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

    </ph:PhysicsCanvas>

</Canvas>

Now we can add our sprites (physics objects) into the Physics Canvas using the PhysicsSprite object. We'll add in a large block for the ground and a small block to fall. To keep the "ground" sprite in place, we can set the IsStatic property to True.

<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

        <ph:PhysicsSprite x:Name="block" Canvas.Left="200" Canvas.Top="0"  Width="100" Height="100" >
            <Rectangle Width="100" Height="100" Fill="LightBlue" />
        </ph:PhysicsSprite>

        <ph:PhysicsSprite x:Name="ground" Background="DarkGreen"  Canvas.Left="0" Canvas.Top="648"  Width="1366" Height="120" IsStatic="True" />

    </ph:PhysicsCanvas>

</Canvas>

Run the project and try moving the "block" sprite around with your finger (or mouse).

Shape Types

Add the following PhysicsSprite definition inside the PhysicsCanvas. This defines a "ball" which has a ShapeType of Ellipse, and adds some "bounce" to the ball using RestitutionCoefficient.

<ph:PhysicsSprite x:Name="ball" Canvas.Left="350" Width="100" Height="100" ShapeType="Ellipse" RestitutionCoefficient="0.8">
    <Ellipse Width="100" Height="100" Fill="LightYellow"/>
</ph:PhysicsSprite>

Run the project and try moving the "ball" sprite with the mouse. Note that it is round.
What if we need a more exact (polygon) shape? We can accomplish complex shapes by defining a Path element as the first element in our PhysicsSprite, and setting the ShapeType to Polygon. Note that you could set the Visibility of this boundary sprite to Collapsed if you have a complex design inside the PhysicsSprite that you are defining the basic boundary for.

ph:PhysicsSprite Height="78.667" x:Name="cnvBody" Width="197" Canvas.Left="10" Canvas.Top="0" ShapeType="Polygon">
    <Path x:Name="bodyBoundary"  Fill="Red" Data="M2,72 L196,76 L190,43 L136,28 L123,2 L84,2 L83,28 L2,32 z" Height="75" Canvas.Left="1.5" Stretch="Fill" Stroke="#FF000000" Canvas.Top="1.5" UseLayoutRounding="False" Width="195">
    </Path>
</ph:PhysicsSprite>

To debug shape types that the simulation is using visually, we can set DebugMode="true" on the PhysicsCanvas. This draws a handy outline on top of each physics element and is handy when you are seeing collision problems.

Accessing Farseer Objects

Under every PhysicsSprite is a Farseer Body and Fixture elements (to learn more about Farseer and see docs please visit farseerphysics.codeplex.com).

All PhysicsSprites defined inside the PhysicsCanvas are accessible through the PhysicsCanvas.PhysicsObjects dictionary. We can get to the Farseer BodyObject to change things such as Mass, Restitution, and even the shape (Fixtures) of the object.

PhysicsSprite spr = cnvGame.PhysicsObjects["ball"];
spr.BodyObject.Restitution = 0;

Updated Wiki: Documentation

AndyBeaulieu — Sat, 24 Sep 2011 15:35:52 GMT

Environment Setup

Sample Projects

Once you have a development environment and hardware setup, you can download the source code and check out the sample projects inside the VS11 solution.

Demo.Simple

Set Demo.Simple as your startup project and run the solution. This shows a no-code scenario with a ragdoll and stack of blocks. Here are the main parts of the simple demo:

ucBlock.xaml defines the Block sprite.
ucRagDoll.xaml defines a rag doll with appendages and joints bringing them together.
MainPage.xaml creates instances of ucBlock and ucRagDoll. There is one line of code in MainPage.xaml.cs which calls ScaleToObject. This allows the game canvas to scale to full screen.

Demo.Advanced

the code-beind file MainPage.xaml.cs shows how to handle the TimerLoop and Collision events raised by the PhysicsCanvas.
The AddAnItem method shows how to dynamically add a complex UserControl containing multiple sprites and joints.

Using Expression Blend

Getting Started

Let's walkthrough creating a simple physics simulation.

Creating the Solution

Create a new "Windows Metro Style" project in VS11

Right-click the solution and select "Add Existing Project".
- Browse to \PhysicsHelperXaml\Farseer Physics Engine Metro\Farseer Physics Engine Metro.csproj in the Physics Helper XAML ZIP download.
Right-click the solution and select "Add Existing Project".
- Browse to \PhysicsHelperXaml\Spritehand.PhysicsHelper.Metro\Spritehand.PhysicsHelper.Metro.csproj in the Physics Helper XAML ZIP download.
From your main project, add References to the Farseer Physics Engine Metro and Spritehand.PhysicsHelper.Metro projects.

Adding a Simple Physics Object

Lets create a simple rectangle object for the "ground" of our simulation. Open MainPage.xaml and add the following namespace imports to the XAML at the top, replacing My.Project.Here with your project name:

    xmlns:ph="using:Spritehand.FarseerHelper"
    xmlns:local="using:*My.Project.Here*"

Now let's add in a canvas named cnvGameOuter to handle the outside of our simulation. By doing this, we can overlay text like score and lives on top of our game.

<Canvas x:Name="cnvGameOuter"  >

</Canvas>

Within cnvGameOuter, we add in our PhysicsCanvas which you can think of as the Window into our Game or Simulation. We can set MousePickEnabled="true" so that the user can move things around with gestures or the mouse.

<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

    </ph:PhysicsCanvas>

</Canvas>

Now we can add our sprites (physics objects) into the Physics Canvas using the PhysicsSprite object. We'll add in a large block for the ground and a small block to fall. To keep the "ground" sprite in place, we can set the IsStatic property to True.

<Canvas x:Name="cnvGameOuter"  >

    <ph:PhysicsCanvas x:Name="cnvGame" Background="CornflowerBlue"  Width="1366" Height="768" MousePickEnabled="true">

        <ph:PhysicsSprite x:Name="block" Canvas.Left="200" Canvas.Top="0"  Width="100" Height="100" >
            <Rectangle Width="100" Height="100" Fill="LightBlue" />
        </ph:PhysicsSprite>

        <ph:PhysicsSprite x:Name="ground" Background="DarkGreen"  Canvas.Left="0" Canvas.Top="648"  Width="1366" Height="120" IsStatic="True" />

    </ph:PhysicsCanvas>

</Canvas>

Run the project and try moving the "block" sprite around with your finger (or mouse).

Shape Types

Add the following PhysicsSprite definition inside the PhysicsCanvas. This defines a "ball" which has a ShapeType of Ellipse, and adds some "bounce" to the ball using RestitutionCoefficient.

<ph:PhysicsSprite x:Name="ball" Canvas.Left="350" Width="100" Height="100" ShapeType="Ellipse" RestitutionCoefficient="0.8">
    <Ellipse Width="100" Height="100" Fill="LightYellow"/>
</ph:PhysicsSprite>

Run the project and try moving the "ball" sprite with the mouse. Note that it is round.
What if we need a more exact (polygon) shape? We can accomplish complex shapes by defining a Path element as the first element in our PhysicsSprite, and setting the ShapeType to Polygon. Note that you could set the Visibility of this boundary sprite to Collapsed if you have a complex design inside the PhysicsSprite that you are defining the basic boundary for.

ph:PhysicsSprite Height="78.667" x:Name="cnvBody" Width="197" Canvas.Left="10" Canvas.Top="0" ShapeType="Polygon">
    <Path x:Name="bodyBoundary"  Fill="Red" Data="M2,72 L196,76 L190,43 L136,28 L123,2 L84,2 L83,28 L2,32 z" Height="75" Canvas.Left="1.5" Stretch="Fill" Stroke="#FF000000" Canvas.Top="1.5" UseLayoutRounding="False" Width="195">
    </Path>
</ph:PhysicsSprite>

To debug shape types that the simulation is using visually, we can set DebugMode="true" on the PhysicsCanvas. This draws a handy outline on top of each physics element and is handy when you are seeing collision problems.

Accessing Farseer Objects

Under every PhysicsSprite is a Farseer Body and Fixture elements (to learn more about Farseer and see docs please visit farseerphysics.codeplex.com).

All PhysicsSprites defined inside the PhysicsCanvas are accessible through the PhysicsCanvas.PhysicsObjects dictionary. We can get to the Farseer BodyObject to change things such as Mass, Restitution, and even the shape (Fixtures) of the object.

PhysicsSprite spr = cnvGame.PhysicsObjects["ball"];
spr.BodyObject.Restitution = 0;