Farseer Physics Engine di Silverlight 3

Posted: April 22, 2010 in C#, Game Programming, Programming
Farseer Physic Engine merupakan 2D Physic engine (betul, hanya 2D) yang dapat digunakan pada platform silverlight, WPF, XNA, dan XBOX 360.
Farseer physics dirancang untuk mengontrol posisi dan rotasi suatu entitas dalam game tiap satuan waktu berdasarkan hukum fisika yang berlaku Dalam dunia nyata, benda bergerak dan berputar karena gaya diterapkan dan torsi. Begitupula dalam Farseer. Objek disebut “Body” mewakili suatu benda di dunia nyata. Seketika gaya dan torsi diberikan, “body” bereaksi sesuai dengan hukum 2D fisika. Posisi dan perputaran “body” ini kemudian digunakan untuk posisi dan rotasi suatu entitas pada game.
Berikut ini simulasi yang didukung oleh Farseer :
  • Body
  • Body Factory
  • Geometry
  • GeomFactory
  • Physics Simulator View
  • Joints
  • Springs
  • Collision detection
  • Broad phase
  • Narrow phase
  • AABB
  • Grid
  • Collision group and categories
  • Collision Events
  • Impulses

Dalam artikel ini, kami akan mencoba untuk membuat implementasi dari Farseer Physics menggunakan silverlight. Framework yang digunakan dalam project ini dalah menggunakan .NET 4.0 dengan Visual Studio 2010.

Pertama-tama kita membuat project silverlight menggunakan Visual Studio 2010

Selanjutnya, kita akan menambah reference pada project kita, yaitu dengan menambahkan Library FarseerPhysics.dll

Dalam aplikasi silverlight ini, hal-hal yang harus dipersiapkan untuk membuat simulasi fisika cukup rumit, jika dibandingkan dengan implementasi Farseer pada XNA. Berikut ini class diagram yang merepresentasikan aplikasi simulasi yang akan dibuat :

Setelah itu kita akan mengatur tampilan dari MainPage.xaml, MainPage.xaml merupakan halaman utama dari aplikasi silverlight ini.

<UserControl x:Class="FarseerExample.MainPage"
    xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                >

    <Canvas x:Name="parentCanvas"
        Background="Black"
        >
        <Canvas x:Name="canvas" Background="#FF6495ED" Width="1024" Height="768">
            <Canvas.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="scale" ScaleX=".75" ScaleY=".75"></ScaleTransform>
                    <TranslateTransform x:Name="translate" X="0" Y="0"/>
                </TransformGroup>
            </Canvas.RenderTransform>
            <Rectangle Canvas.Left="-1000" Canvas.Top="-1000" Width="3000" Height="1000" Canvas.ZIndex="5000" Fill="Black"/>
            <Rectangle Canvas.Left="-1000" Canvas.Top="1024" Width="3000" Height="1000" Canvas.ZIndex="5000" Fill="Black"/>
            <Rectangle Canvas.Left="-1000" Canvas.Top="0" Width="1000" Height="768" Canvas.ZIndex="5000" Fill="Black"/>
            <Rectangle Canvas.Left="1024" Canvas.Top="0" Width="1000" Height="768" Canvas.ZIndex="5000" Fill="Black"/>
        </Canvas>
    </Canvas>
</UserControl>

Pengaturan objek-objek yang akan digunakan dalam physics simulation, dipanggil setelah fungsi InitializateComponent()
Dalam aplikasi Silverlight yanga kan dibuat, akan ditambahkan :

  1. KeyHandler, untuk penanganan input keyboard
  2. GameLoop, looping game yang akan secara periodikal melakukanupdate terhadap game dalam selang waktu tertentu
  3. FPS calculator, yang berguna dalam debugging, terutama dalam pengamatan performa dari physics simulation.
