Click here to Skip to main content
15,867,453 members
Articles / Desktop Programming / XAML

A Simple Application using Silverlight Physics Helper Library

Rate me:
Please Sign up or sign in to vote.
4.82/5 (19 votes)
28 Jun 2010CPOL5 min read 59.4K   530   20   16
A Simple Application using Silverlight Physics Helper Library

Introduction

Recently I was interested to work with the Physics Helper for Silverlight. I saw couple of demos on the net which used the Physics library for Silverlight to create good animations with Friction logic. Yeah, friction. You can drop a ball on a surface which will bounce over that surface. I found it very interesting and thought of creating a simple demo for it. Here I will demonstrate how to create a sample application using Expression Blend. You don't have to write a single line of code using Visual Studio. Surprised smile Is it? Yes, let's start doing that.

Prerequisite

You need the following tools installed in your development environment before going to the next steps:

Setting Up the Project in Expression Blend

Once you downloaded and installed them properly, open your Expression Blend and create a new Silverlight Project with Website. Select the proper location to create the Project and provide a good name for your solution. Here, I am creating “Silverlight 4 Physics Demo” as the solution name.

Creating new Silverlight Project using Expression Blend

Once you are done creating the project, go to the Assets tab in Expression Blend and search for “Spritehand.FarseerHelper.dll” under the “Location”. If you are unable to find it there, it means your Physics Helper library was not installed properly. Then manually add them as DLL reference in your project. Once you find the “Spritehand.FarseerHelper.dll” in your assets tab, click on it and you will find some controls visible in the right panel. They are “CameraController”, “CameraLayer”, “PhysicsController”, “PhysicsJoint” and “PhysicsStaticHolder”. Look into the below snapshot. We will use only two among them in this example “PhysicsController” and “PhysicsStaticHolder”.

image

Basic Understanding

PhysicsController is responsible for motion in Horizontal or Vertical way to your object or to create a collision among your objects. PhysicsStaticHolder mentions its work in its name. Yup, it’s binded to a solid object or a group of objects where your item will drop having some velocity and friction.

Playing with the XAML

  • Let us play with the XAML to create a simple application (without writing any code). For doing this, open your MainPage.xaml page using Microsoft Expression Blend and replace the Grid panel with Canvas. This step is necessary because the library can recognize only canvas.
  • Now we will create a ‘U’ shape valley area where we will throw a ball and the ball will run along the path. To do this, first we will add a Rectangle inside the XAML page and set some background color to it.

    image

  • Add an Ellipse on top of the Rectangle, so that it can look like a valley. It will look like the below snapshot.

    image

  • Now select the Rectangle and the Ellipse. Right click on the selection to open up the context menu. Click "Combine" => "Subtract". This will subtract the part of the Ellipse from the Rectangle and merge them as a Path control.

    image

  • The subtracted area will look like the below snapshot. Once you are done with it, give a proper name to the newly created Path. In our example, we will use "frictionArea". In this area, we will throw a ball which will run through the edge of the path.

    image

  • Add a new small Ellipse and name it as "ball". This ball will run through the frictionArea. Resize the ball to 82 x 82 pixel. Now set its Left position (i.e. Canvas.Left) to 23 and Top position (i.e. Canvas.Top) to -500. This will position the ball far away from the surface.

    image

  • Now drop one "PhysicsController" and one "PhysicsStaticHolder" inside your canvas from the Assets tab (as mentioned earlier).

    image

  • Select "PhysicsController" and go to its Properties panel. As mentioned in the below image, set its FrictionDefault to 5, GravityHorizontal to 0 (zero), GravityVertical to 500 and select MousePickEnabled to True. As the named suggests, FrictionDefault will add friction to your controls controller, GravityHorizontal will set the horizontal acceleration and GravityVertical will add the vertical fall down speed. In our example, we don't need any horizontal speed as our ball will run in a valley. Hence, we need some vertical acceleration so that it can fall down to the surface.

    image

  • Now click on the "PhysicsStaticHolder" and set its Body to "frictionArea" from the Properties panel. You can set only one element here. If you need more elements as the surface, group them inside a Canvas and set the canvas as the Body to the PhysicsStaticHolder.

    image

Running the Demo 

