SpriteHand
Module Border
  Advanced Physics with Silverlight and Farseer
Module Border
Location: BlogsAndy's Blog    
Posted by: host 1/22/2008 10:03 PM

UPDATE 10/14/2008: The source code download and demo have been updated for Silverlight 2 RTW.

In a previous post, I showed how we can quickly get started using Silverlight to create some great Physics games and simulations using the Farseer Physics Engine. In this post, I am going to show some more advanced physics effects using Farseer's Polygon Geometry.

We'll be creating kind of a "Sketch Pad on Steroids" where what the user draws becomes a physics object and "falls" to the ground. I can think of about a dozen game ideas you could implement with these techniques, including something like the jaw dropping Crayon Physics Deluxe.

SEE THE SAMPLE IN ACTION

DOWNLOAD THE SOURCE CODE

 

Drawing a Path Using the Mouse

First let's look at how we can capture a series of x,y points that the user draws. If you look at Page.xaml.cs, you can see that when the user moves the mouse, we record all of their movements in a _polygonPoints, which is a Generic List of Point objects:

void Page_MouseMove(object sender, MouseEventArgs e)
{
    if (_drawActive)
    {
        _polygonPoints.Add(e.GetPosition(_parentCanvas)); 

        // draw the polygon

        if (_TempPolygonPath != null)

        {

            _parentCanvas.Children.Remove(_TempPolygonPath);

            _TempPolygonPath = null;

        }

 

        _TempPolygonPath = Utils.CreatePathFromPoints(_polygonPoints, "tempPolygonPath");

        _parentCanvas.Children.Add(_TempPolygonPath);

 

    }

   

}

We also call a function, Utils.CreatePathFromPoints, which creates a Path object based on the points, and add the Path to the page's Canvas: 

public static Path CreatePathFromPoints(List<Point> points, string name)

{

    Path path = new Path();

    path.Stroke = new SolidColorBrush(Colors.Magenta);

    path.StrokeThickness = 1;

    path.Fill = new SolidColorBrush(Colors.Transparent);

    PathGeometry pathGeom = new PathGeometry();

    PathFigureCollection figures = new PathFigureCollection();

    pathGeom.Figures = figures;

    PathFigure figure = new PathFigure();

    figure.StartPoint = new Point((double)points[0].X, (double)points[0].Y);

    figure.Segments = new PathSegmentCollection();

    pathGeom.Figures.Add(figure);

 

    foreach (Point point in points)

    {

        LineSegment line = new LineSegment() { Point = new Point((double)point.X, (double)point.Y) };

        figure.Segments.Add(line);

    }

 

    path.Data = pathGeom;

 

    return path;

}

 

...So that gives us a basic sketch pad, with all of the points stored in a buffer. But now we need to change that collection of points into a Physics object.

 

Creating our Polygon Physics

 

Remember to take a peek at my previous introductory post on using Farseer Physics with Silverlight, as I'll be skipping the basics. If you remember, we used a SpriteBase class to wrap the details of our physics objects. In this demo, I created a ucPolygon class which you can think of as a sprite - it just happens to be one that the user draws out.

 

Farseer differentiates between Bodies, which are the actual physics bodies that bounce and fly around, and Geometries, which are the shapes of the Body used for collision detection.

 

So we first need to define the shape of our physics geometry using a Vertices collection. Note that, in Farseer, coordinate points need to be based on 0,0 being at the geometry's center, so we will need to translate our drawn points on the Path/Canvas to the Geometry object. Take a peek at ucPolygon.xaml.cs, which creates the vertices collection:

 

// create the physics body
fsc.Vertices vertices = new fsc.Vertices();

foreach (Point point in points)
{
    // note vertices are based on 0,0 at center of body
    double
x, y;
   
   
// first we need to remove the offset position of the drawn shape on the main canvas
   
x = (Convert
.ToDouble(point.X) - position.X);
    y = (Convert
.ToDouble(point.Y) - position.Y);

   
// we may need to offset position to get the point out of the negative
   
x = x + tweakX;
    y = y + tweakY;

   
// we need to make points relative to origin (center) of object
   
x = x - centerX;
    y = y - centerY;

    vertices.Add(new Vector2((float)x, (float)y));

}

We can then create our polygon's Body by calling CreateBody and passing in an instance of the Physics Simulator, the Mass of the object, and the moment of intertia. Note that there is a handy utility function on the Vertices class to calculate moment of inertia for us:


BodyObject = BodyFactory
.Instance.CreateBody(physicsSim, 0.5f, vertices.CalculateMomentOfInertia());

 

Finally, we create the actual Geometry object by calling CreatePolygonGeom and passing the simulator, body object,  vertices collection, and collsion grid cell size (you can tweak the collision grid if necessary for your application, but I found zero to be adequate for this demo).

 

fsc.Geom polygonGeometry = fsc.GeomFactory.Instance.CreatePolygonGeom(physicsSim, BodyObject, vertices, 0);

 

There is also a useful SetDebug method on the ucPolygon class, which will draw the center and boundary of the polygon. This was very useful during development as sometimes the Body and Geometry can get out of sync if you're not careful.

 