public void Page_Loaded(object o, EventArgs e)
{
        _splash = new Splash();
        canvas.Children.Add(_splash);
        _splash.SetValue(Canvas.ZIndexProperty, 20000);
        KeyHandler = new KeyHandler();
        KeyHandler.Attach(this);

        Focus();

        gameLoop = new GameLoop();
        gameLoop.Attach(parentCanvas);
        gameLoop.Update += gameLoop_Update;

        Fps fps = new Fps();
        canvas.Children.Add(fps);
        fps.SetValue(Canvas.ZIndexProperty, 1000);
        PhysicsDemoBegin();
 }

Sekarang kita akan mengatur simulasi fisika, kita akan membuat kelas CollisionDemo yang merupakan turunan dari kelas SimulatorView. Kelas CollisionDemo digunakan sebagai layar simulasi.

using System.IO;
using System.Windows.Media;
using FarseerGames.FarseerPhysics;
using FarseerGames.FarseerPhysics.Mathematics;

namespace FarseerExample
{
    public class CollisionDemo : SimulatorView
    {
         }
}

Lalu kita akan mendefisikan PhysicsSimulator yang akan merupakan engine dari Farseer :

physicsSimulator = new PhysicsSimulator(new Vector2(0, 0));

Setelah itu, yang dilakukan adalah membuat agen, yaitu objek yang akan kita kendalikan gerakannya. Agen ini dapat bertumbukan dengan objek lainnya. Berikut bentuk dari agen :

Berikut ini kode untuk membuat agen :


_agent = new Agent(ScreenManager.ScreenCenter);
_agent.CollisionCategory = CollisionCategory.Cat5;
_agent.CollidesWith = CollisionCategory.All;
_agent.Load(this, physicsSimulator);

Untuk membuat simulasi tumbukan, kita akan membuat objek-objek berbentuk bola :

Vector2 startPosition = new Vector2(100, 100);
Vector2 endPosition = new Vector2(100, ScreenManager.ScreenHeight - 100);
_redCircles1 = new Circles(startPosition, endPosition, 5, 15, Color.FromArgb(175, 200, 0, 0));
_redCircles1.CollisionCategories = (CollisionCategory.Cat1);
_redCircles1.CollidesWith = (CollisionCategory.Cat1 | CollisionCategory.Cat4 | CollisionCategory.Cat5);
_redCircles1.Load(this, physicsSimulator);

Dalam setiap objek baru yang dibentuk, akan disimpan kedalam Ilist

protected List<IDrawingBrush> drawingList = new List<IDrawingBrush>();

Dalam selang waktu tertentu, simulasi harus terus diupdate, dalam hal ini, digunakan loop :

        private void gameLoop_Update(TimeSpan elapsedTime)
        {
            if (!Visible) return;
            double secs = elapsedTime.TotalSeconds + _leftoverUpdateTime;
            while (secs > .01)
            {
                Update(elapsedTime);
                if (MenuActive == false)
                {
                    physicsSimulator.Update(.01f);
                    foreach (IDrawingBrush b in drawingList)
                    {
                        b.Update();
                    }
                }
                secs -= .01;
            }
            _leftoverUpdateTime = secs;
        }

Berikut ini tampilan simulasi :

Kesimpulan :

  1. Farseer untuk Silverlight memiliki performa yang cukup baik, dilihat dari simulasi tumbukan dengan banyak objek, frame rate yang dihasilkan dikatakan sangat stabil
  2. Farseer untuk Silverlight membutuhkan “lebih banyak” kustomisasi dalam sisi kode, jika dibandingkan dengan versi XNA, hal ini dikarenakan versi XNA lebih mendukung arsitektur untuk sebuah game, sedangkan pada silverlight, kita perlu membuat game loop khusus untuk melakukan update dari physics engine.

Note :

  1. Source code dapat didownload disini
  2. Aplikasi ini merupakan versi modifikasi SimpleFarseerExample yang didapat dari http://farseerphysics.codeplex.com/
  3. Untuk lebih lanjut bagaimana cara menggunakan Farseer ataupun dokumentasinya dapat diunduh dari http://farseerphysics.codeplex.com/

Berikut ini demo video dari simulasi :

Comments
  1. pentagoncrowd says:

    thanks, terus lah berbagi ilmu …

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s