All the design and creation part is ready to give a demo now. Press 'F5' inside the Expression Blend. It will build your project and run the application inside your default browser. In a short time, you will see the ball is falling down from top to the valley along the surface.

image

Hey, what's going on there? The ball is running along the path. See the rotation of the ball. Yes, the ball is rotating while moving forward.

image

Due to the speed of the ball, it will go up to the next surface wall and then again fall down. It will go for some moment and then the ball will set its position to the bottom of the surface and no movement will be visible after that.

image

image

Once the ball takes its own position in the surface, click the ball and try to drag it up. Wow, we can drag the ball too. It will look like the ball was dragged with a rope. You can drop it anywhere  in the surface and you will see the rotation along the path. Now, if you drop the ball outside the surface area by changing the UI a bit, you will notice that the ball is falling down and due to no surface in its way, it will be gone.

image

End Note 

Hope you really enjoyed the article. It gave you a basic understanding to start working on the Silverlight using the Physics Helper library. You can use this library to create Silverlight games. If you explore it more from the code, you will get huge APIs to develop applications as per your business needs.

Don't forget to vote for the article and share your feedback. Cheers...

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead
India India

Kunal Chowdhury is a former Microsoft "Windows Platform Development" MVP (Most Valuable Professional, 2010 - 2018), a Codeproject Mentor, Speaker in various Microsoft events, Author, passionate Blogger and a Senior Technical Lead by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows app development. He posts his findings, articles, tutorials in his technical blog (www.kunal-chowdhury.com) and CodeProject.


Books authored:


Connect with Kunal on:





Comments and Discussions

 
GeneralHelp please. Pin
ellalusion14-Jul-10 20:20
ellalusion14-Jul-10 20:20 
AnswerRe: Help please. Pin
Kunal Chowdhury «IN»21-Jul-10 15:48
professionalKunal Chowdhury «IN»21-Jul-10 15:48 
If you want dragging functionality, you can use the behavior directly which has mouse picking. If you want something like physics animation, ou have to use physics helper.


Don't forget to Click on [Vote] and [Good Answer] on the posts that helped you.


Regards - Kunal Chowdhury | Software Developer | Chennai | India | My Blog | My Tweets | Silverlight Tutorial

GeneralWell illustrated Pin
Habib El-Zoghbi6-Jul-10 7:22
Habib El-Zoghbi6-Jul-10 7:22 
GeneralRe: Well illustrated Pin
Kunal Chowdhury «IN»6-Jul-10 7:29
professionalKunal Chowdhury «IN»6-Jul-10 7:29 
GeneralMy vote of 5 Pin
Habib El-Zoghbi6-Jul-10 7:20
Habib El-Zoghbi6-Jul-10 7:20 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»6-Jul-10 7:26
professionalKunal Chowdhury «IN»6-Jul-10 7:26 
GeneralFix Pin
Dewey27-Jun-10 20:56
Dewey27-Jun-10 20:56 
GeneralRe: Fix Pin
Kunal Chowdhury «IN»27-Jun-10 22:51
professionalKunal Chowdhury «IN»27-Jun-10 22:51 
GeneralRe: Fix Pin
John Cousins28-Jun-10 5:24
John Cousins28-Jun-10 5:24 
AnswerRe: Fix Pin
Kunal Chowdhury «IN»28-Jun-10 6:16
professionalKunal Chowdhury «IN»28-Jun-10 6:16 
AnswerRe: Fix Pin
Kunal Chowdhury «IN»28-Jun-10 6:14
professionalKunal Chowdhury «IN»28-Jun-10 6:14 
GeneralRe: Fix Pin
Dewey6-Jul-10 15:33
Dewey6-Jul-10 15:33 
GeneralYou know I love tutorials like this Pin
defwebserver27-Jun-10 8:28
defwebserver27-Jun-10 8:28 
GeneralRe: You know I love tutorials like this Pin
Kunal Chowdhury «IN»27-Jun-10 15:32
professionalKunal Chowdhury «IN»27-Jun-10 15:32 
GeneralMy vote of 5 Pin
Abhishek Sur27-Jun-10 7:51
professionalAbhishek Sur27-Jun-10 7:51 
GeneralRe: My vote of 5 Pin
Kunal Chowdhury «IN»27-Jun-10 7:56
professionalKunal Chowdhury «IN»27-Jun-10 7:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.