Conclusion and More Info

I am really impressed with how easily effects can be created using Silverlight's powerful UI and Farseer's friendly API. I can foresee some really great browser-based games in Silverlight's future!

 

A shout back to Cameron Albert who used and credited my SpriteBase Class and returned the favor with some helpful code on creating Path Geometries with Farseer! And to Jeff Weber and Michael Brooks who helped me with troubleshooting on the Farseer Forums.

 

One last note, debugging the collision behavior in Farseer can be quite frustrating until you get your arms around it. There is a good introductory document that can help you out with the specifics.

Permalink |  Trackback

Comments (11)   Add Comment
Re: Advanced Physics with Silverlight and Farseer    By Anonymous on 1/22/2008 11:31 PM
Thanks for the props, your intro was extremely helpful for me getting started and understanding how Farseer works with Silverlight.
I really like this demo, there is some real possibility there for some cool games.
Farseer makes it easy to have realistic physics for folks like me who's trig and overall math abilities are not what I would call... good... :)

- Cameron

Re: Advanced Physics with Silverlight and Farseer    By Anonymous on 1/23/2008 7:30 AM
Nice Work Andy! Glad to see you got the bugs worked out.

-Jeff Weber

Re: Advanced Physics with Silverlight and Farseer    By Anonymous on 1/23/2008 10:48 AM
Andy, very cool! One issue, if an object comes in contact with a wall, it freaks out.

- Bill Reiss

Cool Silverlight Example    By TrackBack on 1/23/2008 11:53 AM
Cool Silverlight Example
# Krugism

Cool Silverlight Physics Example    By TrackBack on 1/24/2008 10:35 AM
Cool Silverlight Physics Example
# Krugism

Re: Advanced Physics with Silverlight and Farseer    By Anonymous on 1/28/2008 8:16 PM
Andy - Sweet demo! :)

- Chris Cavanagh

Re: Advanced Physics with Silverlight and Farseer    By Anonymous on 1/29/2008 9:24 AM
Really very good..........
awesome
Ravi Kant

Re: Advanced Physics with Silverlight and Farseer    By Anonymous on 2/17/2008 7:09 AM
In your demo i can’t see anything i draw, only in debug mode I can see grey boxes but still no drawings? Also those debug boxes sometimes jumps accidentally?? I have vista x64 could it be a reason??

Re: Advanced Physics with Silverlight and Farseer    By TrackBack on 6/30/2008 11:19 PM
Trying My Hand at Game Development with Silverlight 2 Beta 2
# swainman

Re: Advanced Physics with Silverlight and Farseer    By Anonymous on 5/5/2011 2:15 PM
Just wanted to say thank you!

Re: Advanced Physics with Silverlight and Farseer    By Anonymous on 5/7/2011 4:44 PM
Just wanted to say thanks, found your blog really useful and interesting!


Title:
Comment:
Add Comment   Cancel 
Module Border Module Border
Module Border
  Subscribe
Module Border
RSS   Twitter
Module Border Module Border
Module Border
  Diversions
Module Border


PHYSAMAJIG
This Windows app was created using Physics Helper XAML, and the Farseer Physics Engine.
DOWNLOAD

MORE INFO



TALKING RAGDOLL
This Windows Phone app was created using Silverlight, the  Physics Helper Library,  and the Farseer Physics Engine. It gets interesting when you import your friends photos and have your way with them!

MORE INFO



BOSS LAUNCH
This physics game won first place in the Server Quest Contest. Created using Silverlight , the Physics Helper Library,  and the Farseer Physics Engine.
PLAY IT

MORE INFO



DESTROY ALL INVADERS
A scrolling shooter game where the objective is to destroy the invading UFO's flying over a neighborhood of your choosing. Imagery provided by Microsoft Virtual Earth. Created using Silverlight.
PLAY IT

INFO AND CODE



PHYSICS HELPER DEMOS
These demos were created for the Physics Helper Library, which makes it easy to create physics games and simulations using Expression Blend, Silverlight, and the Farseer Physics Engine.
PLAY IT

INFO AND CODE



HOOK SHOT
This little basketball game took first place in the TeamZoneSports Silverlight Contest. Created using Silverlight and the Farseer Physics engine.
PLAY IT

MORE INFO



SORT THE FOOBARS
A game where you need to sort the good foobars from the bad ones. Created using Silverlight and the Farseer Physics engine.
PLAY IT

MORE INFO



POLYGON PHYSICS DEMO
A demo showing polygon physics where the user draws physics objects with the mouse. Created using Silverlight and the Farseer Physics engine.
PLAY IT

MORE INFO



SILVERLIGHT ROCKS!
Destroy the asteroids before they destroy your ship! Created using Silverlight.
PLAY IT

INFO AND CODE



FISH GAME
A simple game of harpoon-the-fish. Written using the AJAX Sprite Toolkit.
PLAY IT

INFO AND CODE

Module Border Module Border
Module Border
  Search_Blog
Module Border
Module Border Module Border
Module Border
  Blog_Archive
Module Border
Module Border Module Border
Copyright (c) 2014 andy.beaulieu.com - Login