SilverlightでのFarseer物理エンジンの使用

今日は、Silverlightプロジェクトに物理学を簡単に追加する方法を紹介します。 無料で配布されているFarseer Physics物理エンジンを使用した小さな例でこれを検討してください。



FarseerPhysicsNoBorder430X260.png



アプリケーションの構築を開始する前に、Codeplexで入手可能なFarseer Physics Silverlightエンジンをダウンロードする必要があります。 この例では、利用可能な最新バージョンであるバージョン2.1.3を使用します。 また、 Physics Helperも必要になります。これは、Farseer Physicsを使用して物理オブジェクトをプロジェクトに追加することを大幅に簡素化します。



開発自体には、次のツールが必要です。







プロジェクトに必要なすべてのDLLファイルは、 こちらから1つのアーカイブダウンロードできます。



それでは始めましょう。 7つの簡単なステップですべてを行います。



  1. Visual Studioを開き、新しいSilverlightプロジェクトを作成します。 私はSilverlightPhysicsと呼ばれています:



    image
  2. 3つの必要なDLLファイルをいくつかのフォルダーにコピーします。 次に、これらのファイルをプロジェクトに接続する必要があります。 [ソリューションエクスプローラー]ウィンドウで、[参照]フォルダーを右クリックし、[参照の追加]アイテムを選択します。



    image



    [参照]タブでファイルを選択し、[OK]をクリックします。



    image



    同様に、 Expression Blend 3 SDKからSystem.Windows.Interactivityを追加します 。 私たちはチェックします:



    image
  3. MainPage.xamlファイルを開きます。 この例では、グリッドの代わりにキャンバスを使用する方が便利なので、<Grid>タグを<Canvas>に置き換えます。 XAMLコードを使用して必要なオブジェクトを追加します。

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





    この段階でプロジェクトを開始すると、将来のプラットフォーム用の大きな長方形、白い立方体の小さなピラミッド、赤いボールが表示されます。 オブジェクトにはまだ物理学がありません:



    image

  4. 物理エンジンとSystem.Windows.Interactivityに簡単にアクセスできるように、2つの名前空間を追加します。

    xmlns:i ="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"<br> xmlns:pb ="clr-namespace:Spritehand.PhysicsBehaviors;assembly=Spritehand.PhysicsBehaviors"<br>







    次に、任意のXAMLコンテナーから作成できるPhysicsControllerを定義する必要があります。 この例では、必要なすべてのオブジェクト(キューブとボール)が含まれているため、Canvasになります。 これを行うには、Canvas XAMLコードに適切な動作ノードを追加します(ロシア語でこれがどれほどひどいのか:))。 同じ場所で、MousePickEnabledプロパティを有効にして、任意のオブジェクトをマウスでドラッグできるようにします。

    < Canvas x:Name ="LayoutRoot" Background ="Black" > <br> < i:Interaction.Behaviors > <br> < pb:PhysicsControllerBehavior MousePickEnabled ="True" /> <br> </ i:Interaction.Behaviors > <br>







    プラットフォームを作成します。 最初に、下の長方形の終了タグを追加する必要があります。 プラットフォームは静的であり、どこにも落ちないようにする必要があるため、対応するIsStaticプロパティを追加し、その値をTrueに設定します。 この長方形のコードは次のようになります。

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







    それに応じて、すべての小さな長方形と円のコードを変更します。 これらのオブジェクトは動的であり、物理法則に従う必要があるため、IsStaticプロパティを追加する必要はありません。 最終コードは完成したプロジェクトで見ることができます





    はい、このエンジンは完璧ではありません。



    image



    ただし、無料で非常に使いやすく、Xbox 360ゲーム(XNAで作成)に物理学を簡単に追加できます。



    この例は非常に簡単でした。 想像力を発揮して少し努力すれば、もっと印象的なことができます。 たとえば、流体物理学、爆発などを追加します。 私はあなたのプロジェクトを待ちます;)



All Articles